/* ─────────────────────────────────────────────────────────────────
   Block: hero  (TEXT-FORWARD variant)
   Full-bleed photo hero. Section bg is the photo; an ink-gradient
   overlay (admin-tunable) ensures text legibility.
   T1 (2026-05-06) — added trust-badge row, helper text, secondary
   ghost CTA, alignment + overlay variables, focus-visible ring,
   fluid type. All token-driven.
   WAVE10 (2026-05-07) — Toronto/GTA construction CRO pass:
     • Eyebrow + pulsing live-dot
     • Phone (tel:) ghost CTA next to primary
     • Risk-reversal pill row
     • Trust strip (single-line credentials)
     • Optional small accent figure (5-col)
     • Schema.org Service + LocalBusiness JSON-LD
   Differentiated from hero2: hero is TEXT-FORWARD (7-col text /
   5-col accent), hero2 is SPLIT-PANE (6/6 image is the hero).
   ───────────────────────────────────────────────────────────── */

.block-hero {
    position: relative;
    isolation: isolate;
    background-color: var(--scheme-bg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    color: var(--scheme-fg);
    font-family: var(--ds-font-body);
    padding-block: var(--ds-space-8);
    overflow: hidden;
    /* SENIOR-T2: floor overlay opacity to 0.6 so h1 always clears AAA 7:1
       even when admin sets 0%. The full --block-hero-overlay (admin-tunable)
       still adds on top via ::before. */
    --block-hero-overlay: 0.65;
    --block-hero-min-scrim: 0.55;
}
/* Floor scrim — guarantees text contrast even on bright photos.
   WAVE3-F01 (2026-05-08): replaced literal rgb(14,30,51) deep-blue scrim
   with a scheme-aware color-mix(scheme-bg, black) so that on light/colored
   parents (scheme-paper, scheme-accent, scheme-trust) the bottom scrim no
   longer adds an unintended blue cast. Falls back to plain black for
   browsers that lack color-mix support. */
.block-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(180deg,
        transparent 0%,
        color-mix(in srgb, var(--scheme-bg, var(--ds-ink)) 20%, rgba(0,0,0, var(--block-hero-min-scrim, 0.55))) 100%);
    pointer-events: none;
}
@supports not (color: color-mix(in srgb, white, black)) {
    .block-hero::after {
        background: linear-gradient(180deg,
            transparent 0%,
            rgba(0, 0, 0, var(--block-hero-min-scrim, 0.55)) 100%);
    }
}

.block-hero > .container {
    position: relative;
    z-index: 1;
    max-width: 1200px;
}

/* Scheme-aware ink gradient overlay (intensity = --block-hero-overlay) -- */
.block-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--scheme-bg) 0%, transparent) 0%,
            color-mix(in srgb, var(--scheme-bg) calc(var(--block-hero-overlay) * 100%), transparent) 100%
        ),
        linear-gradient(
            90deg,
            color-mix(in srgb, var(--scheme-bg) calc(var(--block-hero-overlay) * 110%), transparent) 0%,
            color-mix(in srgb, var(--scheme-bg) 0%, transparent) 60%
        );
    pointer-events: none;
}

/* Alignment toggle ------------------------------------------- */
.block-hero[data-align="center"] .row { justify-content: center; }
.block-hero[data-align="center"] .hero-text { text-align: center; }
.block-hero[data-align="center"] .hero-cta-row,
.block-hero[data-align="center"] .hero-trust-badges {
    justify-content: center;
}

/* Text column ------------------------------------------------- */
.block-hero .hero-text { color: var(--scheme-fg); }

.block-hero .hero-text h1,
.block-hero .hero-text .hero-title {
    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: 0 0 var(--ds-space-4) 0;
    letter-spacing: 0.005em;
    max-width: 18ch;
}
.block-hero .hero-text h2 {
    font-family: var(--ds-font-display);
    font-size: var(--ds-fs-display-lg);
    line-height: 1.05;
    text-transform: uppercase;
    color: var(--scheme-fg);
    margin: 0 0 var(--ds-space-4) 0;
}
.block-hero .hero-text em,
.block-hero .hero-text h1 em,
.block-hero .hero-text h2 em {
    font-family: var(--ds-font-serif);
    font-style: italic;
    color: var(--ds-cta);
}

.block-hero .hero-text p,
.block-hero .hero-text .lead,
.block-hero .hero-subtitle {
    font-family: var(--ds-font-body);
    /* SENIOR-T2: floor at --ds-fs-body (18px) so subtitle never drops below AAA min */
    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);
    margin-bottom: var(--ds-space-5);
    max-width: 56ch;
}

.block-hero .hero-text strong { color: var(--scheme-fg); font-weight: 700; }
.block-hero .hero-text a { color: var(--ds-cta); }

/* CTA row ----------------------------------------------------- */
.block-hero .hero-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ds-space-3);
    margin: var(--ds-space-4) 0 var(--ds-space-2) 0;
}
.block-hero .hero-cta-primary,
.block-hero .hero-cta-secondary,
.block-hero .hero-text .btn,
.block-hero .hero-text .btn-primary {
    border-radius: var(--ds-radius-sm) !important;
    /* SENIOR-T2: 48px floor for any CTA in hero */
    min-height: var(--ds-touch-target, 48px);
    padding: 0.875rem 1.5rem !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-family: var(--ds-font-body);
}
.block-hero .hero-cta-primary {
    background: var(--ds-cta) !important;
    /* WAVE3-F01 2026-05-08: was --ds-paper which is rebound by Pattern-B
       parents (e.g. banner-style-dark swaps --ds-paper to ink). The CTA
       orange surface is constant; foreground should not track parent rebinds.
       Use --ds-cta-fg per doctrine Pattern C. */
    color: var(--ds-cta-fg, #fff) !important;
    border: none !important;
    /* SENIOR-T2: AARP primary CTA = 56px tall, ≥1.25rem font, filled */
    min-height: var(--ds-touch-target-primary, 56px);
    padding: 1rem 1.75rem !important;
    font-size: var(--ds-fs-body-lg, 1.25rem);
    font-weight: 700;
    letter-spacing: 0.005em;
}
.block-hero .hero-cta-primary:hover {
    background: var(--ds-cta-dk) !important;
    color: var(--ds-cta-fg, #fff) !important;
}
.block-hero .hero-cta-secondary {
    background: transparent !important;
    color: var(--scheme-fg) !important;
    /* WAVE3-F01 2026-05-08: Pattern D — border tracks color via currentColor. */
    border: 1.5px solid currentColor !important;
    box-shadow: none !important;
}
.block-hero .hero-cta-secondary:hover {
    /* WAVE3-F01 2026-05-08: was background: var(--scheme-card-bg, #fff) — the
       fallback never fires because --scheme-card-bg IS defined on the parent
       scheme; on .scheme-paper this resolved to a near-paper tint with paper
       text → invisible hover. Use clean inversion (scheme-fg as hover bg,
       scheme-bg as text). Doctrine anti-pattern row 6. */
    background: var(--scheme-fg) !important;
    color: var(--scheme-bg) !important;
    border-color: var(--scheme-fg) !important;
}

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

/* Helper text under CTA -------------------------------------- */
.block-hero .hero-cta-helper {
    font-family: var(--ds-font-body);
    font-size: var(--ds-fs-body-sm);
    color: var(--scheme-fg-mute);
    margin: 0 0 var(--ds-space-4) 0;
    opacity: 0.9;
}

/* Trust badges ----------------------------------------------- */
.block-hero .hero-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-4) 0;
}
.block-hero .hero-trust-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-2);
    font-family: var(--ds-font-body);
    font-size: var(--ds-fs-body-sm);
    font-weight: 600;
    color: var(--scheme-fg);
    line-height: 1.3;
}
.block-hero .hero-trust-icon {
    color: var(--ds-cta);
    font-size: 1.05em;
}

/* Rating row -------------------------------------------------- */
.block-hero .hero-rating { gap: var(--ds-space-3); align-items: center; }

.block-hero .hero-avatars { padding-left: var(--ds-space-4); }
.block-hero .hero-avatar {
    /* TEAM-POLISH 2026-05-08: trim border 4px→3px for tighter trust-rating
       compactness; 4px overlap reads heavy at 56px avatar diameter. */
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    border: 3px solid var(--scheme-fg);
    margin-left: -1rem;
    object-fit: cover;
    background: var(--scheme-card-bg);
    transition: transform var(--ds-duration-fast, 150ms) var(--ds-ease-out, ease);
}
.block-hero .hero-avatars:hover .hero-avatar {
    /* TEAM-POLISH: subtle fan-out on hover for tactile feel; cheap transform-only
       so it doesn't trigger layout. */
    transform: translateX(2px);
}

.block-hero .hero-rating-stars {
    font-size: var(--ds-fs-body-lg);
    color: var(--scheme-fg);
}
.block-hero .hero-stars-wrap { position: relative; margin-right: var(--ds-space-1); }
.block-hero .hero-stars-mask {
    position: absolute;
    top: 0; bottom: 0; right: 0;
    background-color: var(--scheme-bg);
}
.block-hero .hero-rating-value { color: var(--scheme-fg); font-weight: 700; }
.block-hero .hero-rating-label {
    font-family: var(--ds-font-mono);
    font-size: var(--ds-fs-body-sm);
    color: var(--scheme-fg-mute);
}

/* Media column ------------------------------------------------ */
/* FIX-T1 (2026-05-06): broaden img guard so any <img> inside hero
   inherits max-width/height-auto, preventing overscaling. */
.block-hero img,
.block-hero .hero-media img {
    max-width: 100%;
    height: auto;
}
.block-hero .hero-media { color: var(--scheme-fg); }
.block-hero .hero-media img {
    border-radius: var(--ds-radius-lg);
}

/* Responsive -------------------------------------------------- */
@media (max-width: 992px) {
    .block-hero {
        padding-block: var(--ds-space-7);
    }
}
@media (max-width: 600px) {
    .block-hero {
        padding-block: var(--ds-space-6);
        /* T1-HERO 2026-05-08: enforce mobile-edge floor of 16px so text never
           sits flush against viewport on small screens. */
        padding-inline: clamp(16px, 5vw, 24px);
        /* Mobile thumb-zone: ensure CTA falls in lower 60%.
           WAVE3-F01 2026-05-08: switched 90vh → clamp with svh/dvh so iOS
           Safari URL-bar collapse/expand doesn't jitter content. */
        min-height: clamp(70svh, 90vh, 100dvh);
        display: flex;
        align-items: flex-end;
    }
    .block-hero > .container { width: 100%; }
    /* T1-HERO 2026-05-08: lift mobile h1 floor to 40px for proper above-the-fold weight. */
    .block-hero .hero-text h1,
    .block-hero .hero-text .hero-title { font-size: clamp(2.5rem, 9vw, 2.8rem); max-width: 100%; line-height: 1.05; }
    .block-hero .hero-cta-row { flex-direction: column; align-items: stretch; gap: var(--ds-touch-spacing, 8px); }
    .block-hero .hero-cta-primary,
    .block-hero .hero-cta-secondary { width: 100%; }
    /* SENIOR-T2: keep mobile primary at AARP 56px target */
    .block-hero .hero-cta-primary { min-height: var(--ds-touch-target-primary, 56px); }
    .block-hero .hero-cta-secondary { min-height: var(--ds-touch-target, 48px); }
    .block-hero .hero-avatar { width: 2.5rem; height: 2.5rem; border-width: 3px; }
    .block-hero .hero-avatars { padding-left: var(--ds-space-3); }
}

/* ─────────────────────────────────────────────────────────────
   WAVE10 additions: eyebrow + pulsing dot, phone-CTA, risk
   pills, trust strip, accent figure, split-pane safety.
   ───────────────────────────────────────────────────────── */

/* Eyebrow with pulsing live-dot ----------------------------- */
.block-hero .hero-eyebrow {
    /* TEAM-POLISH 2026-05-08: bumped bottom margin space-3→space-4 so the
       eyebrow has visible breathing room from the H1 (was 12px → 16px). */
    margin: 0 0 var(--ds-space-4) 0;
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-2);
    color: var(--ds-cta);
    font-family: var(--ds-font-body);
    font-size: var(--ds-fs-eyebrow);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1.2;
}
.block-hero .hero-live-dot {
    display: inline-block;
    width: 0.55em;
    height: 0.55em;
    border-radius: 50%;
    background: var(--ds-cta);
    box-shadow: var(--ds-shadow-cta);
    animation: hero-live-pulse 1.4s var(--ds-ease, ease-in-out) infinite;
    flex-shrink: 0;
}
@keyframes hero-live-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.4; }
}
.block-hero[data-align="center"] .hero-eyebrow { justify-content: center; }

/* Phone (tel:) CTA — ghost button with icon + label stack
   SENIOR-T2: trades phone CTA promoted to AARP primary-target size. */
.block-hero .hero-cta-phone {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-2);
    background: transparent !important;
    color: var(--scheme-fg) !important;
    /* WAVE3-F01 2026-05-08: Pattern D — border via currentColor. */
    border: 1.5px solid currentColor !important;
    border-radius: var(--ds-radius-sm) !important;
    min-height: var(--ds-touch-target-primary, 56px);
    padding: 0.75rem 1.25rem !important;
    text-decoration: none;
    font-family: var(--ds-font-body);
    font-weight: 700;
    font-size: var(--ds-fs-body, 1.125rem);
    line-height: 1.2;
}
.block-hero .hero-cta-phone:hover {
    /* WAVE3-F01 2026-05-08: clean inversion (was --scheme-card-bg fallback trap). */
    background: var(--scheme-fg) !important;
    color: var(--scheme-bg) !important;
    border-color: var(--scheme-fg) !important;
}
.block-hero .hero-phone-icon { width: 1.1em; height: 1.1em; flex-shrink: 0; }
.block-hero .hero-phone-label {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.1;
}
.block-hero .hero-phone-label small {
    /* SENIOR-T2: 14px floor for tracked-caps eyebrow above phone number */
    font-size: var(--ds-fs-eyebrow, 0.875rem);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--scheme-fg);
    opacity: 0.85;
}
.block-hero .hero-cta-phone:hover .hero-phone-label small { color: inherit; }

/* Tertiary text link (right of CTA row) --------------------- */
.block-hero .hero-cta-secondary-link {
    align-self: center;
    color: var(--ds-cta);
    font-family: var(--ds-font-body);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    padding: 0.5rem 0.25rem;
}
.block-hero .hero-cta-secondary-link:hover { color: var(--ds-cta-dk, var(--ds-cta)); }

/* Risk-reversal pills --------------------------------------- */
.block-hero .hero-risk-pills {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--ds-space-2) var(--ds-space-3);
    list-style: none;
    margin: var(--ds-space-3) 0 0 0;
    padding: 0;
}
.block-hero[data-align="center"] .hero-risk-pills { justify-content: center; }
.block-hero .hero-risk-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.3rem 0.85rem;
    border-radius: var(--ds-radius-pill, 999px);
    border: 1px solid var(--scheme-fg);
    border-color: color-mix(in srgb, var(--scheme-fg) 30%, transparent);
    font-family: var(--ds-font-body);
    font-size: var(--ds-fs-body-sm);
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.3;
    color: var(--scheme-fg);
}
.block-hero .hero-risk-icon {
    width: 0.95em;
    height: 0.95em;
    flex-shrink: 0;
    color: var(--ds-cta);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.block-hero .hero-risk-icon svg { width: 100%; height: 100%; }
@supports not (color: color-mix(in srgb, white, black)) {
    .block-hero .hero-risk-pill { border-color: rgba(255, 255, 255, 0.3); }
}

/* Trust strip (single-line footer) -------------------------- */
.block-hero .hero-trust-strip {
    margin: var(--ds-space-4) 0 0 0;
    font-family: var(--ds-font-body);
    font-size: var(--ds-fs-body-sm);
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1.4;
    color: color-mix(in srgb, var(--scheme-fg) 75%, transparent);
}
@supports not (color: color-mix(in srgb, white, black)) {
    .block-hero .hero-trust-strip { color: var(--scheme-fg-mute, var(--scheme-fg)); }
}

/* Accent figure (right column, text-forward — small) -------- */
.block-hero .hero-accent { display: flex; align-items: center; justify-content: center; }
.block-hero .hero-accent-figure {
    margin: 0;
    width: 100%;
    max-width: 420px;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--ds-radius-lg);
    box-shadow: var(--ds-shadow-md);
}
.block-hero .hero-accent-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Mobile: stack accent below text and shrink ---------------- */
@media (max-width: 992px) {
    .block-hero .hero-accent-figure { max-width: 100%; aspect-ratio: 16 / 10; margin-top: var(--ds-space-5); }
}
@media (max-width: 600px) {
    /* SENIOR-T2: clamp eyebrow / pill / phone-cta to >=14px AAA eyebrow / body-sm floor */
    .block-hero .hero-eyebrow { font-size: var(--ds-fs-eyebrow, 0.875rem); letter-spacing: 0.1em; }
    .block-hero .hero-cta-phone { width: 100%; min-height: var(--ds-touch-target-primary, 56px); }
    .block-hero .hero-cta-secondary-link { width: 100%; text-align: center; padding: 0.75rem 0; min-height: var(--ds-touch-target, 48px); display: inline-flex; align-items: center; justify-content: center; }
    .block-hero .hero-risk-pill { font-size: var(--ds-fs-body-sm, 1rem); padding: 0.35rem 0.85rem; }
}

/* Reduced motion (extends earlier rule) --------------------- */
@media (prefers-reduced-motion: reduce) {
    .block-hero .hero-live-dot { animation: none !important; }
}

/* Reduced motion ---------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .block-hero * { transition-duration: 0.01ms !important; }
}

/* ── Bug fix 2026-05-07-bugs (BUG-T2): defend against global `ul li::before`
       checkmark leak from theme.min.css. Hero owns its own SVG risk-icon
       and trust-icon so the global pseudo would otherwise stack a green
       check on top of every list item. Same precedent as icons-text. ── */
.block-hero .hero-risk-pills li::before,
.block-hero .hero-risk-pill::before,
.block-hero .hero-trust-badges li::before,
.block-hero .hero-trust-badge::before {
    content: none !important;
    background: none !important;
    background-image: none !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
}

/* ── Bug fix 2026-05-08-sweep (SWEEP-T03): rating-block FA stars fallback.
       The rating macro renders <i class="fa fa-star"> Font Awesome icons,
       but FA glyph font isn't loaded site-wide → stars showed as empty
       boxes covered by the dark .hero-stars-mask, leaving a black bar
       with only the numeric "4.9" visible (no visible star strip).
       Fix: replace the empty FA ::before with a Unicode ★ glyph using the
       inherited body font. Independent of FA loading; matches the
       intentional ★★★★★ literal used by trust_badges row. The stars-mask
       (right-anchored width = unfilled%) still works on top to indicate
       fractional rating. Scoped to .block-hero so other FA usage on the
       page is untouched. ── */
.block-hero .hero-stars-wrap i.fa.fa-star,
.block-hero .hero-rating-stars i.fa.fa-star {
    font-family: inherit !important;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    width: auto;
    min-width: 1em;
}
.block-hero .hero-stars-wrap i.fa.fa-star::before,
.block-hero .hero-rating-stars i.fa.fa-star::before {
    content: "★" !important;
    font-family: inherit !important;
    font-weight: 400;
    color: var(--ds-cta, #e36218);
}
/* Tighten the stars-wrap so the mask aligns with the actual ★ characters,
   not the original 19px FA icon box. */
.block-hero .hero-stars-wrap {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    letter-spacing: 0.04em;
    font-size: var(--ds-fs-body-lg, 1.25rem);
}
.block-hero .hero-rating-value {
    margin-inline-start: var(--ds-space-2, 0.5rem);
}
/* The shared rating macro uses an inverted-logic right-anchored mask
   (style="width: calc(100% - {percents})") that, with the page-md value
   `rate_percents: 4%`, was covering 96% of the strip — leaving only ~4%
   of one star visible. The numeric "4.9" is already shown next to the
   stars so a precise fractional fill is unnecessary. Disable the mask
   in hero scope to show all 5 stars filled; this matches the visual
   trust signal pattern used across the rest of the page (e.g. literal
   "★★★★★" in the trust_badges row). Macro/page-md unchanged so other
   consumers behave as before. */
.block-hero .hero-stars-mask { display: none !important; }

/* F-HERO residual fix (2026-05-08): tap-target floor for secondary CTA link.
   Previously rendered ~45px (padding 0.5rem 0.25rem with body line-height),
   3px under the 48px touch-target floor. Enforce min-height with inline-flex
   centering so the visible underline stays aligned with surrounding CTAs. */
.hero-cta-secondary-link,
.hero-secondary-cta,
.hero .cta-secondary,
[class*="hero-cta-secondary"] {
    min-height: var(--ds-touch-target, 48px);
    display: inline-flex;
    align-items: center;
    padding: var(--ds-space-3, 0.75rem) var(--ds-space-4, 1rem);
}