/* ============================================================
   WORKS — v2 SPATIAL EDITION (SPECTRAL TRANSMISSION)
   Carregado no head de works.html DEPOIS do styles.css.
   Só carrega nesta página, então pode assumir o contexto works.

   Tese v2: comandar o viewport.
   - Cabeçalho monumental de borda a borda (título WORKS gigante).
   - Faixa de filtros como HUD de broadcast, sticky sob a nav.
   - Collectors loop full-bleed.
   - Grid mais largo (near full-bleed com gutters).

   O miolo (cards + grid) é estilizado por gallery/styles.css
   (folha carregada dinamicamente pelo app.js, DEPOIS desta).
   Contrato JS↔CSS preservado: .gallery-container, .filter-section,
   .filter-container, .filter-btn, contadores, .collectors-loop-section,
   .collectors-label, #collectorsTextLoop, #galleryGrid — só reposiciono.
   Sem !important. Só var(--...). Tokens da escala do design system.
   ============================================================ */

:root {
  /* container largo da works: quase full-bleed com gutters */
  --works-container: min(2000px, 94vw);
  /* distância de cada borda do viewport até a coluna do container,
     usada para ancorar HUDs full-bleed à mesma medida do grid */
  --works-edge: max(var(--space-4), calc((100vw - var(--works-container)) / 2));
}

/* Sem cabeçalho visível (pedido do dono 2026-07-08): a página abre
   direto no COLLECTED BY; o h1 "Works" fica sr-only. */

/* ------------------------------------------------------------
   GALLERY CONTAINER — alarga para near full-bleed com gutters.
   (Frozen styles.css: width var(--container); esta folha vence
   por não estar em @layer.)
   ------------------------------------------------------------ */
.gallery-container {
  width: var(--works-container);
  margin-inline: auto;
  padding: 0 0 var(--space-24);
}

/* ------------------------------------------------------------
   COLLECTORS LOOP — full-bleed, hairlines de borda a borda,
   rótulo ancorado à margem do container.
   ------------------------------------------------------------ */
.collectors-loop-section {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  /* respiro editorial que era do cabeçalho — a faixa agora abre a página */
  margin-block: clamp(1.5rem, 3vh, 2.5rem) var(--space-8);
  padding-block: var(--space-3);
  border-block: 1px solid var(--line);
  /* Placa (como a faixa de filtros logo abaixo): os nomes em --ink-dim
     disputavam com os glifos do glitch — hairlines já delimitam a faixa. */
  background: rgba(6, 0, 9, 0.72);
}

.collectors-label {
  margin: 0 0 var(--space-1);
  text-align: center;
  color: var(--ink-dim);
}

/* ------------------------------------------------------------
   FILTROS — faixa mono de broadcast, sticky sob a nav.
   Full-bleed; conteúdo alinhado à margem do container.
   ------------------------------------------------------------ */
.filter-section {
  position: sticky;
  top: var(--nav-height);
  z-index: var(--z-content);
  display: flex;
  align-items: center;
  gap: var(--space-6);
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  margin-bottom: var(--space-8);
  /* Notch: a faixa é full-bleed (100vw); em landscape de iPhone os filtros da
     borda ficariam sob o entalhe. max() preserva o --works-edge atual e só
     cresce onde há inset. Sem @custom-media aqui (folha estática, sem PostCSS):
     env()/max() funcionam nativamente. env()=0 sem notch e no desktop. */
  padding: var(--space-2) max(var(--works-edge), env(safe-area-inset-right))
    var(--space-2) max(var(--works-edge), env(safe-area-inset-left));
  /* Quase opaco: translúcido demais fica acinzentado sobre obras claras
     e a faixa parece "solta" flutuando sobre o grid. */
  background: rgba(6, 0, 9, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-block: 1px solid var(--line);
  transition: top 0.3s ease;
}

/* A nav se esconde no scroll para baixo (translateY via JS + body.nav-is-hidden);
   a faixa acompanha, subindo para o topo em vez de ficar pendurada no vão. */
body.nav-is-hidden .filter-section {
  top: 0;
}

/* Rótulo HUD à esquerda da faixa */
.filter-section::before {
  content: 'Filter';
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: var(--text-mono-sm);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
}

/* Botões alinhados à esquerda como leitura de índice, não centrados */
.filter-container {
  flex: 1;
  justify-content: flex-start;
  gap: var(--space-2) var(--space-6);
}

/* ------------------------------------------------------------
   RESPONSIVO
   ------------------------------------------------------------ */

@media (max-width: 767px) { /* --bp-sm (era 768; alinhado ao JS <768) */
  :root {
    --works-container: 92vw;
  }

  .filter-section {
    gap: var(--space-4);
    /* mais enxuta que o padding-block: var(--space-2) do desktop:
       no telefone a faixa sticky não pode comer tela útil */
    padding-block: var(--space-2);
  }

  /* faixa sticky compacta no telefone: sem rótulo, só os filtros */
  .filter-section::before {
    display: none;
  }

  /* Linha única com scroll horizontal: empilhado em 2x2 a faixa sticky
     media ~160px e comia a tela; em fila os 4 filtros cabem (e se um dia
     não couberem, rolam). Scrollbar escondida: a faixa é curta e o corte
     do último botão na borda já denuncia o overflow. */
  .filter-container {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    gap: var(--space-1) var(--space-4);
  }

  .filter-container::-webkit-scrollbar {
    display: none;
  }

  .filter-container .filter-btn {
    flex-shrink: 0;
    white-space: nowrap;
  }
}

/* landscape de celular: altura curta — a faixa sticky não pode roubar
   1/3 da viewport. Sai do sticky e volta ao fluxo normal.
   Fora do bloco 767 de propósito: celular deitado tem ~844-932px de LARGURA;
   o cap de 1023px exclui desktop (janelas curtas ≥1024 mantêm o aprovado). */
@media (max-width: 1023px) and (max-height: 620px) /* --bp-md + --bp-short */ {
  .filter-section {
    position: static;
  }
}


/* Obras limpas (pedido do dono 2026-07-08): os overlays fixos de textura
   (--z-texture fica ACIMA do conteúdo no site todo) viram "CRT scanlines"
   sobre as imagens claras da galeria. Nesta página, nem scanlines nem grão
   por cima das obras — o glitch de fundo (z-index 0, atrás) permanece. */
.glitch-scanlines {
  display: none;
}
body::before {
  display: none;
}