/* ============================================
   SECTION: Family Journey
   4 numbered onboarding steps with arrows between
   each badge. Matched to Figma: heading-only header
   (no lede), step gap 32, title weight 400, arrow
   stroke #4F2A33 @ 1.5px, green check centred on
   badge top-right corner.
   ============================================ */

.family-journey {
    /* cap content at 1240 (gutter sits OUTSIDE the cap), aligning with hero/navbar */
    max-width: calc(var(--container-max) + 2 * var(--section-side-padding));
    margin-inline: auto;
    padding: 100px var(--section-side-padding);
    background: var(--color-white);
}

/* Journey page only (#journey-steps) — tighter top padding, without
   affecting the home page's Family Journey which shares these styles. */
#journey-steps {
    padding-top: 20px;
}

.family-journey__header {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 424px;
    margin-bottom: 95px;
}

.family-journey__heading-group {
    flex: 0 1 550px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.family-journey__heading {
    font-family: var(--font-display);
    font-size: 42px;
    font-weight: var(--font-weight-medium);
    line-height: 50px;
    letter-spacing: -1.26px;
    color: var(--color-text-heading);
    margin: 0;
}

/* Optional supporting line under the heading (used on the Journey page) */
.family-journey__lede {
    max-width: 400px;
    font-size: 16px;
    line-height: 26px;
    color: var(--color-text-body);
    margin: 0;
}

/* Home: title left, lede right (same pattern Centers used) */
.family-journey__header--aside {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
    max-width: none;
}

/* Same rules the home Centers lede used before this copy moved here */
.family-journey__header--aside .family-journey__lede {
    flex: 0 1 400px;
    margin-top: 46px;
    font-size: 16px;
    line-height: 26px;
    color: var(--color-text-body);
    max-width: none;
}

.family-journey__steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-2xl);
    list-style: none;
    padding: 0;
    margin: 0 0 60px;
}

.journey-step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 32px;                       /* badge → text gap, per Figma */
    max-width: 295px;
    margin: 0 auto;
}

.journey-step__badge {
    width: 52px;
    height: 52px;
    padding-top: 18px;               /* optical centering — Borel digits look off without this */
    background-color: var(--color-primary-light);
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-accent);
    font-size: 32px;
    color: var(--color-primary);
    letter-spacing: -0.96px;
}

.journey-step__connector {
    position: absolute;
    top: 0px;
    left: calc(50% + 30px);
    width: 100%;
    height: 24px;                    /* matches the steps-arrow.png asset height */
    pointer-events: none;
    background: url("../../../images/decorative/steps-arrow.fdc68d27b464.png") no-repeat center center / contain;
}

.journey-step--last .journey-step__badge {
    position: relative;
}

.journey-step--last .journey-step__badge::after {
    content: '';
    position: absolute;
    top: -13px;
    right: -13px;
    width: 25px;
    height: 25px;
    background: #50d982;             /* Figma green */
    border-radius: 50%;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><path d='M3 8l3 3 7-7' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>");
    background-position: center;
    background-repeat: no-repeat;
}

.journey-step__title {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: var(--font-weight-normal);   /* 400, per Figma */
    line-height: 28px;
    letter-spacing: -0.36px;
    color: #2c2626;
    margin: 0;
}

.journey-step__description {
    font-size: 14px;
    line-height: 20px;
    color: var(--color-text-body);
    margin: 0;
}

.family-journey__cta {
    display: flex;
    justify-content: center;
}

/* ----- Scroll-position bars (phones only) ----- */
.family-journey__bars {
    display: none;
    gap: 7px;
    margin-bottom: 60px;
}

.family-journey__bar {
    flex: 1 1 0;
    height: 4px;
    border-radius: 100px;
    background: var(--color-primary-light);
    transition: background-color var(--transition-fast);
}

.family-journey__bar.is-active {
    background: var(--color-primary);
}

.family-journey__empty {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--color-text-body);
}

@media (max-width: 1024px) {
    .family-journey__steps {
        grid-template-columns: repeat(2, 1fr);
    }
    .journey-step__connector {
        display: none;
    }
    .family-journey__header--aside {
        flex-direction: column;
        gap: 24px;
    }
    .family-journey__heading-group,
    .family-journey__header--aside .family-journey__lede {
        flex: 0 1 auto;
    }
    .family-journey__header--aside .family-journey__lede {
        margin-top: 0;
    }
}

@media (max-width: 768px) {
    .family-journey {
        padding: 60px var(--section-side-padding);
    }
    .family-journey__header {
        margin-bottom: 48px;
        max-width: none;
    }
    .family-journey__heading {
        font-size: 32px;
        line-height: 38px;
    }
    .family-journey__steps {
        grid-template-columns: 1fr;
    }
}

/* ----- Phones: the steps become a snapping horizontal scroller -----
   Scoped to the --scroll modifier so the Journey page, which reuses these
   classes, keeps its stacked layout. */
@media (max-width: 600px) {
    .family-journey__steps--scroll {
        display: flex;
        gap: 32px;
        padding-top: 13px;
        margin-bottom: 32px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        /* bleed to the section edges so the next step peeks in; scroll-padding
           insets the snapport to match, otherwise the snap point cancels the
           padding and the first step sits flush against the viewport edge */
        margin-inline: calc(-1 * var(--section-side-padding));
        padding-inline: var(--section-side-padding);
        scroll-padding-inline: var(--section-side-padding);
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .family-journey__steps--scroll::-webkit-scrollbar {
        display: none;
    }

    /* Steps read left-aligned on phones, not centred as on desktop. The
       uniform 32px step gap is split here so the description sits tight
       under its title while the badge keeps its breathing room. */
    .family-journey__steps--scroll .journey-step {
        flex: 0 0 284px;
        max-width: none;
        margin: 0;
        gap: 12px;
        align-items: flex-start;
        text-align: left;
        scroll-snap-align: start;
    }

    .family-journey__steps--scroll .journey-step__title {
        margin-top: 28px;
    }

    .family-journey__bars {
        display: flex;
    }

    /* CTA runs the full width of the card column */
    .family-journey__cta .btn {
        width: 100%;
    }
}