/* ─────────────────────────────────────────────────────────────────
   Block: jumbotron
   Centered headline + lead copy + CTA pair + trust badges.
   T1 (2026-05-06) — added secondary CTA, helper text, trust badges,
   alignment toggle, focus-visible ring, fluid type.
   WAVE-10 (2026-05-07) — full-bleed BIG STATEMENT footprint
   (>=600px desktop / >=440px mobile). Removed opacity-on-text
   (replaced with --ds-ink-mute + font-weight emphasis). Optional
   dim overlay above section background image.
   ───────────────────────────────────────────────────────────── */

.block-jumbotron {
    background: var(--scheme-bg);
    color: var(--scheme-fg);
    font-family: var(--ds-font-body);
    text-align: center;
    --block-jumbotron-overlay: 0;
    position: relative;
    /* WAVE3-F01 2026-05-08: 600px hard min-height forced vertical scroll on
       short landscape viewports (e.g. iPhone SE 568px). Clamp with svh so
       it tracks small-viewport height on mobile, plus a 600px ceiling. */
    min-height: clamp(440px, 70svh, 600px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Dim overlay sits above any section background-image so the
   headline retains contrast. Only visible when overlay > 0. */
.block-jumbotron::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, var(--block-jumbotron-overlay, 0));
    pointer-events: none;
    z-index: 0;
}
.block-jumbotron > * { position: relative; z-index: 1; }

.block-jumbotron .jumbotron {
    background: transparent;
    padding-block: var(--ds-space-7);
    padding-inline: var(--ds-space-5);
    margin: 0 auto;
    max-width: 1200px;
    width: 100%;
    border-radius: 0;
}

.block-jumbotron.align-left .jumbotron,
.block-jumbotron .jumbotron.text-left {
    text-align: left;
}
.block-jumbotron.align-left .jumbotron-content,
.block-jumbotron .jumbotron.text-left .jumbotron-content {
    align-items: flex-start;
    text-align: left;
}

.block-jumbotron .display-2,
.block-jumbotron .display-2 h1,
.block-jumbotron .display-2 h2 {
    font-family: var(--ds-font-display);
    font-size: clamp(2.4rem, 5.5vw, 4.6rem);
    line-height: 1.05;
    text-transform: uppercase;
    color: var(--scheme-fg);
    margin: var(--ds-space-3) 0 var(--ds-space-5) 0;
    letter-spacing: 0.005em;
}

.block-jumbotron .display-2 em,
.block-jumbotron .display-2 h1 em,
.block-jumbotron .display-2 h2 em {
    font-family: var(--ds-font-serif);
    font-style: italic;
    color: var(--ds-accent);
}
/* WAVE3-F01 2026-05-08: Pattern C — on .scheme-accent / .scheme-trust /
   .scheme-ink / .scheme-steel parents the rust-colored em would render
   accent-on-accent (or low-contrast on other dark schemes). Switch to
   --scheme-fg so the italic display em pops against any dark surface. */
.scheme-accent .block-jumbotron .display-2 em,
.scheme-accent .block-jumbotron .display-2 h1 em,
.scheme-accent .block-jumbotron .display-2 h2 em,
.scheme-trust  .block-jumbotron .display-2 em,
.scheme-trust  .block-jumbotron .display-2 h1 em,
.scheme-trust  .block-jumbotron .display-2 h2 em,
.scheme-ink    .block-jumbotron .display-2 em,
.scheme-ink    .block-jumbotron .display-2 h1 em,
.scheme-ink    .block-jumbotron .display-2 h2 em,
.scheme-steel  .block-jumbotron .display-2 em,
.scheme-steel  .block-jumbotron .display-2 h1 em,
.scheme-steel  .block-jumbotron .display-2 h2 em {
    color: var(--scheme-fg);
}

.block-jumbotron .lead,
.block-jumbotron .lead p {
    font-family: var(--ds-font-body);
    /* SENIOR-T2: 18px AAA body floor for legacy lead */
    font-size: clamp(var(--ds-fs-body), 1.6vw, var(--ds-fs-body-lg));
    line-height: var(--ds-lh-body, 1.6);
    color: var(--scheme-fg-soft);
    max-width: var(--ds-container-sm);
    margin: 0 auto var(--ds-space-4);
}

.block-jumbotron .lead:first-of-type {
    font-family: var(--ds-font-mono);
    font-size: var(--ds-fs-eyebrow);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ds-cta);
    margin-bottom: var(--ds-space-3);
}
.block-jumbotron .lead:first-of-type p { color: inherit; font: inherit; }

.block-jumbotron a { color: var(--ds-cta); }
.block-jumbotron a:hover { color: var(--ds-cta-dk); }

.block-jumbotron .btn,
.block-jumbotron .btn-primary {
    margin: var(--ds-space-3) var(--ds-space-2) 0;
}

@media (max-width: 600px) {
    .block-jumbotron .jumbotron {
        padding-block: var(--ds-space-6);
        padding-inline: var(--ds-space-4);
    }
    .block-jumbotron .display-2,
    .block-jumbotron .display-2 h1,
    .block-jumbotron .display-2 h2 {
        font-size: clamp(2rem, 9vw, 2.8rem);
    }
}

/* ─────────────────────────────────────────────────────────────────
   T1 — blueprint-driven jumbotron content layout
   ───────────────────────────────────────────────────────────── */
.block-jumbotron .jumbotron-content {
    display: flex;
    flex-direction: column;
    flex-direction: column;
    gap: var(--ds-space-4);
    text-align: center;
    padding: var(--ds-space-7) var(--ds-space-4);
}
/* FIX-T1 (2026-05-06): broaden img guard for overscaling. */
.block-jumbotron img,
.block-jumbotron .jumbotron-image img {
    max-width: 100%;
    height: auto;
}
.block-jumbotron .jumbotron-image img {
    margin-bottom: var(--ds-space-3);
}
.block-jumbotron .jumbotron-eyebrow {
    margin: 0;
}
.block-jumbotron .jumbotron-title {
    font-family: var(--ds-font-display, "Anton", sans-serif);
    font-size: clamp(2.4rem, 5.5vw, 4.6rem);
    /* WAVE3-F01 2026-05-08: --ds-ink → --scheme-fg per doctrine §"Quick checklist".
       The guardrail rebinds --ds-ink on .scheme-* parents, but a self-styled
       dark callout that hardcodes its own bg won't trigger that guardrail —
       so reach for --scheme-fg directly. Falls back to --ds-ink (still
       guardrail-rescued on top-level .scheme-* parents). */
    color: var(--scheme-fg, var(--ds-ink));
    margin: 0;
    text-transform: uppercase;
    line-height: 1.05;
    max-width: 30ch;
    text-wrap: balance;
}
.block-jumbotron .jumbotron-title em {
    font-family: var(--ds-font-serif);
    font-style: italic;
    color: var(--ds-cta);
}
.block-jumbotron .jumbotron-subtitle {
    font-family: var(--ds-font-body);
    /* SENIOR-T2: 18px AAA body floor for jumbotron subtitle */
    font-size: clamp(var(--ds-fs-body), 1.6vw, var(--ds-fs-body-lg));
    line-height: var(--ds-lh-body, 1.6);
    /* WAVE3-F01 2026-05-08: --ds-ink-mute → --scheme-fg-mute. */
    color: var(--scheme-fg-mute, var(--scheme-fg, var(--ds-ink)));
    font-weight: 500;
    max-width: 56ch;
    margin: 0;
}
.block-jumbotron .jumbotron-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ds-space-3);
    justify-content: center;
    margin-top: var(--ds-space-2);
}
.block-jumbotron.align-left .jumbotron-cta-row,
.block-jumbotron .jumbotron.text-left .jumbotron-cta-row {
    justify-content: flex-start;
}
.block-jumbotron .jumbotron-button,
.block-jumbotron .jumbotron-cta-primary {
    background: var(--ds-cta) !important;
    /* WAVE3-F01 2026-05-08: --ds-paper → --ds-cta-fg (constant white-on-orange CTA). */
    color: var(--ds-cta-fg, #fff) !important;
    border: none !important;
    border-radius: var(--ds-radius-sm) !important;
    /* SENIOR-T2: AARP primary CTA = 56px tall, 20px font, filled */
    min-height: var(--ds-touch-target-primary, 56px);
    padding: 1rem 1.75rem !important;
    font-family: var(--ds-font-body);
    font-size: var(--ds-fs-body-lg, 1.25rem);
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: var(--ds-shadow-cta);
    transition: background var(--ds-duration-fast) var(--ds-ease);
    margin: 0;
}
.block-jumbotron .jumbotron-button:hover,
.block-jumbotron .jumbotron-cta-primary:hover {
    background: var(--ds-cta-dk) !important;
    color: var(--ds-cta-fg, #fff) !important;
}
.block-jumbotron .jumbotron-button-secondary,
.block-jumbotron .jumbotron-cta-secondary {
    background: transparent !important;
    /* WAVE3-F01 2026-05-08: --ds-ink → --scheme-fg with Pattern D currentColor border.
       Doctrine anti-pattern row 1 (was the exact pattern that produced
       black-on-black on dark schemes prior to the guardrail). */
    color: var(--scheme-fg, var(--ds-ink)) !important;
    border: 1.5px solid currentColor !important;
    border-radius: var(--ds-radius-sm) !important;
    /* SENIOR-T2: secondary CTA at 48px (primary at 56px above) */
    min-height: var(--ds-touch-target, 48px);
    padding: 0.875rem 1.5rem !important;
    font-family: var(--ds-font-body);
    font-size: var(--ds-fs-body, 1.125rem);
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    margin: 0;
}
.block-jumbotron .jumbotron-button-secondary:hover,
.block-jumbotron .jumbotron-cta-secondary:hover {
    /* WAVE3-F01 2026-05-08: clean inversion via scheme tokens. */
    background: var(--scheme-fg, var(--ds-ink)) !important;
    color: var(--scheme-bg, var(--ds-paper)) !important;
    border-color: var(--scheme-fg, var(--ds-ink)) !important;
}

.block-jumbotron a:focus-visible,
.block-jumbotron .btn:focus-visible,
.block-jumbotron .jumbotron-button:focus-visible,
.block-jumbotron .jumbotron-button-secondary:focus-visible {
    /* SENIOR-T2: high-contrast dual-color focus ring */
    outline: none;
    box-shadow: var(--ds-focus-ring, 0 0 0 3px var(--ds-cta), 0 0 0 5px rgba(255,255,255,.95));
}

.block-jumbotron .jumbotron-cta-helper {
    font-family: var(--ds-font-body);
    font-size: var(--ds-fs-body-sm);
    /* WAVE3-F01 2026-05-08: --ds-ink-mute → --scheme-fg-mute. */
    color: var(--scheme-fg-mute, var(--scheme-fg, var(--ds-ink)));
    margin: 0;
    font-weight: 500;
    letter-spacing: 0.01em;
}

/* Trust badges ----------------------------------------------- */
.block-jumbotron .jumbotron-trust-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ds-space-3) var(--ds-space-4);
    list-style: none;
    padding: 0;
    margin: var(--ds-space-3) 0 0 0;
    justify-content: center;
}
.block-jumbotron.align-left .jumbotron-trust-badges {
    justify-content: flex-start;
}
/* SWEEP-T03 (2026-05-08): badges previously rendered with
   `flex-direction: column` so their single-character icons (★ ✓) sat
   alone on a line above the label — looked amateurish at desktop and
   made the icons read as visual noise rather than trust signals.
   Switched to inline icon+label with proper baseline alignment;
   bumped icon to 1.15em + .jumbotron-trust-icon font-weight 700 so the
   star/check renders with intention. ICP age 45-70+ benefits from
   stronger glyph weight. */
.block-jumbotron .jumbotron-trust-badge {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: var(--ds-space-2);
    font-family: var(--ds-font-body);
    font-size: var(--ds-fs-body-sm);
    font-weight: 600;
    /* WAVE3-F01 2026-05-08: --ds-ink → --scheme-fg per doctrine. */
    color: var(--scheme-fg, var(--ds-ink));
    line-height: 1.3;
}
.block-jumbotron .jumbotron-trust-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ds-cta);
    font-size: 1.15em;
    font-weight: 700;
    line-height: 1;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .block-jumbotron { min-height: 440px; }
    .block-jumbotron .jumbotron-title { font-size: clamp(2rem, 9vw, 2.8rem); }
    .block-jumbotron .jumbotron-content {
        padding: var(--ds-space-6) var(--ds-space-3);
    }
    .block-jumbotron .jumbotron-cta-row { flex-direction: column; align-items: stretch; width: 100%; gap: var(--ds-touch-spacing, 8px); }
    /* SENIOR-T2: keep mobile primary at AARP 56px, secondary at 48px */
    .block-jumbotron .jumbotron-button,
    .block-jumbotron .jumbotron-cta-primary {
        width: 100%;
        min-height: var(--ds-touch-target-primary, 56px);
    }
    .block-jumbotron .jumbotron-button-secondary,
    .block-jumbotron .jumbotron-cta-secondary {
        width: 100%;
        min-height: var(--ds-touch-target, 48px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .block-jumbotron *,
    .block-jumbotron *::before,
    .block-jumbotron *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

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