/* ==========================================================================
   poster.css — Visão PÔSTER: prateleiras horizontais de cartazes.
   Terceira visão da grade (grade | lista | poster). Depende de tokens.css,
   base.css e components.css (o selo .epg-nota vem de grid.css).
   ========================================================================== */

.epg-posters {
  display: flex;
  flex-direction: column;
  gap: var(--epg-space-xl, 2rem);
  width: 100%;
  max-width: var(--epg-max-w);
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   1. FAIXA (prateleira)
   -------------------------------------------------------------------------- */

.epg-faixa {
  display: flex;
  flex-direction: column;
  gap: var(--epg-space-sm);
  min-width: 0;
}

.epg-faixa__cabecalho {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-inline: var(--epg-space-lg);
}

.epg-faixa__titulo {
  display: flex;
  align-items: center;
  gap: var(--epg-space-sm);
  margin: 0;
  font-family: var(--epg-font-display);
  font-size: var(--epg-fs-lg);
  font-weight: var(--epg-fw-bold);
  letter-spacing: var(--epg-ls-tight);
  color: var(--epg-txt);
}

.epg-faixa__contador {
  font-family: var(--epg-font-mono);
  font-size: var(--epg-fs-2xs);
  font-weight: var(--epg-fw-regular);
  font-variant-numeric: tabular-nums;
  color: var(--epg-txt-3);
  padding: 1px 6px;
  border: 1px solid var(--epg-line);
  border-radius: var(--epg-radius-pill);
}

.epg-faixa__descricao {
  margin: 0;
  font-size: var(--epg-fs-xs);
  color: var(--epg-txt-3);
}

/* --------------------------------------------------------------------------
   2. TRILHO — scroll horizontal nativo (funciona sem JS)
   -------------------------------------------------------------------------- */

.epg-faixa__viewport {
  position: relative;
  min-width: 0;
}

.epg-faixa__trilho {
  display: flex;
  gap: var(--epg-space-md);
  margin: 0;
  padding: var(--epg-space-2xs) var(--epg-space-lg) var(--epg-space-sm);
  list-style: none;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximate;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  /* Sombra de recorte nas bordas: sugere que há mais conteúdo fora da tela */
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--epg-space-lg),
              #000 calc(100% - var(--epg-space-lg)), transparent 100%);
}

.epg-faixa__trilho:focus-visible {
  outline: var(--epg-foco);
  outline-offset: -2px;
}

.epg-faixa__trilho::-webkit-scrollbar { height: 6px; }
.epg-faixa__trilho::-webkit-scrollbar-thumb {
  background: var(--epg-line-forte);
  border-radius: var(--epg-radius-pill);
}

/* Setas: só aparecem com JS (o template as entrega com hidden) */
.epg-faixa__seta {
  position: absolute;
  top: 0;
  bottom: var(--epg-space-sm);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  padding: 0;
  border: none;
  cursor: pointer;
  font-size: 2rem;
  line-height: 1;
  color: var(--epg-txt);
  background: linear-gradient(90deg, var(--epg-surf-0) 25%, transparent);
  transition: opacity var(--epg-dur-fast) var(--epg-ease-standard);
}

.epg-faixa__seta--anterior { inset-inline-start: 0; }

.epg-faixa__seta--proximo {
  inset-inline-end: 0;
  background: linear-gradient(270deg, var(--epg-surf-0) 25%, transparent);
}

.epg-faixa__seta:hover { color: var(--epg-noar); }
.epg-faixa__seta[hidden] { display: none; }

/* --------------------------------------------------------------------------
   3. CARTÃO DE PÔSTER
   -------------------------------------------------------------------------- */

.epg-poster {
  --epg-poster-w: 9.5rem;

  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--epg-space-2xs);
  flex: 0 0 var(--epg-poster-w);
  width: var(--epg-poster-w);
  scroll-snap-align: start;
  cursor: pointer;
  transition: transform var(--epg-dur-fast) var(--epg-ease-standard);
}

.epg-poster:hover,
.epg-poster:focus-visible {
  transform: translateY(-4px);
}

.epg-poster:focus-visible {
  outline: var(--epg-foco);
  outline-offset: 4px;
  border-radius: var(--epg-radius-md);
}

/* Capa: proporção 2:3 fixa — o cartaz é o protagonista aqui */
.epg-poster__capa {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border-radius: var(--epg-radius-md);
  border: 1px solid var(--epg-line);
  background: var(--epg-surf-3);
  box-shadow: var(--epg-elev-2);
  transition: border-color var(--epg-dur-fast) var(--epg-ease-standard),
              box-shadow var(--epg-dur-fast) var(--epg-ease-standard);
}

.epg-poster:hover .epg-poster__capa {
  border-color: var(--epg-line-forte);
  box-shadow: var(--epg-elev-3);
}

.epg-poster__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Sem cartaz: iniciais grandes sobre a cor do gênero */
.epg-poster__fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-family: var(--epg-font-display);
  font-size: var(--epg-fs-2xl);
  font-weight: var(--epg-fw-bold);
  letter-spacing: var(--epg-ls-tight);
  color: var(--epg-txt-3);
  background:
    radial-gradient(120% 80% at 50% 0%,
      color-mix(in srgb, var(--epg-genre-atual) 22%, transparent), transparent 70%),
    var(--epg-surf-2);
}

/* Selos sobre a capa */
.epg-poster__noar {
  position: absolute;
  top: var(--epg-space-2xs);
  inset-inline-start: var(--epg-space-2xs);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: var(--epg-radius-pill);
  background: var(--epg-noar-fundo-forte, var(--epg-noar-fundo));
  border: 1px solid var(--epg-noar-borda);
  font-size: var(--epg-fs-3xs);
  font-weight: var(--epg-fw-semibold);
  color: var(--epg-noar-claro);
}

.epg-poster__nota {
  position: absolute;
  top: var(--epg-space-2xs);
  inset-inline-end: var(--epg-space-2xs);
}

.epg-poster__progresso {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 3px;
  border-radius: 0;
}

/* Destaque de quem está no ar */
.epg-poster--agora .epg-poster__capa {
  border-color: var(--epg-noar-borda);
  box-shadow: var(--epg-elev-2);
}

/* Informações abaixo da capa */
.epg-poster__info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.epg-poster__titulo {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  overflow: hidden;
  font-size: var(--epg-fs-sm);
  font-weight: var(--epg-fw-semibold);
  line-height: var(--epg-lh-snug);
  color: var(--epg-txt);
}

/* Rodapé de emissora: marca do canal + horário, separados por um fio na cor
   do gênero. É o que ancora o cartaz a "quem está exibindo". */
.epg-poster__emissora {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--epg-space-2xs);
  min-width: 0;
  margin-top: 3px;
  padding-top: 5px;
  border-top: 1px solid var(--epg-line);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--epg-dur-fast) var(--epg-ease-standard);
}

.epg-poster:hover .epg-poster__emissora {
  border-top-color: color-mix(in srgb, var(--epg-genre-atual) 55%, transparent);
}

/* A logo fica SOLTA (sem chip/caixa): apenas um invólucro sem decoração,
   para não parecer botão. */
.epg-poster__marca {
  display: flex;
  align-items: center;
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
}

.epg-poster__emissora:focus-visible {
  outline: var(--epg-foco);
  outline-offset: 3px;
  border-radius: var(--epg-radius-sm);
}

/* A logo respeita a proporção original (as marcas têm larguras muito
   diferentes): altura fixa, largura livre até o limite.
   O drop-shadow substitui a antiga caixa: dá contorno às marcas escuras sobre
   o fundo escuro sem desenhar nenhum retângulo em volta. */
.epg-poster__logo {
  display: block;
  height: 1.125rem;
  width: auto;
  max-width: 4.25rem;
  object-fit: contain;
  opacity: 0.94;
  filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.55));
  transition: opacity var(--epg-dur-fast) var(--epg-ease-standard);
}

.epg-poster__emissora:hover .epg-poster__logo { opacity: 1; }

/* Canal sem arquivo de logo: sigla com a cor do gênero */
.epg-poster__sigla {
  font-family: var(--epg-font-mono);
  font-size: var(--epg-fs-3xs);
  font-weight: var(--epg-fw-semibold);
  letter-spacing: var(--epg-ls-wide);
  line-height: 1;
  color: var(--epg-genre-atual);
  white-space: nowrap;
}

.epg-poster__hora {
  flex: none;
  font-family: var(--epg-font-mono);
  font-size: var(--epg-fs-3xs);
  font-weight: var(--epg-fw-medium);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--epg-ls-wide);
  color: var(--epg-txt-2);
}

/* --------------------------------------------------------------------------
   4. RESPONSIVO / MOVIMENTO
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .epg-poster { --epg-poster-w: 8rem; }
  .epg-faixa__titulo { font-size: var(--epg-fs-md); }
}

@media (max-width: 600px) {
  .epg-poster { --epg-poster-w: 6.75rem; }
  .epg-poster__logo { height: 0.9375rem; max-width: 3.25rem; }
  .epg-faixa__cabecalho,
  .epg-faixa__trilho { padding-inline: var(--epg-space-md); }
  /* Em tela pequena a seta atrapalha mais do que ajuda: o toque já rola. */
  .epg-faixa__seta { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .epg-faixa__trilho { scroll-behavior: auto; }
  .epg-poster { transition: none; }
  .epg-poster:hover,
  .epg-poster:focus-visible { transform: none; }
}

/* ==========================================================================
   VISÃO LISTA2 — uma faixa horizontal por canal
   Reusa .epg-faixa/.epg-faixa__trilho da visão pôster; o que muda é o
   cabeçalho (a marca do canal no lugar do nome do gênero) e o espaçamento,
   mais compacto porque são dezenas de faixas empilhadas.
   ========================================================================== */

.epg-canais {
  display: flex;
  flex-direction: column;
  gap: var(--epg-space-lg);
  width: 100%;
  max-width: var(--epg-max-w);
  margin-inline: auto;
  /* 10px, não o recuo cheio do container: a intenção continua sendo encostar à
     esquerda, mas sem a logo colar na borda da janela. Este container não usa
     .epg-container, e o <main> não tem recuo -- não havia nenhum. */
  padding-inline: 0.625rem;
}

.epg-faixa--canal {
  gap: var(--epg-space-2xs);
  padding-block-end: var(--epg-space-sm);
  border-bottom: 1px solid var(--epg-line-grade, var(--epg-line));
}

.epg-faixa--canal:last-child {
  border-bottom: none;
}

/* Faixa do canal: MARCA a esquerda, trilho de cartazes a direita. */
.epg-faixa--canal {
  flex-direction: row;
  align-items: center;
  gap: var(--epg-space-md);
  /* Colado a esquerda: o recuo do container ja separa da borda da janela. */
  padding-inline: 0;
}

.epg-faixa__cabecalho--canal {
  flex: 0 0 auto;
  width: 6.5rem;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* A marca fica SOLTA: sem caixa, sem fundo, sem borda -- nao e um botao. */
.epg-canalfaixa {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  color: inherit;
  text-decoration: none;
}

.epg-canalfaixa:focus-visible {
  outline: var(--epg-foco);
  outline-offset: 4px;
  border-radius: var(--epg-radius-sm);
}

/* Logo grande: altura fixa, largura livre (as marcas tem proporcoes diferentes) */
.epg-canalfaixa__logo {
  display: block;
  width: 100%;
  max-height: 3.75rem;
  object-fit: contain;
  /* Sem a caixa clara por tras, marcas escuras precisam de contorno proprio. */
  filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.6));
  opacity: 0.95;
  transition: opacity var(--epg-dur-fast) var(--epg-ease-standard);
}

.epg-canalfaixa:hover .epg-canalfaixa__logo {
  opacity: 1;
}

.epg-canalfaixa__sigla {
  font-family: var(--epg-font-display);
  font-size: var(--epg-fs-lg);
  font-weight: var(--epg-fw-bold);
  letter-spacing: var(--epg-ls-tight);
  color: var(--epg-txt-2);
}

/* O trilho ocupa o resto da linha */
.epg-faixa--canal .epg-faixa__viewport {
  flex: 1 1 auto;
  min-width: 0;
}

.epg-faixa--canal .epg-faixa__trilho {
  padding-inline: 0;
  mask-image: none;
}

/* Cartões menores: aqui a leitura é "o que vem a seguir", não vitrine. */
.epg-faixa--canal .epg-poster {
  --epg-poster-w: 7.5rem;
}

.epg-faixa--canal .epg-faixa__trilho {
  padding-block: 0 var(--epg-space-2xs);
}

/* Sem o rodapé de emissora, o horário vira a legenda do cartão. */
.epg-poster__meta-hora {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 3px;
  padding-top: 4px;
  border-top: 1px solid var(--epg-line);
  font-family: var(--epg-font-mono);
  font-size: var(--epg-fs-3xs);
  font-variant-numeric: tabular-nums;
  color: var(--epg-txt-3);
}

/* O primeiro cartão da faixa é o que está no ar: leve destaque de posição. */
.epg-faixa--canal .epg-poster--agora .epg-poster__titulo {
  color: var(--epg-txt);
}

/* --------------------------------------------------------------- celular --
   No telefone a marca passa a ocupar UMA LINHA e os cartazes vêm abaixo.
   Lado a lado, a coluna da logo comia quase um terço da largura útil e sobrava
   pouco para o que interessa: o que está passando. Empilhado, o trilho usa a
   tela inteira. */
@media (max-width: 600px) {
  .epg-faixa--canal {
    flex-direction: column;
    align-items: stretch;
    padding-inline: var(--epg-space-md);
    gap: var(--epg-space-2xs);
  }

  /* A logo volta à largura natural: esticada numa linha inteira, ficaria enorme. */
  .epg-faixa__cabecalho--canal {
    width: auto;
    justify-content: flex-start;
  }

  .epg-canalfaixa {
    width: auto;
    justify-content: flex-start;
  }

  /* Numa linha só a logo pode crescer: não disputa mais espaço com o trilho. */
  .epg-canalfaixa__logo {
    width: auto;
    max-width: 70%;
    max-height: 3rem;
  }

  .epg-faixa--canal .epg-poster { --epg-poster-w: 6rem; }
}

/* ==========================================================================
   LOGOS PARA FUNDO ESCURO
   Boa parte dos logos públicos é desenhada para fundo claro (tinta preta sobre
   transparente) e simplesmente sumia no tema escuro. bin/logos-audit.php mede
   o brilho de cada arquivo e marca o ajuste necessário em data-ajuste.
   ========================================================================== */

/* Tinta preta monocromática: inverter devolve um logo branco fiel à marca,
   sem inventar cor onde não existe. */
[data-ajuste="inverter"] {
  filter: invert(1) brightness(1.9);
}

/* Colorido porém escuro: inverter destruiria a cor da marca. Aqui só
   clareamos e reforçamos o contorno. */
[data-ajuste="realcar"] {
  filter: brightness(1.5) contrast(1.15) drop-shadow(0 0 1px rgb(255 255 255 / 0.45));
}

/* Programa oculto pelo filtro de nota: sai de cena MAS mantém o espaço, para
   a sequência de horários da faixa não se reorganizar a cada filtro. */
.epg-poster--oculto {
  visibility: hidden;
}