/* =============================================================================
   listing — переліки: архів кейсів, журнал, результати пошуку.

   Картку не переоформлюємо: `.post` і `.case` вже описані в стилях своїх
   секцій, і сторінка переліку підключає той самий файл. Тут тільки те, чого на
   головній не буває — сітка довільної довжини й пагінація.

   На головній журнал має нерівну сітку (одна велика картка і дві малі) — це
   ритмічний хід рівно для трьох статей. В архіві статей довільна кількість,
   тому сітка рівна: нерівність, повторена десять разів, перестає читатися як
   задум і починає читатися як збій.
   ============================================================================= */

.listing__grid {
  display: grid;
  gap: var(--space-xl) var(--gutter);
  margin-block-start: var(--space-xl);
}

/* ---- пагінація ---------------------------------------------------------------
   Показник, а не набір кнопок: номери в моно, поточний бурштиновий, кромка
   зверху відділяє її від останньої картки. */

.entry-pagination,
.wp-block-query-pagination,
.navigation.pagination {
  margin-block-start: var(--space-2xl);
  padding-block-start: var(--space-md);
  border-block-start: var(--border-hairline);
}

.navigation.pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: baseline;
}

/* Номер сторінки — це один символ, і на дотик він був ціллю 8×22px. Рамки
   навколо цифри не малюємо (це шкала, не кнопки), але площу доводимо до
   24×24: inline-flex із мінімальними розмірами. Видимо нічого не змінюється. */
.navigation.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: var(--tap-min);
  min-block-size: var(--tap-min);
  font-family: var(--font-readout);
  font-size: var(--fs-small);
  font-weight: var(--fw-readout);
  letter-spacing: var(--tracking-numeric);
  color: var(--text-muted);
  transition: color var(--dur-fast) var(--ease-out);
}

.navigation.pagination a.page-numbers:hover { color: var(--text-primary); }

.navigation.pagination .page-numbers.current { color: var(--accent); }

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

/* ---- порожній перелік --------------------------------------------------------
   Порожньо — це стан, а не помилка, і виглядати він має як показання приладу:
   «нічого немає», а не як зламана сторінка. */

.listing__empty {
  margin-block-start: var(--space-xl);
  padding-block: var(--space-xl);
  border-block: var(--border-hairline);
  color: var(--text-muted);
}

@media (min-width: 48rem) {
  .listing__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 64rem) {
  .listing__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* Архів кейсів — не сітка: кейс це повношиний блок із вильотом медіа, і
     колонками він розсипається. Той самий список, що на головній. */
  .listing__grid--work { grid-template-columns: 1fr; }
}

.listing__grid--work {
  grid-template-columns: 1fr;
  gap: var(--space-3xl);
}

/* ---- перемикач розділів -------------------------------------------------------
   Не кнопки й не вкладки: ряд підписів із лічильником, як позначки на шкалі.
   Активний бурштиновий — те саме, що поточна поділка на рейці головної.

   Лічильник поруч із назвою навмисно: він відповідає на питання «чи варто
   туди йти» до кліку, а не після. Розділ із однією статтею і розділ із
   десятьма виглядають однаково, поки число не показано. */

.filter {
  margin-block-start: var(--space-xl);
  padding-block-end: var(--space-sm);
  border-block-end: var(--border-hairline);
}

.filter__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-lg);
  margin: 0;
  padding: 0;
  list-style: none;
}

.filter__link {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-3xs);
  /* Ціль була 22px заввишки — на два пікселі нижча за поріг WCAG 2.2.
     Кегль лишається, площу добирає відступ. */
  padding-block: var(--space-3xs);
  font-family: var(--font-readout);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text-muted);
  transition: color var(--dur-fast) var(--ease-out);
}

.filter__link:hover,
.filter__link:focus-visible { color: var(--text-primary); }

.filter__link.is-current { color: var(--accent); }

/* Лічильник тьмяніший за назву: він уточнює, а не конкурує. */
.filter__count { opacity: 0.55; }

/* ---- блок під сіткою -----------------------------------------------------------
   Архів із самих карток не має власного тексту. Цей блок дає сторінці зміст —
   і людині, яка прийшла з пошуку, і пошуковій системі. Стоїть ПІД сіткою: той,
   хто прийшов дивитися роботи, має бачити роботи. */

.listing__about {
  margin-block-start: var(--space-3xl);
  padding-block-start: var(--space-xl);
  border-block-start: var(--border-hairline);
}

.listing__about h2:first-child { margin-block-start: 0; }

@media (prefers-reduced-motion: reduce) {
  .navigation.pagination .page-numbers { transition: none; }
  .filter__link { transition: none; }
}