/* === hero-bg ===
 * Full-bleed bg image hero with overlaid text, optional stats row.
 * Tone: light (default) | dark.
 * Bg image is editable <img> positioned absolute behind .shb-inner.
 *
 * @updated 3.5.54 — tone variant, :has stats collapse, shared eyebrow, gold accent
 */
.shb {
    background: var(--ssla-bg-color, transparent);
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 160px 48px 120px;
    overflow: hidden;
    /* v3.5.58 (B16) — paint-driven font inheritance for all text content
       in the section. Without this, body copy (.shb-desc, stat labels)
       fell through to the theme's body font (Arial) instead of the
       preset's typography (Montserrat). Headings carry their own
       declaration; this catches everything else. */
    font-family: var(--paint-font-family, var(--shell-hf, inherit));
}
.shb-img-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.shb-img-bg .shb-bg-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.shb-img-bg .shb-bg-photo[src=""] {
    /* No image set — fall back to a neutral surface so text remains legible. */
    display: none;
}
.shb-tint {
    position: absolute;
    inset: 0;
    /* v3.12.03 — picker's --ssla-bg-color overrides the default light tint
     * cascade when set, letting users tune the overlay to brand. */
    background: var(--ssla-bg-color, linear-gradient(135deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0.4) 100%));
}
/* When no bg image is present, paint the tint area with the preset's
 * dark surface so the section still looks intentional during authoring. */
.shb-img-bg:not(:has(.shb-bg-photo[src]:not([src=""]))) .shb-tint {
    background: linear-gradient(160deg, var(--preset-primary, #2B4C7E) 0%, var(--preset-primary-dark, #1a2a45) 100%);
}

/* ── Tone: dark (default for ASK preset, white text on dark tint) ── */
.ssla-hero-bg--tone-dark .shb-tint {
    /* v3.12.03 — picker's --ssla-bg-color cascades from section root.
     * Default is charcoal for tone-dark; picker writes hex8 (color + alpha
     * via the alpha slider) so user controls tint intensity. */
    background: var(--ssla-bg-color, rgba(26, 26, 26, 0.85));
}
.ssla-hero-bg--tone-dark .shb {
    color: #fff;
}

/* Inner content */
.shb-inner {
    position: relative;
    z-index: 1;
    max-width: 620px;
}

/* Eyebrow uses shared .ssla-eyebrow — gold rule + tracked uppercase.
 * .shb-eyebrow scope just allows for tone-specific tweaks. */
.shb-eyebrow {
    margin-bottom: 24px;
}
.ssla-hero-bg--tone-dark .shb-eyebrow {
    color: var(--shell-accent, var(--preset-accent, #E2A03F));
}

/* Heading — large, painted weight, hard kerning */
.shb h1 {
    font-family: var(--paint-font-family, var(--shell-hf, inherit));
    font-size: var(--paint-h1-size, clamp(2.4rem, 5vw, 3.4rem));
    font-weight: var(--paint-heading-weight, 800);
    letter-spacing: var(--paint-heading-letter-spacing-h1, -1.5px);
    text-transform: var(--paint-heading-case-h1, none);
    color: inherit;
    line-height: 1.08;
    margin: 0 0 24px;
}
.shb h1 em {
    font-style: italic;
    color: var(--shell-accent, var(--preset-accent, currentColor));
}
.shb h1 .gold,
.shb h1 .ssla-accent {
    color: var(--shell-accent, var(--preset-accent, currentColor));
}

/* Description */
.shb-desc {
    font-size: var(--paint-body-size, 1.05rem);
    line-height: var(--paint-body-line-height, 1.7);
    color: inherit;
    opacity: 0.85;
    max-width: 520px;
    margin: 0 0 36px;
}
.shb-desc strong {
    opacity: 1;
    font-weight: 700;
}
.shb-desc p {
    margin: 0 0 0.6em;
}
.shb-desc p:last-child {
    margin-bottom: 0;
}

/* Buttons */
.shb-actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 56px;
}
.shb-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--paint-button-primary-fill, var(--shell-accent, var(--preset-accent, currentColor)));
    color: var(--paint-button-primary-text, #fff);
    font-size: 0.78rem;
    font-weight: 800;
    padding: 16px 36px;
    text-decoration: none;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    transition: var(--paint-motion-timing, 0.3s);
    border-radius: var(--paint-button-radius, 0);
}
/* v3.12.24 (#5) — button-hover paint retired (Glenn 2026-05-21 walk).
 * Unified hover treatment now ships from 0-shared.css (lift only,
 * no paint shift). Original rule preserved here for reference.
 * Original:
 * .shb-cta:hover {
 *     filter: brightness(1.08);
 *     transform: translateY(var(--paint-hover-lift, -2px));
 *     box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
 * }
 */
.shb-cta:hover{
    transform: translateY(var(--paint-hover-lift, -2px));
}
.shb-cta2 {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    color: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 14px 32px;
    text-decoration: none;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border: 2px solid currentColor;
    opacity: 0.85;
    transition: var(--paint-motion-timing, 0.3s);
    border-radius: var(--paint-button-radius, 0);
}
/* v3.12.24 (#5) — button-hover paint retired (Glenn 2026-05-21 walk).
 * Unified hover treatment now ships from 0-shared.css (lift only,
 * no paint shift). Original rule preserved here for reference.
 * Original:
 * .shb-cta2:hover {
 *     opacity: 1;
 *     border-color: var(--shell-accent, var(--preset-accent, currentColor));
 *     color: var(--shell-accent, var(--preset-accent, inherit));
 * }
 */
.shb-cta2:hover{/* paint retired; global rule provides lift */}
.shb-cta:empty,
.shb-cta2:empty {
    display: none;
}

/* Stats — auto-collapse if all values empty.
 * Modern path uses :has(); fallback path uses :empty on the row.
 * Each stat item also collapses individually if its val is empty. */
.shb-stats {
    display: flex;
    gap: 40px;
    padding-top: 16px;
    border-top: 1px solid currentColor;
    border-top-color: rgba(128, 128, 128, 0.2);
}
.ssla-hero-bg--tone-dark .shb-stats {
    border-top-color: rgba(255, 255, 255, 0.15);
}
.shb-stat-val {
    font-family: var(--paint-font-family, var(--shell-hf, inherit));
    font-size: 1.5rem;
    font-weight: var(--paint-heading-weight, 800);
    color: inherit;
    line-height: 1;
}
.shb-stat-lbl {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    opacity: 0.6;
    margin-top: 6px;
}
.shb-stat:has(.shb-stat-val:empty) {
    display: none;
}
.shb-stats:not(:has(.shb-stat-val:not(:empty))) {
    display: none;
}

/* Mobile */
@media (max-width: 768px) {
    .shb {
        padding: 120px 24px 80px;
        min-height: auto;
    }
    .shb h1 {
        font-size: 2.2rem;
        letter-spacing: -1px;
    }
    .shb-stats {
        flex-direction: column;
        gap: 20px;
    }
    .shb-actions {
        margin-bottom: 40px;
    }
}

/* v3.12.02 — tone override classes. ssla-tone-dark inverts text
 * to read against dark bgs; ssla-tone-light inverts to read against
 * light bgs. Surgical inversion of headings/body/eyebrow; complete
 * coverage will iterate per Glenn's walks. */
.ssla-tone-dark .shb{color: #ffffff}
.ssla-tone-dark .shb-eyebrow{color: var(--shell-accent, #E2A03F)}
.ssla-tone-dark .shb-tint{background: rgba(26, 26, 26, 0.85)}
.ssla-tone-light .shb{color: #1a1d21}
.ssla-tone-light .shb-eyebrow{color: var(--shell-accent, #B23232)}
.ssla-tone-light .shb-tint{background: rgba(245, 240, 232, 0.85)}