/* temas.css: a aba Temas do canal, com as categorias do que o estúdio grava. Cada categoria é um cartão-foto: a foto
   do estúdio arrumado pra ela, o pé escurecendo em degradê (o mesmo jeito do vídeo do alto) e, por cima, o nome, a
   frase e quantos trabalhos tem numa etiqueta mostarda. O cartão leva pra lista de episódios filtrada.
   No computador a primeira categoria ocupa a largura toda e as outras vêm duas por linha (first-of-type, porque o
   primeiro filho da lista é o molde, o <template>).
   Depende de: base.css (cores e letra). Telefone nas regras soltas, computador no @media do fim. */

.temas { padding: 32px 0 48px; }

.temas__titulo { font-size: 26px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; }

.temas__texto { max-width: 60ch; margin-top: 8px; font-size: 15px; color: var(--texto-suave); }

.categorias { display: grid; gap: 16px; margin-top: 24px; }

.categoria__link {
  position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; isolation: isolate;
  border-radius: var(--raio); background: var(--preto); color: var(--branco); text-decoration: none;
}

.categoria__foto {
  position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}
.categoria__link:hover .categoria__foto { transform: scale(1.04); }

/* o pé escurece até quase preto, pra o texto ler em cima de qualquer foto */
.categoria__link::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(17, 17, 17, 0) 30%, rgba(17, 17, 17, .75) 66%, rgba(17, 17, 17, .95) 100%);
}

.categoria__texto { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 6px; padding: 18px; }

.categoria__nome { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }

.categoria__descricao { max-width: 48ch; font-size: 14px; line-height: 1.45; color: rgba(255, 255, 255, .86); }

.categoria__quantos {
  justify-self: start; margin-top: 4px; padding: 3px 10px; border-radius: 999px;
  background: var(--mostarda); color: var(--preto); font-size: 12px; font-weight: 800;
}

@media (prefers-reduced-motion: reduce) {
  .categoria__foto { transition: none; }
}

@media (min-width: 900px) {
  .temas { padding: 44px 0 64px; }
  .temas__titulo { font-size: 32px; }
  .temas__texto { font-size: 16px; }
  .categorias { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 32px; }
  .categoria__link { aspect-ratio: 16 / 9; }
  .categoria:first-of-type { grid-column: 1 / -1; }
  .categoria:first-of-type .categoria__link { aspect-ratio: 21 / 8; }
  .categoria__texto { padding: 24px 28px; }
  .categoria__nome { font-size: 28px; }
  .categoria:first-of-type .categoria__nome { font-size: 36px; }
  .categoria__descricao { font-size: 15px; }
}