/* ============================================================================
   split-grid.css
   ----------------------------------------------------------------------------
   Styles for the "Split Grid" row (splitGrid.vm) -- reproduces
   Screenshot 2026-09-20 at 12.51.29 AM.png: a sticky-feeling intro column
   (kicker, heading, lead, CTA button) beside a dark rounded panel holding a
   2x2 grid of white stat cards.

   Self-contained: does NOT require design-langauge.css to be loaded. Colors
   and fonts theme directly off this site's own live template variables --
   --primary-template / --secondary-template / --body-bg-template and
   --primary-font-template / --primary-font-style / --secondary-font-template
   / --secondary-font-style -- which style.css/css.vm emit on every page
   regardless of whether design-langauge.css's --ds-* wrapper tokens are
   present, the same approach cost-snapshot.css takes.

   Everything structural -- .container, .row, .col-md-12, .section-padding,
   the row's $!{rowSpace}/${BGcolor} classes -- comes from the site's
   existing stylesheets/format conventions and is intentionally NOT
   duplicated here. This file only adds what doesn't exist anywhere in
   style.css: the two-column grid, the dark stat panel, and the stat cards.

   Section order: the Data Definition's "layout" field lets an editor swap
   which side the intro and the panel render on without changing the
   underlying markup order (see splitGrid.vm) -- .split-grid--reverse below
   flips the two sections with `order` only, so source/tab order stays the
   same as visual order matters only for sighted layout, not for how a
   screen reader or keyboard user encounters the content.

   Focus indicator: intentionally left to the site's global
   *:focus-visible { outline: 3px solid #ff9900; outline-offset: 3px; }
   rule (style.css) rather than overridden here, same rationale as
   cost-snapshot.css -- a component-level ring drawn from --primary-template
   would inherit this component's own contrast risk against the dark panel
   background. Do not add a `:focus-visible` rule to
   .split-grid__cta-button without re-verifying contrast first.
   ============================================================================ */

.split-grid-row,
.split-grid-row * {
    box-sizing: border-box;
}

.split-grid-row {
    --split-grid-primary: var(--primary-template);
    --split-grid-primary-dark: color-mix(in srgb, var(--primary-template) 80%, black);
    --split-grid-secondary: var(--secondary-template);
    --split-grid-surface: var(--body-bg-template);
    --split-grid-on-primary: #FFFFFF;
    --split-grid-on-surface-muted: #3A3A3A;
    --split-grid-panel-bg: var(--primary-template);
    font-family: var(--primary-font-template), var(--primary-font-style);
}

/* ── Two-column grid: intro column beside the stat panel ── */
.split-grid-row .split-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 64px;
    align-items: center;
}

/* Section order toggle -- see "Section order" note above. */
.split-grid-row.split-grid--reverse .split-grid__intro {
    order: 2;
}
.split-grid-row.split-grid--reverse .split-grid__panel {
    order: 1;
}

/* ── Intro: kicker chip, heading, lead, CTA ── */
.split-grid-row .split-grid__kicker {
    display: inline-block;
    background-color: var(--split-grid-secondary);
    color: var(--split-grid-on-primary);
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 8px 16px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .3);
}

.split-grid-row .split-grid__heading {
    margin: 22px 0 20px;
    font-family: var(--secondary-font-template), var(--secondary-font-style);
    font-weight: 700;
    font-size: 44px;
    line-height: 1.1;
    color: var(--split-grid-primary);
    max-width: 480px;
}

.split-grid-row .split-grid__heading::after {
    content: "";
    display: block;
    width: 56px;
    height: 4px;
    background: var(--accent-template);
    border-radius: 2px;
    margin-top: 16px;
    margin-bottom: 28px;
}

.split-grid-row .split-grid__lead {
    margin: 0 0 28px;
    font-size: 18px
    line-height: 1.6;
    color: var(--split-grid-on-surface-muted);
    max-width: 460px;
}

.split-grid-row .split-grid__cta-button {
    display: inline-block;
    background-color: var(--split-grid-primary);
    color: var(--split-grid-on-primary);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    border-radius: 999px;
    padding: 16px 28px;
    transition: background-color 150ms ease;
}
.split-grid-row .split-grid__cta-button:hover {
    background-color: var(--split-grid-primary-dark);
    color: var(--split-grid-on-primary);
    text-decoration: none;
}

/* ── Panel: dark rounded band holding the stat grid ── */
.split-grid-row .split-grid__panel {
    background-color: var(--split-grid-panel-bg);
    border-radius: 24px;
    padding: 32px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .3);
}

.split-grid-row .split-grid__stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.split-grid-row .split-grid__stat {
    background-color: var(--split-grid-surface);
    border-radius: 12px;
    padding: 28px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .3);
}

.split-grid-row .split-grid__stat-value {
    margin: 0 0 10px;
    font-family: var(--secondary-font-template), var(--secondary-font-style);
    font-weight: 700;
    font-size: 2.1rem;
    line-height: 1;
    color: var(--split-grid-primary);
}

.split-grid-row .split-grid__stat-caption {
    margin: 0;
    font-size: 15px;
    line-height: 1.45;
    color: var(--split-grid-on-surface-muted);
}

@media (max-width: 860px) {
    .split-grid-row .split-grid,
    .split-grid-row.split-grid--reverse .split-grid__intro,
    .split-grid-row.split-grid--reverse .split-grid__panel {
        grid-template-columns: 1fr;
        order: initial;
    }
    .split-grid-row .split-grid__heading {
        font-size: var(--ds-headline-size);
    }
    .split-grid-row .split-grid__stats {
        grid-template-columns: 1fr;
    }
}