/* ============================================================================
   cost-snapshot.css
   ----------------------------------------------------------------------------
   Styles for the "Cost Snapshot" row (costSnapshot.vm) -- reproduces
   costSnapshot.png: kicker + headline above a two-column band, a tinted
   stat card beside a stack of link 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. Spacing, radius and type-scale values that only exist as --ds-*
   tokens are inlined here as literal values instead (same approach
   step-path.css takes for its own bespoke sizing).

   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 tinted stat card, and the link-card
   stack.

   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. That global ring is a fixed
   high-contrast color proven to work against every background on the site;
   a component-level override drawn from --primary-template would inherit
   this component's own contrast risk (see accessibility audit) since the
   CTA button's focus ring would sit on the same-hue tinted stat-card
   background. Do not add a `:focus-visible` rule to
   .cost-snapshot__cta-button or .cost-snapshot__card h3 a without
   re-verifying contrast against every themed background it can appear on.
   ============================================================================ */

.cost-snapshot-row,
.cost-snapshot-row * {
    box-sizing: border-box;
}

.cost-snapshot-row {
    --cost-snapshot-primary: var(--primary-template);
    --cost-snapshot-primary-dark: color-mix(in srgb, var(--primary-template) 80%, black);
    --cost-snapshot-secondary: var(--secondary-template);
    --cost-snapshot-surface: var(--body-bg-template);
    --cost-snapshot-on-primary: #FFFFFF;
    --cost-snapshot-on-surface-muted: #636363;
    --cost-snapshot-border: #E2E8F0;
    font-family: var(--primary-font-template), var(--primary-font-style);
}

/* ── Intro: kicker chip + heading ── */
.cost-snapshot-row .cost-snapshot__kicker {
    display: inline-block;
    background-color: var(--cost-snapshot-secondary);
    color: var(--cost-snapshot-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);
}

.cost-snapshot-row .cost-snapshot__heading {
    margin: 24px 0 48px;
    font-family: var(--secondary-font-template), var(--secondary-font-style);
    font-weight: 700;
    font-size: 44px;
    line-height: 1.4;
    color: var(--cost-snapshot-primary);
    max-width: 900px;
}

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

/* ── Two-column grid: tinted stat card + fluid card stack ── */
.cost-snapshot-row .cost-snapshot__grid {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    gap: 56px;
    align-items: start;
}

/* ── Stat card ── */
.cost-snapshot-row .cost-snapshot__stat {
    background-color: color-mix(in srgb, var(--cost-snapshot-primary) 8%, white);
    border-radius: 8px;
    padding: 40px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .3);
    min-height: 300px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.cost-snapshot-row .cost-snapshot__stat-value {
    margin: 0 0 8px;
    font-weight: 800;
    font-size: 3.4rem;
    line-height: 1;
    color: var(--cost-snapshot-primary);
    font-family: var(--secondary-font-template), var(--secondary-font-style);

}

.cost-snapshot-row .cost-snapshot__stat-caption {
    margin: 0 0 32px;
    font-size: 18px;
    line-height: 1.85;
    color: var(--cost-snapshot-on-surface-muted);
}

.cost-snapshot-row .cost-snapshot__cta-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: var(--cost-snapshot-surface);
    color: var(--cost-snapshot-secondary);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    border: 2px solid var(--cost-snapshot-secondary);
    border-radius: 4px;
    padding: 16px 24px;
    transition: background-color 150ms ease, color 150ms ease;
}
.cost-snapshot-row .cost-snapshot__cta-button::after {
    content: "\2192";
}
.cost-snapshot-row .cost-snapshot__cta-button:hover {
    background-color: var(--cost-snapshot-secondary);
    color: var(--cost-snapshot-on-primary);
    text-decoration: none;
}

/* ── Link card stack ── */
.cost-snapshot-row .cost-snapshot__cards {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cost-snapshot-row .cost-snapshot__card {
    background-color: var(--cost-snapshot-surface);
    border: 1px solid var(--cost-snapshot-border);
    border-radius: 4px;
    padding: 24px 32px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .3);
}

.cost-snapshot-row .cost-snapshot__card h3 {
    margin: 0 0 8px;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.35;
}
.cost-snapshot-row .cost-snapshot__card h3 a {
    color: var(--cost-snapshot-primary);
    text-decoration: underline;
}
.cost-snapshot-row .cost-snapshot__card h3 a:hover {
    color: var(--cost-snapshot-primary-dark);
}

.cost-snapshot-row .cost-snapshot__card p {
    margin: 0;
    font-size: 18px;
    line-height: 1.85;
    color: var(--cost-snapshot-on-surface-muted);
}

@media (max-width: 860px) {
    .cost-snapshot-row .cost-snapshot__grid {
        grid-template-columns: 1fr;
    }
    .cost-snapshot-row .cost-snapshot__heading {
        font-size: var(--ds-headline-size);
    }
}