/**
 * Section: Hero — Fullbleed
 * RSD Design Language Wave 3 Primitive 1.
 * Companion to: pages/sections/hero-fullbleed.php
 *
 * @since 3.5.70 (RSD primitives band)
 *
 * v3.6.9 (F2a) — REWRITE to match PHP-emitted class names. Pre-v3.6.9 this
 * file targeted .shfb-* selectors that the PHP template never emits (PHP
 * uses .ssla-hero-fb-*, .ssla-eyebrow, .ssla-h1, .ssla-lede, .ssla-btn, .ssla-stat-*).
 * Net effect of the mismatch: bg-image div had no positioning rule (rendered
 * in flow as a normal block, image displayed at natural size in document
 * order above the content), bg-mode visibility selectors never engaged,
 * overlay div had no rgba background, no opacity consumption, no positioning.
 * This is the "red square stacked above text instead of full-bleed image
 * behind text with overlay" symptom Glenn captured 2026-05-04.
 *
 * Companion regression guard: bin/smoke-section-class-fidelity.php asserts
 * every section's emitted class names appear as targets in its CSS file.
 */

[data-ssla-type="hero-fullbleed"]{
    position: relative;
    overflow: hidden;
    padding: var(--shell-section-padding-y-generous) 48px;
    background: var(--ssla-bg-color, var(--shell-surface-dark));
}

/* Surface variants */
[data-ssla-type="hero-fullbleed"][data-ssla-variant-surface="cream"]{ background: var(--ssla-bg-color, var(--shell-surface-cream)); }
[data-ssla-type="hero-fullbleed"][data-ssla-variant-surface="warm"]{ background: var(--ssla-bg-color, var(--shell-surface-warm)); }
[data-ssla-type="hero-fullbleed"][data-ssla-variant-surface="light"]{ background: var(--ssla-bg-color, var(--shell-surface-light)); }
[data-ssla-type="hero-fullbleed"][data-ssla-variant-surface="dark"]{ background: var(--ssla-bg-color, var(--shell-surface-dark)); }
[data-ssla-type="hero-fullbleed"][data-ssla-variant-surface="darker"]{ background: var(--ssla-bg-color, var(--shell-surface-darker)); }

/* ─── Outer template wrapper ─────────────────────────────────────
   PHP wraps content in <div class="ssla-hero-fb"> inside the <section>.
   The wrapper is a positioning container for absolute children. */
.ssla-hero-fb{
    position: relative;
    width: 100%;
    height: 100%;
    min-height: inherit;
}

/* ─── Background layers ─────────────────────────────────────────── */

/* All bg layers absolute-positioned and hidden by default. The
   bg-mode variant selector flips the relevant layer visible. */
.ssla-hero-fb-bg-image,
.ssla-hero-fb-bg-gradient{
    display: none;
    position: absolute;
    inset: 0;
    z-index: 1;
}

[data-ssla-type="hero-fullbleed"][data-ssla-variant-bg-mode="image"] .ssla-hero-fb-bg-image{
    display: block;
}

[data-ssla-type="hero-fullbleed"][data-ssla-variant-bg-mode="gradient"] .ssla-hero-fb-bg-gradient{
    display: block;
}

/* The <img> inside .ssla-hero-fb-bg-image needs to fill the layer. */
.ssla-hero-fb-bg-image img{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Tinted overlay layer — sits above bg, below content. */
.ssla-hero-fb-overlay{
    position: absolute;
    inset: 0;
    z-index: 2;
    /* v3.12.03 — picker --ssla-bg-color cascades from section root. Default
     * is charcoal-at-65%; picker writes hex8 (color + alpha slider) so user
     * controls tint hue + intensity together. The --overlay-opacity rule
     * remains as a contract fallback when no picker is set. */
    background: var(--ssla-bg-color, rgba(26, 26, 26, var(--overlay-opacity, 0.65)));
    pointer-events: none;
}

[data-ssla-variant-tone="light"] .ssla-hero-fb-overlay{
    background: var(--ssla-bg-color, rgba(245, 240, 232, var(--overlay-opacity, 0.65)));
}

/* Gradient mode skips the dark overlay. */
[data-ssla-type="hero-fullbleed"][data-ssla-variant-bg-mode="gradient"] .ssla-hero-fb-overlay,
[data-ssla-type="hero-fullbleed"][data-ssla-variant-bg-mode="plain"] .ssla-hero-fb-overlay{
    display: none;
}

/* ─── Content layer ─────────────────────────────────────────────── */

.ssla-hero-fb-content{
    position: relative;
    z-index: 3;
    max-width: var(--shell-content-max-width);
    margin: 0 auto;
    text-align: center;
}

[data-ssla-type="hero-fullbleed"][data-ssla-variant-alignment="left"] .ssla-hero-fb-content{
    text-align: left;
}

/* Eyebrow — uses the shared .ssla-eyebrow class emitted by PHP. */
[data-ssla-type="hero-fullbleed"] .ssla-eyebrow.is-plain{
    display: inline-block;
    margin-bottom: 32px;
    color: var(--shell-accent);
    font-size: var(--paint-eyebrow-size, var(--shell-eyebrow-size));
    font-weight: 600;
    letter-spacing: var(--shell-eyebrow-letter-spacing);
    text-transform: uppercase;
}

/* Heading — PHP emits .ssla-h1 */
[data-ssla-type="hero-fullbleed"] .ssla-h1{
    font-family: var(--shell-font-family-heading);
    font-size: var(--paint-h1-size, var(--shell-h1-size));
    line-height: 1.0;
    letter-spacing: var(--shell-h1-letter-spacing);
    font-weight: 700;
    color: var(--shell-text-dark);
    margin: 0 0 36px;
    max-width: var(--shell-text-max-width);
}

[data-ssla-type="hero-fullbleed"][data-ssla-variant-alignment="center"] .ssla-h1{
    margin-left: auto;
    margin-right: auto;
}

[data-ssla-type="hero-fullbleed"][data-ssla-variant-tone="dark"] .ssla-h1{
    color: var(--shell-text-on-dark);
}

/* Lede — PHP emits .ssla-lede */
[data-ssla-type="hero-fullbleed"] .ssla-lede{
    font-size: var(--paint-body-size, 21px);
    line-height: var(--paint-body-line-height, 1.45);
    color: var(--shell-text-body);
    max-width: 620px;
    margin: 0 0 44px;
}

[data-ssla-type="hero-fullbleed"][data-ssla-variant-alignment="center"] .ssla-lede{
    margin-left: auto;
    margin-right: auto;
}

[data-ssla-type="hero-fullbleed"][data-ssla-variant-tone="dark"] .ssla-lede{
    color: var(--shell-text-on-dark-muted);
}

[data-ssla-type="hero-fullbleed"] .ssla-lede p{
    margin: 0;
}

/* Actions — PHP emits .ssla-hero-fb-actions */
.ssla-hero-fb-actions{
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

[data-ssla-type="hero-fullbleed"][data-ssla-variant-alignment="center"] .ssla-hero-fb-actions{
    justify-content: center;
}

/* CTAs — PHP emits .ssla-btn .ssla-btn-primary / .ssla-btn-secondary */
[data-ssla-type="hero-fullbleed"] .ssla-btn{
    display: inline-block;
    padding: 16px 32px;
    font-size: var(--paint-button-size, 14px);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s, transform 0.15s, border-color 0.2s;
}

[data-ssla-type="hero-fullbleed"] .ssla-btn-primary{
    background: var(--shell-accent-strong);
    color: #FFFFFF;
}

/* 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:
 * [data-ssla-type="hero-fullbleed"] .ssla-btn-primary:hover{
 *     background: #5C0F0F;
 *     transform: translateY(-1px);
 * }
 */
[data-ssla-type="hero-fullbleed"] .ssla-btn-primary:hover{
    transform: translateY(-1px);
}

[data-ssla-type="hero-fullbleed"][data-ssla-variant-tone="dark"] .ssla-btn-primary{
    background: var(--shell-accent);
    color: var(--shell-text-dark);
}

/* 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:
 * [data-ssla-type="hero-fullbleed"][data-ssla-variant-tone="dark"] .ssla-btn-primary:hover{
 *     background: var(--shell-accent-hover);
 * }
 */
[data-ssla-type="hero-fullbleed"][data-ssla-variant-tone="dark"] .ssla-btn-primary:hover{/* paint retired; global rule provides lift */}

[data-ssla-type="hero-fullbleed"] .ssla-btn-secondary{
    background: transparent;
    color: var(--shell-text-dark);
    border: 2px solid var(--shell-text-dark);
}

/* 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:
 * [data-ssla-type="hero-fullbleed"] .ssla-btn-secondary:hover{
 *     background: var(--shell-text-dark);
 *     color: #FFFFFF;
 *     transform: translateY(-1px);
 * }
 */
[data-ssla-type="hero-fullbleed"] .ssla-btn-secondary:hover{
    transform: translateY(-1px);
}

[data-ssla-type="hero-fullbleed"][data-ssla-variant-tone="dark"] .ssla-btn-secondary{
    color: #FFFFFF;
    border-color: #FFFFFF;
}

/* 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:
 * [data-ssla-type="hero-fullbleed"][data-ssla-variant-tone="dark"] .ssla-btn-secondary:hover{
 *     background: #FFFFFF;
 *     color: var(--shell-text-dark);
 * }
 */
[data-ssla-type="hero-fullbleed"][data-ssla-variant-tone="dark"] .ssla-btn-secondary:hover{/* paint retired; global rule provides lift */}

/* ─── Stats row — PHP emits .ssla-stats-row / .ssla-stat / .ssla-stat-value / .ssla-stat-label ─── */

.ssla-stats-row{
    display: none;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid var(--shell-hairline);
}

[data-ssla-type="hero-fullbleed"][data-ssla-variant-stats-row="on"] .ssla-stats-row{
    display: grid;
}

[data-ssla-type="hero-fullbleed"][data-ssla-variant-tone="dark"] .ssla-stats-row{
    border-top-color: var(--shell-hairline-on-dark);
}

[data-ssla-type="hero-fullbleed"] .ssla-stat{
    padding: 0 16px;
    border-right: 1px solid var(--shell-hairline);
    text-align: left;
}

[data-ssla-type="hero-fullbleed"] .ssla-stat:last-child{
    border-right: 0;
}

[data-ssla-type="hero-fullbleed"][data-ssla-variant-tone="dark"] .ssla-stat{
    border-right-color: var(--shell-hairline-on-dark);
}

[data-ssla-type="hero-fullbleed"][data-ssla-variant-alignment="center"] .ssla-stat{
    text-align: center;
}

[data-ssla-type="hero-fullbleed"] .ssla-stat-value{
    font-family: var(--shell-font-family-heading);
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 700;
    letter-spacing: -1px;
    color: var(--shell-text-dark);
    line-height: 1.1;
}

[data-ssla-type="hero-fullbleed"][data-ssla-variant-tone="dark"] .ssla-stat-value{
    color: var(--shell-accent);
}

[data-ssla-type="hero-fullbleed"] .ssla-stat-label{
    font-size: 13px;
    color: var(--shell-text-muted);
    margin-top: 6px;
    line-height: 1.3;
}

[data-ssla-type="hero-fullbleed"][data-ssla-variant-tone="dark"] .ssla-stat-label{
    color: var(--shell-text-on-dark-muted);
}

/* ─── Hidden helper (overlay_opacity field anchor) ───────────────── */

.ssla-hidden{
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* ─── Mobile ─────────────────────────────────────────────────────── */

@media (max-width: 767px) {
    [data-ssla-type="hero-fullbleed"]{
        padding: 96px 24px 80px;
    }

    .ssla-stats-row{
        grid-template-columns: 1fr;
    }

    [data-ssla-type="hero-fullbleed"] .ssla-stat{
        border-right: 0;
        border-bottom: 1px solid var(--shell-hairline);
        padding: 16px 0;
    }
}

/* 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[data-ssla-type="hero-fullbleed"] .ssla-h1{color: var(--shell-text-on-dark, #ffffff)}
.ssla-tone-dark[data-ssla-type="hero-fullbleed"] .ssla-lede{color: var(--shell-text-on-dark-muted, rgba(255,255,255,0.78))}
.ssla-tone-dark[data-ssla-type="hero-fullbleed"] .ssla-eyebrow{color: var(--shell-accent, #E2A03F)}
.ssla-tone-light[data-ssla-type="hero-fullbleed"] .ssla-h1{color: var(--shell-text-dark, #1a1d21)}
.ssla-tone-light[data-ssla-type="hero-fullbleed"] .ssla-lede{color: var(--shell-text-body, #4a5568)}
.ssla-tone-light[data-ssla-type="hero-fullbleed"] .ssla-eyebrow{color: var(--shell-accent, #B23232)}