/* cartao-ep.css: a miniatura 16:9 e os dois cartões que a usam. A .miniatura faz o papel da imagem do vídeo (o podcast
   ainda não tem foto por episódio): um quadro grafite com uma luz violeta no canto de cima, o número grande e a duração
   numa etiqueta preta no canto de baixo à direita, como nos vídeos. O .cartao-ep é o da grade (título em até duas
   linhas, tema e data em cinza); o .mini é o da coluna "a seguir" (miniatura pequena à esquerda, texto à direita).
   Depende de: base.css (--quadro-luz e --quadro-fundo). Telefone nas regras soltas, computador no @media do fim. */

.miniatura {
  position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: var(--raio);
  background: var(--quadro-luz), var(--quadro-fundo);
  color: var(--texto);
}

.miniatura__rotulo {
  position: absolute; top: 10px; left: 12px;
  font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-suave);
}

.miniatura__numero {
  position: absolute; left: 10px; bottom: 4px;
  font-size: 64px; font-weight: 700; line-height: 1; letter-spacing: -0.06em;
}

.miniatura__duracao {
  position: absolute; right: 8px; bottom: 8px; padding: 2px 5px; border-radius: 4px;
  background: var(--etiqueta); color: var(--texto);
  font-size: 12px; font-weight: 600; line-height: 1.3; font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------ o cartão da grade */

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

.cartao-ep__link { display: grid; gap: 10px; text-decoration: none; }

.cartao-ep__titulo {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  font-size: 16px; font-weight: 600; line-height: 1.35; letter-spacing: -0.01em;
}
.cartao-ep__link:hover .cartao-ep__titulo { text-decoration: underline; text-underline-offset: 3px; }

.cartao-ep__meta { margin-top: -4px; font-size: 14px; color: var(--texto-suave); }

/* ------------------------------------------------------------ o cartão pequeno da coluna "a seguir" */

.mini { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 10px; text-decoration: none; }

.mini .miniatura { border-radius: var(--raio-pequeno); }
.mini .miniatura__rotulo { display: none; }
.mini .miniatura__numero { left: 8px; bottom: 4px; font-size: 36px; }
.mini .miniatura__duracao { right: 6px; bottom: 6px; font-size: 11px; }

.mini__texto { display: grid; align-content: start; gap: 2px; }

.mini__rotulo { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--texto-suave); }

.mini__titulo {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  font-size: 14px; font-weight: 600; line-height: 1.35;
}
.mini:hover .mini__titulo { text-decoration: underline; text-underline-offset: 3px; }

.mini__meta { font-size: 12px; color: var(--texto-suave); }

@media (min-width: 900px) {
  .miniatura__numero { font-size: 80px; }
  .mini { grid-template-columns: 168px minmax(0, 1fr); }
}