/* ==========================================================================
   DEPOIMENTOS EM VÍDEO — carrossel de shorts verticais
   Prefixo: vdepo-
   Tokens: --bg --fg --fg-2 --rule --rule-2 --accent --ease --pad

   Cartão em 9:16, que é a proporção do short. Recortar vídeo vertical para
   caber num card deitado é jogar fora metade do rosto de quem está falando, e
   rosto é o motivo de o depoimento ser em vídeo.
   ========================================================================== */

/* O TRILHO SANGRA ATÉ A BORDA DA JANELA, e não até a borda da coluna.

   Antes ele parava onde a coluna para, e o resultado era o pior dos dois
   mundos: um vão vazio à esquerda, do tamanho da margem da página, e um card
   fatiado à direita por uma borda invisível no meio da tela.

   Agora a caixa tem a largura da janela inteira (o truque do margin-left
   negativo com 50% e 50vw) e devolve o respiro por dentro, com um padding
   calculado para o PRIMEIRO card nascer exatamente embaixo do título. O corte
   passa a acontecer na borda da tela, que é onde o olho espera que aconteça.

   A máscara apaga os últimos 90px de cada lado. É o "véu" que o Gabriel
   pediu, só que feito com máscara em vez de um degradê colorido por cima:
   assim ele funciona sobre qualquer fundo, inclusive se a dobra mudar de cor
   um dia. */
.vdepo-trilho{
  margin-top:clamp(20px,2.4vw,32px);
  width:100vw;
  margin-left:calc(50% - 50vw);
  padding-inline:max(var(--pad),calc((100vw - var(--max)) / 2 + var(--pad)));
  /* O MESMO VALOR EM scroll-padding, e sem ele todo o resto não adianta: o
     encaixe do scroll (scroll-snap) alinha o card pela borda da CAIXA, não
     pela do padding. Sem avisar onde o conteúdo começa, o primeiro card era
     puxado para a beirada da tela e o alinhamento com o título se perdia. */
  scroll-padding-inline:max(var(--pad),calc((100vw - var(--max)) / 2 + var(--pad)));
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  -ms-overflow-style:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 90px,#000 calc(100% - 90px),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 90px,#000 calc(100% - 90px),transparent 100%);
}
.vdepo-trilho::-webkit-scrollbar{display:none}

.vdepo-lista{
  display:flex;gap:clamp(12px,1.4vw,18px);
  list-style:none;margin:0;padding:0;
}

/* A PROPORÇÃO MORA AQUI, no item, e não no botão. Motivo: quando o vídeo
   começa, o botão some e quem ocupa o lugar dele é o iframe. Com a proporção
   no botão, o item perdia a altura junto e o player, que é absoluto, ia se
   posicionar pelo primeiro ancestral posicionado que encontrasse: o trilho
   inteiro. Era esse o defeito do card gigante atravessando a dobra.

   position:relative pelo mesmo motivo: o item precisa ser a referência do
   player, e não o trilho. */
.vdepo-item{
  position:relative;
  flex:0 0 auto;
  width:clamp(186px,16.5vw,236px);
  aspect-ratio:9 / 16;
  scroll-snap-align:start;
}

.vdepo-card{
  position:absolute;inset:0;display:block;width:100%;height:100%;
  padding:0;border:1px solid var(--rule);border-radius:12px;
  overflow:hidden;background:var(--bg);cursor:pointer;
  -webkit-appearance:none;appearance:none;
  transition:border-color .3s;
}
.vdepo-card:hover{border-color:var(--rule-2)}

.vdepo-capa{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s var(--ease),opacity .3s;
}
.vdepo-card:hover .vdepo-capa{transform:scale(1.03)}

/* Escurece o pé do card. Miniatura de short costuma ter legenda queimada na
   imagem, e sem o véu o botão de play cai em cima de texto branco. */
.vdepo-veu{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,
    rgba(var(--dark-rgb),.72) 0%,
    rgba(var(--dark-rgb),.12) 46%,
    rgba(var(--dark-rgb),.34) 100%);
}

.vdepo-play{
  position:absolute;left:50%;top:50%;
  width:54px;height:54px;margin:-27px 0 0 -27px;
  display:flex;align-items:center;justify-content:center;
  border-radius:var(--radius-pill);
  background:rgba(255,255,255,.14);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.28);
  color:var(--fg);
  transition:background .3s,transform .3s var(--ease);
}
.vdepo-play svg{width:20px;height:20px;margin-left:2px}
.vdepo-card:hover .vdepo-play{background:rgba(255,255,255,.22);transform:scale(1.06)}

/* ---- tocando ----
   O iframe entra no lugar da capa, dentro do mesmo card: nada de modal. O
   vídeo é vertical e o card também, então ele cabe inteiro onde a capa estava,
   e quem estava lendo a dobra não perde o lugar. */
.vdepo-item iframe{
  position:absolute;inset:0;width:100%;height:100%;
  border:0;border-radius:12px;display:block;
}
.vdepo-item.is-on .vdepo-card{border-color:var(--accent)}

.vdepo-setas{
  display:flex;gap:8px;justify-content:flex-end;
  margin-top:clamp(14px,1.6vw,20px);
}

/* As setas nasceram reusando a classe dos controles da dobra de passos, e
   aquela classe morreu quando o Gabriel mandou tirar os controles de lá. Aqui
   elas têm as próprias regras: componente que depende do CSS de outro quebra
   calado, e foi o que aconteceu, com dois botões cinza de sistema na tela. */
.vdepo-seta{
  width:36px;height:36px;flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--rule);border-radius:var(--radius-pill);
  background:none;-webkit-appearance:none;appearance:none;
  color:var(--fg-2);cursor:pointer;
  transition:color .25s,border-color .25s;
}
.vdepo-seta:hover{color:var(--fg);border-color:var(--rule-2)}
.vdepo-seta svg{width:15px;height:15px}

/* Capa que não carrega não deixa ícone quebrado no card: ela some e fica o
   fundo escuro com o play, que continua entregando o que o card é. */
.vdepo-capa[hidden]{display:none}

@media(max-width:900px){
  .vdepo-item{width:clamp(164px,46vw,206px)}
  .vdepo-setas{display:none}
}