/* ==========================================================
   BILITON_SITE_WIDE_HERO_RHYTHM_V21_2_84
   Unified text alignment and spacing for public inner heroes.
   Does NOT control hero height, imagery, overlays or typography.
   Homepage v3 slider is intentionally excluded.
   ========================================================== */

:root{
    --blt-hero-container: min(1180px, calc(100% - 40px));

    --blt-hero-breadcrumb-gap: 24px;
    --blt-hero-kicker-gap: 10px;
    --blt-hero-lead-gap: 18px;
    --blt-hero-actions-gap: 24px;
    --blt-hero-proof-gap: 22px;
}

/* ----------------------------------------------------------
   1. Horizontal alignment
   Fix page-specific width:100% rules such as ls-hero__inner.
   ---------------------------------------------------------- */

#main-content section[class*="hero"]:not(.v3-hero) > .site-container,
#main-content section[class*="hero"]:not(.v3-hero) > .v3-container,
#main-content section[class*="hero"]:not(.v3-hero) > .nd-wrap,
#main-content section[class*="hero"]:not(.v3-hero) > .wrap,
#main-content section[class*="hero"]:not(.v3-hero) > .icc-wrap,
#main-content section[class*="hero"]:not(.v3-hero) > [class*="hero-inner"],
#main-content section[class*="hero"]:not(.v3-hero) > [class*="hero-content"]{
    width:var(--blt-hero-container) !important;
    max-width:1180px !important;
    margin-left:auto !important;
    margin-right:auto !important;
}

/* Hero containers that combine site-container + custom hero class */
#main-content section[class*="hero"]:not(.v3-hero) > [class*="site-container"][class*="hero"],
#main-content section[class*="hero"]:not(.v3-hero) > [class*="hero"][class*="site-container"]{
    width:var(--blt-hero-container) !important;
    max-width:1180px !important;
    margin-left:auto !important;
    margin-right:auto !important;
}

/* ----------------------------------------------------------
   2. Breadcrumb → kicker
   ---------------------------------------------------------- */

#main-content section[class*="hero"]:not(.v3-hero) [class*="breadcrumb"],
#main-content header.n25-article-head.has-image [class*="breadcrumb"]{
    margin-top:0 !important;
    margin-bottom:var(--blt-hero-breadcrumb-gap) !important;
}

/* ----------------------------------------------------------
   3. Kicker / eyebrow → title
   ---------------------------------------------------------- */

#main-content section[class*="hero"]:not(.v3-hero) [class*="kicker"],
#main-content section[class*="hero"]:not(.v3-hero) [class*="eyebrow"],
#main-content header.n25-article-head.has-image [class*="kicker"]{
    margin-top:0 !important;
    margin-bottom:var(--blt-hero-kicker-gap) !important;
}

/* ----------------------------------------------------------
   4. Title → lead
   ---------------------------------------------------------- */

#main-content section[class*="hero"]:not(.v3-hero) h1,
#main-content header.n25-article-head.has-image h1{
    margin-top:0 !important;
    margin-bottom:0 !important;
}

#main-content section[class*="hero"]:not(.v3-hero) h1 + p,
#main-content section[class*="hero"]:not(.v3-hero) [class*="lead"],
#main-content header.n25-article-head.has-image h1 + p{
    margin-top:var(--blt-hero-lead-gap) !important;
    margin-bottom:0 !important;
}

/* ----------------------------------------------------------
   5. Lead → actions
   ---------------------------------------------------------- */

#main-content section[class*="hero"]:not(.v3-hero) [class*="actions"]{
    margin-top:var(--blt-hero-actions-gap) !important;
}

/* ----------------------------------------------------------
   6. Actions → proof / trust
   ---------------------------------------------------------- */

#main-content section[class*="hero"]:not(.v3-hero) [class*="proof"],
#main-content section[class*="hero"]:not(.v3-hero) [class*="trust"]{
    margin-top:var(--blt-hero-proof-gap) !important;
}

/* Tracking uses a div.hero rather than section.*-hero */
#main-content .biliton-unified-tracking-shell .hero > .container{
    width:var(--blt-hero-container) !important;
    max-width:1180px !important;
    margin-left:auto !important;
    margin-right:auto !important;
}

/* ----------------------------------------------------------
   Mobile
   ---------------------------------------------------------- */

@media(max-width:700px){
    :root{
        --blt-hero-container:min(100% - 28px,1180px);
        --blt-hero-breadcrumb-gap:18px;
        --blt-hero-kicker-gap:9px;
        --blt-hero-lead-gap:15px;
        --blt-hero-actions-gap:20px;
        --blt-hero-proof-gap:18px;
    }
}