/* ============================================================================
   step-path.css
   ----------------------------------------------------------------------------
   Styles for the "Step Path" row (stepPath.vm) -- reproduces
   step-path-directions.html exactly: sticky intro column beside a numbered
   step list, joined by circled numbers and a connecting rule.
 
   This is NOT a VCCS System Office design-system component -- it does not
   use --ds-* tokens or the rowWhite/rowPrimary/rowAccent band system in
   design-language.css. It reuses ONLY the site's live per-site theme
   variables (--primary-template / --secondary-template / --accent-template),
   the same mechanism every other format on this site already resolves
   through (see design-language.css's own header), mapped per instruction to
   the mockup's palette:
     --primary-template   -> the green band       (#2E9B3F in the mockup)
     --secondary-template -> the black chip/button (#12140F in the mockup)
     --accent-template     -> the lime link color (#C8D82D in the mockup)
   The pale mint body-copy color (#DDF0D6) isn't a brand role on its own --
   it's a light tint of primary, so it's derived with color-mix() instead of
   a second hardcoded hex, same pattern design-language.css uses for its own
   hover-wash tokens. White and the translucent connector rule are fixed
   contrast constants (not brand-dependent), same reasoning
   design-language.css uses for --ds-on-hero.

   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 or design-language.css: the two-column sticky grid, the
   circled step numbers + connector rule, and the Outfit/Archivo type
   treatment specific to this one mockup.

   Fonts: Outfit + Archivo aren't loaded anywhere else on the site (it runs
   on --primary-font-template / --secondary-font-template, delivered
   per-site via Global Setup). A row format can't add <link> tags to
   <head>, so @import is the only mechanism available at this level -- kept
   to a single @import, first rule in the file as required.
   ============================================================================ */

.step-path-row,
.step-path-row * {
    box-sizing: border-box;
}

.step-path-row {
    --step-path-primary: var(--primary-template);
    --step-path-secondary: var(--secondary-template);
    --step-path-accent: var(--accent-template);
    --step-path-on-primary: #FFFFFF;
    --step-path-on-primary-muted: color-mix(in srgb, var(--primary-template) 20%, white);
    --step-path-rule: rgba(0, 0, 0, 0.35);
    --split-path-panel-bg: #fff;
}

.step-path-row a {
    color: var(--step-path-accent);
    text-decoration: none;
}
.step-path-row a:hover {
    color: var(--step-path-on-primary);
    text-decoration: underline;
}

/* ── Two-column grid: 420px sticky intro + fluid step list ── */
.step-path-row .step-path {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(320px,1.2fr);
    gap: 72px;
}

/* ── Intro column ── */
.step-path-row .step-path__intro {
    position: sticky;
    top: 0;
    align-self: start;
}
.step-path-row .step-path__kicker {
    display: inline-block;
    background: var(--step-path-secondary);
    color: var(--step-path-on-primary);
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 0.18em;
    padding: 8px 14px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .3);
    text-transform: uppercase;
}
.step-path-row .step-path__heading {
    margin: 26px 0 20px;
    font-weight: 800;
    font-size: var(--ds-headline-size);
    line-height: 0.98;
    color: var(--step-path-on-primary);
}
.step-path-row .step-path__heading::after {
    content: "";
    display: block;
    width: 56px;
    height: 4px;
    background: var(--accent-template);
    border-radius: 2px;
    margin-top: 16px;
    margin-bottom: 28px;
}
.step-path-row .step-path__lead {
    margin: 0 0 30px;
    font-size: 18px;
    line-height: 1.3;
    color: var(--step-path-on-primary);
}
.step-path-row .step-path__cta-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--step-path-secondary);
    color: var(--step-path-on-primary);
    font-weight: 800;
    font-size: 17px;
    padding: 16px 26px;
    border-radius: 8px;
}
.step-path-row .step-path__cta-button:hover {
    color: var(--step-path-on-primary);
    text-decoration: none;
    background: #000000;
}

/* ── Step list ── */
.step-path-row .step-path__steps {
    counter-reset: step-path-step;
    list-style: none;
    margin: 0;
    padding: 0;
}
.step-path-row .step-path__steps li {
    counter-increment: step-path-step;
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    column-gap: 26px;
}
.step-path-row .step-path__num-col {
    grid-column: 1;
    grid-row: 1 / span 3;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.step-path-row .step-path__num {
    width: 52px;
    height: 52px;
    border-radius: 999px;
    background: var(--step-path-secondary);
    color: var(--step-path-on-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .3);
}
.step-path-row .step-path__num::before {
    content: counter(step-path-step);
}
.step-path-row .step-path__rule {
    flex: 1;
    width: 3px;
    background: var(--step-path-rule);
    margin-top: 8px;
}
.step-path-row .step-path__steps li:last-child .step-path__rule {
    display: none;
}
.step-path-row .step-path__steps li h3 {
    grid-column: 2;
    font-weight: 800;
    font-size: 26px;
    color: var(--step-path-primary);
    margin: 6px 0 8px;
}
.step-path-row .step-path__steps li p {
    grid-column: 2;
    font-size: 1.1667rem;
    line-height: 1.55;
    color: #000;
    max-width: 620px;
    margin: 0 0 14px;
}
.step-path-row .step-path__steps li p:last-child {
    margin-bottom: 34px;
}
.step-path-row .step-path__steps li:last-child p:last-child {
    margin-bottom: 6px;
}
.step-path-row .step-path__step-cta {
    display: inline-block;
    font-weight: 700;
    font-size: 1.1667rem;
    color: var(--step-path-primary) !important;
    border-bottom: 2px solid var(--step-path-accent);
    padding-bottom: 2px;
    text-decoration: none !important;
}
.step-path-row .step-path__step-cta:hover {
    color: var(--step-path-on-primary);
    border-bottom-color: var(--step-path-on-primary);
    text-decoration: none;
}

@media (max-width: 860px) {
    .step-path-row .step-path {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .step-path-row .step-path__intro {
        position: static;
    }
    .step-path-row .step-path__heading {
        font-size: 40px;
    }
}
.step-path-row .step-path-panel {
    background-color: var(--split-path-panel-bg);
    border-radius: 24px;
    padding: 32px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .3);
}