/* ───────────────────────────────────────────────────────────────────────────
   Marketing autoplay-loop clip component (.pp-clip)

   A reusable, decorative inline video: silent, muted, looping. THEME-AWARE — it
   plays a LIGHT-captured video on light pages and a DARK-captured video on dark
   pages, swapping live when the theme toggles. A poster <img> sits underneath as
   the still fallback (no-JS / prefers-reduced-motion / before first play).

   Data-driven markup contract (js/marketing-clip.js builds the <video>):
     <figure class="pp-clip" data-clip="<id>" aria-label="…">
       <img class="pp-clip-poster" src="…<id>.poster.webp" alt="…"
            width="1200" height="750" loading="lazy" decoding="async">
     </figure>

   The JS reads data-clip + the root [data-theme], builds a <video> with the
   theme-appropriate <source>s + poster (`<id>.*` for light, `<id>-dark.*` for
   dark), plays it only while in view (lazy: preload="none"), and re-points the
   sources + poster when [data-theme] changes. Under prefers-reduced-motion it
   skips the video entirely and just keeps the (theme-correct) poster.

   Layering: the poster <img> is the base layer; the <video> stacks on top and
   covers it once present (its own poster attribute shows the still until play
   begins). So no-JS / reduced-motion / legacy inline-video markup all degrade to
   the poster with no display-toggling.
   ─────────────────────────────────────────────────────────────────────────── */

.pp-clip {
  position: relative;
  margin: 0;
  width: 100%;
  aspect-ratio: 1200 / 750;
  border-radius: var(--radius-lg, 18px);
  overflow: hidden;
  line-height: 0;
  background: var(--pp-slate-100, #f1f5f9);
  box-shadow: 0 18px 50px -22px rgba(15, 23, 42, .38),
              0 2px 8px -4px rgba(15, 23, 42, .18);
}

.pp-clip-video,
.pp-clip-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Poster is the base fallback layer; the video covers it when present. */
.pp-clip-poster { z-index: 0; }
.pp-clip-video  { z-index: 1; }

/* Optional caption under a clip. */
.pp-clip-caption {
  margin: 10px 2px 0;
  font-size: .82rem;
  line-height: 1.4;
  color: var(--pp-slate-500, #64748b);
}

/* ── Reduced motion: never autoplay — show the still poster instead. ──
   The JS skips building the <video> under reduced motion; this hides any legacy
   inline-video markup so the poster underneath shows. */
@media (prefers-reduced-motion: reduce) {
  .pp-clip-video { display: none; }
}

/* NOTE: there is intentionally NO [data-theme="dark"] poster gate any more.
   Dark pages now play the DARK-captured video (js builds <id>-dark.* sources);
   the dark poster is the dark video's own still. */