/* cartao-ep.css: o episódio em miniatura. O cartão é branco, de cantos bem redondos, com um fio rosa-chá em volta;
   dentro, a .miniatura faz o papel da foto do episódio (o podcast ainda não tem foto por episódio): um quadro vinho
   com o número grande em rosa-chá e o tema. A .fileira junta cartões lado a lado ("Comece por aqui", "Do mesmo tema");
   no telefone ela corre de lado por dentro, como no site do Mel Robbins.
   Depende de: base.css. Telefone nas regras soltas, computador no @media do fim. */

.miniatura {
  position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden;
  border-radius: var(--raio-medio);
  background:
    radial-gradient(110% 90% at 88% 10%, rgba(232, 180, 176, .35), transparent 55%),
    linear-gradient(155deg, var(--vinho), var(--vinho-noite));
  color: var(--branco);
}

.miniatura__tema {
  position: absolute; top: 12px; left: 14px;
  padding: 3px 10px; border-radius: 999px; background: rgba(247, 230, 227, .16);
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}

.miniatura__numero {
  position: absolute; right: 14px; bottom: 4px;
  font-size: 60px; font-weight: 700; line-height: 1; letter-spacing: -0.05em; color: var(--rosa-cha);
}

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

.cartao-ep { min-width: 0; }

.cartao-ep__link {
  display: grid; gap: 6px; height: 100%; padding: 10px 10px 18px;
  border: 1px solid var(--linha); border-radius: var(--raio); background: var(--branco);
  text-decoration: none;
}
.cartao-ep__link:hover { border-color: var(--rosa-cha); box-shadow: 0 10px 28px rgba(122, 31, 61, .10); }

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

.cartao-ep__titulo { margin: 0 8px; color: var(--vinho); font-size: 17px; font-weight: 700; line-height: 1.25; }

.cartao-ep__link:hover .cartao-ep__titulo { text-decoration: underline; text-decoration-color: var(--rosa-cha); text-underline-offset: 4px; }

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

.fileira {
  display: grid; grid-auto-flow: column; grid-auto-columns: 72%; 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(200px, 1fr)); overflow: visible; gap: 22px; }
  .fileira--larga { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
  .fileira--larga .miniatura__numero { font-size: 92px; }
  .fileira--larga .cartao-ep__titulo { font-size: 21px; }
  .cartao-ep__link { padding: 12px 12px 22px; border-radius: 32px; }
  .cartao-ep__link .miniatura { border-radius: 22px; }
}