/* ── Lazy background embeds ──────────────────────────────────────────────────
   Below-the-fold Bunny players render as poster + src-less iframe; video-bg.js
   injects the src on approach. The poster fills the tile exactly like the
   player will, so the swap is seamless. */
.js-lazy-embed .stream-embed__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Click-to-play videos (wk.com-style) ─────────────────────────────────────
   The "Click to play" playback mode. On mouse devices the native cursor is
   hidden over the tile and a round play/pause badge follows the pointer;
   clicking anywhere toggles playback. On touch screens the centred play
   button is shown instead. No player UI is ever visible: the transparent
   button overlays everything and the media itself takes no pointer events,
   so the Bunny control bar can never appear. */

.video-click {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.video-click video {
  width: 100%;
  height: 100%;
  display: block;
}

/* Embed variant: the poster fills the tile; the iframe is injected on click
   and covers it (the poster stays underneath, so removing the iframe when the
   video ends brings the poster + affordance straight back). */
.video-click__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.video-click iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
/* All input goes through the overlay button — never to the media. This is
   what keeps the Bunny player's control bar from ever showing up. (Same
   specificity as the .is-interactive overrides in case-content.css; this
   sheet loads later, so these win.) */
.video-click.js-video-click iframe,
.video-click.js-video-click video { pointer-events: none; }

/* ── The full-tile hit area ─────────────────────────────────────────────── */
.video-click__btn {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.video-click__btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -8px;
}

/* ── Centred icon — the TOUCH affordance ────────────────────────────────── */
.video-click__icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
  transition: opacity 0.25s ease;
}
.video-click__icon::before {
  content: "";
  width: 0;
  height: 0;
  margin-left: 5px;
  border-style: solid;
  border-width: 10px 0 10px 16px;
  border-color: transparent transparent transparent var(--text-dark, #1c1b1f);
}
/* While playing, the centred icon gets out of the way (tap still toggles) */
.video-click.is-playing .video-click__icon { opacity: 0; }

/* ── The pointer badge — the MOUSE affordance ───────────────────────────── */
.video-click__cursor {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
  width: 76px;
  height: 76px;
  margin: -38px 0 0 -38px;   /* centre the badge on the pointer */
  display: none;
  place-items: center;
  pointer-events: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
  opacity: 0;
  transition: opacity 0.18s ease;
  will-change: transform;
}
/* "PLAY" as text… */
.video-click__cursor::before {
  content: "PLAY";
  font-family: var(--font, 'DM Sans', sans-serif);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--text-dark, #1c1b1f);
}
/* …that becomes a close cross while the film runs (click stops → poster).
   Hybrids show the cross while SOUND is on (ambient loop keeps PLAY). */
.video-click.is-playing .video-click__cursor::before,
.video-click.is-sound .video-click__cursor::before {
  content: "\2715";
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
}
.video-click.is-sound .video-click__icon { opacity: 0; }

@media (hover: hover) and (pointer: fine) {
  .video-click__btn { cursor: none; }          /* the badge IS the cursor */
  .video-click__icon { display: none; }        /* centred icon is touch-only */
  .video-click__cursor { display: grid; }
  .video-click.is-hover .video-click__cursor { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .video-click__icon,
  .video-click__cursor { transition: none; }
}