/* ─────────────────────────────────────────────────────────────────
   Block: section-with-image3 (Variant 3 — TEXT-CENTERED / IMAGE-FULL-BELOW)
   W10-A13 — unified field shape across swi/swi2/swi3.
   Differentiator: vertical stack with full-width hero image,
   optional full-bleed (image escapes container to viewport edge).
   ───────────────────────────────────────────────────────────── */

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

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

/* ── Centered text region ─────────────────────────────────────── */
/* SWEEP-A2 2026-05-08: cap text region with min(70ch, 56rem) so on very-
   large viewports (≥1920) the centered headline + body don't sprawl wider
   than a comfortable senior-reader measure. 56rem ≈ 896px hard ceiling. */
.block-section-with-image3 .swi3-text {
    max-width: min(70ch, 56rem);
    margin: 0 auto;
    text-align: center;
}

.block-section-with-image3 .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/h4 sentence-case humanist. */
.block-section-with-image3 .swi-title h1,
.block-section-with-image3 .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-image3 .swi-title h3,
.block-section-with-image3 .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-image3 .swi-title h1 { font-size: var(--ds-fs-display-lg); }
.block-section-with-image3 .swi-title h2 { font-size: var(--ds-fs-display-md); }
.block-section-with-image3 .swi-title h3 { font-size: var(--ds-fs-h3, 1.5rem); }
.block-section-with-image3 .swi-title h4 { font-size: var(--ds-fs-h4, 1.25rem); }
.block-section-with-image3 .swi-title em {
    font-family: var(--ds-font-serif);
    font-style: italic;
    color: var(--ds-cta);
}

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

/* ── Bullet list (centered grid) ──────────────────────────────── */
.block-section-with-image3 .swi-bullets {
    list-style: none;
    margin: 0 auto var(--ds-space-5);
    padding: 0;
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--ds-space-3) var(--ds-space-5);
    text-align: left;
}
.block-section-with-image3 .swi-bullets__item {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-2);
    line-height: var(--ds-lh-body, 1.6);
    font-size: var(--ds-fs-body);
}
.block-section-with-image3 .swi-bullets .ct-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    color: var(--ds-trust);
}
.block-section-with-image3.is-dark .swi-bullets .ct-mark { color: var(--ds-cta); }
.block-section-with-image3 .swi-bullets__text { font-weight: 500; }

/* ── CTA row (centered) ───────────────────────────────────────── */
.block-section-with-image3 .swi-cta-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--ds-space-3);
    margin: var(--ds-space-4) 0 var(--ds-space-5);
}
/* Senior-UX 2026-05-07: primary 56px, secondary 48px filled (no ghost). */
.block-section-with-image3 .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-image3 .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-image3 .swi-cta--primary:hover,
.block-section-with-image3 .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-image3 .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-image3 .swi-cta--secondary:hover,
.block-section-with-image3 .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-image3 .swi-cta:focus-visible {
    outline: none;
    box-shadow: var(--ds-focus-ring);
}
.block-section-with-image3.is-dark .swi-cta:focus-visible {
    box-shadow: var(--ds-focus-ring-dark);
}

/* ── Media region ─────────────────────────────────────────────── */
.block-section-with-image3 .swi3-media { text-align: center; }

/* 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-image3 .swi3-figure:has(figcaption) {
    overflow: visible;
    aspect-ratio: auto;
    max-height: none;
}
.block-section-with-image3 .swi3-figure:has(figcaption) > .swi3-img,
.block-section-with-image3 .swi3-figure:has(figcaption) > .swi3-link {
    position: relative;
    inset: auto;
    aspect-ratio: 21 / 9;
    border-radius: var(--ds-radius-lg);
    overflow: hidden;
}
.block-section-with-image3 .swi3-figure figcaption,
.block-section-with-image3 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: center;
}
.block-section-with-image3.is-dark .swi3-figure figcaption,
.block-section-with-image3.is-dark figcaption.swi-caption {
    color: var(--scheme-fg-mute, rgba(255, 255, 255, 0.72));
}

.block-section-with-image3 .swi3-figure {
    position: relative;
    margin: 0 auto;
    overflow: hidden;
    width: 100%;
    max-width: var(--ds-container-lg, 1200px);
    border-radius: var(--ds-radius-lg);
    box-shadow: var(--ds-shadow-md);
    background: rgba(0, 0, 0, 0.04);
    aspect-ratio: 21 / 9;
}

.block-section-with-image3 .swi3-row.is-full-bleed .swi3-media {
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}
.block-section-with-image3 .swi3-row.is-full-bleed .swi3-figure {
    max-width: 100%;
    border-radius: 0;
}

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

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

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

.block-section-with-image3 .swi3-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-image3 .swi3-figure:hover .swi3-img,
    .block-section-with-image3 .swi3-figure:focus-within .swi3-img { transform: scale(1.015); }
}

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

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

@media (max-width: 600px) {
    .block-section-with-image3 .swi-title h1 { font-size: var(--ds-fs-display-md); }
    .block-section-with-image3 .swi-title h2 { font-size: var(--ds-fs-display-sm); }
    .block-section-with-image3 .swi3-figure { border-radius: var(--ds-radius); }
    .block-section-with-image3 .swi3-row.is-full-bleed .swi3-figure { border-radius: 0; }
    .block-section-with-image3 .swi-cta { min-height: 52px; flex: 1 1 auto; }
    .block-section-with-image3 .swi-bullets { display: grid; gap: var(--ds-space-2); }
}

/* ─────────────────────────────────────────────────────────────────
   FIX-T8 Wave-6 — Image-Scaling Guard (preserved)
   ───────────────────────────────────────────────────────────── */
.block-section-with-image3 img,
.block-section-with-image3 .swi3-img {
  max-width: 100%;
  max-height: 100%;
  height: auto;
  width: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}
.block-section-with-image3 .swi3-figure,
.block-section-with-image3 .swi3-media {
  max-width: 100%;
  overflow: hidden;
}
/* SWEEP-A2 2026-05-08: re-assert figure ceiling — the FIX-T8 image guard
   above sets max-width:100% which silently clobbered the intended
   var(--ds-container-lg, 1200px) cap; restore it for non-full-bleed and
   add a 1600px hard cap at very-large viewports to keep the hero from
   sprawling on 4K monitors. Full-bleed variant explicitly stays 100%. */
.block-section-with-image3 .swi3-row:not(.is-full-bleed) .swi3-figure {
  max-width: var(--ds-container-lg, 1200px);
}
@media (min-width: 1600px) {
  .block-section-with-image3 .swi3-row:not(.is-full-bleed) .swi3-figure {
    max-width: 1400px;
  }
}
.block-section-with-image3 .swi3-figure { max-height: 85vh; }
.block-section-with-image3 .swi3-figure > .swi3-img,
.block-section-with-image3 .swi3-figure > .swi3-link {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.block-section-with-image3 .swi3-figure > .swi3-link > .swi3-img { position: absolute; inset: 0; }
.block-section-with-image3 img[width],
.block-section-with-image3 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 'See our portfolio'. */
.block-section-with-image3 .swi-cta,
.block-section-with-image3 .swi-cta--primary,
.block-section-with-image3 .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 "Talk to a project lead" was covered by the sticky bar at 375. */
@media (max-width: 900px) {
  .block-section-with-image3 {
    padding-bottom: calc(var(--ds-space-5, 1.5rem) + var(--ds-sticky-cta-clearance, 96px)) !important;
  }
}