/* cartao-ep.css: o episódio em cartão, feito só de tipografia: sem bloco de cor e sem miniatura. O tema em itálico,
   o título grande, o começo do resumo e, no pé, o número e a duração. A .fileira põe os cartões lado a lado entre
   dois fios pretos, com um fio fino separando um do outro ("Comece por aqui", "Do mesmo tema"); no telefone ela
   corre de lado, por dentro.
   Depende de: base.css. Telefone nas regras soltas, computador no @media do fim. */

.fileira {
  display: grid; grid-auto-flow: column; grid-auto-columns: 78%;
  overflow-x: auto; scroll-snap-type: x mandatory;
  border-top: 1px solid var(--fio); border-bottom: 1px solid var(--fio);
}

.fileira > li { scroll-snap-align: start; padding: 20px 18px 22px; border-left: 1px solid var(--fio); }
.fileira > li:first-of-type { padding-left: 0; border-left: 0; }

/* ------------------------------------------------------------ o cartão */

.cartao-ep__link { display: flex; flex-direction: column; gap: 10px; height: 100%; text-decoration: none; }

.cartao-ep__tema { font-family: var(--letra-titulo); font-size: 18px; font-style: italic; font-weight: 500; color: var(--cinza); }

.cartao-ep__titulo { font-family: var(--letra-titulo); font-size: 25px; font-weight: 600; line-height: 1.1; }

.cartao-ep__link:hover .cartao-ep__titulo { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }

.cartao-ep__resumo {
  display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
  font-size: 15px; line-height: 1.5; color: var(--cinza);
}

.cartao-ep__rotulo {
  margin-top: auto; padding-top: 6px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
}

@media (min-width: 900px) {
  .fileira { grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); overflow: visible; }
  .fileira > li { padding: 26px 24px 28px; }
  .fileira > li:last-of-type { padding-right: 0; }
  .fileira--larga { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fileira--larga > li { padding: 32px 32px 34px; }
  .fileira--larga .cartao-ep__titulo { font-size: 32px; }
  .fileira--larga .cartao-ep__resumo { font-size: 16px; }
}