/* ══════════════════════════════════════════════════════════════
 * Illusia List Pages — Base Unificada
 *
 * Estilos compartilhados para todas as páginas de listagem:
 * chapters, recommendations e taxonomy archives.
 *
 * Cobre: page header, sort UI, card list com staggered entry,
 * empty state, paginação. Cada página adiciona a classe
 * .illusia-list-page no <main> para ativar estes estilos.
 *
 * Usa bridge tokens (--bg-* / --fg-*) para dark+light mode.
 * Cores via triplets -free — reagem ao modal hue-rotate.
 *
 * @since 1.11.0
 * ══════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════
 * 1. PAGE HEADER (markup migrado pra `.illusia-page-header` em
 * v1.39.0 — estilos vivem em `illusia-page-header.css`).
 * `__content` continua aqui pois templates ainda envolvem
 * `the_content()` em uma section dedicated. — v1.39.8 cleanup
 *
 * v2.5.0 (S14): seletor multi-contexto — as cópias idênticas de
 * stories/collections foram consolidadas aqui (pattern v1.75.2 PR3,
 * mesmo do sort-order-filter §2). `illusia-list-pages` é dependência
 * de enqueue dos dois, então a base está sempre presente.
 * ═══════════════════════════════════════════════════════════════ */

:is(.illusia-list-page__content, .illusia-stories__content, .illusia-collections__content) {
  text-align: center;
  color: var(--fg-400);
  font-family: var(--ff-ui);
  max-width: 42em;
  margin: 0 auto var(--space-md);
}


/* ═══════════════════════════════════════════════════════════════
 * 2. SORT/ORDER UI — Observatory Instrument Panel
 *
 * Reutiliza a .sort-order-filter renderizada pelo Fictioneer.
 * Estilizada como painel de instrumentos do observatório:
 * micro-label "ORDENAR", botões mono com bordas glass, popups
 * com backdrop blur.
 * ═══════════════════════════════════════════════════════════════ */

:is(.illusia-list-page, .illusia-stories, .illusia-collections) .sort-order-filter {
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--border-0);
  position: relative;
}

/* Micro-label contextual */
:is(.illusia-list-page, .illusia-stories, .illusia-collections) .sort-order-filter::before {
  content: 'ORDENAR';
  font-family: var(--ff-mono);
  font-size: var(--text-3xs);
  font-weight: 400;
  color: var(--fg-600);
  letter-spacing: .15em;
  margin-right: auto;
}

/* Toggle buttons (orderby, date range, order) */
:is(.illusia-list-page, .illusia-stories, .illusia-collections) .sort-order-filter .list-button {
  font-family: var(--ff-mono);
  font-size: var(--text-2xs);
  font-weight: 500;
  color: var(--fg-400);
  letter-spacing: .04em;
  border: 1px solid var(--border-1);
  border-radius: var(--r-sm);
  padding: var(--space-3xs) var(--space-xs);
  background: hsl(var(--bg-900-free) / .5);
  transition:
    border-color var(--t-mid) var(--ease-std),
    color        var(--t-mid) var(--ease-std),
    background   var(--t-mid) var(--ease-std);
}

:is(.illusia-list-page, .illusia-stories, .illusia-collections) .sort-order-filter .list-button:hover {
  border-color: hsl(var(--amber-free) / .4);
  color: var(--amber);
  background: hsl(var(--amber-free) / .06);
}

/* Active order toggle */
:is(.illusia-list-page, .illusia-stories, .illusia-collections) .sort-order-filter .list-button._order._on {
  border-color: hsl(var(--amber-free) / .3);
  color: var(--amber);
}

/* Popup dropdown */
:is(.illusia-list-page, .illusia-stories, .illusia-collections) .sort-order-filter .popup-menu {
  background: hsl(var(--bg-900-free) / .95);
  border: 1px solid var(--border-1);
  border-radius: var(--r-sm);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: 0 clamp(3px, .5vw, 5px) clamp(16px, 3vw, 28px) hsl(0 0% 0% / .4);
  padding: var(--space-3xs) 0;
}

/* Popup heading */
:is(.illusia-list-page, .illusia-stories, .illusia-collections) .sort-order-filter .popup-heading {
  font-family: var(--ff-mono);
  font-size: var(--text-3xs);
  font-weight: 400;
  color: var(--fg-500);
  text-transform: uppercase;
  letter-spacing: .1em;
}

/* Popup links */
:is(.illusia-list-page, .illusia-stories, .illusia-collections) .sort-order-filter .popup-menu a {
  font-family: var(--ff-ui);
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--fg-300);
  transition:
    background var(--t-mid) var(--ease-std),
    color      var(--t-mid) var(--ease-std);
}

:is(.illusia-list-page, .illusia-stories, .illusia-collections) .sort-order-filter .popup-menu a:hover {
  background: hsl(var(--amber-free) / .08);
  color: var(--amber);
}


/* ═══════════════════════════════════════════════════════════════
 * 3. CARD LIST — Staggered Observatory Entries
 *
 * Stack vertical com gap uniforme. Cada card entra com fade-in
 * escalonado (delay N * 60ms) seguindo a regra inviolável #9.
 *
 * v2.5.0 (S14): multi-contexto (stories/collections consolidados).
 * As cópias usavam keyframes `illusia-card-in` (de illusia-cards.css);
 * unificadas no `illusia-list-card-in` local — from/to idênticos.
 * ═══════════════════════════════════════════════════════════════ */

:is(.illusia-list-page__cards, .illusia-stories__cards, .illusia-collections__cards) {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Staggered entry animation */
:is(.illusia-list-page__cards, .illusia-stories__cards, .illusia-collections__cards) > li {
  animation: illusia-list-card-in var(--t-slow) var(--ease-expo) both;
  animation-delay: calc(var(--i, 0) * 60ms);
}

:is(.illusia-list-page__cards, .illusia-stories__cards, .illusia-collections__cards) > li:nth-child(1)  { --i: 0; }
:is(.illusia-list-page__cards, .illusia-stories__cards, .illusia-collections__cards) > li:nth-child(2)  { --i: 1; }
:is(.illusia-list-page__cards, .illusia-stories__cards, .illusia-collections__cards) > li:nth-child(3)  { --i: 2; }
:is(.illusia-list-page__cards, .illusia-stories__cards, .illusia-collections__cards) > li:nth-child(4)  { --i: 3; }
:is(.illusia-list-page__cards, .illusia-stories__cards, .illusia-collections__cards) > li:nth-child(5)  { --i: 4; }
:is(.illusia-list-page__cards, .illusia-stories__cards, .illusia-collections__cards) > li:nth-child(6)  { --i: 5; }
:is(.illusia-list-page__cards, .illusia-stories__cards, .illusia-collections__cards) > li:nth-child(7)  { --i: 6; }
:is(.illusia-list-page__cards, .illusia-stories__cards, .illusia-collections__cards) > li:nth-child(8)  { --i: 7; }
:is(.illusia-list-page__cards, .illusia-stories__cards, .illusia-collections__cards) > li:nth-child(n+9) { --i: 8; }

@keyframes illusia-list-card-in {
  from {
    opacity: 0;
    transform: translateY(clamp(8px, 1.5vw, 16px));
  }
  to {
    opacity: 1;
    transform: none;
  }
}


/* ═══════════════════════════════════════════════════════════════
 * 4. EMPTY STATE — Silent Observatory
 *
 * Quando não há resultados: borda tracejada, fundo glass sutil,
 * texto mono uppercase. O observatório está vazio mas atento.
 *
 * v2.5.0 (S14): multi-contexto. Normalização deliberada: stories e
 * collections usavam padding-block `--space-xl`; a base `--space-2xl`
 * vence (empty state mais presente).
 * ═══════════════════════════════════════════════════════════════ */

:is(.illusia-list-page__no-results, .illusia-stories__no-results, .illusia-collections__no-results) {
  text-align: center;
  padding: var(--space-2xl) var(--space-md);
  color: var(--fg-500);
  font-family: var(--ff-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: .1em;
  border: 1px dashed var(--border-1);
  border-radius: var(--r-xl);
  background: hsl(var(--bg-900-free) / .3);
}


/* ═══════════════════════════════════════════════════════════════
 * 5. PAGINATION — Observatory Page Dial
 *
 * Números mono em botões glass com progressão de borda no hover.
 * Página atual: amber glow. Estilo de dial instrumental.
 *
 * v2.5.0 (S14): multi-contexto. Normalizações deliberadas nas cópias
 * de stories/collections: `.current` ganha o glow box-shadow da base,
 * dots usam `--fg-600` (antes `--fg-500`), prev/next ganham
 * `font-size: var(--text-xs)` explícito.
 * ═══════════════════════════════════════════════════════════════ */

:is(.illusia-list-page__pagination, .illusia-stories__pagination, .illusia-collections__pagination, .illusia-studio-page__pagination) {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-2xs);
  flex-wrap: wrap;
  padding: var(--space-lg) 0 var(--space-sm);
  list-style: none;
}

/* Base — all page number elements */
:is(.illusia-list-page__pagination, .illusia-stories__pagination, .illusia-collections__pagination, .illusia-studio-page__pagination) .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25em;
  height: 2.25em;
  padding: 0 var(--space-xs);
  border-radius: var(--r-sm);
  border: 1px solid var(--border-1);
  background: hsl(var(--bg-800-free) / .5);
  color: var(--fg-300);
  font-family: var(--ff-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  text-decoration: none;
  transition:
    border-color var(--t-mid) var(--ease-std),
    background   var(--t-mid) var(--ease-std),
    color        var(--t-mid) var(--ease-std),
    box-shadow   var(--t-mid) var(--ease-std);
}

/* Hover — clickable numbers */
:is(.illusia-list-page__pagination, .illusia-stories__pagination, .illusia-collections__pagination, .illusia-studio-page__pagination) a.page-numbers:hover {
  border-color: hsl(var(--amber-free) / .4);
  color: var(--amber);
  background: hsl(var(--amber-free) / .06);
}

/* Current page — amber instrument dial active */
:is(.illusia-list-page__pagination, .illusia-stories__pagination, .illusia-collections__pagination, .illusia-studio-page__pagination) .page-numbers.current {
  background: hsl(var(--amber-free) / .15);
  border-color: hsl(var(--amber-free) / .3);
  color: var(--amber);
  font-weight: 700;
  box-shadow: 0 0 8px hsl(var(--amber-free) / .08);
}

/* Dots (ellipsis) */
:is(.illusia-list-page__pagination, .illusia-stories__pagination, .illusia-collections__pagination, .illusia-studio-page__pagination) .page-numbers.dots {
  border-color: transparent;
  background: transparent;
  color: var(--fg-600);
  min-width: 1.5em;
  cursor: default;
}

/* Prev/Next text */
:is(.illusia-list-page__pagination, .illusia-stories__pagination, .illusia-collections__pagination, .illusia-studio-page__pagination) .page-numbers.prev,
:is(.illusia-list-page__pagination, .illusia-stories__pagination, .illusia-collections__pagination, .illusia-studio-page__pagination) .page-numbers.next {
  font-family: var(--ff-ui);
  font-size: var(--text-xs);
  letter-spacing: .04em;
}

/* Focus visible */
:is(.illusia-list-page__pagination, .illusia-stories__pagination, .illusia-collections__pagination, .illusia-studio-page__pagination) a.page-numbers:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}


/* ═══════════════════════════════════════════════════════════════
 * 6. RESPONSIVE — Small (<=400px)
 * ═══════════════════════════════════════════════════════════════ */

@media (max-width: 400px) {
  :is(.illusia-list-page__pagination, .illusia-stories__pagination, .illusia-collections__pagination, .illusia-studio-page__pagination) .page-numbers {
    min-width: 2em;
    height: 2em;
    font-size: var(--text-2xs);
  }
}


/* ═══════════════════════════════════════════════════════════════
 * 7. LIGHT MODE
 *
 * Acentos mudam para variantes -dim (WCAG 4.5:1 em fundo claro).
 * Glass backgrounds ficam mais transparentes. Borders usam
 * illusia-border-base invertida.
 * ═══════════════════════════════════════════════════════════════ */

/* Sort UI */
:root[data-mode=light] :is(.illusia-list-page, .illusia-stories, .illusia-collections) .sort-order-filter {
  border-bottom-color: hsl(var(--illusia-border-base) / .08);
}

:root[data-mode=light] :is(.illusia-list-page, .illusia-stories, .illusia-collections) .sort-order-filter .list-button {
  background: hsl(var(--bg-200-free) / .3);
  border-color: hsl(var(--illusia-border-base) / .1);
}

:root[data-mode=light] :is(.illusia-list-page, .illusia-stories, .illusia-collections) .sort-order-filter .list-button:hover {
  border-color: hsl(var(--amber-free) / .3);
  color: var(--amber-dim);
  background: hsl(var(--amber-free) / .04);
}

:root[data-mode=light] :is(.illusia-list-page, .illusia-stories, .illusia-collections) .sort-order-filter .list-button._order._on {
  border-color: hsl(var(--amber-free) / .2);
  color: var(--amber-dim);
}

:root[data-mode=light] :is(.illusia-list-page, .illusia-stories, .illusia-collections) .sort-order-filter .popup-menu {
  background: hsl(var(--bg-200-free) / .95);
  border-color: hsl(var(--illusia-border-base) / .1);
  box-shadow: 0 clamp(3px, .5vw, 5px) clamp(16px, 3vw, 28px) hsl(0 0% 0% / .1);
}

:root[data-mode=light] :is(.illusia-list-page, .illusia-stories, .illusia-collections) .sort-order-filter .popup-menu a:hover {
  background: hsl(var(--amber-free) / .06);
  color: var(--amber-dim);
}

/* Pagination — multi-contexto (v2.5.0/S14). Normalização: a cópia
 * de collections usava `--bg-800-free` (fundo escuro) no light mode —
 * divergência sem razão estrutural; base `--bg-300-free` vence. */
:root[data-mode=light] :is(.illusia-list-page__pagination, .illusia-stories__pagination, .illusia-collections__pagination, .illusia-studio-page__pagination) .page-numbers {
  background: hsl(var(--bg-300-free) / .3);
  border-color: hsl(var(--illusia-border-base) / .1);
}

:root[data-mode=light] :is(.illusia-list-page__pagination, .illusia-stories__pagination, .illusia-collections__pagination, .illusia-studio-page__pagination) a.page-numbers:hover {
  border-color: hsl(var(--amber-free) / .3);
  color: var(--amber-dim);
  background: hsl(var(--amber-free) / .04);
}

:root[data-mode=light] :is(.illusia-list-page__pagination, .illusia-stories__pagination, .illusia-collections__pagination, .illusia-studio-page__pagination) .page-numbers.current {
  background: hsl(var(--amber-free) / .1);
  border-color: hsl(var(--amber-free) / .2);
  color: var(--amber-dim);
  box-shadow: none;
}


/* ═══════════════════════════════════════════════════════════════
 * 8. REDUCED TRANSPARENCY
 *
 * Quando o usuário ativa "Reduzir transparência" no SO, desliga o
 * blur GPU do popup-menu de ordenação e usa fundo opaco. Mesmo
 * pattern dos audits S3/S5/S7 (registry) — o popup é o único glass
 * blur deste arquivo (§2, linha do `backdrop-filter`).
 * ═══════════════════════════════════════════════════════════════ */

@media (prefers-reduced-transparency: reduce) {
  :is(.illusia-list-page, .illusia-stories, .illusia-collections) .sort-order-filter .popup-menu {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--bg-900);
  }

  :root[data-mode=light] :is(.illusia-list-page, .illusia-stories, .illusia-collections) .sort-order-filter .popup-menu {
    background: var(--bg-200);
  }
}


/* ═══════════════════════════════════════════════════════════════
 * 10. REDUCED MOTION
 * ═══════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  :is(.illusia-list-page__cards, .illusia-stories__cards, .illusia-collections__cards) > li {
    animation: none;
  }

  :is(.illusia-list-page__pagination, .illusia-stories__pagination, .illusia-collections__pagination, .illusia-studio-page__pagination) .page-numbers {
    transition-duration: 0.01ms !important; /* Override — reduced motion safety net */
  }

  :is(.illusia-list-page, .illusia-stories, .illusia-collections) .sort-order-filter .list-button {
    transition-duration: 0.01ms !important; /* Override — reduced motion safety net */
  }
}