/* cartao-ep.css: o episódio em miniatura. A .miniatura faz o papel da foto do episódio (o podcast ainda não tem
   foto por episódio): um quadro azul-cobalto com um sol nascendo no canto de baixo, o número grande em branco e o tema.
   O .cartao-ep é um cartão branco de cantos redondos que guarda a miniatura, o rótulo e o título, pra assentar no céu.
   A .fileira junta cartões lado a lado ("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. */

.miniatura {
  position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: 16px;
  background:
    radial-gradient(circle at 88% 116%, var(--sol) 0 23%, rgba(255, 207, 63, .26) 23.5%, transparent 40%),
    linear-gradient(165deg, var(--cobalto), var(--cobalto-fundo));
  color: var(--branco);
}

.miniatura__tema {
  position: absolute; top: 10px; left: 12px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; opacity: .85;
}

.miniatura__numero {
  position: absolute; left: 12px; bottom: 2px;
  font-size: 56px; font-weight: 800; line-height: 1; letter-spacing: -0.04em;
}

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

.cartao-ep__link {
  display: grid; gap: 6px; height: 100%; padding: 10px 10px 16px; border-radius: var(--raio);
  background: var(--branco); color: var(--tinta); text-decoration: none;
  box-shadow: 0 6px 20px rgba(20, 33, 61, .06);
}

.cartao-ep__rotulo { margin: 8px 6px 0; font-size: 13px; font-weight: 700; color: var(--tinta-fraca); }

.cartao-ep__titulo { margin-inline: 6px; font-size: 17px; font-weight: 800; line-height: 1.25; color: var(--cobalto); }

.cartao-ep__link:hover .cartao-ep__titulo { text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------------------------------------ a fileira */

.fileira {
  display: grid; grid-auto-flow: column; grid-auto-columns: 64%; gap: 14px;
  overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px;
}
.fileira > li { scroll-snap-align: start; }

@media (min-width: 900px) {
  .fileira { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); overflow: visible; gap: 20px; }
  .fileira--larga { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
  .fileira--larga .miniatura__numero { font-size: 92px; left: 16px; }
  .fileira--larga .cartao-ep__titulo { font-size: 21px; }
}