/* Click-to-play video facade (Bunny Stream).
   Markup: Bunny_Stream::render() in inc/modules/class.Bunny_Stream.php.
   Behaviour: html/js/video-player.js.
   Loaded on its own (not in style.css) because the media kit uses it too and
   doesn't load style.css.

   The facade fills its positioned parent; the parent reserves the 16:9 (or
   Live Desk 9:16) box, so swapping poster -> iframe causes no layout shift. */

.ggi-video {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #000;
}

.ggi-video__btn {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.ggi-video__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity .2s ease;
}

.ggi-video__btn:hover .ggi-video__poster {
  opacity: .85;
}

/* Play badge: scales with the player (sidebar players are narrow). */
.ggi-video__play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(3rem, 16%, 4.5rem);
  aspect-ratio: 1 / 1;
  border-radius: 9999px;
  background: rgb(15 23 42 / .72);
  box-shadow: 0 0 0 2px rgb(255 255 255 / .85), 0 8px 24px rgb(0 0 0 / .35);
  transform: translate(-50%, -50%);
  transition: transform .15s ease, background-color .15s ease;
}

.ggi-video__play::before {
  content: '';
  position: absolute;
  inset: 30% 26% 30% 38%;
  background: #fff;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.ggi-video__btn:hover .ggi-video__play,
.ggi-video__btn:focus-visible .ggi-video__play {
  background: #a41521;
  transform: translate(-50%, -50%) scale(1.06);
}

.ggi-video__btn:focus-visible {
  outline: 3px solid #fff;
  outline-offset: -3px;
}

.ggi-video__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Dark mode: the facade sits on the video poster, like the player itself, so
   the black box is intentional in both themes. The overrides below keep the
   badge ring and focus outline distinct against the darker page around it. */
.dark .ggi-video__play {
  background: rgb(0 0 0 / .7);
  box-shadow: 0 0 0 2px rgb(255 255 255 / .9), 0 8px 24px rgb(0 0 0 / .6);
}

.dark .ggi-video__btn:hover .ggi-video__play,
.dark .ggi-video__btn:focus-visible .ggi-video__play {
  background: #a41521;
}

.dark .ggi-video__btn:focus-visible {
  outline-color: #e2e8f0;
}

/* Article / Live Desk bodies: Sanitise wraps the facade in .ggi-embed
   (style.css), which supplies the 16:9 box; this makes it the positioned
   parent. */
.ggi-embed--video {
  position: relative;
  overflow: hidden;
}