/**
 * Steps on Scroll — click-mode patch styles
 *
 * Loaded AFTER steps-on-scroll.min.css. The existing bundled CSS already
 * styles data-state, --glow-center, --hex-bg, etc.; this file adds only the
 * pieces the bundle doesn't know about yet: the --click-mode modifier (no
 * inflated wrapper / pinned container; sticky left image column only),
 * hover/focus, and card transitions used by steps-on-scroll-click.js.
 */

/* ── Defeat the scroll-pinned wrapper height ─────────────────────────── */
.acf-block-steps-on-scroll--click-mode .acf-block-steps-on-scroll__wrapper {
    height: auto !important;
}

@media (min-width: 992px) {
    /* Flow normally (no inflated wrapper / pinned container). Only the image
     * column sticks while the right-hand steps scroll with the page. */
    .acf-block-steps-on-scroll--click-mode .acf-block-steps-on-scroll__container {
        position: static !important;
        top: auto !important;
        height: auto !important;
        align-items: flex-start !important;
    }

    .acf-block-steps-on-scroll--click-mode .acf-block-steps-on-scroll__left {
        position: sticky !important;
        top: 6.4375rem !important;
        height: calc(100vh - 6.4375rem) !important;
        align-self: flex-start !important;
    }

    .acf-block-steps-on-scroll--click-mode .acf-block-steps-on-scroll__right {
        height: auto !important;
    }

    .acf-block-steps-on-scroll--click-mode .acf-block-steps-on-scroll__content {
        padding-top: 2.625rem !important;
        transform: none !important;
    }

    /* Clickable steps ─────────────────────────────────────────────────── */
    .acf-block-steps-on-scroll--click-mode .acf-block-steps-on-scroll__step {
        cursor: pointer;
        user-select: none;
        transition: color 0.3s ease;
    }

    .acf-block-steps-on-scroll--click-mode
        .acf-block-steps-on-scroll__step:hover:not([data-state="active"])
        .acf-block-steps-on-scroll__step-content {
        color: var(--color-white);
    }

    .acf-block-steps-on-scroll--click-mode
        .acf-block-steps-on-scroll__step:hover:not([data-state="active"])
        .acf-block-steps-on-scroll__hex::before {
        background-color: var(--color-light-grey);
    }

    .acf-block-steps-on-scroll--click-mode .acf-block-steps-on-scroll__step:focus-visible {
        outline: 0.125rem solid var(--color-blue);
        outline-offset: -0.25rem;
    }
}

@media (max-width: 991.98px) {
    .acf-block-steps-on-scroll--click-mode .acf-block-steps-on-scroll__step {
        cursor: default;
    }
}

/* Step text stays white on mobile (no dark → white scroll transition) */
@media (max-width: 991.98px) {
    .acf-block-steps-on-scroll__step-content {
        color: var(--color-white) !important;
    }
}

/* ── Card transitions (replaces the GSAP card slide in click mode) ───── */
.acf-block-steps-on-scroll--click-mode .acf-block-steps-on-scroll__card {
    transition:
        opacity 1.2s cubic-bezier(0.65, 0, 0.35, 1),
        transform 1.2s cubic-bezier(0.65, 0, 0.35, 1);
    will-change: transform, opacity;
}