/* ===========================================================================
   A PRATELEIRA

   O corpo do catálogo no desenho da Netflix: um título e uma pista que corre
   para o lado, com setas nas pontas que somem quando não há mais para onde ir.

   Ela nasceu dentro de `vitrine.css` porque só a vitrine tinha prateleira.
   Saiu de lá no dia em que a segunda tela precisou dela.

   Este projeto já pagou três vezes, na mesma semana, o preço de deixar a mesma
   coisa copiada em dois lugares: o topo estava triplicado em guia, elenco e
   mapa, e as três já discordavam; a busca do topo colidiu de nome com a busca
   do elenco e do mapa; o título da transmissão era limpo em três geradores
   diferentes. Prateleira em duas folhas seria a quarta.

   Quem usa: a vitrine (/ e /ao-vivo/) e o elenco (/elenco/).
   O CARTÃO de cada tela continua sendo de cada tela: o que se compartilha é a
   mecânica da pista, não a aparência do que anda nela.
   =========================================================================== */

/* ======================================================== 4 · AS PRATELEIRAS
   O corpo do catálogo. Cada uma é um título e uma pista que corre para o lado.

   A pista sobe e desce um respiro grande com margem negativa igual: o cartão
   CRESCE no repouso do mouse, e `overflow-x` recorta o que passar da caixa. Sem
   esse respiro, o cartão cresce e nasce cortado em cima e embaixo. */

.fileiras {
  position: relative;
  z-index: 1;
  margin-top: clamp(-40px, -3vw, -12px);
  padding-bottom: 40px;
}

.fileira {
  position: relative;
  margin-bottom: clamp(20px, 2.6vw, 40px);
}

.fileira-topo {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 0 var(--casca-x);
  margin-bottom: 10px;
}

.fileira-titulo {
  font-family: var(--sans);
  font-size: clamp(15px, 1.5vw, 22px);
  font-weight: var(--peso-forte);
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 0;
}

.fileira-conta {
  font-family: var(--mono);
  font-size: var(--t-lab);
  letter-spacing: var(--ls-lab-tight);
  color: var(--faint);
}

/* A ligação "ver tudo" só aparece quando o ponteiro está na prateleira. No
   toque não existe repouso de ponteiro, e por isso ela é visível de saída em
   tela pequena. */
.fileira-tudo {
  margin-left: auto;
  font-size: 12px;
  /* --ink-3, e a escolha foi MEDIDA, não opinada.

     Era --nav-off, que é token da CASCA (texto e anel de foco do topo).
     Emprestar token de outro território invertia a hierarquia entre os temas:
     no escuro "ver tudo" saía mais claro que a contagem ao lado, no claro
     saía o contrário.

     A primeira troca foi para --muted, e ela CONSERTAVA o claro (4.63:1) e
     ESTRAGAVA o escuro (3.77:1, abaixo do mínimo AA de 4.5:1 para 12px).
     Trocar um tema pelo outro não é conserto.

     --ink-3 é o único tom apagado que passa nos dois (7.23:1 no claro,
     6.08:1 no escuro) e ainda deixa para onde o hover crescer, que é --ink. */
  color: var(--ink-3);
  text-decoration: none;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity .24s var(--ease), transform .24s var(--ease);
}
.fileira:hover .fileira-tudo,
.fileira:focus-within .fileira-tudo { opacity: 1; transform: translateX(0); }
.fileira-tudo:hover { color: var(--ink); }
.fileira-tudo:focus-visible { opacity: 1; transform: none; outline: 2px solid var(--ink); outline-offset: 3px; }

@media (hover: none) {
  .fileira-tudo { opacity: 1; transform: none; }
}

/* Quem pede menos movimento continua vendo a ligação aparecer, só não a vê
   DESLIZAR: o que incomoda é o deslocamento, não a mudança de opacidade. */
@media (prefers-reduced-motion: reduce) {
  .fileira-tudo { transform: none; transition: opacity .24s var(--ease); }
  .fileira:hover .fileira-tudo,
  .fileira:focus-within .fileira-tudo { transform: none; }
}

/* ------------------------------------------------------------- 4.1 · a pista */

.pista {
  display: flex;
  gap: 6px;
  padding: 56px var(--casca-x);
  margin: -56px 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  /* SEM ISTO O PRIMEIRO CARTÃO NASCE COLADO NA BORDA DA TELA.
     `scroll-snap-align: start` alinha o cartão ao começo do SNAPPORT, e o
     snapport ignora o `padding` da pista: o navegador rola o respiro da
     esquerda para fora antes mesmo de alguém tocar na tela. O resultado é uma
     prateleira que começa fora de alinhamento com o próprio título dela.
     `scroll-padding` é o que ensina o snapport a respeitar a margem. */
  scroll-padding-inline: var(--casca-x);
  scrollbar-width: none;
}

.pista::-webkit-scrollbar { display: none; }

/* A pista que é `<ul>` chega com a marca e o recuo que o navegador dá a toda
   lista. Ela continua sendo uma lista para quem ouve a página e deixa de
   parecer uma para quem a vê, que é exatamente o que se quer. */
ul.pista { list-style: none; }

@media (prefers-reduced-motion: reduce) {
  .pista { scroll-behavior: auto; }
}

/* ------------------------------------------------- 4.1.1 · a pista de dentro
   A prateleira normal corre de borda a borda da JANELA, e por isso ela usa
   `--casca-x` de respiro. A página de estado tem uma coluna de leitura com uma
   lateral vendida ao lado dela, e uma pista lá dentro não tem borda de janela
   nenhuma para respeitar: herdar `--casca-x` ali abre 60px de vão no começo de
   cada fileira, e o cartão nasce desalinhado do título que está em cima dele.

   O respiro vertical continua, porque ele não é margem: é a folga que o cartão
   precisa para CRESCER sob o ponteiro sem ser recortado pelo `overflow-x`. */

.pista--interna {
  padding-inline: 0;
  scroll-padding-inline: 0;
}

.fileira--interna .fileira-topo { padding-inline: 0; }
.fileira--interna .seta { width: 34px; }

/* ------------------------------------------------------------- 4.2 · as setas
   Aparecem no repouso do ponteiro e ocupam a altura inteira da pista, que é o
   que torna elas fáceis de acertar. Em aparelho de toque elas não existem: lá
   o dedo arrasta, e uma seta por cima do primeiro cartão só tapa conteúdo. */

.seta {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(34px, var(--casca-x), 60px);
  padding: 0;
  border: 0;
  background: color-mix(in srgb, var(--bg-1) 62%, transparent);
  color: var(--ink);
  cursor: pointer;
  opacity: 0;
  transition: opacity .22s var(--ease), background .22s var(--ease);
}

.seta[data-lado='inicio'] { left: 0; }
.seta[data-lado='fim'] { right: 0; }

.fileira:hover .seta,
.fileira:focus-within .seta { opacity: 1; }
.seta:hover { background: color-mix(in srgb, var(--bg-1) 84%, transparent); }
.seta:focus-visible { opacity: 1; outline: 2px solid var(--ink); outline-offset: -4px; }
.seta svg { width: 26px; height: 26px; }

/* Ponta da pista alcançada: a seta some. Botão que não leva a lugar nenhum é
   pior do que botão nenhum, e aqui o estado é sabido, então ele é dito. */
.seta[hidden] { display: none; }

@media (hover: none) {
  .seta { display: none; }
}