/* faixa-video.css: a faixa verde-floresta do alto do início e do Sobre, com cantos redondos e margem (não encosta
   nas bordas da janela). Dentro dela, em branco: o nome do programa, o vídeo da câmera se montando em loop e, no
   início, a frase do programa. A faixa desce mais que o conteúdo pra bolha do último episódio nascer dela (inicio.css).
   Depende de: base.css. Telefone nas regras soltas, computador no @media do fim. */

.faixa-video { padding: 12px var(--margem) 0; }

.faixa-video__dentro {
  padding: 24px 16px 112px; border-radius: var(--raio);
  background: var(--floresta); color: var(--branco); text-align: center;
}

.faixa-video__nome { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; }

.faixa-video__quadro {
  position: relative; margin-top: 16px; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: 18px; background: var(--floresta-escuro);
}

.faixa-video__video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }

.faixa-video__credito {
  position: absolute; left: 12px; bottom: 8px;
  font-size: 11px; color: rgba(255, 255, 255, .75);
}

.faixa-video__frase { margin: 20px auto 0; max-width: 24ch; font-size: 20px; font-weight: 700; line-height: 1.3; }

.faixa-video__quem { margin-top: 10px; font-size: 14px; color: var(--verde-claro); }

/* no Sobre a faixa é mais baixa: só o nome e o vídeo, mais largo que alto */
.faixa-video--baixa .faixa-video__dentro { padding-bottom: 24px; }
.faixa-video--baixa .faixa-video__quadro { aspect-ratio: 2 / 1; }

@media (min-width: 900px) {
  .faixa-video { padding-top: 16px; }
  .faixa-video__dentro { padding: 36px 48px 140px; border-radius: 40px; }
  .faixa-video__nome { font-size: 48px; }
  .faixa-video__quadro { width: min(880px, 100%); margin: 24px auto 0; border-radius: 28px; }
  .faixa-video__frase { margin-top: 28px; max-width: 28ch; font-size: 28px; }
  .faixa-video__quem { font-size: 16px; }
  .faixa-video--baixa .faixa-video__dentro { padding-bottom: 40px; }
  .faixa-video--baixa .faixa-video__quadro { aspect-ratio: 3 / 1; }
}