/* =================================================================== STEPS section css =================================================================== */
/* Numbered process on a dark inset panel. Each step is a card with its number
   in a top-right notch badge. 4 per row by default; .steps--3 for 3, 5 or 6
   steps. A short last row is centred. */
.steps {
    --cols: 4;
    --notch-space: 75px;   /* badge + notch padding */

    &.steps--3 { --cols: 3; }

    & .steps__panel {
        position: relative;
        padding: var(--sp100) var(--sp60);
        background: var(--ink);
        border-radius: var(--r-xl);
        overflow: hidden;

        &::before {
            /* glow sits behind the title so it never shows through the card notches */
            position: absolute; top: 0; left: 50%;
            width: 60%; aspect-ratio: 1;
            background: radial-gradient(circle, var(--primary) 0%, transparent 65%);
            opacity: .18;
            content: '';
            transform: translate(-50%, -70%);
        }
    }

    & .steps__grid {
        position: relative;
        display: flex; flex-wrap: wrap; justify-content: center;
        gap: var(--g30);
        list-style: none;
    }

    & .steps__item {
        position: relative;
        flex: 0 0 calc((100% - var(--g30) * (var(--cols) - 1)) / var(--cols));
        padding: var(--sp40) var(--sp30) var(--sp35);
        background: var(--glass);
        border-radius: var(--r-lg);
        transition: var(--transition);

        &:hover { background: var(--white); transform: translateY(-6px); }
        &:hover .steps__title { color: var(--ink); }
        &:hover .steps__text { color: var(--body-text); }
        &:hover .notch-badge { background: var(--primary); color: var(--white); }
    }

    & .steps__notch {
        --notch-bg: var(--ink);

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

    & .steps__title {
        margin-bottom: var(--sp12);
        padding-right: var(--notch-space);
        font-size: var(--f25);
        color: var(--white);
        transition: var(--transition);
    }

    & .steps__text {
        padding-right: var(--notch-space);
        color: var(--white-muted);
        transition: var(--transition);
    }

    & .steps__note {
        position: relative;
        max-width: 760px;
        margin: var(--sp50) auto 0;
        text-align: center;
        color: var(--white-muted);
    }
}

/* =================================================================== STEPS responsive =================================================================== */
@media (max-width: 1199.98px) {
    .steps {
        --cols: 3;

        & .steps__panel { padding: var(--sp80) var(--sp40); }
    }
}

@media (max-width: 991.98px) {
    .steps {
        --cols: 2;

        &.steps--3 { --cols: 2; }
    }
}

@media (max-width: 575.98px) {
    .steps {
        --cols: 1;

        &.steps--3 { --cols: 1; }
        --notch-space: 64px;
        & .steps__notch .notch-badge { width: 48px; height: 48px; }
        & .steps__panel { padding: var(--sp60) var(--sp20); border-radius: var(--r-lg); }
    }
}