/* ─────────────────────────────────────────────────────────────────
   Block: section-with-image2 (Variant 2 — IMAGE-LEFT / TEXT-RIGHT)
   W10-A13 — unified field shape across swi/swi2/swi3.
   Differentiator: mirrored split (image-first reading order),
   inline-checked markdown lists via .has-list-checked recipe.
   ───────────────────────────────────────────────────────────── */

/* 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-image2 {
    background: var(--scheme-bg, var(--ds-paper));
    color: var(--scheme-fg, var(--ds-ink));
    font-family: var(--ds-font-body);
}

.block-section-with-image2.is-paper {
    background: var(--ds-paper);
    color: var(--ds-ink);
}
.block-section-with-image2.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-image2 .swi2-row { gap: var(--ds-space-6) 0; }

/* ── Eyebrow / title / subtitle / body ─────────────────────────── */
.block-section-with-image2 .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;
}

/* Senior-UX 2026-05-07: h1/h2 keep Anton uppercase; h3 sentence-case humanist. */
.block-section-with-image2 .swi-title h1,
.block-section-with-image2 .swi-title h2 {
    font-family: var(--ds-font-display, var(--ds-font-heading));
    text-transform: uppercase;
    line-height: var(--ds-lh-display, 1.05);
    letter-spacing: 0.005em;
    margin: 0 0 var(--ds-space-3) 0;
    text-align: left;
}
.block-section-with-image2 .swi-title h3,
.block-section-with-image2 .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;
    text-align: left;
}
.block-section-with-image2 .swi-title h1 { font-size: var(--ds-fs-display-lg); }
.block-section-with-image2 .swi-title h2 { font-size: var(--ds-fs-display-md); }
.block-section-with-image2 .swi-title h3 { font-size: var(--ds-fs-h3, 1.5rem); }
.block-section-with-image2 .swi-title h4 { font-size: var(--ds-fs-h4, 1.25rem); }
.block-section-with-image2 .swi-title em {
    font-family: var(--ds-font-serif);
    font-style: italic;
    color: var(--ds-cta);
}

.block-section-with-image2 .swi-subtitle,
.block-section-with-image2 .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;
    text-align: left;
    max-width: none;
}

/* SWEEP-A2 2026-05-08: unified paragraph max-width across swi/swi2/swi3
   — 60ch holds measure inside the senior-readability sweet spot. */
.block-section-with-image2 .swi2-text__inner { max-width: 60ch; }
.block-section-with-image2 .is-image-left .swi2-text__inner { margin-left: auto; }

.block-section-with-image2 .swi-body { font-size: var(--ds-fs-body); }
.block-section-with-image2 .swi-body p { margin: 0 0 var(--ds-space-3); line-height: var(--ds-lh-body, 1.6); font-size: var(--ds-fs-body); }
/* Senior-UX 2026-05-07: in-body h3/h4 use humanist sentence-case (no Anton, no all-caps). */
.block-section-with-image2 .swi-body h3,
.block-section-with-image2 .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-image2 .swi-body h3 { font-size: var(--ds-fs-h3, 1.5rem); }
.block-section-with-image2 .swi-body h4 { font-size: var(--ds-fs-h4, 1.25rem); }
.block-section-with-image2 .swi-body strong { font-weight: 700; }
.block-section-with-image2 .swi-body a {
    color: var(--ds-cta);
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

/* Check-list rhythm — uses shared .has-list-checked recipe in design-system.css */
.block-section-with-image2 .has-list-checked p { line-height: 1.6; }

/* ── Bullet list with .ct-mark check ───────────────────────────── */
.block-section-with-image2 .swi-bullets {
    list-style: none;
    margin: 0 0 var(--ds-space-5);
    padding: 0;
    display: grid;
    gap: var(--ds-space-2);
}
.block-section-with-image2 .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-image2 .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-image2.is-dark .swi-bullets .ct-mark { color: var(--ds-cta); }
.block-section-with-image2 .swi-bullets__text { font-weight: 500; }

/* ── CTA row ───────────────────────────────────────────────────── */
.block-section-with-image2 .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, secondary 48px filled (no ghost). */
.block-section-with-image2 .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-image2 .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-image2 .swi-cta--primary:hover,
.block-section-with-image2 .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. See swi.css for full rationale. */
.block-section-with-image2 .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-image2 .swi-cta--secondary:hover,
.block-section-with-image2 .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-image2 .swi-cta:focus-visible {
    outline: none;
    box-shadow: var(--ds-focus-ring);
}
.block-section-with-image2.is-dark .swi-cta:focus-visible {
    box-shadow: var(--ds-focus-ring-dark);
}

/* ── Media column ──────────────────────────────────────────────── */
/* SWEEP-A2 2026-05-08: figcaption support — unified across swi/swi2/swi3.
   When figcaption is present, the figure releases its aspect-ratio clip
   so the caption can sit outside the cropped media box. */
.block-section-with-image2 .swi2-figure:has(figcaption) {
    overflow: visible;
    aspect-ratio: auto;
    max-height: none;
}
.block-section-with-image2 .swi2-figure:has(figcaption) > .swi2-img,
.block-section-with-image2 .swi2-figure:has(figcaption) > .swi2-link {
    position: relative;
    inset: auto;
    aspect-ratio: 4 / 3;
    border-radius: var(--ds-radius-lg);
    overflow: hidden;
}
.block-section-with-image2 .swi2-figure figcaption,
.block-section-with-image2 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-image2.is-dark .swi2-figure figcaption,
.block-section-with-image2.is-dark figcaption.swi-caption {
    color: var(--scheme-fg-mute, rgba(255, 255, 255, 0.72));
}

.block-section-with-image2 .swi2-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-image2 .swi2-figure.swi2-ratio-16x9 { aspect-ratio: 16 / 9; }
.block-section-with-image2 .swi2-figure.swi2-ratio-4x3  { aspect-ratio: 4 / 3; }
.block-section-with-image2 .swi2-figure.swi2-ratio-1x1  { aspect-ratio: 1 / 1; }
.block-section-with-image2 .swi2-figure.swi2-ratio-3x4  { aspect-ratio: 3 / 4; }
.block-section-with-image2 .swi2-figure.swi2-ratio-21x9 { aspect-ratio: 21 / 9; }

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

.block-section-with-image2 .swi2-link { display: block; width: 100%; height: 100%; line-height: 0; }

.block-section-with-image2 .swi2-img,
.block-section-with-image2 .section-with-image2__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-image2 .swi2-figure:hover .swi2-img,
    .block-section-with-image2 .swi2-figure:focus-within .swi2-img { transform: scale(1.02); }
}

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

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

/* SWEEP-A2 2026-05-08: text-first stack on mobile (matches swi/swi3) —
   eyebrow → title → body → CTAs render before the image so older readers
   anchor to context first. Was column-reverse + flex-row-reverse inversion
   that put image on top regardless of variant; now natural text-first flow.
   Senior-UX 2026-05-07: keep h1/h2/h3 mobile-clamped to display-md so the
   left-aligned title doesn't bleed past the figure on narrow screens. */
@media (max-width: 992px) {
    .block-section-with-image2 .swi2-row { flex-direction: column !important; }
    .block-section-with-image2 .is-image-left .swi2-row,
    .block-section-with-image2 .is-image-right .swi2-row { flex-direction: column !important; }
    .block-section-with-image2 .swi2-media { margin-top: var(--ds-space-5); }
    .block-section-with-image2 .swi2-text__inner { max-width: none; margin: 0; }
    .block-section-with-image2 .swi-title h1,
    .block-section-with-image2 .swi-title h2,
    .block-section-with-image2 .swi-title h3 { font-size: var(--ds-fs-display-md); }
}

@media (max-width: 600px) {
    .block-section-with-image2 .swi2-figure { border-radius: var(--ds-radius); }
    .block-section-with-image2 .swi-cta { min-height: 52px; flex: 1 1 auto; }
}

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

/* ── Senior-UX CTA floor (W2-T10 / 2026-05-08) ─────────────────────
   Force primary CTA to ≥56px tap-target. Audit found computed 52px
   on 'Book a site visit'. */
.block-section-with-image2 .swi-cta,
.block-section-with-image2 .swi-cta--primary,
.block-section-with-image2 .swi-cta--secondary {
  min-height: var(--ds-touch-target-primary, 56px) !important;
}

/* ── P-FV2-FIX 2026-05-08: sticky-CTA per-block clearance — last in-page
   CTA "Compare plans" was covered by the sticky bar at 375 mid-scroll. */
@media (max-width: 900px) {
  .block-section-with-image2 {
    padding-bottom: calc(var(--ds-space-5, 1.5rem) + var(--ds-sticky-cta-clearance, 96px)) !important;
  }
}