/* ============================================================
   PRESS — v2 SPATIAL EDITION
   Página: press.html · redesign-spatial (agente PRESS)
   Tese: hero cinemático full-bleed → faixa de movimento horizontal →
   sticky split editorial (monitores em grid assimétrico + texto) →
   muro de logos borda-a-borda → pull-quotes ancoradas assimetricamente →
   índice-ledger denso. Alterna respiro (hero 80dvh) com faixas densas
   (marquee, muro de logos, ledger) — ritmo vertical variado.

   Contratos (app.js):
   - .press-videos-column video ↔ .video-fullscreen-btn pareados
     por ÍNDICE (não estilizar de forma que altere a ordem DOM);
     o grid assimétrico usa apenas CSS (:first-of-type / grid-area),
     nunca reordena os nós — pareamento intacto.
   - .press-item recebe opacity:0 + animation fadeInUp INLINE —
     não aplicar opacity/animation/transition no próprio .press-item;
     o keyframe fadeInUp vive no styles.css (congelado), não recriado aqui.
   - #press .video-item e [data-reveal] recebem .js-reveal via app.js
     (usa o par .js-reveal/.is-revealed definido no styles.css).
   Nota: exhibitions-grid.css carrega depois desta folha e tem um
   .section-title genérico (font-weight 200 + fadeInUp) — todas as
   regras aqui são qualificadas com #press e .section-title recebe
   override explícito.
   ============================================================ */

/* ---------- Primitivo de página: full-bleed com propósito ---------- */
.u-bleed {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}

/* Neutraliza o .section-title genérico do exhibitions-grid.css */
#press .section-title {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: 780;
  font-variation-settings: 'wdth' 74;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
  opacity: 1;
  animation: none;
}

/* Section head ganha um terceiro item: contagem mono ancorada à direita */
#press .section-head {
  flex-wrap: wrap;
  row-gap: var(--space-2);
}

#press .press-stat {
  margin-left: auto;
  color: var(--ink-dim);
}

/* ---------- Container (reutilizado várias vezes só para centralizar) ---------- */
#press .press-container {
  width: var(--container);
  margin-inline: auto;
}

/* ============================================================
   1. FECHO — hero removido (pedido do dono 2026-07-08): a página abre
   direto no conteúdo (Featured Appearances); h1 sr-only. O ledger do
   Purple Valley e a marquee de veículos fecham a página, antes do footer.
   ============================================================ */
#press .press-close-ledger {
  width: var(--container);
  margin: var(--space-12) auto var(--space-4);
  text-align: center;
  color: var(--ink-dim);
}

/* ============================================================
   2. MARQUEE — faixa de veículos em loop contínuo (TextLoop)
   A banda #pressMarqueeLoop recebe, via JS (text-loop.js), o
   .textloop.press-marquee-loop. O componente mede a sequência e
   cria cópias suficientes para cobrir a viewport, animando por rAF
   com wrap modular — loop seamless em qualquer largura de tela.
   Também reage a data-signal / prefers-reduced-motion sozinho.
   ============================================================ */
#press .press-marquee {
  /* banda fecha a página: hairline em cima e embaixo, antes do footer */
  border-block: 1px solid var(--line);
  background: rgba(13, 7, 22, 0.4);
}

/* Container do TextLoop dentro da banda (o .textloop base já faz
   overflow:hidden; aqui só ajustamos o respiro vertical). */
#press .press-marquee-loop {
  padding-block: var(--space-3);
}

/* Cada veículo em mono, caixa alta — sobrescreve o preset display do
   .textloop__text base (styles.css). */
#press .press-marquee-loop .textloop__text {
  position: relative;
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  font-weight: 400;
  font-variation-settings: normal;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

/* Separador "/" vazado, centrado no intervalo entre nomes.
   Posição absoluta → não entra na largura da sequência, então a
   medição (seqWidth) e o loop seamless permanecem intactos. */
#press .press-marquee-loop .textloop__text::after {
  content: '/';
  position: absolute;
  left: 100%;
  top: 0;
  margin-left: 24px; /* metade do gap (48px) → separador no centro */
  transform: translateX(-50%);
  letter-spacing: 0;
  color: var(--violet);
}

/* ============================================================
   3. SPREAD PRINCIPAL — monitores (grid assimétrico) + texto sticky
   ============================================================ */
#press .press-main-content {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--space-16);
  align-items: start;
  padding: var(--space-16) 0;
  border-bottom: 1px solid var(--line);
}

/* Coluna de vídeos — grid editorial assimétrico:
   1º item (GloboNews) é o destaque cinemático (linha inteira),
   os demais formam a faixa densa (lado a lado). */
#press .press-videos-column {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
}

#press .press-videos-column > .section-head {
  grid-column: 1 / -1;
}

#press .press-videos-column > .video-item:first-of-type {
  grid-column: 1 / -1;
}

#press .video-item {
  border: 1px solid var(--line-strong);
  background: rgba(13, 7, 22, 0.55);
}

/* Barra superior do monitor: canal + tag + ano */
#press .monitor-head {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: var(--text-mono-sm);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

#press .monitor-channel {
  color: var(--ink);
}

#press .monitor-channel::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 0.7em;
  vertical-align: 6%;
  background: var(--signal);
  box-shadow: 0 0 8px rgba(103, 232, 249, 0.7);
}

#press .monitor-tag {
  color: var(--ink-dim);
}

#press .monitor-year {
  margin-left: auto;
  color: var(--violet-light);
  font-variant-numeric: tabular-nums;
}

#press .video-wrapper {
  position: relative;
  background: var(--void);
}

#press .video-wrapper video {
  display: block;
  width: 100%;
  height: auto;
  background: var(--void);
}

#press .video-fullscreen-btn {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  color: var(--ink);
  background: rgba(6, 0, 9, 0.65);
  border: 1px solid var(--line-strong);
  border-radius: 0;
  cursor: pointer;
  transition:
    border-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  #press .video-fullscreen-btn:hover {
    color: var(--violet-light);
    border-color: var(--violet-hot);
    box-shadow: 0 0 18px rgba(168, 85, 247, 0.3);
  }
}

#press .video-info {
  padding: var(--space-4) var(--space-4) var(--space-6);
  border-top: 1px solid var(--line);
}

#press .video-info h3 {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.8vw, 1.5rem);
  font-weight: 760;
  font-variation-settings: 'wdth' 75;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  margin: 0 0 var(--space-2);
}

#press .video-description {
  color: var(--ink-dim);
  font-size: 0.95rem;
  margin: 0 0 var(--space-3);
}

#press .video-meta {
  display: block;
  color: var(--ink-dim);
  font-size: var(--text-mono-sm);
}

/* Coluna de texto (sticky no desktop) */
#press .press-text-column {
  position: sticky;
  top: calc(var(--nav-height) + var(--space-8));
}

#press .press-intro p {
  color: var(--ink-dim);
  max-width: 52ch;
  line-height: 1.75;
  margin: var(--space-6) 0 0;
}

#press .press-intro strong {
  color: var(--ink);
}

/* ============================================================
   4. FEATURED IN — pull-quotes assimétricas + muro de logos bleed
   ============================================================ */
#press .featured-in-section {
  padding: var(--space-16) 0;
  border-bottom: 1px solid var(--line);
}

/* Pull-quotes editoriais: a fonte (cite) sobe para o topo como rótulo
   mono — vira o "cabeçalho" de cada citação e separa uma da outra.
   Hairline violeta à esquerda, display condensado grande no corpo. */
#press .press-pullquote {
  display: flex;
  flex-direction: column;
  margin: var(--space-12) 0;
  padding: var(--space-2) 0 var(--space-2) var(--space-8);
  border-left: 1px solid var(--violet);
}

/* Sequência das duas citações-chave logo após o parágrafo editorial:
   respiro largo entre elas + divisória hairline — cada quote lê como
   um bloco próprio em vez de texto emendado. */
#press .press-quote-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  margin-top: var(--space-12);
  padding-top: var(--space-12);
  border-top: 1px solid var(--line);
}

#press .press-quote-stack .press-pullquote {
  margin: 0;
}

#press .press-quote-stack .press-pullquote-text {
  font-size: clamp(1.35rem, 2.4vw, 2.1rem);
  max-width: 34ch;
}

#press .press-pullquote-text {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.6vw, 3rem);
  font-weight: 700;
  font-variation-settings: 'wdth' 78;
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-wrap: balance;
  color: var(--ink);
  max-width: 30ch;
  margin: 0;
  padding: 0;
}

#press .press-pullquote-cite {
  display: block;
  order: -1;
  margin: 0 0 var(--space-5);
  font-style: normal;
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--violet-light);
}

/* Muro de logos borda a borda — grade densa, tiles maiores, glow no hover */
/* Muro uniforme como na v1: todas as logos lado a lado, células do
   mesmo tamanho. Colunas que dividem 16 exatamente (8/4/2) — o grid
   fecha sempre em retângulo completo, sem pontas soltas. */
#press .logos-container {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin: var(--space-8) 0;
}

@media (max-width: 1100px) { /* TODO(bp): candidato a --bp-md, ver plano mobile */
  #press .logos-container {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

#press .logo-item {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 110px;
  padding: var(--space-4) var(--space-4);
  background: var(--void);
  transition: background-color var(--dur-base) var(--ease-out);
}

#press .logo-item img {
  width: auto;
  height: auto;
  max-width: min(140px, 100%);
  max-height: 52px;
  object-fit: contain;
  filter: grayscale(1) brightness(1.3);
  opacity: 0.55;
  transition:
    filter var(--dur-base) var(--ease-out),
    opacity var(--dur-base) var(--ease-out);
}

/* Veículos-âncora (CNN, Globo, Arte1) ganham tiles 2x maiores — peso editorial */
/* Sem células de destaque: no muro uniforme toda logo tem o mesmo
   peso (--emphasis/--meta ficam no HTML apenas como marcadores). */

/* grayscale → glow roxo/magenta no hover */
@media (hover: hover) and (pointer: fine) {
  #press .logo-item:hover {
    background: var(--surface-2);
  }

  #press .logo-item:hover img {
    filter: grayscale(1) sepia(1) hue-rotate(213deg) saturate(2.6)
      brightness(1.2)
      drop-shadow(0 0 18px rgba(168, 85, 247, 0.55))
      drop-shadow(0 0 34px rgba(232, 121, 249, 0.3));
    opacity: 1;
  }
}

/* ============================================================
   5. PRESS COVERAGE — índice-ledger (ano-outline sticky + linhas mono)
   ============================================================ */
#press .press-coverage {
  padding: var(--space-16) 0 var(--space-8);
}

#press .press-timeline-year-section {
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  gap: var(--space-8);
  align-items: start;
  padding: var(--space-8) 0;
}

#press .press-timeline-year-section + .press-timeline-year-section {
  border-top: 1px solid var(--line);
}

/* Ano gigante em outline como âncora de grupo */
#press .press-year {
  position: sticky;
  top: calc(var(--nav-height) + var(--space-8));
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: 800;
  font-variation-settings: 'wdth' 72;
  line-height: 0.9;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--line-strong);
  font-variant-numeric: tabular-nums;
  margin: 0;
}

#press .press-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Cada item: linha mono — data / veículo / título / seta.
   NÃO estilizar opacity/animation no .press-item (contrato JS). */
#press .press-item a {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 11rem) minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--space-4);
  min-height: 44px;
  padding: var(--space-3) var(--space-2);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: 0.06em;
  color: var(--ink-dim);
  transition:
    background-color var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out);
}

#press .press-item-year {
  color: var(--ink-dim);
  font-variant-numeric: tabular-nums;
}

#press .press-source {
  color: var(--violet-light);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: var(--text-mono-sm);
}

#press .press-item .press-title {
  color: var(--ink);
  text-transform: none;
}

#press .press-arrow {
  color: var(--ink-dim);
  transition:
    transform var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  #press .press-item a:hover {
    background: rgba(22, 13, 36, 0.6);
  }
  #press .press-item a:hover .press-title {
    color: var(--violet-light);
  }
  #press .press-item a:hover .press-arrow {
    color: var(--violet-hot);
    transform: translate(3px, -3px);
  }
}

/* ---------- Responsivo ---------- */
@media (max-width: 1023px) {
  #press .press-main-content {
    grid-template-columns: 1fr;
    gap: var(--space-12);
  }

  #press .press-videos-column {
    grid-template-columns: 1fr;
  }

  #press .press-videos-column > .video-item:first-of-type {
    grid-column: auto;
  }

  #press .press-text-column {
    position: static;
    order: -1; /* intro antes dos monitores no fluxo estreito */
  }
}

@media (max-width: 820px) { /* TODO(bp): candidato a --bp-sm/--bp-md, ver plano mobile */
  #press .press-timeline-year-section {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  #press .press-year {
    position: static;
    font-size: clamp(2.4rem, 10vw, 4rem);
  }

  #press .press-item a {
    grid-template-columns: 3.5rem minmax(0, 1fr) auto;
    grid-template-areas:
      'year source arrow'
      'year title arrow';
    row-gap: var(--space-1);
  }

  #press .press-item-year {
    grid-area: year;
  }

  #press .press-source {
    grid-area: source;
  }

  #press .press-item .press-title {
    grid-area: title;
  }

  #press .press-arrow {
    grid-area: arrow;
    align-self: center;
  }
}

@media (max-width: 640px) { /* TODO(bp): candidato a --bp-sm, ver plano mobile */
  #press .logos-container {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #press .logo-item {
    min-height: 90px;
    padding: var(--space-4) var(--space-3);
  }

  #press .logo-item img {
    max-height: 44px;
  }

  #press .monitor-head {
    flex-wrap: wrap;
    row-gap: var(--space-1);
  }
}