/* =================================================================== TIMELINE section css =================================================================== */
/* Light vertical timeline: centre line, numbered dots, cards alternating
   left and right. Collapses to a left-hand line on mobile. */
.timeline {
    --notch-space: 75px;   /* badge + notch padding */

    & .timeline__list {
        position: relative;
        max-width: 1040px;
        margin-inline: auto;
        list-style: none;

        &::before {
            position: absolute; inset-block: 0; left: 50%;
            width: 1px;
            background: var(--line);
            content: '';
        }
    }

    & .timeline__item {
        position: relative;
        width: 50%;
        padding-right: var(--sp60);

        & + .timeline__item { margin-top: var(--sp30); }

        &:nth-child(even) {
            margin-left: 50%;
            padding-right: 0;
            padding-left: var(--sp60);
        }
        &:hover .timeline__dot { transform: scale(1.4); }
        &:hover .timeline__card { box-shadow: var(--shadow-lg); }
        &:hover .notch-badge { background: var(--primary); color: var(--white); }
    }

    /* small marker on the centre line; the step number sits in the card notch */
    & .timeline__dot {
        position: absolute; top: var(--sp40); right: -10px;
        z-index: 1;
        width: 20px; height: 20px;
        background: var(--primary);
        border: 4px solid var(--surface-light);
        border-radius: var(--r-full);
        transition: var(--transition);
    }

    & .timeline__item:nth-child(even) .timeline__dot { right: auto; left: -10px; }

    & .timeline__card {
        position: relative;
        padding: var(--sp35) var(--sp35) var(--sp30);
        background: var(--white);
        border-radius: var(--r-lg);
        transition: var(--transition);
    }

    & .timeline__notch .notch-badge { width: 55px; height: 55px; }

    /* keep copy clear of the top-right notch */
    & .timeline__card p { padding-right: var(--notch-space); }

    & .timeline__title {
        margin-bottom: var(--sp8);
        padding-right: var(--notch-space);
        font-size: var(--f25);
    }
}

/* =================================================================== TIMELINE responsive =================================================================== */
@media (max-width: 767.98px) {
    .timeline {
        & .timeline__list::before { left: 10px; }
        & .timeline__item,
        & .timeline__item:nth-child(even) { width: 100%; margin-left: 0; padding-right: 0; padding-left: var(--sp40); }
        & .timeline__dot,
        & .timeline__item:nth-child(even) .timeline__dot { right: auto; left: 0; }
        --notch-space: 64px;

        & .timeline__card { padding: var(--sp25) var(--sp20); }
        & .timeline__notch .notch-badge { width: 48px; height: 48px; }
    }
}