/* grade.css: a grade de programação, a peça que dá a cara de TV ao desenho 15. A .grade-tv é a caixa com o cabeçalho
   marinho e o fio amarelo embaixo dele (a "GRADE DE PROGRAMAÇÃO" ao lado do vídeo no início, e "Anterior e próximo" e
   "Do mesmo tema" na coluna do episódio). A .linha-ep é cada linha do guia: o número grande numa casa cinza-gelo à
   esquerda, a data (e o tema ou o lado) em azul, o título e a duração à direita; no passar do mouse a casa do número
   fica azul. A .linha-ep--larga é a da lista completa, com o resumo embaixo do título.
   Depende de: base.css. Telefone nas regras soltas, computador no @media do fim. */

/* ------------------------------------------------------------ a caixa */

.grade-tv { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--linha); background: var(--branco); }

.grade-tv__cabeca {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 12px;
  padding: 10px 14px; border-bottom: var(--fio) solid var(--amarelo);
  background: var(--marinho); color: var(--branco);
}

.grade-tv__titulo { font-size: 20px; letter-spacing: .06em; text-transform: uppercase; color: var(--branco); }

.grade-tv__nota { font-size: 13px; color: var(--texto-no-escuro); white-space: nowrap; }

/* a lista ocupa o que sobra da caixa: quando a caixa estica (ao lado do vídeo), as linhas dividem a sobra igual */
.grade-tv__lista { flex: 1 1 auto; display: grid; }

.grade-tv__rodape { margin-top: auto; padding: 4px 14px; border-top: 1px solid var(--linha); }

/* ------------------------------------------------------------ a linha do guia */

/* a linha é grade de um item só: o link enche a altura toda e a casa do número desce até o fio, mesmo quando a
   linha estica (a vizinha da outra coluna é mais alta, ou a caixa ao lado do vídeo sobra) */
.linha-ep { display: grid; }

.linha-ep + .linha-ep { border-top: 1px solid var(--linha); }

.linha-ep__link {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: stretch;
  min-height: 64px; text-decoration: none;
}
.linha-ep__link:hover { background: var(--gelo); }

.linha-ep__numero {
  display: grid; place-items: center;
  background: var(--gelo); color: var(--marinho);
  font-family: var(--letra-titulo); font-size: 32px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
}
.linha-ep__link:hover .linha-ep__numero { background: var(--azul); color: var(--branco); }

.linha-ep__corpo { display: grid; align-content: center; gap: 2px; min-width: 0; padding: 8px 12px; }

.linha-ep__data {
  font-family: var(--letra-titulo); font-size: 14px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--azul); font-variant-numeric: tabular-nums;
}

.linha-ep__titulo {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  font-size: 15px; font-weight: 500; line-height: 1.3; color: var(--marinho);
}
.linha-ep__link:hover .linha-ep__titulo { text-decoration: underline; text-underline-offset: 3px; }

.linha-ep__duracao {
  align-self: center; padding-right: 12px;
  font-family: var(--letra-titulo); font-size: 16px; font-weight: 600; color: var(--texto-suave); white-space: nowrap;
}

/* o lado do vizinho, com a seta pra onde ele fica, sempre na frente (a data vem logo depois) */
[data-lado="anterior"] .linha-ep__lado::before { content: "← "; }
[data-lado="proximo"] .linha-ep__lado::before { content: "→ "; }

/* ------------------------------------------------------------ a linha larga, da lista completa */

.linha-ep--larga .linha-ep__link { grid-template-columns: 60px minmax(0, 1fr) auto; min-height: 96px; }

.linha-ep--larga .linha-ep__numero { font-size: 38px; }

.linha-ep--larga .linha-ep__corpo { align-content: start; gap: 4px; padding: 12px 14px; }

.linha-ep--larga .linha-ep__titulo { font-family: var(--letra-titulo); font-size: 21px; font-weight: 600; line-height: 1.15; }

.linha-ep__resumo {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  font-size: 14px; line-height: 1.45; color: var(--texto-suave);
}

.linha-ep--larga .linha-ep__duracao { align-self: start; padding-top: 12px; }

@media (min-width: 900px) {
  .grade-tv__titulo { font-size: 22px; }
  .linha-ep__link { grid-template-columns: 64px minmax(0, 1fr) auto; }
  .linha-ep__numero { font-size: 36px; }
  .linha-ep--larga .linha-ep__link { grid-template-columns: 76px minmax(0, 1fr) auto; min-height: 112px; }
  .linha-ep--larga .linha-ep__numero { font-size: 46px; }
  .linha-ep--larga .linha-ep__corpo { padding: 14px 16px; }
  .linha-ep--larga .linha-ep__titulo { font-size: 23px; }
  .linha-ep--larga .linha-ep__duracao { padding: 14px 16px 0 0; }
}