/* ========================================================================== FAIXA DE VÍDEOS — prefixo fvid- Índice de uma série de vídeos curtos: grade de três colunas, capa 16:9 com título e duração DENTRO da imagem, e um por seção que recebe o reprodutor. Tokens usados: --pad --max só via .wrap do core; nada aqui mexe na coluna --display --sans face do título do card e do rótulo de série --ease curva única do projeto --accent --dark anel de play aceso: fundo de marca, glifo escuro --dark-rgb véu em gradiente da legenda sobre a capa --dark-2 fundo da caixa da capa até a imagem existir --light tinta do que está sobre a imagem (ver ILHA ESCURA) --fg --fg-2 tinta da legenda do palco, dentro do diálogo --rule --rule-2 borda do card em repouso e sob o ponteiro --radius-media canto do card e do quadro do vídeo --radius-pill anel de play e botão de fechar --veil véu do ::backdrop, pintado pela .dialog-casca do core ILHA ESCURA. O card é uma imagem, e o texto vive dentro dela: o que está sobre a capa lê --light, nunca --fg. É o que permite a mesma faixa rodar numa dobra .sec-paper sem virar texto escuro sobre véu escuro. Fora da imagem (o cabeçalho da dobra, a legenda do palco) o escopo de tom manda. Mesma decisão do midia/galeria-scroll-horizontal. PARAFUSOS (custom properties do próprio componente, §3): --fvid-min largura mínima da coluna — é ela que decide 3/2/1 --fvid-gap vão da grade --fvid-tempo duração das transições de INTERAÇÃO (hover, foco) --fvid-play-size diâmetro do anel de play --fvid-entrada duração da entrada do palco no diálogo --fvid-veil-mix grau do véu do ::backdrop --fvid-cromo altura que a legenda e os respiros comem acima do quadro — entra na conta que dimensiona o palco --fvid-pw/--fvid-ph a proporção da capa e do quadro, em dois números (16 e 9). Dois e não um "16 / 9" porque o palco usa a razão numa conta de calc(), e aspect-ratio aceita os dois números separados por barra ========================================================================== */ .fvid{ /* A GRADE NÃO TEM MEDIA QUERY DE COLUNA, e isso é de propósito: com `auto-fill` e este mínimo, a conta do próprio grid decide. coluna de 1096px (--max 1240 menos --pad) -> 3 colunas ~660 a 1000px -> 2 colunas abaixo de ~660px -> 1 coluna 3 * 320 + 2 * 26 = 1012, que cabe em 1096; a quarta não caberia. Mexer em --fvid-min move os três limiares de uma vez. */ --fvid-min:320px; --fvid-gap:clamp(16px,2vw,26px); /* --dur do core é .9s: certo para entrada de dobra, lento para a capa responder ao ponteiro. Duração de interação é local. */ --fvid-tempo:.55s; --fvid-play-size:46px; --fvid-entrada:.5s; --fvid-veil-mix:88%; --fvid-cromo:108px; --fvid-pw:16; --fvid-ph:9; } /* A primitiva .sec-head do core centra a PRÓPRIA caixa; os filhos dela continuam com o max-width de 22ch e 60ch encostado à esquerda. Onze componentes escrevem estas duas linhas (grid-equipe, acordeao-faq, carrossel-anel-3d, planos-honorarios…) — está anotado para promoção. */ .fvid-head .sec-title, .fvid-head .sec-lead{margin-inline:auto} .fvid-grade{ display:grid; grid-template-columns:repeat(auto-fill,minmax(var(--fvid-min),1fr)); gap:var(--fvid-gap); margin-block-start:clamp(34px,5vh,56px); } /* Sem isto, um título longo dentro de uma coluna 1fr faz a coluna crescer além da fração — o mínimo automático de um item de grade é o conteúdo. */ .fvid-item{min-inline-size:0} /* ---------------------------------------------------------------- o card */ /* É um