/* 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): uma capa grafite com um brilho no canto, o número grande e a duração numa etiqueta
   preta; ao passar o mouse a etiqueta dá lugar ao play verde redondo, como nos aplicativos de música. O .cartao-ep é
   o das estantes (cartão cinza que clareia, título em até duas linhas, data e duração em cinza); o .mini é o da coluna
   da página do episódio (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: 6px;
  background:
    radial-gradient(circle at 88% 12%, rgba(255, 255, 255, .16), transparent 46%),
    linear-gradient(155deg, var(--superficie-apertada), var(--quase-preto) 78%);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .5);
  color: var(--texto);
}

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

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

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

/* o play verde que aparece no lugar da duração quando o mouse passa pelo cartão (só enfeite: o cartão inteiro é o link) */
.miniatura__play {
  position: absolute; right: 8px; bottom: 8px; display: none; place-items: center; width: 44px; height: 44px;
  border-radius: 50%; background: var(--verde); color: var(--sobre-o-verde); box-shadow: 0 8px 16px rgba(0, 0, 0, .4);
}
.miniatura__play svg { width: 20px; height: 20px; fill: currentColor; }

/* ------------------------------------------------------------ o cartão das estantes */

.cartao-ep { min-width: 0; scroll-snap-align: start; }

.cartao-ep__link {
  display: grid; align-content: start; gap: 6px; height: 100%; padding: 10px 10px 14px;
  border-radius: var(--raio); background: var(--superficie); text-decoration: none;
}
.cartao-ep__link:hover { background: var(--superficie-alta); }

.cartao-ep .miniatura { margin-bottom: 6px; }

.cartao-ep__titulo {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  font-size: 15px; font-weight: 700; line-height: 1.3;
}

.cartao-ep__meta { font-size: 13px; font-weight: 500; color: var(--texto-suave); }

/* ------------------------------------------------------------ o cartão pequeno da coluna do episódio */

.mini {
  display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 12px; padding: 6px;
  border-radius: var(--raio); text-decoration: none;
}
.mini:hover { background: var(--superficie-alta); }

.mini .miniatura { border-radius: 4px; box-shadow: none; }
.mini .miniatura__rotulo { display: none; }
.mini .miniatura__numero { left: 8px; font-size: 34px; }
.mini .miniatura__duracao { right: 5px; bottom: 5px; font-size: 11px; }

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

.mini__rotulo { font-size: 11px; font-weight: 700; letter-spacing: .08em; 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: 700; line-height: 1.3;
}

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

@media (min-width: 900px) {
  .miniatura__numero { font-size: 76px; }
  .cartao-ep__link { padding: 12px 12px 16px; }
  .cartao-ep__link:hover .miniatura__duracao { display: none; }
  .cartao-ep__link:hover .miniatura__play { display: grid; }
  .mini { grid-template-columns: 140px minmax(0, 1fr); }
}