/* ==========================================================================
   site-video.css: secao de video de demonstracao.
   Parte do site.css (tokens, base e o que toda pagina usa vivem la). Este
   arquivo so entra na pagina que tem esta peca: quem decide e o SiteCss, a
   partir das secoes e mockups que a pagina desenhou. Carrega DEPOIS do
   site.css, na ordem fixa do SiteCss::ORDER (a mesma ordem em que as regras
   estavam no arquivo unico, para a cascata nao mudar).
   ========================================================================== */

/* ── video ────────────────────────────────────────────────────────────────
   Secao de video (sections/video.php). A moldura e a MESMA do frame do hero:
   gradiente da marca, brilho por cima e a tela clara por dentro. A unica
   diferenca e que aqui ela fecha nos quatro lados, porque a secao vive no
   meio da pagina e nao sangra na borda de baixo como a do hero.
   Sem sombra em lugar nenhum: o recorte e a borda de 1px da tela interna. */
/* O <figure> traz margem do navegador (1em 40px) e ela precisa cair. Mas
   .st-after-head, que da o respiro entre o cabecalho da secao e o quadro, e
   uma classe SOLTA declarada la em cima (secao 4): com a mesma especificidade
   e vindo depois, o margin:0 daqui zerava o respiro e o video encostava no
   texto. Por isso a combinacao e repetida abaixo, com especificidade maior. */
.st-video { margin: 0; }

.st-video.st-after-head { margin-top: 40px; }

.st-video__frame {
  position: relative;
  padding: 28px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--frame-1), var(--frame-2));
  overflow: hidden;
}

/* Transborda 10% de cada lado, igual ao hero: com inset 0 a borda do radial
   entra na tela como uma faixa de corte reto. */
.st-video__glow {
  position: absolute;
  inset: 0 -10%;
  background: radial-gradient(60% 80% at 75% 0%, var(--frame-glow), transparent 70%);
  opacity: .55;
  pointer-events: none;
}

.st-video__shot {
  position: relative;
  width: 880px;
  max-width: 100%;
  margin: 0 auto;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 8px;
  overflow: hidden;
  /* Fundo escuro por baixo do video: enquanto o poster nao pinta, um retangulo
     branco piscava dentro da moldura da marca. */
  background: #101114;
}

/* aspect-ratio segura a altura antes de o poster chegar (nada de salto no
   layout). O video e 16:9; o atributo width/height do HTML cobre o navegador
   que ignora a propriedade. */
.st-video__el {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: #101114;
}

.st-video__caption { margin-top: 16px; text-align: center; }

@media (max-width: 768px) {
  .st-video__frame { padding: 16px; }
}

@media (max-width: 480px) {
  .st-video__frame { padding: 12px; border-radius: 8px; }
  .st-video__caption { margin-top: 12px; text-align: left; }
}