/* ============================================================
   comp-video-modal.css (Lego Block)
   90-second demo video lightbox. Isolated from comp-modal.css on
   purpose — that one is a fixed 400px text dialog; this one is a
   16:9 video player and would break if it reused .modal-box.
   ============================================================ */
.video-modal-trigger {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: none; cursor: pointer;
  font: inherit; font-weight: 600; color: var(--accent-primary);
  text-decoration: underline; text-underline-offset: 3px;
  padding: 0;
}
.video-modal-trigger:hover { opacity: 0.8; }

/* Hero placement — sits under the globe/particle canvas, which has
   pointer-events:none on its container, so this needs its own auto. */
.hero-video-cta {
  width: 100%; margin-top: auto; padding-top: 24px;
  text-align: center; pointer-events: auto;
}
.hero-video-cta .video-modal-trigger { color: var(--text-inverse); }

.video-modal-overlay {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(10, 8, 20, 0.85);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.video-modal-overlay[hidden] { display: none; }

.video-modal-inner { position: relative; width: 100%; max-width: 880px; }

.video-modal-frame {
  position: relative; width: 100%; padding-top: 56.25%; /* 16:9 */
  background: #000; border-radius: 12px; overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,0.5);
}
.video-modal-frame iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}

.video-modal-close {
  position: absolute; top: -42px; right: 0;
  background: none; border: none; color: #fff;
  font-size: 22px; cursor: pointer; line-height: 1; padding: 8px;
}

@media (max-width: 640px) {
  .video-modal-overlay { padding: 0; }
  .video-modal-inner { max-width: 100%; }
  .video-modal-close { top: 8px; right: 8px; background: rgba(0,0,0,0.6); border-radius: 50%; }
}