/* Generic video-lightbox modal — see templates/components/video_lightbox.html.
   Same open/close mechanics as the mobile drawer and AI chat panel
   (class-driven transition, hidden attribute toggled by JS after the
   transition settles — tokens.css's [hidden]{display:none!important}
   can't itself transition). */
.video-lightbox {
  position: fixed; inset: 0; z-index: 400;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.video-lightbox__backdrop {
  position: absolute; inset: 0;
  background: rgba(6, 6, 6, .88);
  opacity: 0;
  transition: opacity .25s ease;
}
.video-lightbox.is-open .video-lightbox__backdrop { opacity: 1; }
.video-lightbox__frame {
  position: relative;
  width: 100%;
  max-width: 960px;
  aspect-ratio: 16/9;
  opacity: 0;
  transform: scale(.96);
  transition: opacity .25s ease, transform .25s ease;
}
.video-lightbox.is-open .video-lightbox__frame { opacity: 1; transform: scale(1); }
.video-lightbox__frame video { width: 100%; height: 100%; border-radius: 10px; background: #000; display: block; }
.video-lightbox__close {
  position: absolute; top: -46px; right: 0;
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 1px solid rgba(255,255,255,.25); border-radius: 50%;
  color: var(--color-beige-light);
  cursor: pointer;
}
.video-lightbox__close:hover { border-color: var(--color-gold-accent); color: var(--color-gold-accent); }
@media (max-width: 639px) {
  .video-lightbox__close { top: -42px; }
}
@media (prefers-reduced-motion: reduce) {
  .video-lightbox__backdrop, .video-lightbox__frame { transition: none; }
}