/* ===========================================================================
   Confere.la · VITRINE
   A página inicial: billboard em cima, prateleiras embaixo. O desenho é o da
   Netflix, e é ordem do dono.

   O QUE ISSO SUBSTITUI, dito em voz alta
   O guia era uma coluna que só rolava para baixo, e a folha dele defendia essa
   escolha por escrito: "Nada nesta folha desliza para o lado. Uma prateleira
   que corre na horizontal esconde o terceiro item de todo mundo que abre no
   telefone." O argumento estava certo para o que o guia era: uma AGENDA, uma
   lista que se lê inteira.

   A vitrine não é agenda, é CATÁLOGO: 577 transmissões, 734 candidatos, 27
   estados. Catálogo não se lê inteiro, se percorre. A prateleira horizontal
   deixa de esconder o terceiro item e passa a prometer que ele existe, que é o
   ponto do gesto. O que era defeito na agenda é a função aqui.

   O preço está pago onde doía: a seta de rolagem é um alvo de dedo de verdade,
   a prateleira responde ao teclado, o cartão diz por escrito o que a cor diz,
   e quem desligou o movimento no sistema recebe tudo parado. Uma prateleira
   que só funciona com mouse e visão perfeita seria a Netflix pela metade.

   O alvo do desenho continua sendo 375 por 812. As consultas de mídia sobem a
   partir daí: nenhuma regra desfaz a versão pequena.
   =========================================================================== */

/* ============================================================== 1 · A PÁGINA
   A vitrine é a única tela que sobe conteúdo POR BAIXO do topo fixo, e é por
   isso que ela existe como folha separada: o billboard começa colado no alto
   da janela e o topo flutua sobre ele. */

body {
  background: var(--bg-1);
  color: var(--ink);
  overflow-x: hidden;
}

/* ========================================================== 2 · O BILLBOARD
   A arte de abertura. Uma transmissão só, a que mais importa agora, ocupando
   a primeira dobra inteira.

   `svh` e não `vh`: no telefone, `vh` conta a barra do navegador como se ela
   não existisse, e o billboard nasce mais alto que a tela, empurrando as
   prateleiras para fora. `svh` é a janela que a pessoa realmente vê. */

.billboard {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: min(78svh, 720px);
  /* O respiro de cima só entra em ação quando o texto é ALTO demais para a
     janela: com `align-items: flex-end`, conteúdo que cabe ignora este valor e
     continua colado embaixo. Ele existe para a janela baixa (telefone deitado,
     janela de navegador arrastada para cima), onde o texto subia por baixo do
     topo fixo e o selo de "no ar agora" ia parar atrás da marca. */
  padding: var(--topo-h) var(--casca-x) clamp(28px, 6vh, 76px);
  isolation: isolate;
}

@media (max-width: 720px) {
  .billboard {
    min-height: 62svh;
    padding-bottom: 22px;
  }
}

.billboard-arte {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  background: var(--bg-2);
}

.billboard-arte img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* A miniatura do YouTube tem 640 por 360 e vai ser esticada para 1600 de
     largura. Ela borra, e o borrão é aceitável porque ela vive atrás de um véu
     e de texto. O que NÃO é aceitável é ela vir nítida no meio e serrilhada na
     borda, então o desfoque é deliberado e uniforme. */
  filter: blur(1px) saturate(1.06);
  transform: scale(1.06);
}

/* Os dois véus da Netflix, e cada um resolve um problema diferente:
   o de baixo funde a arte na página (senão a prateleira nasce em cima de uma
   borda dura), o da esquerda dá contraste para o texto sem escurecer a foto
   inteira. Dois gradientes, não um: um véu chapado apaga a arte. */
.billboard-arte::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .92) 0%, rgba(0, 0, 0, .68) 34%, rgba(0, 0, 0, .08) 72%),
    linear-gradient(0deg, var(--bg-1) 0%, rgba(0, 0, 0, .30) 26%, rgba(0, 0, 0, 0) 58%);
}

[data-theme='light'] .billboard-arte::after {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .74) 36%, rgba(255, 255, 255, .1) 74%),
    linear-gradient(0deg, var(--bg-1) 0%, rgba(255, 255, 255, .34) 26%, rgba(255, 255, 255, 0) 58%);
}

/* DE QUEM É O TÍTULO. Esta linha é a coisa mais importante do billboard que
   não está em corpo 60, e ela estava ILEGÍVEL.

   O que o billboard publica é o título que o CANAL escreveu no YouTube, em
   Bebas gigante, indistinguível de uma manchete nossa. Hoje isso rende um h1
   dizendo "LULA MENTE NA GLOBO, É PEGO EM FLAGRANTE". A única coisa que separa
   "o Confere.la afirma isso" de "a Gazeta do Povo publicou um vídeo com esse
   título" é o nome do veículo aqui do lado.

   Ele vinha com `.fileira-conta`, que é a classe da CONTAGEM da prateleira
   ("23", "24"), e herdava o `--faint` dela. Medido: 2.46:1 no tema escuro e
   2.54:1 no claro, contra os 4.5:1 que a AA exige em 12px. A atribuição de
   autoria de um produto de checagem de fatos estava pintada abaixo do mínimo
   legível, e reusar a classe de contagem para dizer autoria foi o defeito de
   origem: uma classe, dois trabalhos, e o token serve a um só.

   `--ink-3` foi MEDIDO e não opinado: 8.33:1 no escuro, 7.56:1 no claro. É o
   mesmo tom que a ligação "ver tudo" usa, pelo mesmo motivo e com a mesma
   conta. `--muted` reprovaria no escuro (3.55:1) e `--ink-2` competiria com o
   próprio título.

   Isto NÃO resolve a questão editorial de o billboard publicar acusação de
   terceiro como manchete própria, que é decisão de quem manda no produto. Isto
   resolve o defeito de a atribuição estar ilegível qualquer que seja a
   decisão. */
.billboard-fonte {
  font-family: var(--mono);
  font-size: var(--t-lab);
  letter-spacing: var(--ls-lab-tight);
  color: var(--ink-3);
}

.billboard-texto {
  max-width: min(46ch, 92%);
  /* `min-width: 0` NÃO É ENFEITE, é o que impede o transbordo no telefone.
     Item de flex nasce com `min-width: auto`, que significa "não encolha
     abaixo do meu conteúdo". Título de live do YouTube vem com palavra longa e
     sem hífen, então o item ficava mais largo que a tela, `overflow-x: hidden`
     do body cortava, e a última letra de cada linha sumia. A captura de tela
     no telefone é que pegou. */
  min-width: 0;
}

/* E a palavra que não cabe QUEBRA, em vez de empurrar a caixa. Isto é a rede
   de baixo: mesmo com a largura resolvida, um canal pode publicar um título
   com uma sequência de 60 caracteres sem espaço, e aí não há largura que
   resolva. `anywhere` e não `break-word` porque só `anywhere` conta na hora de
   calcular a largura mínima do bloco. */
.billboard-titulo,
.billboard-linha {
  overflow-wrap: anywhere;
}

.billboard-selo {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 14px;
}

.billboard-titulo {
  font-family: var(--display);
  font-size: clamp(30px, 5.6vw, 68px);
  line-height: 1.02;
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 12px;
  /* Três linhas é o teto. Título de live no YouTube vem com emoji, data e o
     nome do programa, e sem teto ele engole o billboard inteiro. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.billboard-linha {
  font-size: clamp(13px, 1.15vw, 16px);
  line-height: var(--linha-corpo);
  color: var(--ink-2);
  margin: 0 0 20px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.billboard-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* ------------------------------------------------------------ 3 · OS BOTÕES
   Dois, e a hierarquia entre eles é a coisa toda: o cheio leva ao produto (a
   apuração ao vivo), o vazado leva à informação. Três botões numa abertura é
   uma decisão que ninguém toma. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: var(--toque);
  padding: 0 clamp(18px, 2vw, 28px);
  border: 0;
  border-radius: 4px;
  font-family: var(--sans);
  font-size: clamp(13px, 1.05vw, 15px);
  font-weight: var(--peso-forte);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background .2s var(--ease), opacity .2s var(--ease);
}

.btn svg { width: 19px; height: 19px; flex: 0 0 auto; }

.btn--cheio {
  background: var(--ink);
  color: var(--bg-1);
}
.btn--cheio:hover { opacity: .78; }

.btn--vazado {
  background: color-mix(in srgb, var(--ink) 22%, transparent);
  color: var(--ink);
  backdrop-filter: blur(2px);
}
.btn--vazado:hover { background: color-mix(in srgb, var(--ink) 34%, transparent); }

.btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* ======================================================== 4 · AS PRATELEIRAS
   Mudou de casa: `public/prateleira.css`.

   A vitrine deixou de ser a única tela com prateleira quando o elenco virou
   catálogo horizontal, e regra usada por duas telas não mora na folha de uma
   delas. Se ela ficasse aqui, o elenco teria que carregar a vitrine inteira
   (billboard, cartão 16 por 9, grade do ao vivo) para usar uma pista.

   As classes continuam as mesmas: .fileiras .fileira .fileira-topo
   .fileira-titulo .fileira-conta .fileira-tudo .pista .seta */

/* ============================================================== 5 · O CARTÃO
   16 por 9, como a arte que ele carrega. A miniatura do YouTube tem essa
   proporção, e o cartão respeita: recortar a arte de origem para caber num
   formato inventado é jogar fora informação que veio de graça. */

.cartao {
  position: relative;
  flex: 0 0 auto;
  width: clamp(158px, 21vw, 268px);
  scroll-snap-align: start;
  border-radius: 5px;
  background: var(--bg-2);
  color: inherit;
  text-decoration: none;
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}

.cartao-arte {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 5px;
  background: var(--bg-3);
}

.cartao-arte img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ------------------------------------------------------- 5.1 · o crescimento
   O cartão cresce sob o ponteiro e revela o que estava guardado atrás da
   arte. Ele cresce por uma razão, não por efeito: o que aparece é quem foi
   reconhecido no programa, e é essa informação que justifica o gesto. Sem
   ela, crescer seria enfeite. A origem muda nas pontas para o primeiro
   cartão crescer para dentro em vez de sair pela borda da tela.

   Só cresce quem tem ponteiro. No toque, o cartão inteiro é uma ligação e o
   miolo já vem escrito embaixo dele: crescer no toque significaria segurar o
   dedo para ver o que devia estar visível. */

@media (hover: hover) and (pointer: fine) {
  .cartao {
    transform-origin: center center;
  }
  .pista > .cartao:first-child { transform-origin: left center; }
  .pista > .cartao:last-child { transform-origin: right center; }

  .cartao:hover,
  .cartao:focus-visible {
    transform: scale(1.26);
    z-index: 4;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .58);
  }

  .cartao-abre {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height .3s var(--ease-out), opacity .2s var(--ease) .06s;
  }

  .cartao:hover .cartao-abre,
  .cartao:focus-visible .cartao-abre {
    max-height: 160px;
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cartao { transition: none; }
  .cartao:hover, .cartao:focus-visible { transform: none; }
}

.cartao:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* ------------------------------------------------------------- 5.2 · o miolo */

.cartao-corpo {
  padding: 8px 9px 10px;
  background: var(--bg-2);
  border-radius: 0 0 5px 5px;
}

.cartao-quando {
  font-family: var(--mono);
  font-size: var(--t-lab);
  font-weight: var(--peso-forte);
  letter-spacing: var(--ls-lab-tight);
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 4px;
}

.cartao-titulo {
  font-size: 12.5px;
  font-weight: var(--peso-medio);
  line-height: 1.32;
  color: var(--ink);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cartao-canal {
  font-family: var(--mono);
  font-size: var(--t-lab);
  letter-spacing: var(--ls-lab-tight);
  text-transform: uppercase;
  color: var(--faint);
  margin: 5px 0 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* O que só aparece quando o cartão cresce: quem foi reconhecido dentro do
   programa. É a informação que justifica o gesto; sem ela, crescer é enfeite. */
.cartao-elenco {
  display: flex;
  gap: 5px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.cartao-elenco li {
  display: flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  padding: 2px 7px 2px 2px;
  border-radius: 999px;
  background: var(--bg-3);
  font-size: 10.5px;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
}

.cartao-elenco img {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
}

/* ------------------------------------------------------------ 5.3 · os selos */

.selo {
  position: absolute;
  top: 7px;
  left: 7px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 3px;
  font-family: var(--mono);
  font-size: var(--t-lab);
  font-weight: var(--peso-forte);
  letter-spacing: var(--ls-lab-tight);
  text-transform: uppercase;
}

/* O ao vivo é inequívoco por três caminhos ao mesmo tempo, e essa regra veio
   inteira do guia porque ela é boa: a PALAVRA escrita, a COR de vivo e o PONTO
   que pulsa. Quem não distingue a cor lê a palavra; quem lê em preto e branco
   vê o movimento; quem desligou o movimento ainda tem a palavra. Um sinal só é
   sempre um sinal que alguém não recebe. */
.selo--vivo {
  background: var(--vivo);
  color: var(--vivo-ink);
}

.selo--breve {
  background: color-mix(in srgb, var(--bg-1) 76%, transparent);
  color: var(--ink-2);
  backdrop-filter: blur(3px);
}

.selo-pulso {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: pulso 1.9s var(--ease) infinite;
}

@keyframes pulso {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .35; transform: scale(.72); }
}

@media (prefers-reduced-motion: reduce) {
  .selo-pulso { animation: none; }
}

/* ==================================================== 6 · A FILEIRA DE GENTE
   Os candidatos. Retrato em pé, 3 por 4, porque o retrato do TSE é em pé e
   forçar 16 por 9 nele corta a cabeça ou o peito de 734 pessoas. Formato segue
   a arte; a arte não se dobra ao formato. */

.pista--gente .cartao {
  width: clamp(112px, 13vw, 168px);
}

.pista--gente .cartao-arte {
  aspect-ratio: 3 / 4;
}

.pessoa-corpo {
  padding: 8px 4px 0;
  text-align: left;
}

.pessoa-nome {
  font-size: 12.5px;
  font-weight: var(--peso-forte);
  color: var(--ink);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pessoa-linha {
  font-family: var(--mono);
  font-size: var(--t-lab);
  letter-spacing: var(--ls-lab-tight);
  text-transform: uppercase;
  color: var(--faint);
  margin: 3px 0 0;
}

/* O número de urna, no canto do retrato. É o dado que a pessoa procura. */
.pessoa-numero {
  position: absolute;
  right: 6px;
  bottom: 6px;
  z-index: 2;
  padding: 2px 7px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--bg-1) 82%, transparent);
  backdrop-filter: blur(3px);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: var(--peso-grito);
  color: var(--ink);
}

/* ================================================== 7 · A FILEIRA DE ESTADOS
   Sem arte: 27 blocos de sigla. Uma prateleira de retângulos vazios seria pior
   do que uma lista, então aqui o cartão é a própria sigla, grande. */

.pista--estados .cartao {
  width: clamp(104px, 11vw, 142px);
}

.estado-bloco {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 16 / 10;
  padding: 10px;
  border: var(--rule) solid var(--line);
  border-radius: 5px;
  background: linear-gradient(150deg, var(--bg-2), var(--bg-3));
}

.estado-sigla {
  font-family: var(--display);
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1;
  letter-spacing: var(--ls-display);
  color: var(--ink);
}

.estado-nome {
  font-family: var(--mono);
  font-size: var(--t-lab);
  letter-spacing: var(--ls-lab-tight);
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================================== 8 · O VAZIO
   Dia parado é dia parado. A tela diz isso com todas as letras, porque uma
   vitrine vazia sem explicação parece defeito de programa. */

.vazio {
  padding: clamp(40px, 8vh, 90px) var(--casca-x);
  text-align: center;
}

.vazio-titulo {
  font-family: var(--display);
  font-size: clamp(26px, 4vw, 44px);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 10px;
}

.vazio-nota {
  max-width: 52ch;
  margin: 0 auto;
  font-size: var(--t-corpo);
  line-height: var(--linha-corpo);
  color: var(--muted);
}

/* =========================================================== 9 · O ANÚNCIO
   A faixa do inventário entre prateleiras. Ela respeita o respiro da página e
   nunca entra antes da primeira prateleira: a primeira coisa que a pessoa vê
   depois do billboard é conteúdo, não anunciante. */

.vitrine-anuncio {
  padding: clamp(14px, 2vw, 28px) var(--casca-x) clamp(20px, 3vw, 38px);
}

/* ====================================================== 10 · A GRADE DO AO VIVO
   A tela /ao-vivo/ não é prateleira: é tudo o que está no ar agora, de uma vez.
   Ali a pessoa já escolheu o recorte, então esconder item atrás de rolagem
   lateral seria trabalhar contra ela. */

.grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: clamp(10px, 1.4vw, 20px);
  padding: 0 var(--casca-x) 60px;
}

.grade .cartao { width: auto; }

@media (hover: hover) and (pointer: fine) {
  .grade .cartao:hover,
  .grade .cartao:focus-visible { transform: scale(1.06); }
}

.abertura {
  padding: clamp(20px, 4vh, 48px) var(--casca-x) clamp(16px, 2.4vw, 28px);
}

.abertura-titulo {
  font-family: var(--display);
  font-size: clamp(32px, 6vw, 62px);
  line-height: 1.02;
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 8px;
}

.abertura-linha {
  max-width: 62ch;
  font-size: var(--t-corpo);
  line-height: var(--linha-corpo);
  color: var(--ink-2);
  margin: 0 0 14px;
}

.abertura-contas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
}