/* Publications page. Loaded by publications/index.html only. The cards are built by
   assets/js/publications.js from data/publications.txt.
   Layout: filter bar across the top, then a grid of cards with a patterned cover band. The card
   and grid styles are in components.css (the Home page shows the top publications too). */

/* ---------- Filter bar ---------- */
.pubs__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3);
  border: 1px solid var(--c-rule);
  border-radius: calc(var(--radius-l) - 8px);
  background: var(--c-surface);
  box-shadow: var(--shadow-card);
}

.type-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  max-inline-size: none;
  margin: 0;
  padding: 0;
  list-style: none;
}

.type-filter__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: 44px;
  padding-inline: var(--space-4) var(--space-2);
  border: 1px solid var(--c-rule);
  border-radius: var(--radius-pill);
  background: var(--c-surface);
  color: var(--c-ink);
  font-size: var(--fs-small);
  font-weight: 700;
  cursor: pointer;
}

.type-filter__btn:hover {
  border-color: var(--c-emerald);
}

.type-filter__btn[aria-pressed="true"] {
  border-color: var(--c-emerald);
  background: var(--c-emerald);
  color: var(--c-on-emerald);
}

.type-filter__count {
  min-inline-size: 1.75rem;
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--c-dawn);
  color: var(--c-ink);
  font-size: 0.875rem;
  text-align: center;
}

.type-filter__btn[aria-pressed="true"] .type-filter__count {
  background: var(--c-on-emerald);
  color: var(--c-emerald);
}

.pubs__fields {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Search and year: 44px tall pills, bordered with ink-soft (3:1 against the surface) */
.search-field {
  position: relative;
  flex: 0 1 16rem;
}

.search-field .icon {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: var(--space-4);
  color: var(--c-ink-soft);
  translate: 0 -50%;
}

.search-field input,
.select {
  inline-size: 100%;
  min-block-size: 44px;
  padding-inline: var(--space-4);
  border: 1px solid var(--c-ink-soft);
  border-radius: var(--radius-pill);
  background: var(--c-surface);
  font-size: var(--fs-small);
}

.search-field input {
  padding-inline-start: calc(var(--space-4) + 1.75rem);
}

.select {
  flex: 0 0 auto;
  inline-size: auto;
  min-inline-size: 9rem;
}

/* Phones: whole-width search; type pills without icons */
@media (max-width: 599.98px) {
  .pubs__fields,
  .search-field {
    flex-basis: 100%;
  }

  .select {
    flex: 1 1 auto;
  }

}

/* ---------- Count line ---------- */
.pubs__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-block: var(--space-5) var(--space-4);
}

.pubs__count {
  color: var(--c-ink-soft);
  font-size: var(--fs-small);
  font-weight: 700;
}

/* ---------- Pagination ---------- */
.pager {
  margin-block-start: var(--space-6);
}

.pager__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  max-inline-size: none;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pager__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-inline-size: 44px;
  min-block-size: 44px;
  padding-inline: var(--space-3);
  border: 1px solid var(--c-rule);
  border-radius: var(--radius-pill);
  background: var(--c-surface);
  color: var(--c-ink);
  font-size: var(--fs-small);
  font-weight: 700;
  cursor: pointer;
}

.pager__btn:hover:not(:disabled) {
  border-color: var(--c-emerald);
  color: var(--c-emerald);
}

.pager__btn[aria-current="page"] {
  border-color: var(--c-emerald);
  background: var(--c-emerald);
  color: var(--c-on-emerald);
}

.pager__btn:disabled {
  color: var(--c-ink-soft);
  cursor: default;
  opacity: 0.6;
}

.pager__step {
  padding-inline: var(--space-4);
}

.pager__gap {
  padding-inline: var(--space-1);
  color: var(--c-ink-soft);
}

/* Narrow phones: arrows only for Previous and Next; the words stay for screen readers */
@media (max-width: 399.98px) {
  .pager__step {
    padding-inline: var(--space-3);
  }

  .pager__text {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* ---------- Empty and no-script states ---------- */
.pubs__empty {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  padding: var(--space-7) var(--space-5);
  border: 1px dashed var(--c-rule);
  border-radius: var(--radius-m);
  color: var(--c-ink-soft);
  text-align: center;
}

.pubs__empty > .icon {
  inline-size: 2rem;
  block-size: 2rem;
}

.pubs__noscript {
  padding: var(--space-5);
  border: 1px solid var(--c-rule);
  border-radius: var(--radius-m);
  background: var(--c-surface);
}