/* ============================================================================
   Video embed + lightbox — the branded play button and the full-screen player.
   Single source of truth, extracted from blog.css so pages outside /blog can
   use the same component (the markup comes from videoEmbedHtml() in
   scripts/lib/render.mjs, the behaviour from /blog/video.js).

   Loaded by: generated post pages, /customers.
   ============================================================================ */

/* YouTube embed — custom thumbnail + branded play button; click opens lightbox */
.body-col .yt-embed,
.yt-embed--fill {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 22px;
  overflow: hidden;
  background-color: #000;
  background-size: cover;
  background-position: center;
  cursor: pointer;
}
/* Inline body embeds adopt the poster's natural ratio at runtime
   (see hookUpInlineVideoRatios). The intro hero stays a strict 16:9. */
.body-col .yt-embed { aspect-ratio: var(--ar, 16 / 9); }
/* Fill mode: used when the embed sits inside a container that already has its
   own aspect ratio and rounding — the post hero's .intro-figure, the customers
   page's .cu-spotlight-media. Unscoped, because "fill the parent" is what the
   modifier means wherever it's used. */
.yt-embed--fill {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;          /* the parent already rounds */
}
.body-col .yt-embed::before {
  content: "";
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.08);
  transition: background 0.2s ease;
  pointer-events: none;
  z-index: 1;
}
.body-col .yt-embed:hover::before { background: rgba(0,0,0,0.18); }
/* Self-hosted video preview — first frame fills the embed container. */
.yt-embed > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  display: block;
  background: #000;
}
.yt-embed .yt-play { z-index: 2; }    /* play button always above tint + video */
.yt-play {
  position: absolute;
  top: 50%; left: 50%;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
  transition: transform 0.25s cubic-bezier(.2,.8,.2,1), background 0.2s ease;
}
.yt-embed:hover .yt-play {
  background: var(--accent);
  transform: translate(-50%, -50%) scale(1.3);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.yt-play svg {
  width: 40px;
  height: 48px;
  margin-left: 6px;       /* tiny optical nudge — triangle reads centered */
  /* Near-black in both states — the circle behind it is what changes on hover
     (translucent white → lime), so the triangle stays put. */
  fill: #080808;
}
/* Shrink the hero video play button on phones — 130px is huge on a
   phone-width video. (Placed after the base rule so source order wins.) */
@media (max-width: 700px) {
  .yt-play { width: 72px; height: 72px; }
  .yt-play svg { width: 24px; height: 29px; margin-left: 4px; }
}

/* Lightbox overlay */
.yt-lightbox {
  position: fixed; inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.86);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  padding: 0;
  cursor: default;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}
.yt-lightbox.open { opacity: 1; pointer-events: auto; }
/* Unpositioned so the close button anchors to the scrim (consistent spot),
   not the frame. max-width leaves a gutter at the edges. */
.yt-lightbox-frame {
  width: 100%;
  max-width: min(1280px, 100vw - 160px);
  aspect-ratio: 16 / 9;
  cursor: default;
}
.yt-lightbox iframe,
.yt-lightbox video {
  width: 100%; height: 100%;
  border: 0;
  border-radius: 22px;
  display: block;
  background: #000;
  cursor: default;
}
/* Close (X) — pinned to the top-right of the scrim (matches the events lightbox). */
.yt-lightbox-close {
  position: absolute;
  top: 24px; right: 32px;
  width: 60px; height: 60px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  color: #fff;
  font-family: var(--font-body);
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}
.yt-lightbox-close:hover { background: rgba(255, 255, 255, 0.28); }
@media (max-width: 760px) {
  .yt-lightbox-frame { max-width: calc(100vw - 96px); }
  .yt-lightbox-close { top: 12px; right: 12px; width: 48px; height: 48px; }
}