/* =========================================================
   Image-less page header — .support-head--split
   (Blog, Contact, Events — the Company menu pages that have
   no full-bleed photo hero)

   Markup is the SHARED partial, includes/support-header.php,
   via 'variant' => 'split'. Load this file AFTER
   support-header.css, whose base .support-head rules it
   overrides.

   Why a separate layout rather than the photo heroes'
   (page-hero.css) or the centered support lockup:

     - No photo means no scrim and no 100vh plate, so the
       lockup has to hold the top of the page on type alone.
     - The centered .support-head reads as a utility title
       (FAQ, Owner's Manual). These are destination pages.

   So it takes the site's hero TYPE SCALE verbatim — the same
   eyebrow / title / lead clamps as page-hero.css and the
   service hero — on an editorial two-column split: eyebrow and
   title left, supporting copy centred against the title on the
   right. Same sizing, unmistakably different layout.

   Everything below is scoped to --split, so the 19 other
   pages on .support-head (FAQ, financing, manuals, the whole
   account portal) are untouched.
   ========================================================= */

/* Fixed-navbar offset for a page whose wrapper does not already provide one.
   .support-flow (blog, FAQ, video tutorials, owner's manual) and .cx-flow
   (both contact pages) pad their own top; the Events page has no such wrapper,
   so its lockup started 53px higher than everyone else's. Scoped to the body
   class rather than added to the header itself, which would double the offset
   on the pages that already handle it. */
.events-page .support-head--split,
.careers-apply-page .support-head--split {
    margin-top: var(--nav-h, 3.3rem);
}

/* Doubled `.support-head.support-head--split` (0,2,0) for the box properties:
   the base .support-head (0,1,0) sets max-width: 46rem / margin: 0 auto /
   padding / text-align: center, and a single-class variant merely ties it —
   max-width in particular silently capped the full-bleed band back to 736px. */
.support-head.support-head--split {
    display: grid;
    /* Undo the base lockup's 46rem measure so the band can span the viewport;
       the content column is re-established by the side padding below. */
    max-width: none;
    /* Fixed fractions, deliberately: every page in the set gets the SAME
       column geometry, so the lead starts on one x across Blog, Contact,
       Events, FAQ, Financing, Owner's Manual, Video Tutorials and Contact
       Service — a title-hugging track (fit-content) would move that edge per
       page with the length of the title. */
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    column-gap: clamp(1rem, 3.5vw, 3.5rem);
    row-gap: 0;
    /* Baseline for the column items; the lead overrides it to `center` below,
       which is what pairs it with the title. */
    align-items: end;

    /* Full-bleed band with the FOOTER's content measure: the surface has to
       reach both screen edges or it reads as a slab floating inside the page
       wrapper (blog/contact sit inside .support-flow / .cx-flow, which already
       pad their content). Same 100vw trick .compare-shell uses; safe because
       m072224.css hides the scrollbar, so 100vw has no gutter to overshoot.

       Because the band is full-bleed, the measure has to come from the padding
       rather than a max-width: each side is whichever is larger — the footer's
       gutter (6rem here, stepped below exactly as footer.css steps it) or the
       slack outside .footer-max's 1600px cap. That lands the type on the same
       left edge as the footer columns and the photo heroes at every width. */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    /* Roomier than the centered lockup's padding, but nothing like a hero
       plate: this is a band at the top of the page, not a screen. */
    padding-top: clamp(3.25rem, 7vw, 5.5rem);
    padding-bottom: clamp(2.5rem, 5vw, 4rem);
    padding-left: max(6rem, calc(50vw - 800px));
    padding-right: max(6rem, calc(50vw - 800px));
    text-align: left;

    /* No surface of its own: the lockup sits directly on the page's backdrop
       (.support-flow / .cx-flow / the events page), with no band tint and no
       hairline under it — the red rule and the whitespace do the parting. The
       100vw bleed above stays regardless: it is what lets the side padding set
       the measure against the VIEWPORT, so the type lands on the footer's
       column even where the header is nested in a narrower wrapper (contact's
       .cx is 72rem). */
}

/* Financing: its body opens with a full .pg-section, which brings its own
   clamp(1rem, 3vw, 3rem) top padding — stacked on the band's padding above it
   read as a ~9rem void under the red rule. Hand the parting to the section
   and keep only a slim seam on the band. (After the base block: same (0,2,0)
   specificity, so order is what lets this one win.) */
.financing-page .support-head--split {
    padding-bottom: clamp(0.75rem, 1.5vw, 1.25rem);
}

/* ---- Placement. The partial emits a flat child list, so the columns are
   assigned here instead of with wrapper divs — that keeps the markup shared
   with every other .support-head variant. ---- */
.support-head--split .support-head__eyebrow {
    grid-column: 1;
    grid-row: 1;
}

.support-head--split .support-head__title {
    grid-column: 1;
    grid-row: 2;
}

/* Spans the eyebrow's row and the title's, centred against them — so the lead
   sits on the optical middle of the lockup whether the title runs to one line
   or three, and whether or not the page supplies an eyebrow (row 1 is `auto`,
   so it collapses to nothing when empty). Ending at 3 rather than -1 leaves
   row 3 free for the optional extra slot. */
.support-head--split .support-head__lead {
    grid-column: 2;
    grid-row: 1 / 3;
    /* align-self: center; */
}

.support-head--split .support-head__extra {
    grid-column: 2;
    grid-row: 3;
}

/* ---- Type: the shared hero scale (page-hero.css / .service-hero__*) ---- */

.support-head--split .support-head__eyebrow {
    margin: 0 0 0.85rem;
    color: rgba(255, 255, 255, 0.88);
    font-size: clamp(0.95rem, 0.75rem + 0.5vw, 1.2rem);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

/* The service hero's ramp, matching every other header on the site. The base
   .support-head__title is uppercase; these are sentence case like the photo
   heroes. */
.support-head--split .support-head__title {
    position: relative;
    margin: 0;
    padding-bottom: clamp(0.9rem, 1.35vw, 1.15rem);

    color: var(--theme-text-strong, #ffffff);
    font-size: clamp(3rem, 5.5vw, 6rem);
    font-weight: 300;
    line-height: 1.02;
    letter-spacing: -0.052em;
    text-transform: none;
    text-wrap: balance;
}

/* Left-anchored red rule — .support-head__title::after centers itself with a
   translateX, so both the offset and the transform have to be undone. */
.support-head--split .support-head__title::after {
    left: 0;
    transform: none;
    width: clamp(6rem, 10vw, 9rem);
    height: 0.24rem;
    box-shadow: 0 10px 24px var(--theme-accent-box-24, rgba(170, 0, 0, 0.24));
}

.support-head--split .support-head__lead {
    margin: 0;
    max-width: 46ch;

    color: #d2d4da;
    font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.35rem);
    font-weight: 300;
    line-height: 1.6;
    letter-spacing: 0.01em;
    text-wrap: pretty;
}

.support-head--split .support-head__extra {
    margin-top: 1.15rem;
    max-width: 46ch;
}

.support-head--split .support-head__extra > * {
    margin: 0 0 0.9rem;
    color: var(--theme-text-muted, #c4c6cc);
    font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem);
    font-weight: 300;
    line-height: 1.6;
    letter-spacing: 0.01em;
}

.support-head--split .support-head__extra > *:last-child {
    margin-bottom: 0;
}

/* ── Gutter tracks footer.css step for step, same as the photo heroes ── */
@media only screen and (min-width: 1600px) {
    .support-head.support-head--split {
        padding-left: max(9rem, calc(50vw - 800px));
        padding-right: max(9rem, calc(50vw - 800px));
    }
}

@media only screen and (max-width: 1200px) {
    .support-head.support-head--split {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

@media only screen and (max-width: 700px) {
    .support-head.support-head--split {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }
}

/* ---- Single column. Below this the two columns would each be too narrow to
   hold the title's measure, so the lockup stacks and the lead drops under the
   rule — the same order it reads in the markup. ---- */
@media (max-width: 900px) {
    .support-head.support-head--split {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 0;
    }

    .support-head--split .support-head__eyebrow,
    .support-head--split .support-head__title,
    .support-head--split .support-head__lead,
    .support-head--split .support-head__extra {
        grid-column: 1;
        grid-row: auto;
    }

    .support-head--split .support-head__lead {
        margin-top: 1.1rem;
    }
}

/* ── Title steps: .service-hero__title's own breakpoints, as everywhere else ── */
@media (max-width: 820px) {
    .support-head--split .support-head__title {
        font-size: clamp(2.25rem, 7.8vw, 3.7rem);
        line-height: 1.04;
        letter-spacing: -0.044em;
    }
}

@media (max-width: 640px) {
    .support-head--split .support-head__title {
        font-size: clamp(2rem, 8.8vw, 3rem);
        line-height: 1.06;
        letter-spacing: -0.038em;
    }

    .support-head--split .support-head__title::after {
        width: 6.5rem;
        height: 0.2rem;
    }

    .support-head--split .support-head__eyebrow {
        letter-spacing: 0.14em;
    }
}

@media (max-width: 420px) {
    .support-head--split .support-head__title {
        font-size: clamp(1.85rem, 9.6vw, 2.45rem);
        line-height: 1.08;
        letter-spacing: -0.032em;
    }
}