/* cartao-ep.css: o episódio em miniatura. A .miniatura-redonda é o círculo verde com o número do episódio (o podcast
   ainda não tem foto por episódio); o .cartao-ep é o cartãozinho creme com ela à esquerda ("Do mesmo tema"), e a
   .cartoes junta os cartões: no telefone eles correm de lado por dentro, no computador ficam em grade.
   Depende de: base.css. Telefone nas regras soltas, computador no @media do fim. */

.miniatura-redonda {
  display: grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: 50%;
  background: var(--floresta); color: var(--branco);
  font-size: 20px; font-weight: 800; letter-spacing: -0.02em;
}

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

.cartao-ep__link {
  display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 2px 12px; align-items: start; height: 100%;
  padding: 14px; border-radius: var(--raio); background: var(--creme-claro);
  box-shadow: 0 2px 0 var(--linha); text-decoration: none;
}
.cartao-ep__link:hover { box-shadow: 0 0 0 3px var(--verde-claro); }

.cartao-ep__link .miniatura-redonda { grid-row: span 2; width: 48px; height: 48px; font-size: 18px; }

.cartao-ep__rotulo { font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--texto-suave); }

.cartao-ep__titulo { font-size: 16px; font-weight: 700; line-height: 1.25; }

/* ------------------------------------------------------------ a fileira de cartões */

.cartoes {
  display: grid; grid-auto-flow: column; grid-auto-columns: 72%; gap: 12px;
  overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px;
}
.cartoes > li { scroll-snap-align: start; }

@media (min-width: 900px) {
  .cartoes { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; overflow: visible; }
  .cartao-ep__link { padding: 18px; }
  .cartao-ep__titulo { font-size: 17px; }
}