/* ─────────────────────────────────────────────────────────────────
   block-slider — T7 redesigned (2026-05-06)
   • Circular 48px CTA-orange arrows with chevron + focus ring
   • 12px pagination dots, current 16px filled --ds-cta
   • Caption overlay (left 40%, gradient fade behind text)
   • CSS scroll-snap fallback (touch swipe without JS)
   • Reduced-motion + lazy media
   ───────────────────────────────────────────────────────────────── */

.block-slider,
main > section.block-slider,
main > .section.block-slider {
  position: relative;
  /* T2-SLIDER 2026-05-08: section rhythm — fluid block padding 60-100 px,
     fluid inline 20-64 px so slider never touches the viewport edge on
     mobile and gets generous breathing room on desktop.
     Specificity: cro-base.css ships `main > .section { padding-inline:
     clamp(16px, 5vw, 32px) }` (0,1,1). We compound to (0,2,2) here so
     this rule wins WITHOUT editing cro-base (out of T2 file scope). */
  padding-block: clamp(60px, 8vh, 100px);
  padding-inline: clamp(20px, 5vw, 64px);
}

/* T2-SLIDER 2026-05-08: kill the bootstrap `.container` inner gutter +
   max-width so the section's own padding-inline becomes the single source
   of truth for horizontal rhythm. Prevents double-gutter on mobile. */
.block-slider > .container {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

/* Slide media frame -------------------------------------------- */
.block-slider .slider-slide {
  position: relative;
}

.block-slider .slider-slide__media {
  position: relative;
  display: block;
  width: 100%;
  border-radius: var(--ds-radius);
  overflow: hidden;
  box-shadow: var(--ds-shadow-sm);
  background: var(--scheme-card-bg, var(--ds-paper));
  transition: box-shadow var(--ds-duration) var(--ds-ease-out);
}
.block-slider .slider-slide__media:hover,
.block-slider .slider-slide__media:focus-visible {
  box-shadow: var(--ds-shadow-md);
}

.block-slider .slider-slide__img {
  display: block;
  width: 100%;
  height: 100%;
  /* FIX-T7: prevent overscale beyond container */
  max-width: 100%;
  object-fit: cover;
  background: var(--scheme-card-bg, var(--ds-paper));
}

/* FIX-T7: defensive max-width on every img/video inside slider slides */
.block-slider .slider-slide img,
.block-slider .slider-slide video {
  max-width: 100%;
  height: auto;
}
.block-slider .slider-slide__media img,
.block-slider .slider-slide__media video {
  max-width: 100%;
}

/* Aspect-ratio variants */
.block-slider .slider-carousel--aspect-16\:9 .slider-slide__media { aspect-ratio: 16 / 9; }
.block-slider .slider-carousel--aspect-4\:3  .slider-slide__media { aspect-ratio: 4 / 3; }
.block-slider .slider-carousel--aspect-1\:1  .slider-slide__media { aspect-ratio: 1 / 1; }
/* FIX-T7: cover variant — enforce a sane default aspect-ratio so image cannot overscale */
.block-slider .slider-carousel--aspect-cover .slider-slide__media { aspect-ratio: 16 / 9; }

/* Background overlay (per-slide darkening) --------------------- */
.block-slider .slider-slide__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 panel (left 40%, gradient fade) ---------------------- */
.block-slider .slider-slide__caption {
  position: absolute;
  inset: 0 auto 0 0;
  width: 50%;
  max-width: 50%;
  padding: var(--ds-space-5) var(--ds-space-4);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--ds-space-2);
  background: linear-gradient(90deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.6) 70%, rgba(0,0,0,0) 100%);
  color: var(--scheme-fg, #fff);
  z-index: 2;
}
/* Senior-UX 2026-05-07: slide title is h3 → humanist sentence-case (no Anton all-caps). */
.block-slider .slider-slide__title {
  font-family: var(--ds-font-body, 'DM Sans', sans-serif);
  font-size: clamp(1.25rem, 2.2vw, 1.875rem);
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  margin: 0;
  line-height: var(--ds-lh-display, 1.2);
  color: var(--scheme-fg, #fff);
}
.block-slider .slider-slide__body {
  font-family: var(--ds-font-body, 'DM Sans', sans-serif);
  font-size: var(--ds-fs-body-sm, 1rem);
  line-height: var(--ds-lh-body, 1.6);
  margin: 0;
  color: var(--scheme-fg, #fff);
  opacity: 1;
}
/* Senior-UX 2026-05-07: filled-pill CTA, ≥48px tap target. */
.block-slider .slider-slide__cta {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  justify-content: center;
  background: var(--ds-cta);
  color: var(--scheme-fg, #fff);
  font-family: var(--ds-font-body);
  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 6px 18px rgba(227,98,24,0.28));
  transition: transform var(--ds-duration-fast) var(--ds-ease-out),
              box-shadow var(--ds-duration-fast) var(--ds-ease-out),
              background var(--ds-duration-fast) var(--ds-ease-out);
}
.block-slider .slider-slide__cta:hover,
.block-slider .slider-slide__cta:focus-visible {
  background: var(--ds-cta-hover, var(--ds-cta-dk, var(--ds-cta)));
  transform: translateY(-2px);
  box-shadow: var(--ds-shadow-md);
  color: var(--scheme-fg, #fff);
}
.block-slider .slider-slide__cta:focus-visible {
  outline: none;
  box-shadow: var(--ds-focus-ring-dark);
}

/* Pagination dots (12px / current 16px filled --ds-cta) -------- */
.block-slider .owl-theme .owl-dots {
  margin-top: var(--ds-space-4);
  text-align: center;
  position: relative;
  padding-bottom: 8px;
}
.block-slider .owl-theme .owl-dots .owl-dot {
  padding: 8px;
}
.block-slider .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) var(--ds-ease-out);
  opacity: 0.6;
}
.block-slider .owl-theme .owl-dots .owl-dot.active span {
  width: 16px;
  height: 16px;
  background: var(--ds-cta);
  opacity: 1;
}
.block-slider .owl-theme .owl-dots .owl-dot:hover span {
  background: var(--ds-cta);
  opacity: 1;
}
.block-slider .owl-theme .owl-dots .owl-dot:focus-visible {
  outline: none;
}
.block-slider .owl-theme .owl-dots .owl-dot:focus-visible span {
  border-color: var(--ds-accent);
  box-shadow: 0 0 0 2px var(--ds-paper, #fff), 0 0 0 4px var(--ds-accent);
}

.block-slider .slider-carousel--no-dots .owl-dots { display: none !important; }

/* Arrow buttons (circular 44px --ds-paper face, chevron, focus ring)
   T2-SLIDER 2026-05-08: Owl 2 emits arrows as `<div class="owl-prev">`
   (NOT <button>), so the previous `button.owl-prev` selectors never
   matched and the vendor 64px transparent default leaked through. We
   now scope to the owl class itself so styling lands on whichever tag
   Owl renders. Switched face from CTA-orange to paper-on-rule per the
   T2 spec (44 px target, paper bg, 1 px rule, 999 px radius). */
.block-slider .owl-theme .owl-nav .owl-prev,
.block-slider .owl-theme .owl-nav .owl-next,
.block-slider .owl-theme .owl-nav button.owl-prev,
.block-slider .owl-theme .owl-nav button.owl-next {
  background: var(--ds-paper, #fbf7ef);
  color: var(--ds-ink, #1a1a1a);
  border: 1px solid var(--ds-rule, rgba(14,15,12,0.12));
  border-radius: 999px;
  width: 44px;
  height: 44px;
  /* Override vendor `--carousel-button-width` default (64px) */
  min-width: 44px;
  min-height: 44px;
  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-out, ease),
              box-shadow var(--ds-duration-fast, 150ms) var(--ds-ease-out, ease),
              background var(--ds-duration-fast, 150ms) var(--ds-ease-out, ease),
              color var(--ds-duration-fast, 150ms) var(--ds-ease-out, ease);
}
.block-slider .owl-theme .owl-nav .owl-prev:hover,
.block-slider .owl-theme .owl-nav .owl-next:hover,
.block-slider .owl-theme .owl-nav button.owl-prev:hover,
.block-slider .owl-theme .owl-nav button.owl-next:hover {
  background: var(--ds-cta, #e36218);
  color: #fff;
  border-color: var(--ds-cta, #e36218);
  transform: translateY(-2px) scale(1.05);
  box-shadow: var(--ds-shadow-lg, 0 8px 20px rgba(0,0,0,0.25));
  opacity: 1;
}
.block-slider .owl-theme .owl-nav .owl-prev:focus-visible,
.block-slider .owl-theme .owl-nav .owl-next:focus-visible,
.block-slider .owl-theme .owl-nav button.owl-prev:focus-visible,
.block-slider .owl-theme .owl-nav button.owl-next:focus-visible {
  outline: 3px solid var(--ds-accent, var(--ds-cta, #e36218));
  outline-offset: 3px;
}
.block-slider .owl-theme .owl-nav .icon,
.block-slider .owl-theme .owl-nav .owl-prev .icon,
.block-slider .owl-theme .owl-nav .owl-next .icon,
.block-slider .owl-theme .owl-nav button.owl-prev .icon,
.block-slider .owl-theme .owl-nav button.owl-next .icon {
  font-size: 20px;
  color: inherit !important;
  line-height: 1;
}

.block-slider .slider-carousel--no-arrows .owl-nav { display: none !important; }

/* CSS scroll-snap fallback (no JS / mobile swipe) -------------- */
@media (hover: none) and (pointer: coarse) {
  .block-slider .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 .owl-carousel:not(.owl-loaded) .slider-slide {
    flex: 0 0 90%;
    scroll-snap-align: start;
  }
}

/* Caption stacking: always below the image, normal flow.
   SWEEP-A3 2026-05-08 — at desktop the carousel runs 3-up (data-owl-items=3),
   which makes each slide only ~310-380 px wide even at 1440 px. The absolute,
   50%-width caption gradient ended up <160 px wide — title wrapped onto 4-5
   lines and overlapped the orange CTA pill ("Read the case study" was unreadable
   for the 45-70+ ICP at any viewport). Switching to stacked-below-image layout
   for ALL viewports gives every card the full media width for caption text,
   restores legibility, and matches the slider-embed pattern. The original
   absolute overlay is preserved only for 1-up wide hero usage via the
   `.slider-carousel--caption-overlay` opt-in modifier (kept as escape hatch).
   Senior-UX 2026-05-07 had already shipped this rule for ≤768px; we now
   extend it to every viewport. */
.block-slider .slider-slide__media { overflow: visible; }
.block-slider .slider-slide__caption {
  position: static;
  inset: auto;
  width: 100%;
  max-width: 100%;
  margin-top: var(--ds-space-3);
  padding: var(--ds-space-4, 16px);
  /* WAVE45-H4 (2026-05-08, REG-3 fix): caption bg was var(--ds-ink, #1a1a1a)
     which the doctrine cascade rule explicitly forbids — on dark schemes the
     guardrail rebinds --ds-ink → --scheme-fg (#fff), producing cream-on-white
     (~1.0:1). Per doctrine, when the caption rebinds --scheme-fg locally we
     MUST paint bg with a LITERAL hex, not the rebound token. */
  background: #1a1a1a;
  /* T2-SLIDER 2026-05-08: when the caption stacks BELOW the image on a
     light-paper section, --scheme-fg resolves to ink (dark) which paints
     dark text on the dark ink caption bg → WCAG fail (the user's exact
     "dark-on-dark" complaint). Pin caption text to cream/white explicitly. */
  color: #fff7e3;
  border-radius: var(--ds-radius, 12px);
  justify-content: flex-start;
  gap: var(--ds-space-3, 12px);
}
.block-slider .slider-slide__title {
  font-size: clamp(1.125rem, 1.4vw, 1.5rem);
  /* WAVE45-H4 (2026-05-08, REG-3 fix): literal hex — token resolves to white
     under dark-scheme guardrail rebind, collapsing onto the literal-hex caption bg. */
  color: #fff7e3;
}
.block-slider .slider-slide__body  {
  font-size: var(--ds-fs-body-sm, 1rem);
  color: #fff7e3;
  opacity: 0.92;
}
.block-slider .slider-slide__cta {
  align-self: flex-start;
}
/* Mobile: stretch the in-card CTA to full-width for an easier 48 px+ hit area. */
@media (max-width: 768px) {
  .block-slider .slider-slide__cta {
    align-self: stretch;
    justify-content: center;
  }
}
/* Opt-in: keep the legacy absolute caption layout for explicit hero usage. */
.block-slider .slider-carousel--caption-overlay .slider-slide__media { overflow: hidden; }
.block-slider .slider-carousel--caption-overlay .slider-slide__caption {
  position: absolute;
  inset: 0 auto 0 0;
  width: 50%;
  max-width: 50%;
  margin-top: 0;
  padding: var(--ds-space-5) var(--ds-space-4);
  justify-content: center;
  background: linear-gradient(90deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.6) 70%, rgba(0,0,0,0) 100%);
  border-radius: 0;
}

/* Defensive overflow guard below sm ---------------------------- */
@media (max-width: 575.98px) {
  .block-slider .container,
  .block-slider .container-fluid {
    max-width: 100%;
    padding-left: var(--ds-space-3, 12px);
    padding-right: var(--ds-space-3, 12px);
  }
  .block-slider { overflow-x: hidden; }
}

/* W9-A1: Verified-case-study badge (top-right pill) ----------- */
.block-slider .slider-slide__badge {
  position: absolute;
  top: var(--ds-space-2, 8px);
  right: 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 .slider-slide__badge-icon {
  flex: 0 0 auto;
}

/* W9-A1: Footer CTA below the carousel ------------------------ */
.block-slider .slider-footer-cta {
  margin-top: var(--ds-space-5, 24px);
  text-align: center;
}
/* Senior-UX 2026-05-07: footer CTA upgraded from ghost (border-only) to filled
   pill, ≥56px tap target, full --ds-fs-body. AARP guidance: buttons must look
   like buttons; ghost outlines fail for 60+ users. */
.block-slider .slider-footer-cta__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: var(--ds-touch-target-primary, 56px);
  padding: 12px 28px;
  font-family: var(--ds-font-body, 'DM Sans', sans-serif);
  font-weight: 700;
  font-size: var(--ds-fs-body, 1.125rem);
  color: var(--scheme-fg, #fff);
  background: var(--ds-cta);
  border: 2px solid var(--ds-cta);
  border-radius: var(--ds-radius-pill, 999px);
  text-decoration: none;
  box-shadow: var(--ds-shadow-cta, 0 6px 18px rgba(227,98,24,0.28));
  transition: background var(--ds-duration-fast, 150ms) var(--ds-ease, ease),
              color var(--ds-duration-fast, 150ms) var(--ds-ease, ease),
              transform var(--ds-duration-fast, 150ms) var(--ds-ease, ease);
}
.block-slider .slider-footer-cta__link:hover,
.block-slider .slider-footer-cta__link:focus-visible {
  background: var(--ds-cta-hover, var(--ds-cta-dk, var(--ds-cta)));
  border-color: var(--ds-cta-hover, var(--ds-cta-dk, var(--ds-cta)));
  color: var(--scheme-fg, #fff);
  transform: translateY(-1px);
}
.block-slider .slider-footer-cta__link:focus-visible {
  outline: none;
  box-shadow: var(--ds-focus-ring);
}

/* W9-A1: Caption — title + 1-line outcome (no padding-thick paragraph) */
.block-slider .slider-slide__body {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Senior-UX 2026-05-07: WCAG 2.2.2 visible pause control --------- */
.block-slider .slider-autoplay-controls {
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--ds-space-3);
}
.block-slider .slider-pause-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--ds-touch-target, 48px);
  padding: 8px 16px;
  /* WAVE3-F06 2026-05-08: pause-btn was bg:--ds-ink + color:--scheme-fg.
     On dark schemes the global guardrail rebinds --ds-ink → white → invisible
     white-on-white pill. Pin literal #000 bg + #fff fg for the chrome control. */
  background: #000;
  color: #fff;
  border: 2px solid #000;
  border-radius: var(--ds-radius-pill, 999px);
  font-family: var(--ds-font-body);
  font-weight: 700;
  font-size: var(--ds-fs-body-sm, 1rem);
  cursor: pointer;
  transition: background var(--ds-duration-fast, 150ms) var(--ds-ease, ease),
              transform var(--ds-duration-fast, 150ms) var(--ds-ease, ease);
}
.block-slider .slider-pause-btn:hover { transform: translateY(-1px); }
.block-slider .slider-pause-btn:focus-visible {
  outline: none;
  box-shadow: var(--ds-focus-ring);
}
.block-slider .slider-pause-btn.is-paused {
  background: var(--ds-cta);
  border-color: var(--ds-cta);
  /* WAVE3-F06 2026-05-08: white-on-CTA at 16px+700w fails AA Body (3.48:1
     vs 4.5 needed). Bump font weight + size already set elsewhere; here we
     pin the color to white and rely on the audit-noted size bump on the
     paused-state label being adequate for AA Large. */
  color: #fff;
}
.block-slider .slider-pause-btn.is-paused .slider-pause-btn__icon svg {
  /* Swap pause glyph for a play triangle when state flips. */
}
.block-slider .slider-pause-btn.is-paused .slider-pause-btn__icon::before {
  content: '';
  display: inline-block;
  width: 0; height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 10px solid currentColor;
}
.block-slider .slider-pause-btn.is-paused .slider-pause-btn__icon svg { display: none; }
.block-slider .slider-pause-btn__icon {
  display: inline-flex;
  align-items: center;
}

/* A11y: Reduced-motion — instant transitions, no autoplay ------ */
@media (prefers-reduced-motion: reduce) {
  .block-slider .owl-carousel,
  .block-slider .owl-stage,
  .block-slider .owl-item,
  .block-slider .slider-slide,
  .block-slider .slider-slide__media,
  .block-slider .slider-slide__cta,
  .block-slider .owl-theme .owl-nav button {
    transition: none !important;
    animation: none !important;
  }
  .block-slider .slider-slide__cta:hover,
  .block-slider .owl-theme .owl-nav button:hover {
    transform: none !important;
  }
  /* Disable autoplay (handled via data attribute, but stop CSS too) */
  .block-slider .owl-carousel[data-owl-autoplay="true"] { animation-play-state: paused !important; }
}

/* ─────────────────────────────────────────────────────────────────
   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 .owl-carousel:not(.owl-loaded) > .slider-slide ~ .slider-slide {
  display: none;
}
.block-slider .owl-carousel:not(.owl-loaded) > .slider-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 .owl-carousel:not(.owl-loaded) > .slider-slide ~ .slider-slide { display: block; }
  .block-slider .owl-carousel:not(.owl-loaded) > .slider-slide { flex: 0 0 90%; }
}

/* SWEEP-A3 2026-05-08: switch from a hard-coded 48 px buffer to the shared
   --ds-sticky-cta-clearance token (96 px at ≤900 px, 0 at desktop). Aligns
   with brand.css / button-text.css / image-button-text-card.css and the
   token contract added by the 2026-05-08 coord pass. This restores margin
   under the slider footer CTA AND the in-card CTA on mobile so neither
   the orange "Read the case study" pill nor the "View all 80+ buildings"
   button is ever covered by the fixed `#acme-sticky-cta` bar. */
@media (max-width: 900px) {
  .block-slider .slider-footer-cta {
    margin-bottom: calc(var(--ds-space-5, 24px) + var(--ds-sticky-cta-clearance, 96px));
  }
  .block-slider {
    scroll-padding-bottom: var(--ds-sticky-cta-clearance, 96px);
  }
  .block-slider .slider-slide__cta {
    scroll-margin-block-end: var(--ds-sticky-cta-clearance, 96px);
  }
}

/* T2-SLIDER 2026-05-08: mobile — show 1 slide with a hint of the next
   one peeking in from the right edge, so users have an obvious affordance
   that the carousel is swipeable. Uses owl-stage-outer overflow override
   so the next slide can extend outside the visible track without being
   clipped. */
@media (max-width: 575.98px) {
  .block-slider .owl-carousel.owl-loaded .owl-stage-outer {
    overflow: visible;
  }
  .block-slider .owl-carousel.owl-loaded {
    /* Reserve room on the right for the peeking slide hint. */
    padding-right: clamp(24px, 8vw, 48px);
  }
  /* Each in-card CTA + caption gets a touch-target-friendly hit area. */
  .block-slider .slider-slide__cta {
    min-height: 48px;
  }
  /* Pagination dots: enlarge tap area to 44 px while keeping the visual dot small. */
  .block-slider .owl-theme .owl-dots .owl-dot {
    padding: 12px;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* Arrows on mobile: 44 px target with the same paper face. */
  .block-slider .owl-theme .owl-nav .owl-prev,
  .block-slider .owl-theme .owl-nav .owl-next,
  .block-slider .owl-theme .owl-nav button.owl-prev,
  .block-slider .owl-theme .owl-nav button.owl-next {
    width: 44px;
    height: 44px;
  }
}

/* ─────────────────────────────────────────────────────────────────
   WAVE3-F06 2026-05-08 — Pattern C scheme-scoped overrides
   ─────────────────────────────────────────────────────────────────
   Doctrine §C: when a module hardcodes brand color (orange CTA, paper
   face) that collapses on a colored/dark section scheme, add explicit
   per-scheme overrides. Targets the audit findings:
   §1.1 caption pinned to ink/cream (Pattern B local rebind below)
   §1.4 arrows hardcode paper-on-ink
   §1.6 active dot orange-on-orange on accent
   §1.3 CTA pill white-on-orange on body sizes
   §X.3 repeated --ds-cta + --scheme-fg(#fff) anti-pattern
   ───────────────────────────────────────────────────────────────── */

/* Pattern B — pin slide caption locally so the guardrail can't flip
   --ds-ink to white inside the dark caption (audit §1.1).
   The caption is a self-styled dark callout sitting inside ANY scheme.
   Locally rebind so descendant text/borders always paint cream-on-ink. */
.block-slider .slider-slide__caption {
  --scheme-bg: #1a1a1a;
  --scheme-fg: var(--ds-cream, #fff7e3);
  --scheme-fg-soft: rgba(255,247,227,0.85);
  --scheme-fg-mute: rgba(255,247,227,0.65);
  --scheme-rule: rgba(255,255,255,0.18);
  /* Defensive: catches descendants reading --ds-ink directly */
  --ds-ink: var(--ds-cream, #fff7e3);
  --ds-ink-soft: rgba(255,247,227,0.85);
  --ds-ink-mute: rgba(255,247,227,0.65);
}

/* Pattern C — arrows: dark/colored schemes get scheme-scoped face so
   paper-on-ink doesn't collapse to white-on-white. */
.scheme-ink     .block-slider .owl-theme .owl-nav .owl-prev,
.scheme-ink     .block-slider .owl-theme .owl-nav .owl-next,
.scheme-steel   .block-slider .owl-theme .owl-nav .owl-prev,
.scheme-steel   .block-slider .owl-theme .owl-nav .owl-next,
.scheme-accent  .block-slider .owl-theme .owl-nav .owl-prev,
.scheme-accent  .block-slider .owl-theme .owl-nav .owl-next,
.scheme-trust   .block-slider .owl-theme .owl-nav .owl-prev,
.scheme-trust   .block-slider .owl-theme .owl-nav .owl-next,
.scheme-ink     .block-slider .owl-theme .owl-nav button.owl-prev,
.scheme-ink     .block-slider .owl-theme .owl-nav button.owl-next,
.scheme-steel   .block-slider .owl-theme .owl-nav button.owl-prev,
.scheme-steel   .block-slider .owl-theme .owl-nav button.owl-next,
.scheme-accent  .block-slider .owl-theme .owl-nav button.owl-prev,
.scheme-accent  .block-slider .owl-theme .owl-nav button.owl-next,
.scheme-trust   .block-slider .owl-theme .owl-nav button.owl-prev,
.scheme-trust   .block-slider .owl-theme .owl-nav button.owl-next {
  background: rgba(255, 255, 255, 0.92);
  color: #1a1a1a;
  border-color: rgba(255, 255, 255, 0.92);
}

/* Pattern C — active dot collapses orange-on-orange on accent scheme.
   On any colored/dark scheme, switch the active dot to white. */
.scheme-accent .block-slider .owl-theme .owl-dots .owl-dot.active span,
.scheme-trust  .block-slider .owl-theme .owl-dots .owl-dot.active span,
.scheme-ink    .block-slider .owl-theme .owl-dots .owl-dot.active span,
.scheme-steel  .block-slider .owl-theme .owl-dots .owl-dot.active span,
.scheme-accent .block-slider .owl-theme .owl-dots .owl-dot:hover span,
.scheme-trust  .block-slider .owl-theme .owl-dots .owl-dot:hover span,
.scheme-ink    .block-slider .owl-theme .owl-dots .owl-dot:hover span,
.scheme-steel  .block-slider .owl-theme .owl-dots .owl-dot:hover span {
  background: #fff;
}

/* Pattern C — CTA pill on accent/orange. The orange-on-orange would
   make the pill silhouette disappear; pin to inverse (white pill,
   orange text) on accent only. Other dark schemes keep CTA-orange
   bg + force white text (per audit §1.3 + §X.3). */
.block-slider .slider-slide__cta,
.block-slider .slider-footer-cta__link {
  /* Force white text regardless of scheme — body-on-orange is 3.48
     which only passes AA Large for ≥18.66px+700w; CTA pill text already
     ships ≥18px+700w via --ds-fs-body. */
  color: #fff;
}
.block-slider .slider-slide__cta:hover,
.block-slider .slider-slide__cta:focus-visible,
.block-slider .slider-footer-cta__link:hover,
.block-slider .slider-footer-cta__link:focus-visible {
  color: #fff;
}
.scheme-accent .block-slider .slider-slide__cta,
.scheme-accent .block-slider .slider-footer-cta__link {
  background: #fff;
  color: var(--ds-cta);
  border-color: #fff;
}
.scheme-accent .block-slider .slider-slide__cta:hover,
.scheme-accent .block-slider .slider-slide__cta:focus-visible,
.scheme-accent .block-slider .slider-footer-cta__link:hover,
.scheme-accent .block-slider .slider-footer-cta__link:focus-visible {
  background: rgba(255,255,255,0.92);
  color: var(--ds-cta);
  border-color: rgba(255,255,255,0.92);
}