/* ─────────────────────────────────────────────────────────────────
   block-slider-embed — W9-A3 (2026-05-07)
   16:9 reel-preview carousel: poster + play-button overlay,
   click-to-load iframe (lazy). Mobile-first responsive.
   A11y: focus rings, reduced-motion, scroll-snap fallback.
   ───────────────────────────────────────────────────────────────── */

.block-slider-embed { position: relative; }

.block-slider-embed .slider-embed-wrap {
  border-radius: var(--ds-radius-lg);
  background: var(--scheme-card-bg);
  padding-top: var(--ds-space-4);
  padding-bottom: var(--ds-space-4);
}

.block-slider-embed .slider-embed-item {
  position: relative;
  border-radius: var(--ds-radius);
  overflow: hidden;
  box-shadow: var(--ds-shadow-md, 0 4px 12px rgba(0,0,0,0.18));
  /* WAVE3-F06 2026-05-08: media frame letterbox; literal #000 so dark-scheme
     guardrail can't rebind --ds-ink → white and turn the embed letterbox
     harsh-white (audit §2.2). */
  background: #000;
}

.block-slider-embed .slider-embed-item__media { position: relative; }
.block-slider-embed .slider-embed-item__media iframe,
.block-slider-embed .slider-embed-item__video,
.block-slider-embed .slider-embed-item__img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
}

/* Defensive max-width on every img/video/iframe inside slides */
.block-slider-embed .slider-embed-slide img,
.block-slider-embed .slider-embed-slide video,
.block-slider-embed .slider-embed-slide iframe {
  max-width: 100%;
  height: auto;
}
.block-slider-embed .slider-embed-item__media img,
.block-slider-embed .slider-embed-item__media video,
.block-slider-embed .slider-embed-item__media iframe {
  max-width: 100%;
}

/* Aspect-ratio variants ---------------------------------------- */
.block-slider-embed .slider-embed-carousel--aspect-16\:9 .slider-embed-item__media { aspect-ratio: 16 / 9; }
.block-slider-embed .slider-embed-carousel--aspect-4\:3  .slider-embed-item__media { aspect-ratio: 4 / 3; }
.block-slider-embed .slider-embed-carousel--aspect-1\:1  .slider-embed-item__media { aspect-ratio: 1 / 1; }
.block-slider-embed .slider-embed-carousel--aspect-cover .slider-embed-item__media { aspect-ratio: 16 / 9; }

/* Force absolute fill for media inside aspect-ratio container --- */
.block-slider-embed .slider-embed-item__media .slider-embed-item__img,
.block-slider-embed .slider-embed-item__media .slider-embed-item__video,
.block-slider-embed .slider-embed-item__media .slider-embed-item__iframe,
.block-slider-embed .slider-embed-item__media .slider-embed-item__poster-btn {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Poster click-to-play button --------------------------------- */
.block-slider-embed .slider-embed-item__poster-btn {
  display: block;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  cursor: pointer;
  overflow: hidden;
  /* Tap target — wrapper is full slide media area, well > 44x44 */
  min-width: 44px;
  min-height: 44px;
}
.block-slider-embed .slider-embed-item__poster-btn .slider-embed-item__img {
  transition: transform var(--ds-duration-fast, 150ms) var(--ds-ease, ease-out),
              filter var(--ds-duration-fast, 150ms) var(--ds-ease, ease-out);
}
.block-slider-embed .slider-embed-item__poster-btn:hover .slider-embed-item__img,
.block-slider-embed .slider-embed-item__poster-btn:focus-visible .slider-embed-item__img {
  transform: scale(1.03);
  filter: brightness(0.9);
}
.block-slider-embed .slider-embed-item__poster-btn:focus-visible {
  outline: 3px solid var(--ds-cta, #e36218);
  outline-offset: -3px;
}

/* Play glyph (centred over poster) ----------------------------- */
.block-slider-embed .slider-embed-item__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  pointer-events: none;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.45));
  transition: transform var(--ds-duration-fast, 150ms) var(--ds-ease, ease-out);
}
.block-slider-embed .slider-embed-item__poster-btn:hover .slider-embed-item__play,
.block-slider-embed .slider-embed-item__poster-btn:focus-visible .slider-embed-item__play {
  transform: translate(-50%, -50%) scale(1.08);
}
.block-slider-embed .slider-embed-item__play svg {
  display: block;
  width: 100%;
  height: 100%;
}
/* Static (decorative) play badge when no video id is configured */
.block-slider-embed .slider-embed-item__play--static { opacity: 0.85; }

/* Background overlay ------------------------------------------ */
.block-slider-embed .slider-embed-item__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.35) 60%, rgba(0,0,0,0) 100%);
  pointer-events: none;
}

/* Caption (bottom card, mobile-first) --------------------------
   WAVE3-F06 2026-05-08: Pattern B local rebind (audit §2.1 — canonical
   Pattern B violation per doctrine "faq-cta-box" case study). The caption
   is a self-styled paper card. On dark schemes the global guardrail
   rebinds --ds-ink → white and the title/body would render white-on-cream
   (~1.16:1, unreadable). Pin the caption tokens locally so the cream paper
   bg + ink text always render correctly regardless of outer scheme. */
.block-slider-embed .slider-embed-item__caption {
  --scheme-bg: var(--ds-paper, #faf6ec);
  --scheme-fg: #0e0f0c;
  --scheme-fg-soft: rgba(14,15,12,0.85);
  --scheme-fg-mute: rgba(14,15,12,0.65);
  --scheme-rule: rgba(14,15,12,0.12);
  /* Defensive: descendants reading --ds-ink directly get the right ink */
  --ds-ink: #0e0f0c;
  --ds-ink-soft: rgba(14,15,12,0.85);
  --ds-ink-mute: rgba(14,15,12,0.65);

  padding: var(--ds-space-3) var(--ds-space-4);
  background: var(--ds-paper, #faf6ec);
  color: #0e0f0c;
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-2);
}
/* Senior-UX 2026-05-07: caption title is h3 → humanist sentence-case (no Anton, no all-caps).
   Body opacity removed (was 0.85 → reduced contrast below AAA).
   WAVE3-F06 2026-05-08: title/body now read --scheme-fg from the locally-
   rebound caption (Pattern B above), so we no longer hardcode --ds-ink. */
.block-slider-embed .slider-embed-item__title {
  font-family: var(--ds-font-body, 'DM Sans', sans-serif);
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--ds-fs-h3, 1.5rem);
  font-weight: 700;
  line-height: var(--ds-lh-display, 1.15);
  margin: 0;
  color: var(--scheme-fg);
}
.block-slider-embed .slider-embed-item__body {
  font-family: var(--ds-font-body, 'DM Sans', sans-serif);
  font-size: var(--ds-fs-body, 1.125rem);
  line-height: var(--ds-lh-body, 1.6);
  margin: 0;
  color: var(--scheme-fg);
  opacity: 1;
}
.block-slider-embed .slider-embed-item__cta {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  justify-content: center;
  background: var(--ds-cta, #e36218);
  /* WAVE3-F06 2026-05-08: pin literal #fff — `--scheme-fg` would resolve
     to ink (black) on light schemes inside the Pattern-B-rebound caption,
     producing black-on-orange (passes 6.5:1 but breaks design intent). */
  color: #fff;
  font-family: var(--ds-font-body, 'DM Sans', sans-serif);
  font-weight: 700;
  font-size: var(--ds-fs-body, 1.125rem);
  text-decoration: none;
  padding: 12px 24px;
  min-height: var(--ds-touch-target, 48px);
  border-radius: var(--ds-radius-pill, 999px);
  box-shadow: var(--ds-shadow-cta, 0 4px 12px rgba(227,98,24,0.25));
  transition: transform var(--ds-duration-fast, 150ms) var(--ds-ease, ease-out),
              box-shadow var(--ds-duration-fast, 150ms) var(--ds-ease, ease-out),
              background var(--ds-duration-fast, 150ms) var(--ds-ease, ease-out);
}
.block-slider-embed .slider-embed-item__cta:hover {
  background: var(--ds-cta-hover, var(--ds-cta-dk, #c4541a));
  transform: translateY(-2px);
  box-shadow: var(--ds-shadow-lg, 0 8px 20px rgba(0,0,0,0.25));
  color: #fff;
}
.block-slider-embed .slider-embed-item__cta:focus-visible {
  outline: none;
  box-shadow: var(--ds-focus-ring);
}

/* Pagination dots --------------------------------------------- */
.block-slider-embed .owl-theme .owl-dots {
  margin-top: var(--ds-space-4);
  text-align: center;
  padding-bottom: 8px;
}
.block-slider-embed .owl-theme .owl-dots .owl-dot { padding: 8px; }
.block-slider-embed .owl-theme .owl-dots .owl-dot span {
  width: 12px;
  height: 12px;
  margin: 0 4px;
  background: var(--scheme-fg-mute, rgba(0,0,0,0.25));
  border: 2px solid transparent;
  border-radius: 50%;
  display: inline-block;
  transition: all var(--ds-duration-fast, 150ms) var(--ds-ease, ease-out);
  opacity: 0.6;
}
.block-slider-embed .owl-theme .owl-dots .owl-dot.active span {
  width: 16px;
  height: 16px;
  background: var(--ds-cta, #e36218);
  opacity: 1;
}
.block-slider-embed .owl-theme .owl-dots .owl-dot:hover span {
  background: var(--ds-cta, #e36218);
  opacity: 1;
}
.block-slider-embed .owl-theme .owl-dots .owl-dot:focus-visible span {
  border-color: var(--ds-cta, #e36218);
  box-shadow: 0 0 0 2px var(--ds-paper, #fff), 0 0 0 4px var(--ds-cta, #e36218);
}
.block-slider-embed .slider-embed-carousel--no-dots .owl-dots { display: none !important; }

/* Arrow nav buttons (44px+ tap target) ------------------------- */
.block-slider-embed .owl-theme .owl-nav button.owl-prev,
.block-slider-embed .owl-theme .owl-nav button.owl-next {
  background: var(--ds-cta, #e36218);
  color: var(--scheme-fg, #fff);
  border: none;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--ds-shadow-md, 0 4px 12px rgba(0,0,0,0.18));
  transition: transform var(--ds-duration-fast, 150ms) var(--ds-ease, ease-out),
              box-shadow var(--ds-duration-fast, 150ms) var(--ds-ease, ease-out),
              background var(--ds-duration-fast, 150ms) var(--ds-ease, ease-out);
}
.block-slider-embed .owl-theme .owl-nav button.owl-prev:hover,
.block-slider-embed .owl-theme .owl-nav button.owl-next:hover {
  background: var(--ds-cta-hover, var(--ds-cta-dk, #c4541a));
  transform: translateY(-2px) scale(1.05);
  box-shadow: var(--ds-shadow-lg, 0 8px 20px rgba(0,0,0,0.25));
}
.block-slider-embed .owl-theme .owl-nav button.owl-prev:focus-visible,
.block-slider-embed .owl-theme .owl-nav button.owl-next:focus-visible {
  outline: 3px solid var(--ds-cta, #e36218);
  outline-offset: 3px;
}
.block-slider-embed .slider-embed-wrap .owl-theme .owl-nav .icon,
.block-slider-embed .owl-theme .owl-nav .icon {
  font-size: 22px;
  color: var(--scheme-fg, #fff) !important;
  line-height: 1;
}
.block-slider-embed .slider-embed-carousel--no-arrows .owl-nav { display: none !important; }

/* Mobile: tighter padding (mobile-first) ----------------------- */
@media (max-width: 575.98px) {
  .block-slider-embed .container,
  .block-slider-embed .container-fluid {
    max-width: 100%;
    padding-left: var(--ds-space-3, 12px);
    padding-right: var(--ds-space-3, 12px);
  }
  .block-slider-embed { overflow-x: hidden; }
  .block-slider-embed .slider-embed-item__caption {
    padding: var(--ds-space-3, 12px);
  }
  .block-slider-embed .slider-embed-item__title {
    font-size: var(--ds-fs-h4, 1.25rem);
  }
  .block-slider-embed .slider-embed-item__play {
    width: 64px;
    height: 64px;
  }
}

/* Touch swipe via scroll-snap fallback ------------------------- */
@media (hover: none) and (pointer: coarse) {
  .block-slider-embed .owl-carousel:not(.owl-loaded) {
    display: flex !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: var(--ds-space-2);
  }
  .block-slider-embed .owl-carousel:not(.owl-loaded) .slider-embed-slide {
    flex: 0 0 90%;
    scroll-snap-align: start;
  }
}

/* Reduced motion ---------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .block-slider-embed .owl-carousel,
  .block-slider-embed .owl-stage,
  .block-slider-embed .owl-item,
  .block-slider-embed .slider-embed-item,
  .block-slider-embed .slider-embed-item__cta,
  .block-slider-embed .slider-embed-item__poster-btn,
  .block-slider-embed .slider-embed-item__play,
  .block-slider-embed .slider-embed-item__img,
  .block-slider-embed .owl-theme .owl-nav button {
    transition: none !important;
    animation: none !important;
  }
  .block-slider-embed .slider-embed-item__cta:hover,
  .block-slider-embed .slider-embed-item__poster-btn:hover .slider-embed-item__img,
  .block-slider-embed .slider-embed-item__poster-btn:hover .slider-embed-item__play,
  .block-slider-embed .owl-theme .owl-nav button:hover {
    transform: none !important;
  }
}

/* W9-A9 2026-05-07: Verified-style pill (parity with slider/slider-priority-video).
   Optional per-slide badge — uses --ds-trust token, pinned to top-left of poster. */
.block-slider-embed .slider-embed-item__badge {
  position: absolute;
  top: var(--ds-space-2, 8px);
  left: var(--ds-space-2, 8px);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--ds-trust);
  color: var(--ds-cream, #faf6ec);
  font-family: var(--ds-font-body, 'DM Sans', sans-serif);
  font-size: var(--ds-fs-eyebrow, 0.875rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: var(--ds-radius-pill, 999px);
  box-shadow: var(--ds-shadow-sm, 0 2px 6px rgba(0,0,0,0.2));
  pointer-events: none;
}
.block-slider-embed .slider-embed-item__badge-icon { flex: 0 0 auto; }

/* ─────────────────────────────────────────────────────────────────
   BUG-T3 2026-05-07: Pre-init / no-JS fallback for desktop.
   Without owl-loaded, slides render as inline-flow elements and
   visually overlap on desktop (3-up data-owl-items=3). Hide all
   but the first slide until Owl initialises so the section never
   renders broken on first paint.
   ───────────────────────────────────────────────────────────── */
.block-slider-embed .owl-carousel:not(.owl-loaded) > .slider-embed-slide ~ .slider-embed-slide {
  display: none;
}
.block-slider-embed .owl-carousel:not(.owl-loaded) > .slider-embed-slide:first-child {
  display: block;
  width: 100%;
  max-width: 100%;
}
/* Touch fallback (scroll-snap) overrides above to keep all slides
   horizontally swipable on devices that never load Owl. */
@media (hover: none) and (pointer: coarse) {
  .block-slider-embed .owl-carousel:not(.owl-loaded) > .slider-embed-slide ~ .slider-embed-slide { display: block; }
  .block-slider-embed .owl-carousel:not(.owl-loaded) > .slider-embed-slide { flex: 0 0 90%; }
}

/* SWEEP-A3 2026-05-08: bumped from a hard-coded 48 px buffer to the shared
   --ds-sticky-cta-clearance token (96 px at ≤900 px). The 2026-05-07 BUG-T3
   pass (48 px) was insufficient — bug-evidence flagged the in-card
   `.slider-embed-item__cta` ("Watch the walkthrough") still overlapping
   `.acme-cta-call` (153×16 px) and `.acme-cta-quote` (92×16 px) at 375 px.
   The token is now the single source of truth for the fixed-bottom bar
   height so module CSS doesn't go stale when the chrome bar resizes. */
@media (max-width: 900px) {
  .block-slider-embed .slider-embed-wrap {
    padding-bottom: calc(var(--ds-space-5, 24px) + var(--ds-sticky-cta-clearance, 96px));
  }
  .block-slider-embed {
    scroll-padding-bottom: var(--ds-sticky-cta-clearance, 96px);
  }
  .block-slider-embed .slider-embed-item__cta {
    scroll-margin-block-end: var(--ds-sticky-cta-clearance, 96px);
  }
}

/* ── Validate-2026-05-08 fix: sticky-CTA bottom clearance for in-page CTAs (Group A). ── */
@media (max-width: 900px) {
  .block-slider-embed {
    padding-bottom: calc(var(--ds-space-5, 1.5rem) + var(--ds-sticky-cta-clearance, 96px));
  }
}

/* ── F-SE 2026-05-08 fix: in-card CTA tap-target floor (53→56 px). ── */
.slider-embed-card-cta,
.slider-embed-cta,
.slider-embed .btn-primary,
.slider-embed .cta-primary,
[class*="slider-embed"] .cta-primary,
[class*="slider-embed-card"] .btn {
  min-height: var(--ds-touch-target-primary, 56px) !important;
}


/* ── P-FV2-FIX 2026-05-08: F-SE selector miss — actual rendered class is
   .slider-embed-item__cta (BEM double-underscore). Earlier F-SE block missed
   it; rendered CTA stayed at 53 px. Add the actual selector. */
.slider-embed-item__cta {
  min-height: var(--ds-touch-target-primary, 56px) !important;
}

/* ─────────────────────────────────────────────────────────────────
   WAVE3-F06 2026-05-08 — Pattern C scheme-scoped overrides
   Targets audit T7 §2.4 (active dot orange-on-orange) + §X.3 (CTA pill
   on accent collapses to orange-on-orange). Inverse swap on accent.
   ───────────────────────────────────────────────────────────────── */

.scheme-accent .block-slider-embed .owl-theme .owl-dots .owl-dot.active span,
.scheme-trust  .block-slider-embed .owl-theme .owl-dots .owl-dot.active span,
.scheme-ink    .block-slider-embed .owl-theme .owl-dots .owl-dot.active span,
.scheme-steel  .block-slider-embed .owl-theme .owl-dots .owl-dot.active span,
.scheme-accent .block-slider-embed .owl-theme .owl-dots .owl-dot:hover span,
.scheme-trust  .block-slider-embed .owl-theme .owl-dots .owl-dot:hover span,
.scheme-ink    .block-slider-embed .owl-theme .owl-dots .owl-dot:hover span,
.scheme-steel  .block-slider-embed .owl-theme .owl-dots .owl-dot:hover span {
  background: #fff;
}

/* CTA pill on accent — inverse */
.scheme-accent .block-slider-embed .slider-embed-item__cta {
  background: #fff;
  color: var(--ds-cta);
}
.scheme-accent .block-slider-embed .slider-embed-item__cta:hover,
.scheme-accent .block-slider-embed .slider-embed-item__cta:focus-visible {
  background: rgba(255,255,255,0.92);
  color: var(--ds-cta);
}

/* Arrow nav: on accent the orange face also collapses; switch to white. */
.scheme-accent .block-slider-embed .owl-theme .owl-nav button.owl-prev,
.scheme-accent .block-slider-embed .owl-theme .owl-nav button.owl-next {
  background: #fff;
  color: var(--ds-cta);
}
.scheme-accent .block-slider-embed .owl-theme .owl-nav button.owl-prev .icon,
.scheme-accent .block-slider-embed .owl-theme .owl-nav button.owl-next .icon {
  color: var(--ds-cta) !important;
}