/* ==========================================================================
   DEPOIMENTO EM VIDEO — prefixo dvid-
   Grade de dois a quatro retratos. Nome e praca DENTRO da foto, citacao em
   texto abaixo dela, e o video num <dialog> que cresce do lugar da capa.

   Tokens usados:
     --dark --dark-2 --light   as superficies e a tinta sobre foto
     --fg-2 --fg-muted        citacao e ressalva, pelo escopo da secao
     --veil                   redeclarado no dialogo, para o ::backdrop da casca
     --accent                  realce do play no hover e no foco
     --display --ease          face do nome e a curva do projeto
     --radius-media            canto da capa e do quadro
     --radius-pill             o disco de play e o de fechar
     --veil                    veu do ::backdrop, pintado pela .dialog-casca

   Parafusos (custom properties deste componente):
     --dvid-cols        colunas da grade. 3 no padrao
     --dvid-gap         vao entre os cards
     --dvid-ratio       proporcao da capa. 4/5 (retrato)
     --dvid-frame-ratio proporcao do quadro do video no dialogo. 16/9
     --dvid-play        diametro do disco de play
     --dvid-dur         tempo da abertura do quadro
     --dvid-veil-mix    grau do veu do ::backdrop
     --dvid-poster-pos  recorte da foto, POR CARD, no style do <img>
     --dvid-dx --dvid-dy --dvid-s   a diferenca capa/quadro, ESCRITAS PELO SCRIPT

   O QUE NAO ESTA AQUI, porque vem do core: a coluna (.wrap), o ritmo
   (.sec-pad), o cabecalho centrado (.sec-head), o olho, o titulo, o apoio,
   o grao, o texto so' para leitor de tela (.visually-hidden) e a casca do
   <dialog> (.dialog-casca — padding, borda, fundo, limites de tamanho e o
   ::backdrop com --veil).
   ========================================================================== */

.dvid{
  --dvid-cols:3;
  --dvid-gap:clamp(20px,2.4vw,34px);
  --dvid-ratio:4 / 5;
  --dvid-frame-ratio:16 / 9;
  --dvid-play:64px;
  --dvid-dur:.52s;
  /* Veu MAIS ESCURO que os 78% da casa, pela mesma razao registrada no
     midia/showreel-expansivel: video pede sala escura. O numero e' o dele, e
     a medicao tambem — 88% contra 78% valem 11 pontos de L* sobre uma dobra
     clara e ZERO sobre dobra escura, porque o grau do veu so' se ve quando
     ha claro atras. Nao remedi: reaproveitei. */
  --dvid-veil-mix:88%;
}

/* O apoio do cabecalho e' um bloco de 60ch dentro de um .sec-head de 760px:
   sem isto ele encosta a esquerda com o texto centrado, e a dobra fica
   torta por dois pixels que ninguem sabe explicar. */
.dvid-lead{margin-inline:auto}

/* ---------------------------------------------------------------- a grade */
/* minmax(0,1fr) e nao 1fr: com 1fr o minimo automatico e' o conteudo, e uma
   citacao com uma palavra longa alarga a coluna e estoura a grade. */
.dvid-grid{
  display:grid;
  grid-template-columns:repeat(var(--dvid-cols),minmax(0,1fr));
  gap:var(--dvid-gap);
  margin-top:clamp(36px,5vh,56px);
}

/* O depoimento e' o unico conteudo da biblioteca que pode PRECISAR sair do ar
   de um dia para o outro: autorizacao de imagem vence, a pessoa pede para
   tirar. Quem faz isso poe [hidden] no <li> — e sem esta linha o
   display:flex de baixo venceria o [hidden] do navegador e o item
   continuaria na tela, com o atributo la' no inspetor (contrato §6.5). */
.dvid-item{display:flex;flex-direction:column}
.dvid-item[hidden]{display:none}

/* O involucro do reveal: o data-rv vive AQUI, e nao no <li>, para que o
   <dialog> fique IRMAO dele e nao descendente. O §5 do contrato manda isso
   para tudo que e' position:fixed, porque [data-rv] termina em filter:blur(0)
   e elemento com filtro e' bloco de contencao para descendente fixo.

   MEDIDO, e a medicao surpreende: um <dialog> modal escapa dessa contencao,
   porque vive na TOP LAYER. Com o dialogo dentro do involucro e o involucro
   carregando blur(10px) de verdade, a caixa saiu [0,0,1425,900] nos dois
   arranjos e o dialogo pintou nitido. A separacao fica por precaucao — custa
   uma <div> e continua valendo em navegador que trate a top layer como filho
   comum. Ver a ficha, secao Gotchas. */
.dvid-slot{display:flex;flex-direction:column;min-width:0}

/* ---------------------------------------------------------------- a capa */
.dvid-abrir{
  position:relative;
  display:block;
  inline-size:100%;
  padding:0;
  border:0;
  overflow:hidden;
  border-radius:var(--radius-media);
  aspect-ratio:var(--dvid-ratio);
  background:var(--dark-2);
  cursor:pointer;
  /* O <button> alinha o conteudo como texto: sem isto a foto ganha um filete
     de descida embaixo. Mesmo caso da .reel-capa do showreel. */
  line-height:0;
  /* Tinta da capa: e' texto sobre FOTO, e por isso nao le --fg. O escopo de
     tom manda no que esta' fora da imagem — a citacao e a ressalva —, nao no
     que esta' por cima dela, onde a unica referencia e' a propria foto. */
  color:var(--light);
  text-align:start;
}

.dvid-poster{
  inline-size:100%;
  block-size:100%;
  object-fit:cover;
  /* O recorte e' por pessoa, no style do <img>: retrato de estudio tem o
     rosto no terco de cima, frame de entrevista tem em outro lugar. Mesma
     receita do --depo-face-pos do prova/carrossel-depoimentos. */
  object-position:var(--dvid-poster-pos,50% 28%);
  display:block;
  transition:filter .5s var(--ease);
}

/* HOVER NÃO MEXE NA IMAGEM (CLAUDE.md §6, regra de 2026-09-29). O zoom de
   foto sob o ponteiro saiu: escala e deslocamento de mídia no hover mexem
   em recorte e composição, e é o que quebra a página quando o componente
   é colado noutro lugar. O retorno ficou em cor e brilho, que não mudam
   a geometria de nada. */
.dvid-abrir:hover .dvid-poster,
.dvid-abrir:focus-visible .dvid-poster{filter:brightness(.84)}

/* Veu mascarado em gradiente, como manda o §6: caixa reta com corte seco
   produz borda dura e le "chapado". A altura e' generosa porque o que ele
   sustenta sao duas linhas de texto, nao uma. */
.dvid-veu{
  position:absolute;
  inset-block-end:0;
  inset-inline:0;
  block-size:56%;
  background:linear-gradient(to top,color-mix(in srgb,var(--dark) 92%,transparent),transparent);
  mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.9) 46%,transparent 100%);
  -webkit-mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.9) 46%,transparent 100%);
  pointer-events:none;
}

/* O disco de play. Fica no centro optico da capa, um pouco acima do meio
   geometrico: embaixo mora o nome, e um disco centrado de verdade parece
   colado nele. */
.dvid-play{
  position:absolute;
  inset-block-start:44%;
  inset-inline-start:50%;
  transform:translate(-50%,-50%);
  display:grid;
  place-items:center;
  inline-size:var(--dvid-play);
  block-size:var(--dvid-play);
  border-radius:var(--radius-pill);
  border:1px solid color-mix(in srgb,var(--light) 48%,transparent);
  background:color-mix(in srgb,var(--dark) 34%,transparent);
  /* backdrop-filter sem mascara e' proibido em CAIXA RETA (§6) — o motivo da
     regra e' a borda dura. Num disco nao ha' borda reta para endurecer, e o
     precedente e' a .reel-play do showreel. */
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  transition:transform .5s var(--ease),background-color .5s var(--ease),border-color .5s var(--ease);
}

/* Sem salto no hover (CLAUDE.md §6, 2026-09-29): o disco acende e não
   cresce, a mesma regra do .btn do core — botão não salta nem move. */
.dvid-abrir:hover .dvid-play,
.dvid-abrir:focus-visible .dvid-play{
  background:color-mix(in srgb,var(--accent) 30%,transparent);
  border-color:color-mix(in srgb,var(--accent) 70%,transparent);
}

.dvid-play svg{
  inline-size:34%;
  /* O triangulo de play e' optico, nao geometrico: centrado pelo calculo ele
     parece deslocado para a esquerda. */
  margin-inline-start:8%;
}

/* ---------------------------------------------------------------- a identidade */
/* Nome e praca vao DENTRO da imagem, ancorados embaixo (§6: legenda de card
   de midia nao vira paragrafo abaixo da foto). Aqui isso vale duas vezes: o
   nome pertence ao rosto, e e' ele que responde "de quem e' o video que eu
   vou abrir" sem o olho sair do retrato.

   GRADE, e nao flex em duas linhas: a ordem do DOM e' nome, perfil, duracao,
   porque o nome acessivel do botao sai do texto dele lido em ordem de
   documento — e a duracao no meio da identidade atrapalha o anuncio. A grade
   devolve a duracao para a primeira linha, a direita, sem que o markup
   precise de um involucro por linha. */
.dvid-quem{
  position:absolute;
  inset-block-end:0;
  inset-inline:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  column-gap:10px;
  row-gap:4px;
  padding:clamp(16px,1.6vw,22px);
  line-height:1.3;
}

.dvid-name{
  grid-area:1 / 1;
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(1rem,1.35vw,1.16rem);
  letter-spacing:-.01em;
  color:var(--light);
}

/* A duracao nao e' enfeite: e' a informacao que decide o clique. "Assistir"
   sem duracao e' convite para o desconhecido. */
.dvid-dur{
  grid-area:1 / 2;
  align-self:baseline;
  font-size:.72rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:color-mix(in srgb,var(--light) 64%,transparent);
}

.dvid-perfil{
  grid-area:2 / 1 / 3 / 3;
  display:flex;
  flex-wrap:wrap;
  column-gap:8px;
  font-size:.82rem;
  color:color-mix(in srgb,var(--light) 72%,transparent);
}

/* O ponto separador e' do CSS e nao do markup: escrito la', ele viraria um
   no de texto que a skill de montagem teria de preservar entre dois slots. */
.dvid-onde::before{content:"·";margin-inline-end:8px}

/* ---------------------------------------------------------------- a citacao */
/* A VERSAO LEGIVEL DO DEPOIMENTO, e a razao de forma da peca inteira: ela e'
   markup estatico, aparece sem clique e sobra quando o video nao toca. Nao
   ha' regra de altura nem corte com reticencias — a fala tem o tamanho que
   tem, e o padrao editorial da ficha e' que mantem os cards parelhos. */
.dvid-quote{
  margin:clamp(16px,1.8vw,22px) 0 0;
  padding:0;
}

/* Seletor de elemento como descendente do prefixo, em conteudo de prosa: o
   §6.3 permite exatamente isto, e o texto de um depoimento e' de quem
   escreve conteudo, nao de quem escreve markup. */
.dvid-quote p{
  font-size:clamp(15px,1.1vw,16.5px);
  line-height:1.62;
  color:var(--fg-2);
}

/* ---------------------------------------------------------------- ressalva */
/* Tipografia e medida vem da primitiva .nota do core — os 74ch que esta peca
   ja' escrevia a mao sao exatamente o padrao dela. Fica so' a posicao. */
.dvid-nota{
  margin:clamp(30px,3.8vh,46px) auto 0;
  text-align:center;
}

/* ---------------------------------------------------------------- o dialogo */
/* A casca vem da primitiva .dialog-casca do core, declarada ANTES desta
   classe no markup: e' ela que zera padding, borda, fundo e os limites de
   tamanho que o navegador da' de graca ao <dialog>, e que pinta o
   ::backdrop com --veil. Aqui fica so' o que e' FORMA desta peca.

   O <dialog> nasce display:none na folha do agente do usuario, e QUALQUER
   regra de autor com display vence essa. Escrever `.dvid-dialog{display:grid}`
   sem o [open] deixaria os tres dialogos visiveis o tempo todo, empilhados
   sobre a pagina: e' a armadilha do §6.5 na versao do elemento nativo. */
.dvid-dialog{
  inline-size:100%;
  block-size:100%;
  /* hidden, e nao o overflow:visible da casca: o dialogo e' o PALCO, e um
     quadro maior que a janela (a variacao de video vertical) tem de ficar
     dentro da tela em vez de pintar por fora dela. */
  overflow:hidden;
  /* O ::backdrop herda custom property do elemento que o originou: declarar
     --veil aqui basta para a primitiva do core pintar o veu deste
     componente, sem uma regra ::backdrop propria. */
  --veil:color-mix(in srgb,var(--dark) var(--dvid-veil-mix),transparent);
}

.dvid-dialog[open]{
  display:grid;
  place-items:center;
}

.dvid-frame{
  position:relative;
  inline-size:min(94vw,1240px);
  aspect-ratio:var(--dvid-frame-ratio);
  max-block-size:86vh;
  border-radius:var(--radius-media);
  overflow:hidden;
  background:var(--dark);
  /* Os tres valores sao escritos pelo script: a diferenca entre onde a capa
     esta' e onde o quadro vai ficar. O transform sai para a identidade no
     quadro seguinte, e e' isso que faz o video CRESCER do lugar do retrato
     em vez de aparecer no meio da tela.
     A escala e' UNIFORME, calculada pela largura: capa em 4/5 e quadro em
     16/9 nao tem a mesma proporcao, e escalar cada eixo por conta propria
     esticaria a imagem. O que se ve e' uma faixa da largura do retrato
     abrindo no centro dele — a leitura certa para video. */
  transform:translate(var(--dvid-dx,0px),var(--dvid-dy,0px)) scale(var(--dvid-s,1));
  transform-origin:50% 50%;
  will-change:transform;
}

.dvid-frame.is-abrindo{
  transition:transform var(--dvid-dur) var(--ease);
  transform:none;
}

.dvid-video{
  inline-size:100%;
  block-size:100%;
  /* contain, e nao cover: cortar rosto de quem esta' dando depoimento e' a
     pior troca possivel. Video vertical entra com tarja e legivel. */
  object-fit:contain;
  display:block;
  background:var(--dark);
}

/* Nao e' o .btn-disc do core, e o base.css ja' registra por que: aquele e'
   um disco de contorno que le --fg-2 e --rule-2, tokens do escopo de tom.
   Este botao mora sobre VIDEO, cujo quadro pode ser qualquer coisa — um
   contorno tenue desaparece num frame claro. Dai as cores de --light/--dark
   e o desfoque, como no .reel-fechar do showreel. */
.dvid-fechar{
  position:absolute;
  inset-block-start:14px;
  inset-inline-end:14px;
  display:grid;
  place-items:center;
  inline-size:44px;
  block-size:44px;
  border-radius:var(--radius-pill);
  border:1px solid color-mix(in srgb,var(--light) 34%,transparent);
  background:color-mix(in srgb,var(--dark) 56%,transparent);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  color:var(--light);
  cursor:pointer;
  /* Acima dos controles nativos do video, que o navegador desenha por cima
     do proprio elemento. */
  z-index:2;
  transition:border-color .3s var(--ease),background-color .3s var(--ease);
}

.dvid-fechar:hover{
  border-color:color-mix(in srgb,var(--light) 70%,transparent);
  background:color-mix(in srgb,var(--dark) 74%,transparent);
}

.dvid-fechar svg{
  inline-size:44%;
  stroke:currentColor;
  stroke-width:1.7;
}

/* ---------------------------------------------------------------- movimento reduzido */
/* O dialogo continua ABRINDO — ele foi pedido. Some so' o que anda sozinho:
   o quadro aparece no lugar final sem crescer, e a capa para de escalar.
   O video tambem nao toca sozinho, e isso e' no script. */
@media(prefers-reduced-motion:reduce){
  .dvid-frame{transform:none;will-change:auto}
  .dvid-frame.is-abrindo{transition:none}
  .dvid-poster,.dvid-play,.dvid-fechar{transition:none}
  .dvid-abrir:hover .dvid-poster,
  .dvid-abrir:focus-visible .dvid-poster{filter:none}
}

/* ---------------------------------------------------------------- toque */
/* Toque nao tem hover: o disco de play e a identidade JA' nascem visiveis
   nesta peca, e nao ha' nada que apareca so' no ponteiro. O que muda e' o
   tamanho do alvo — 44px e' o minimo de area de toque. */
@media(hover:none){
  .dvid-play{--dvid-play:56px}
}

/* ---------------------------------------------------------------- mobile */
@media(max-width:1080px){
  /* Duas colunas, e a capa DEIXA de ser 4/5 junto. Com duas colunas ela dobra
     de largura, e em 4/5 passaria de 580px de altura: o par retrato + fala
     nao cabe mais no mesmo campo de visao, que e' justamente o que esta peca
     existe para garantir. Medido a 1024x800: em 4/5 a dobra tem 1924px, em
     1/1 tem 1704px, e o par retrato + fala cabe em 581px. E' a mesma conta da variacao "dois depoimentos". */
  .dvid{--dvid-cols:2;--dvid-ratio:1 / 1}
}

@media(max-width:680px){
  /* Uma coluna. A capa deixa de ser 4/5 porque em coluna cheia um retrato
     de 4/5 passa de 400px de altura e empurra a citacao para fora da tela:
     o par retrato + fala tem de caber junto no mesmo campo de visao. */
  .dvid{--dvid-cols:1;--dvid-ratio:4 / 3;--dvid-play:56px}
  .dvid-grid{gap:clamp(28px,7vw,40px)}
  .dvid-nota{text-align:left}
}