/* ==========================================================================
   GALERIA DE VÍDEOS — popup do "Assistir aos vídeos do congresso"
   <dialog> nativo montado por js/galeria-videos.js. Sala escura: o palco é
   a única coisa acesa, a lista dos vídeos fica logo abaixo.

   O palco segue a proporção de cada vídeo. O panorâmico do telão (3,5:1)
   ocupa a largura toda e fica baixo; os 16:9 ficam limitados pela altura.
   Nada de tarja minúscula num quadro 16:9 vazio. A proporção vem do JS em
   --ar, uma propriedade registrada: assim ela tem transição e o palco se
   reacomoda devagar quando o vídeo troca.
   ========================================================================== */

@property --ar {
  syntax: "<number>";
  inherits: true;
  initial-value: 1.7778;
}

.vg {
  --ar: 1.7778;
  --vg-pad: clamp(12px, 2.6vw, 40px);
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding:
    calc(env(safe-area-inset-top, 0px) + clamp(10px, 2vw, 26px))
    var(--vg-pad)
    calc(env(safe-area-inset-bottom, 0px) + clamp(12px, 2vw, 28px));
  border: 0;
  background: transparent;
  color: var(--fg);
  overflow: hidden;
  transition: --ar .7s var(--ease);
}
.vg[open] { display: grid; justify-items: center; }
.vg::backdrop {
  background: rgba(4, 1, 0, .97);
  backdrop-filter: blur(8px);
}

/* com o popup aberto a página por trás não rola (o Lenis também para) */
html.vg-locked { overflow: hidden; scrollbar-gutter: stable; }

.vg svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }

.vg__panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  gap: clamp(.8rem, 1.6vw, 1.25rem);
  width: min(1480px, 100%);
  height: 100%;
  min-height: 0;
}

/* --- Barra de cima: rótulo + fechar -------------------------------------- */
.vg__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
}
.vg__kicker {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .3rem .7rem;
  font-variation-settings: "wdth" 92, "wght" 700;
  font-size: var(--fs-data);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold);
}
.vg__kicker::before { content: ""; width: 26px; height: 2px; background: currentColor; }
.vg__kicker span { color: var(--fg-3); }

/* Fechar: texto visível + ×, igual ao currículo da coordenação */
.vg__close {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  min-height: 44px;
  padding: .7em 1.05em .66em 1.2em;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-variation-settings: "wdth" 96, "wght" 750;
  font-size: var(--fs-data);
  letter-spacing: .04em;
  line-height: 1;
  color: var(--fg);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.vg__close svg { width: 1em; height: 1em; flex: none; }
.vg__close:hover { background: var(--white); border-color: var(--white); color: var(--black); }

/* --- Tela: a área que sobra; o palco se encaixa nela pela proporção ------ */
.vg__screen {
  position: relative;
  min-height: 0;
  display: grid;
  place-items: center;
  container-type: size;
}

.vg__stage {
  position: relative;
  z-index: 1;
  /* sem consulta de contêiner: palco pela largura, limitado pela altura da janela */
  width: min(100%, calc((100vh - 300px) * var(--ar)));
  aspect-ratio: var(--ar);
  background: #000;
  box-shadow: 0 40px 120px rgba(0, 0, 0, .8);
}
@supports (container-type: size) {
  .vg__stage {
    width: min(100cqw, 100cqh * var(--ar));
    height: min(100cqh, 100cqw / var(--ar));
    aspect-ratio: auto;
  }
}

/* luz do palco: a miniatura do vídeo, desfocada, vaza por trás da moldura */
.vg__glow {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
  width: min(100cqw, 100cqh * var(--ar));
  height: min(100cqh, 100cqw / var(--ar));
  transform: translate(-50%, -50%) scale(1.06);
  background: center / cover no-repeat;
  filter: blur(56px) saturate(1.3);
  opacity: .42;
  pointer-events: none;
}

.vg__frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.vg__video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
  transition: opacity .5s var(--ease), transform .7s var(--ease);
}
/* troca de vídeo: some na hora e volta quando o primeiro quadro chega */
.vg__frame.trocando .vg__video { opacity: 0; transform: scale(1.015); transition: none; }

/* área de clique para pausar, por baixo dos controles */
.vg__toque { position: absolute; inset: 0; z-index: 1; cursor: inherit; }
.vg.quieto .vg__stage { cursor: none; }

/* carregando: um aro dourado, só enquanto o vídeo espera dados */
.vg__spin {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border: 2px solid rgba(255, 241, 232, .18);
  border-top-color: var(--gold);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s var(--ease);
}
.vg.carregando .vg__spin { opacity: 1; animation: vg-spin .8s linear infinite; }

/* o navegador tirou o som: o botão para devolver tem de saltar aos olhos */
.vg__unmute {
  position: absolute;
  z-index: 3;
  top: clamp(.6rem, 1.6vw, 1.1rem);
  left: clamp(.6rem, 1.6vw, 1.1rem);
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  min-height: 44px;
  padding: .7em 1.2em .66em 1em;
  border-radius: var(--r-pill);
  background: var(--gold);
  color: var(--black);
  font-variation-settings: "wdth" 96, "wght" 800;
  font-size: var(--fs-data);
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1;
  box-shadow: 0 0 0 0 rgba(242, 194, 48, .55);
  animation: vg-chama 1.8s var(--ease) infinite;
}
.vg__unmute[hidden] { display: none; }
.vg__unmute svg { width: 20px; height: 20px; stroke-width: 2; }
.vg__unmute:hover { background: var(--white); }

.vg__erro {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1rem;
  text-align: center;
  color: var(--fg-2);
  font-size: var(--fs-note);
  background: rgba(0, 0, 0, .7);
}
.vg__erro[hidden] { display: none; }

/* --- Controles (os mesmos do cinema antigo) ------------------------------ */
.vg__ui {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  gap: .45rem;
  padding: clamp(2.2rem, 6vw, 3.6rem) clamp(.7rem, 1.6vw, 1.2rem) clamp(.4rem, 1vw, .7rem);
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .82));
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.vg.quieto .vg__ui { opacity: 0; transform: translateY(12px); pointer-events: none; }

/* barra de posição: o alvo de clique é alto, o traço é fino */
.vg__seek {
  position: relative;
  height: 22px;
  display: flex;
  align-items: center;
  cursor: pointer;
  touch-action: none;
}
.vg__seek::before,
.vg__buf,
.vg__fill {
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: 2px;
  transform-origin: 0 50%;
}
.vg__seek::before { content: ""; background: rgba(255, 241, 232, .22); }
.vg__buf { transform: scaleX(0); background: rgba(255, 241, 232, .34); }
.vg__fill { transform: scaleX(0); background: var(--flame); }

.vg__dot {
  position: absolute;
  left: 0;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  border-radius: 50%;
  background: var(--flame);
  transform: scale(0);
  transition: transform var(--t-fast) var(--ease);
}
.vg__seek:hover .vg__dot,
.vg__seek:focus-visible .vg__dot { transform: scale(1); }
.vg__seek:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.vg__row { display: flex; align-items: center; gap: .25rem; }
.vg__sp { flex: 1; }

.vg__b {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  flex: none;
  color: var(--fg-2);
  transition: color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.vg__b:hover { color: var(--white); transform: scale(1.1); }
.vg__b svg { width: 21px; height: 21px; }
.vg__b:focus-visible { outline-offset: -2px; }

.vg__t {
  margin-left: .5rem;
  font-variation-settings: "wdth" 92, "wght" 700;
  font-size: var(--fs-data);
  letter-spacing: .04em;
  color: var(--fg-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.vg__t b { color: var(--white); font-weight: inherit; }

/* em tela cheia de verdade a moldura some */
.vg__stage:fullscreen { width: 100%; height: 100%; box-shadow: none; }
.vg.cheia .vg__stage { width: 100%; height: 100%; box-shadow: none; }

/* --- Legenda do vídeo tocando -------------------------------------------- */
.vg__info {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: baseline;
  gap: .3rem clamp(1rem, 2vw, 1.6rem);
}
.vg__n {
  font-variation-settings: "wdth" 92, "wght" 800;
  font-size: var(--fs-data);
  letter-spacing: .08em;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.vg__title {
  font-variation-settings: "wdth" 118, "wght" 900;
  font-size: var(--fs-md);
  line-height: 1;
  letter-spacing: -.03em;
}
.vg__line {
  color: var(--fg-3);
  font-size: var(--fs-note);
  line-height: 1.4;
}

/* --- Mini galeria --------------------------------------------------------
   Uma fileira só. Com quatro vídeos cabe inteira no desktop; se vierem mais,
   ela rola de lado com encaixe, como no celular. */
.vg__list {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(250px, 1fr);
  gap: clamp(.5rem, 1vw, .9rem);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.vg__list::-webkit-scrollbar { display: none; }
.vg__list li { scroll-snap-align: start; min-width: 0; }
.vg__thumb img { -webkit-user-drag: none; }

/* prateleira: segura a fileira e as setas. A borda do lado em que ainda há
   vídeo escondido esmaece, avisando que a fileira continua. */
.vg__shelf { position: relative; min-width: 0; }
.vg__list { -webkit-overflow-scrolling: touch; }
.vg__list.is-arrasto { scroll-snap-type: none; cursor: grabbing; user-select: none; }
.vg__shelf.tem-depois .vg__list {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 72px), transparent);
          mask-image: linear-gradient(90deg, #000 calc(100% - 72px), transparent);
}
.vg__shelf.tem-antes .vg__list {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 72px);
          mask-image: linear-gradient(90deg, transparent, #000 72px);
}
.vg__shelf.tem-antes.tem-depois .vg__list {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 72px, #000 calc(100% - 72px), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 72px, #000 calc(100% - 72px), transparent);
}

.vg__seta {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-top: -22px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, .72);
  color: var(--white);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.vg__seta:hover { background: var(--white); border-color: var(--white); color: var(--black); }
.vg__seta[hidden] { display: none; }
.vg__seta svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: square; }
.vg__seta--ant { left: .35rem; }
.vg__seta--ant svg { transform: scaleX(-1); }
.vg__seta--pro { right: .35rem; }

.vg__item {
  position: relative;
  display: grid;
  grid-template-columns: clamp(118px, 44%, 172px) minmax(0, 1fr);
  align-items: center;
  gap: .85rem;
  width: 100%;
  min-height: 44px;
  padding: .5rem .75rem .5rem .5rem;
  text-align: left;
  background: var(--dark);
  border-top: 2px solid transparent;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.vg__item:hover { background: var(--dark-2); }
.vg__item.is-on { background: var(--dark-2); border-top-color: var(--gold); }
.vg__item:focus-visible { outline-offset: -2px; }

.vg__thumb {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--black);
}
.vg__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease), opacity var(--t-fast) var(--ease);
  opacity: .78;
}
.vg__item:hover .vg__thumb img,
.vg__item.is-on .vg__thumb img { opacity: 1; }
.vg__item:hover .vg__thumb img { transform: scale(1.05); }

.vg__dur {
  position: absolute;
  right: .35rem;
  bottom: .5rem;
  padding: .22rem .38rem .2rem;
  background: rgba(0, 0, 0, .74);
  font-variation-settings: "wdth" 92, "wght" 700;
  font-size: .72rem;
  letter-spacing: .04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* a barra do vídeo corre na própria miniatura */
.vg__prog {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: rgba(255, 241, 232, .22);
  opacity: 0;
  transition: opacity var(--t-fast) var(--ease);
}
.vg__prog i {
  display: block;
  height: 100%;
  background: var(--flame);
  transform: scaleX(0);
  transform-origin: 0 50%;
}
.vg__item.is-on .vg__prog { opacity: 1; }

.vg__txt { display: grid; gap: .35rem; min-width: 0; }
.vg__flag {
  display: flex;
  align-items: center;
  min-height: 1em;
  font-variation-settings: "wdth" 92, "wght" 800;
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--fg-3);
}
.vg__flag:empty { display: none; }
.vg__item.is-on .vg__flag { color: var(--gold); }
/* três barrinhas de equalizador ao lado do "Tocando"; param com o vídeo */
.vg__item.is-on .vg__flag::before {
  content: "";
  width: 11px;
  height: 10px;
  margin-right: .45rem;
  background:
    linear-gradient(currentColor, currentColor) 0 100% / 3px 40% no-repeat,
    linear-gradient(currentColor, currentColor) 4px 100% / 3px 100% no-repeat,
    linear-gradient(currentColor, currentColor) 8px 100% / 3px 60% no-repeat;
  animation: vg-eq .9s ease-in-out infinite alternate;
}
.vg:not(.tocando) .vg__item.is-on .vg__flag::before { animation-play-state: paused; }

.vg__name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-variation-settings: "wdth" 104, "wght" 750;
  font-size: var(--fs-note);
  line-height: 1.2;
  color: var(--fg-2);
}
.vg__item.is-on .vg__name,
.vg__item:hover .vg__name { color: var(--white); }

/* --- Abrir / fechar: subir curto e assentar ------------------------------ */
.vg[open] .vg__panel { animation: vg-in .55s var(--ease) both; }
.vg[open]::backdrop { animation: vg-fade .35s ease-out both; }
.vg.is-closing .vg__panel { animation: vg-out .24s ease-in both; }
.vg.is-closing::backdrop { animation: vg-fade .24s ease-in reverse both; }

@keyframes vg-in {
  from { opacity: 0; transform: translateY(26px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
@keyframes vg-out {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(12px) scale(.99); }
}
@keyframes vg-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes vg-spin { to { transform: rotate(360deg); } }
@keyframes vg-chama {
  0%   { box-shadow: 0 0 0 0 rgba(242, 194, 48, .55); }
  70%, 100% { box-shadow: 0 0 0 14px rgba(242, 194, 48, 0); }
}
@keyframes vg-eq {
  0%   { background-size: 3px 40%, 3px 100%, 3px 60%; }
  50%  { background-size: 3px 90%, 3px 45%, 3px 100%; }
  100% { background-size: 3px 60%, 3px 75%, 3px 35%; }
}

/* ==========================================================================
   Tela baixa (celular deitado, notebook pequeno): o palco fica com quase a
   altura toda e a lista desce; o painel rola para chegar nela
   ========================================================================== */
@media (max-height: 600px) and (min-width: 761px) {
  .vg { overflow-y: auto; overscroll-behavior: contain; }
  .vg__panel {
    height: auto;
    grid-template-rows: auto calc(100dvh - 5.5rem) auto auto;
  }
}

/* ==========================================================================
   Celular: tela inteira, palco no topo, controles embaixo dele (por cima de
   um vídeo largo eles cobririam quase tudo) e miniaturas em carrossel
   ========================================================================== */
@media (max-width: 760px) {
  .vg {
    padding: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .vg__panel {
    width: 100%;
    height: auto;
    min-height: 100%;
    grid-template-rows: auto auto auto auto;
    align-content: start;
    gap: 0;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem);
  }

  .vg__bar {
    padding: calc(env(safe-area-inset-top, 0px) + .5rem) .75rem .5rem 1rem;
  }
  .vg__kicker span { display: none; }

  .vg__screen { display: block; container-type: normal; }
  .vg__glow { display: none; }
  .vg__stage { width: 100%; height: auto; aspect-ratio: auto; box-shadow: none; }
  .vg__frame { position: relative; inset: auto; aspect-ratio: var(--ar); }

  .vg__ui {
    position: static;
    gap: .1rem;
    padding: .35rem .5rem .25rem;
    background: var(--dark);
  }
  .vg.quieto .vg__ui { opacity: 1; transform: none; pointer-events: auto; }
  .vg.quieto .vg__stage { cursor: auto; }
  .vg__seek { margin: 0 .35rem; height: 28px; }
  .vg__dot { transform: scale(1); }
  .vg__t { margin-left: .25rem; }

  .vg__info {
    grid-template-columns: minmax(0, 1fr);
    gap: .35rem;
    padding: 1.1rem 1rem 1rem;
  }
  .vg__title { font-size: clamp(1.45rem, 6.4vw, 1.9rem); }

  .vg__list {
    grid-auto-columns: 62%;
    gap: .6rem;
    padding: 0 1rem .25rem;
    scroll-padding-inline: 1rem;
  }
  .vg__item {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: .6rem;
    height: 100%;
    padding: .45rem .45rem .7rem;
  }
  .vg__txt { padding: 0 .2rem; }
}

/* celular em pé com o panorâmico do telão: ele fica baixo por natureza
   (3,5:1 numa tela estreita); a dica lembra que deitar o aparelho resolve */
@media (max-width: 760px) and (orientation: portrait) {
  .vg.is-pano .vg__info::after {
    content: "Vídeo panorâmico: gire o celular ou use a tela cheia para ver maior.";
    margin-top: .25rem;
    font-size: var(--fs-data);
    line-height: 1.4;
    color: var(--gold);
  }
}

/* em tela cheia (Android e afins) os controles voltam para cima do vídeo */
@media (max-width: 760px) {
  .vg.cheia .vg__stage { background: #000; }
  .vg.cheia .vg__frame { position: absolute; inset: 0; aspect-ratio: auto; }
  .vg.cheia .vg__ui {
    position: absolute;
    padding: 2.6rem .75rem calc(env(safe-area-inset-bottom, 0px) + .5rem);
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .82));
  }
  .vg.cheia.quieto .vg__ui { opacity: 0; transform: translateY(12px); pointer-events: none; }
}

@media (max-width: 380px) {
  .vg__b { width: 40px; height: 44px; }
  .vg__t { font-size: .78rem; }
}

/* quem pediu menos movimento não recebe animação: troca seca, sem pulsos */
@media (prefers-reduced-motion: reduce) {
  .vg { transition: none; }
  .vg[open] .vg__panel,
  .vg[open]::backdrop,
  .vg.is-closing .vg__panel,
  .vg.is-closing::backdrop { animation: none; }
  .vg__video,
  .vg__ui,
  .vg__glow,
  .vg__thumb img { transition: none; }
  .vg__item:hover .vg__thumb img { transform: none; }
  .vg__unmute,
  .vg__item.is-on .vg__flag::before { animation: none; }
  .vg.carregando .vg__spin { animation-duration: 2.4s; }
}