/* 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 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. 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: linear-gradient(135deg, var(--grafite-claro), var(--grafite) 70%);
  color: var(--branco);
}

.miniatura__rotulo {
  position: absolute; top: 10px; left: 12px;
  font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; opacity: .7;
}

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

.miniatura__duracao {
  position: absolute; right: 8px; bottom: 8px; padding: 2px 5px; border-radius: 4px;
  background: var(--etiqueta); font-size: 12px; font-weight: 500; 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: 500; line-height: 1.3;
}
.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: 500; 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: 500; line-height: 1.3;
}
.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); }
}