/*
|--------------------------------------------------------------------------
| Home page — "Why Choosing the Right Van Builder Matters"
|--------------------------------------------------------------------------
| The editorial lead-in to the credentials band (home-credentials.css) that
| follows it. Replaces the legacy `.ex3-w.vccompanies` treatment, which was a
| single full-measure column of 1.4em / 2.2rem prose under the global
| uppercase h2 — the last piece of the old type system left on this stretch
| of the page.
|
| Two things it now does that the rest of the page already did:
|
| 1. Container metrics from footer.css (footer.footer padding + .footer-max),
|    the same system home-contact.css and home-credentials.css use. This band,
|    the credentials cards and the contact band therefore share one column all
|    the way down to the footer. Note this is WIDER than the .ex3-w / 80vw
|    system the two video sections use, so the page steps out to full width
|    here on purpose.
| 2. Type from the newer home layer (.hc__title / .hc__lead in
|    home-contact.css) instead of the legacy uppercase h2 — sentence case,
|    light weight, muted body, capped measure.
|
| Split title-left / body-right so the heading is not a full-width banner
| over a full-width paragraph; it gives the run of sections some rhythm
| between the two video blocks that bracket it.
|
| The sitewide `* {}` reset in m072224.css forces a colour onto every element
| and h2 carries a global colour of its own, so every text rule below
| restates its own size / weight / colour / tracking.
*/

/* Side padding + inner cap mirror footer.css exactly (footer.footer padding +
   .footer-max), including the three steps at the bottom of this file — the
   same system home-contact.css uses for the band above the footer. */
/* 1.75rem block padding — the shared vertical rhythm for this run of sections;
   the video blocks (.inline-video .ex3-w) and .creds carry the same, so every
   gap between them measures the same 56px. */
.vcb {
    padding: 1.75rem 6rem;
}

/* Stacked, not side by side. Title beside copy meant a one-line left column
   sitting next to a seven-line right one, which left a ~750x125px hole under
   the heading — the two columns can only balance if the heading happens to be
   as tall as the paragraph, and a one-line heading never is.

   Full-width heading with the copy beneath solves it: the heading keeps its
   single line (with far more room for it than the old column had), and the
   paragraph fills the width in two text columns instead of running to one
   ragged edge. */
.vcb__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1.25rem, 2vw, 1.75rem);

    max-width: 1600px;
    width: 100%;
    margin: 0 auto;
}

/* The only red in the block: the band paints no card, so the rule is what
   keeps it from reading as loose body copy floating between two heavier
   sections. */
.vcb__title {
    position: relative;
    margin: 0;
    padding-bottom: clamp(0.9rem, 1.35vw, 1.15rem);

    color: #ffffff;
    font-size: clamp(1.7rem, 2.7vw, 2.4rem);
    font-weight: 300;
    line-height: 1.15;
    letter-spacing: -0.005em;
    text-transform: none;
    text-wrap: balance;
}

/* Same accent rule as the service page hero (.service-hero__title::after in
   header-hero.css) — geometry, gradient fade and glow all copied, and it sits
   under the heading as it does there, not above it.

   The theme variables resolve because theme-dark.css is loaded sitewide from
   head.php, not by header-hero.css; header-hero.css only aliases them
   (--hero-accent: var(--theme-accent)). Literal fallbacks are there so this
   band degrades to the right red rather than to nothing if that ever moves. */
.vcb__title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;

    width: clamp(6rem, 10vw, 9rem);
    height: 0.24rem;

    border-radius: var(--theme-radius-pill, 999px);

    background: linear-gradient(90deg,
            var(--theme-accent, #aa0000) 0%,
            var(--theme-accent-deep, #8f0000) 58%,
            transparent 100%);

    box-shadow: 0 10px 24px var(--theme-accent-box-24, rgba(170, 0, 0, 0.24));
}

/* Two text columns rather than one full-bleed line length: at footer width a
   single column would run to ~150 characters, well past a readable measure,
   and capping it instead would just move the empty space to the right. The
   browser balances the two, so the block ends level. */
.vcb__lead {
    margin: 0;
    max-width: none;

    columns: 2;
    column-gap: clamp(2rem, 4vw, 4rem);

    color: #c4c6cc;
    font-size: clamp(1rem, 1.05vw, 1.15rem);
    font-weight: 300;
    line-height: 1.7;
    letter-spacing: 0.01em;
    text-wrap: pretty;
}

/* One line from 1000px up. Deliberately NOT unconditional: the font floors at
   1.7rem, so on a phone the unwrapped heading is ~555px against a ~360px
   column and would overflow the section. Below this it wraps normally, where
   the block is a single stacked column anyway. */
@media only screen and (min-width: 1000px) {
    .vcb__title {
        white-space: nowrap;
    }
}

/* ── Side padding tracks footer.css step for step ── */
@media only screen and (min-width: 1600px) {
    .vcb {
        padding-right: 9rem;
        padding-left: 9rem;
    }
}

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

/* Back to one text column below the width where the heading stops holding a
   single line. Two columns of ~40 characters would read as a newspaper
   clipping, and the balanced-column height saving is worth nothing once the
   block is this narrow. */
@media only screen and (max-width: 1000px) {
    .vcb__lead {
        columns: 1;
    }
}

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

/* Matches the service hero's own step for this rule (header-hero.css, 640px),
   so the two stay identical at small widths as well. */
@media only screen and (max-width: 640px) {
    .vcb__title::after {
        width: 6.5rem;
        height: 0.2rem;
    }
}