/* ==========================================================================
   video-lightbox.css — plays video hotspot clips in a centered white card.
   Component: js/ui/VideoLightbox.js
   ========================================================================== */

/* ── Video lightbox ────────────────────────────────────────────────────────
   Mirrors the info-panel: a white card with a header (title + close) and the
   video sitting inside with matching padding, radius and shadow. */
#video-lightbox {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease, visibility 0s linear;
}
#video-lightbox.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}
#video-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

/* White card — same treatment as #info-panel__card.

   The card is sized so its contents NEVER need scrolling: the video is the
   point, and a 16:9 player plus header plus safety notice easily overflowed a
   flat 85vh on a laptop, pushing the notice below the fold where nobody saw
   it. Rather than shrink the player inside a fixed card (which would letterbox
   it — an iframe can't object-fit), the CARD takes its width from the height
   available, so the player's own 16:9 box always fits.

   The 220px is everything stacked above and below the player: the overlay's
   own 24px padding top and bottom, the card's 36px twice, the header row
   (36px close button + 20px margin) and the notice (two lines + margin). The
   72px added back is the card's horizontal padding, which isn't part of the
   video's width. Keep these in step if the paddings change. */
#video-lightbox__card {
  --card-chrome-v: 220px;
  --card-chrome-h: 72px;

  position: relative;
  z-index: 2;
  width: min(90vw, 900px, calc((100vh - var(--card-chrome-v)) * 16 / 9 + var(--card-chrome-h)));
  max-height: 95vh;
  /* Kept only as a safety net for viewports too short for the maths above
     (a phone in landscape); in normal use nothing overflows. */
  overflow-y: auto;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.35);
  padding: 36px;
  transform: translateY(16px);
  transition: transform 0.35s cubic-bezier(0.22, 0.9, 0.36, 1);
}
#video-lightbox:not(.hidden) #video-lightbox__card {
  transform: translateY(0);
}

/* Header row — title + close, matching the info panel */
#video-lightbox__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
#video-lightbox__title {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  color: var(--color-oleon);
  letter-spacing: -0.01em;
  line-height: 1.3;
}
#video-lightbox__close {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border: none;
  padding: 0;
  border-radius: 50%;
  background: rgb(var(--color-oleon-rgb) / 0.08);
  color: var(--color-oleon);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, transform 0.2s ease;
}
#video-lightbox__close:hover {
  background: rgb(var(--color-oleon-rgb) / 0.15);
  transform: scale(1.1);
}
#video-lightbox__close svg {
  width: 16px;
  height: 16px;
  stroke: var(--color-oleon);
  stroke-width: 2.5;
}

/* The video itself sits inside the card */
#video-lightbox__player {
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
}
#video-lightbox__player iframe,
#video-lightbox__player video {
  width: 100%;
  height: 100%;
  border-radius: 12px;
  background: #000;
  display: block;
}

/* ── Safety / PPE notice ──────────────────────────────────────────────────
   Shown for the whole clip, directly under the player. Styled as a calm
   statement of policy rather than a warning: no red, no alert triangle. The
   footage isn't an incident — the notice exists to say the filming location
   didn't require PPE, and shouting that would imply the opposite. */
#video-lightbox__disclaimer {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  color: rgb(var(--color-oleon-rgb) / 0.75);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
}
#video-lightbox__disclaimer.hidden {
  display: none;
}
#video-lightbox__disclaimer-icon {
  flex-shrink: 0;
  display: flex;
  /* Optically aligns the shield with the first line of text rather than the
     box, which reads high next to a two-line paragraph. */
  margin-top: 1px;
}
#video-lightbox__disclaimer-icon svg {
  width: 15px;
  height: 15px;
}

@media (max-width: 600px) {
  #video-lightbox { padding: 16px; }
  #video-lightbox__card {
    /* Smaller paddings here, so the chrome the width formula subtracts
       shrinks with them: 32 (overlay) + 48 (card) + 52 (header) + 52 (the
       notice, which wraps to ~3 lines at this width). */
    --card-chrome-v: 184px;
    --card-chrome-h: 48px;
    padding: 24px;
    border-radius: 16px;
  }
  #video-lightbox__disclaimer {
    margin-top: 10px;
    font-size: 11px;
  }
}