/* ─────────────────────────────────────────────────────────────────
   Block: section-with-image (Variant 1 — TEXT-LEFT / IMAGE-RIGHT)
   W10-A13 — unified field shape across swi/swi2/swi3.
   Tokens win: --ds-paper cream by default, --ds-ink dark variant.
   Differentiator: 2-col split, text-first reading order.
   ───────────────────────────────────────────────────────────── */

/* WAVE3-F03 2026-05-08: Pattern A — outer block reads --scheme-bg/-fg so
   the module inherits whatever section_scheme the page sets. The legacy
   .is-paper / .is-dark two-state toggle is preserved as an escape hatch
   (Pattern B local rebind) for pages that pin the module without a scheme. */
.block-section-with-image {
    background: var(--scheme-bg, var(--ds-paper));
    color: var(--scheme-fg, var(--ds-ink));
    font-family: var(--ds-font-body);
}

.block-section-with-image.is-paper {
    background: var(--ds-paper);
    color: var(--ds-ink);
}
.block-section-with-image.is-dark {
    /* Pattern B local rebind so descendants reading --scheme-* / --ds-ink
       resolve to the dark-callout palette regardless of outer scheme. */
    --scheme-bg: var(--ds-ink);
    --scheme-fg: #fff;
    --scheme-fg-soft: rgba(255, 247, 227, 0.85);
    --scheme-fg-mute: rgba(255, 247, 227, 0.65);
    --ds-ink: #fff;
    --ds-ink-soft: rgba(255, 247, 227, 0.85);
    --ds-ink-mute: rgba(255, 247, 227, 0.65);
    background: var(--scheme-bg);
    color: var(--scheme-fg);
}

.block-section-with-image .swi-row {
    gap: var(--ds-space-6) 0;
}

/* ── Eyebrow / title / subtitle / body ─────────────────────────── */
.block-section-with-image .swi-eyebrow {
    font-family: var(--ds-font-body);
    font-size: var(--ds-fs-eyebrow);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ds-cta);
    margin: 0 0 var(--ds-space-3) 0;
}
.block-section-with-image.is-dark .swi-eyebrow { color: var(--ds-cta); }

/* Senior-UX 2026-05-07: h1/h2 keep Anton uppercase per framework allowance;
   h3/h4 switch to humanist sentence-case (see .ds-h3-humane). */
.block-section-with-image .swi-title h1,
.block-section-with-image .swi-title h2 {
    font-family: var(--ds-font-display, var(--ds-font-heading));
    text-transform: uppercase;
    letter-spacing: 0.005em;
    line-height: var(--ds-lh-display, 1.05);
    margin: 0 0 var(--ds-space-3) 0;
}
.block-section-with-image .swi-title h3,
.block-section-with-image .swi-title h4 {
    font-family: var(--ds-font-body);
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    line-height: var(--ds-lh-display, 1.15);
    margin: 0 0 var(--ds-space-3) 0;
}
.block-section-with-image .swi-title h1 { font-size: var(--ds-fs-display-lg); }
.block-section-with-image .swi-title h2 { font-size: var(--ds-fs-display-md); }
.block-section-with-image .swi-title h3 { font-size: var(--ds-fs-h3, 1.5rem); }
.block-section-with-image .swi-title h4 { font-size: var(--ds-fs-h4, 1.25rem); }
.block-section-with-image .swi-title em {
    font-family: var(--ds-font-serif);
    font-style: italic;
    color: var(--ds-cta);
}

.block-section-with-image .swi-subtitle,
.block-section-with-image .swi-subtitle p {
    font-family: var(--ds-font-body);
    font-size: var(--ds-fs-body-lg);
    line-height: var(--ds-lh-body, 1.6);
    margin: 0 0 var(--ds-space-5) 0;
}

.block-section-with-image .swi-body {
    font-family: var(--ds-font-body);
    font-size: var(--ds-fs-body);
    line-height: var(--ds-lh-body, 1.6);
}
/* SWEEP-A2 2026-05-08: unified paragraph max-width across swi/swi2/swi3
   — 60ch for two-column variants, 60ch body inside swi3's wider 70ch
   header region. Keeps measure inside the senior-readability sweet spot. */
.block-section-with-image .swi-text__inner { max-width: 60ch; }
.block-section-with-image .is-image-left .swi-text__inner { margin-left: auto; }

.block-section-with-image .swi-body h1,
.block-section-with-image .swi-body h2 {
    font-family: var(--ds-font-display, var(--ds-font-heading));
    text-transform: uppercase;
    line-height: 1.1;
    margin: var(--ds-space-4) 0 var(--ds-space-2);
}
/* Senior-UX 2026-05-07: in-body h3/h4 use humanist sentence-case (no Anton, no all-caps).
   Word-shape cues are critical for older readers; all-caps body sub-heads fail. */
.block-section-with-image .swi-body h3,
.block-section-with-image .swi-body h4 {
    font-family: var(--ds-font-body);
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    line-height: var(--ds-lh-display, 1.15);
    margin: var(--ds-space-4) 0 var(--ds-space-2);
}
.block-section-with-image .swi-body h3 { font-size: var(--ds-fs-h3, 1.5rem); }
.block-section-with-image .swi-body h4 { font-size: var(--ds-fs-h4, 1.25rem); }
.block-section-with-image .swi-body p { margin: 0 0 var(--ds-space-3); }
.block-section-with-image .swi-body strong { font-weight: 700; }
.block-section-with-image .swi-body em {
    font-family: var(--ds-font-serif); font-style: italic; color: var(--ds-cta);
}
.block-section-with-image .swi-body a {
    color: var(--ds-cta);
    text-decoration: underline;
    text-underline-offset: 0.18em;
}
.block-section-with-image .swi-body a:hover { color: var(--ds-cta-dk, var(--ds-cta)); }
.block-section-with-image .swi-body ul,
.block-section-with-image .swi-body ol {
    margin: 0 0 var(--ds-space-4) var(--ds-space-5);
    padding: 0;
}
.block-section-with-image .swi-body li { margin-bottom: var(--ds-space-2); }

/* ── Bullet list with .ct-mark check (W9-A13 pattern) ──────────── */
.block-section-with-image .swi-bullets {
    list-style: none;
    margin: 0 0 var(--ds-space-5);
    padding: 0;
    display: grid;
    gap: var(--ds-space-2);
}
.block-section-with-image .swi-bullets__item {
    display: flex;
    align-items: flex-start;
    gap: var(--ds-space-2);
    line-height: var(--ds-lh-body, 1.6);
    font-size: var(--ds-fs-body);
}
.block-section-with-image .swi-bullets .ct-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    color: var(--ds-trust);
    margin-top: 2px;
}
.block-section-with-image.is-dark .swi-bullets .ct-mark { color: var(--ds-cta); }
.block-section-with-image .swi-bullets__text { font-weight: 500; }

/* ── CTA row ───────────────────────────────────────────────────── */
.block-section-with-image .swi-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ds-space-3);
    margin-top: var(--ds-space-4);
}
/* Senior-UX 2026-05-07: primary 56px (--ds-touch-target-primary), secondary 48px,
   secondary upgraded from "ghost" (transparent border) to filled paper/ink to satisfy
   AARP "buttons look like buttons" guidance (top usability complaint among 60+). */
.block-section-with-image .swi-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--ds-touch-target, 48px);
    padding: 0 var(--ds-space-5);
    border-radius: var(--ds-radius-pill, 999px);
    font-family: var(--ds-font-body);
    font-weight: 700;
    font-size: var(--ds-fs-body);
    letter-spacing: 0.01em;
    text-decoration: none;
    transition: transform var(--ds-duration-fast, 150ms) var(--ds-ease, ease),
                box-shadow var(--ds-duration-fast, 150ms) var(--ds-ease, ease),
                background var(--ds-duration-fast, 150ms) var(--ds-ease, ease);
}
.block-section-with-image .swi-cta--primary {
    min-height: var(--ds-touch-target-primary, 56px);
    background: var(--ds-cta);
    color: var(--scheme-fg, #fff);
    box-shadow: var(--ds-shadow-cta, 0 6px 18px rgba(227, 98, 24, 0.28));
}
.block-section-with-image .swi-cta--primary:hover,
.block-section-with-image .swi-cta--primary:focus-visible {
    background: var(--ds-cta-hover, var(--ds-cta-dk, var(--ds-cta)));
    transform: translateY(-1px);
}
/* WAVE3-F03 2026-05-08: Pattern D — secondary CTA inherits scheme-fg so
   it never collides with the outer scheme. Was hardcoded ds-ink/ds-paper
   which produced white-on-white on .scheme-ink (the global guardrail
   rebinds ds-ink → scheme-fg = #fff but leaves ds-paper as cream).
   Now: bg = scheme-fg, color = scheme-bg (always inverse-on-inverse). */
.block-section-with-image .swi-cta--secondary {
    background: var(--scheme-fg, var(--ds-ink));
    color: var(--scheme-bg, var(--ds-paper));
    border: 2px solid var(--scheme-fg, var(--ds-ink));
}
.block-section-with-image .swi-cta--secondary:hover,
.block-section-with-image .swi-cta--secondary:focus-visible {
    background: transparent;
    color: var(--scheme-fg, var(--ds-ink));
    border-color: var(--scheme-fg, var(--ds-ink));
    transform: translateY(-1px);
}
.block-section-with-image .swi-cta:focus-visible {
    outline: none;
    box-shadow: var(--ds-focus-ring);
}
.block-section-with-image.is-dark .swi-cta:focus-visible {
    box-shadow: var(--ds-focus-ring-dark);
}

/* ── Media column ──────────────────────────────────────────────── */
.block-section-with-image .swi-media { align-self: stretch; }

/* SWEEP-A2 2026-05-08: figcaption support — sits below the figure with
   muted body type so optional captions (credits, context lines) render
   cleanly across all three swi variants (unified styling).
   When figcaption is present, the figure releases its aspect-ratio clip
   so the caption can sit outside the cropped media box. */
.block-section-with-image .swi-figure:has(figcaption) {
    overflow: visible;
    aspect-ratio: auto;
    max-height: none;
}
.block-section-with-image .swi-figure:has(figcaption) > .swi-img,
.block-section-with-image .swi-figure:has(figcaption) > .swi-link {
    position: relative;
    inset: auto;
    aspect-ratio: 4 / 3;
    border-radius: var(--ds-radius-lg);
    overflow: hidden;
}
.block-section-with-image .swi-figure figcaption,
.block-section-with-image figcaption.swi-caption {
    margin-top: var(--ds-space-2);
    font-family: var(--ds-font-body);
    font-size: var(--ds-fs-body-sm, 0.875rem);
    line-height: var(--ds-lh-body, 1.6);
    /* WAVE3-F03 2026-05-08: was --ds-ink-muted (typo, never resolved → fell
       through to literal rgba). Canonical token is --ds-ink-mute. Prefer
       scheme-fg-mute so the caption follows the active scheme. */
    color: var(--scheme-fg-mute, var(--ds-ink-mute, rgba(20, 20, 20, 0.65)));
    text-align: left;
}
.block-section-with-image.is-dark .swi-figure figcaption,
.block-section-with-image.is-dark figcaption.swi-caption {
    color: var(--scheme-fg-mute, rgba(255, 255, 255, 0.72));
}

.block-section-with-image .swi-figure {
    position: relative;
    margin: 0;
    overflow: hidden;
    border-radius: var(--ds-radius-lg);
    box-shadow: var(--ds-shadow-md);
    background: rgba(0, 0, 0, 0.04);
    aspect-ratio: 4 / 3;
}

.block-section-with-image .swi-figure.swi-ratio-16x9 { aspect-ratio: 16 / 9; }
.block-section-with-image .swi-figure.swi-ratio-4x3  { aspect-ratio: 4 / 3; }
.block-section-with-image .swi-figure.swi-ratio-1x1  { aspect-ratio: 1 / 1; }
.block-section-with-image .swi-figure.swi-ratio-3x4  { aspect-ratio: 3 / 4; }
.block-section-with-image .swi-figure.swi-ratio-21x9 { aspect-ratio: 21 / 9; }

@supports not (aspect-ratio: 1) {
    .block-section-with-image .swi-figure { height: 0; padding-bottom: 75%; }
    .block-section-with-image .swi-figure.swi-ratio-16x9 { padding-bottom: 56.25%; }
    .block-section-with-image .swi-figure.swi-ratio-1x1  { padding-bottom: 100%; }
    .block-section-with-image .swi-figure.swi-ratio-3x4  { padding-bottom: 133.33%; }
    .block-section-with-image .swi-figure.swi-ratio-21x9 { padding-bottom: 42.86%; }
    .block-section-with-image .swi-figure > .swi-img,
    .block-section-with-image .swi-figure > .swi-link { position: absolute; inset: 0; }
}

.block-section-with-image .swi-figure .swi-link {
    display: block; width: 100%; height: 100%; line-height: 0;
}

.block-section-with-image .swi-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    margin: 0;
    transition: transform var(--ds-duration-slow, 480ms) var(--ds-ease-out, ease-out);
}

@media (hover: hover) {
    .block-section-with-image .swi-figure:hover .swi-img,
    .block-section-with-image .swi-figure:focus-within .swi-img { transform: scale(1.02); }
}

@media (prefers-reduced-motion: reduce) {
    .block-section-with-image .swi-img,
    .block-section-with-image .swi-cta { transition: none !important; }
    .block-section-with-image .swi-figure:hover .swi-img,
    .block-section-with-image .swi-figure:focus-within .swi-img { transform: none; }
}

.block-section-with-image .swi-link:focus-visible {
    outline: 3px solid var(--ds-cta);
    outline-offset: -3px;
}

/* ── Mobile ────────────────────────────────────────────────────── */
/* SWEEP-A2 2026-05-08: text-first stack on mobile — eyebrow/title/subtitle
   read before the image for senior ICP (45-70+) where context-first beats
   visual-first. Was column-reverse (image on top), now column (text first). */
@media (max-width: 992px) {
    .block-section-with-image .swi-row { flex-direction: column !important; }
    .block-section-with-image .is-image-left .swi-row,
    .block-section-with-image .is-image-right .swi-row { flex-direction: column !important; }
    .block-section-with-image .swi-media { margin-top: var(--ds-space-5); }
    .block-section-with-image .swi-text__inner { max-width: none; margin: 0; }
}

@media (max-width: 600px) {
    .block-section-with-image .swi-title h1 { font-size: var(--ds-fs-display-md); }
    .block-section-with-image .swi-title h2 { font-size: var(--ds-fs-display-sm); }
    .block-section-with-image .swi-figure { border-radius: var(--ds-radius); }
    .block-section-with-image .swi-cta { min-height: 52px; flex: 1 1 auto; }
}

/* ─────────────────────────────────────────────────────────────────
   FIX-T8 Wave-6 — Image-Scaling Guard (preserved)
   ───────────────────────────────────────────────────────────── */
.block-section-with-image img,
.block-section-with-image .swi-img {
  max-width: 100%;
  max-height: 100%;
  height: auto;
  width: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}
.block-section-with-image .swi-figure,
.block-section-with-image .swi-media {
  max-width: 100%;
  overflow: hidden;
}
.block-section-with-image .swi-figure { max-height: 70vh; }
.block-section-with-image .swi-figure > .swi-img,
.block-section-with-image .swi-figure > .swi-link {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.block-section-with-image .swi-figure > .swi-link > .swi-img { position: absolute; inset: 0; }
.block-section-with-image img[width],
.block-section-with-image img[height] {
  width: 100% !important;
  height: 100% !important;
}

/* ── Senior-UX CTA floor (W2-T10 / 2026-05-08) ─────────────────────
   Force primary AND secondary CTAs to ≥56px tap-target. Audit found
   computed 52px on 'Get my free quote' and 'Call (416) 555-0140'. */
.block-section-with-image .swi-cta,
.block-section-with-image .swi-cta--primary,
.block-section-with-image .swi-cta--secondary {
  min-height: var(--ds-touch-target-primary, 56px) !important;
}

/* ── P-FV2-FIX 2026-05-08: sticky-CTA per-block clearance (was missed in
   earlier validate round). Last in-page CTA "Call (416) 555-0140" was
   covered by the 80 px sticky bar by ~56 px at 375 mid-scroll. Same pattern
   the validate round applied to 7 other modules. */
@media (max-width: 900px) {
  .block-section-with-image {
    padding-bottom: calc(var(--ds-space-5, 1.5rem) + var(--ds-sticky-cta-clearance, 96px)) !important;
  }
}