/* ============================================================
   STEPS — sticky speech-bubble navigator + scrolling content
   ============================================================ */

section.block-steps { overflow: visible; }

.block-steps .header { margin-bottom: var(--space-6); }

/* Decorative graphic (ACF "graphic" select) — sits on top of the whole
   section, right-aligned. */
.block-steps .steps-graphic {
    display: flex;
    justify-content: flex-end;
    color: var(--color-n-black, #282829);
    margin-bottom: var(--space-5);
}

.block-steps .steps-graphic svg {
    display: block;
    height: 300px;
    width: auto;
    max-width: 100%;
}

/* ---- Accent tokens ---- */
.block-steps .accent-grey       { --step-accent: var(--accent-grey,       #e0e0e0); }
.block-steps .accent-green      { --step-accent: var(--accent-green,      #01b483); }
.block-steps .accent-pink       { --step-accent: var(--accent-pink,       #fcbbe0); }
.block-steps .accent-peach      { --step-accent: var(--accent-peach,      #f8a087); }
.block-steps .accent-light-blue { --step-accent: var(--accent-light-blue, #a4dbde); }
.block-steps .accent-orange     { --step-accent: #ff6e33; }

/* ---- Two-column grid ---- */
.block-steps .steps-layout {
    display: grid;
    grid-template-columns: 5fr 6fr;
    gap: var(--space-8);
    align-items: start;
    scroll-margin-top: calc(111px + var(--space-7)); /* first-click scroll lands below header + gap */
}

/* ============================================================
   LEFT — sticky navigator
   ============================================================ */
.block-steps .steps-nav {
    position: sticky;
    top: calc(111px + var(--space-7)); /* clear fixed header + space-7 gap */
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    min-width: 0; /* prevent grid blowout — column may shrink below content */
    text-align: left;
}

/* ---- Speech bubble ---- */
/* The grey panel bleeds OUT to the left viewport edge, but its text aligns to
   the container's left content boundary: padding-left == the bleed distance,
   so content starts exactly where the container does. */
.block-steps .steps-bubble {
    --steps-bleed: calc(
        var(--container-px, 96px) + max(0px, (100vw - var(--container-width, 1500px)) / 2)
    );
    position: relative;
    background: #f4f4f6;
    border-radius: 0 32px 32px 0; /* square on the bleeding (left) side */
    padding: 0 30px 0 var(--steps-bleed); /* no top/bottom padding */
    margin-left: calc(-1 * var(--steps-bleed));
    max-height: 590px;
}

/* Tail pointing right toward the content column */
.block-steps .steps-bubble::after {
    content: '';
    position: absolute;
    right: -75px;
    top: calc(50% - 40px);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 40px 0 40px 75px; /* 75px wide, 80px tall */
    border-color: transparent transparent transparent #f4f4f6;
}

/* ---- Vertical carousel ----
   The active step is centred in a clipped viewport; neighbouring steps peek in
   faded above/below. JS translates the track to centre the active item. */
.block-steps .steps-bubble__viewport {
    position: relative;
    height: 590px; /* fills the bubble (no top/bottom padding) */
    overflow: hidden;
}

.block-steps .steps-bubble__track {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

.block-steps .steps-bubble__item {
    opacity: 0.12; /* faded neighbours */
    filter: blur(5px);
    transition: opacity 0.5s ease, filter 0.5s ease;
}

.block-steps .steps-bubble__item.is-active {
    opacity: 1;
    filter: blur(0);
}

.block-steps .steps-bubble__num {
    display: block;
    font-size: 20px;
    font-weight: 800;
    text-transform: uppercase;
}

.block-steps .steps-bubble__num::after {
    content: '';
    display: block;
    width: 80px;
    height: 5px;
    border-radius: 0;
    margin-top: 20px;
    background: var(--step-accent, #01b483);
}

.block-steps .steps-bubble__title {
    margin: var(--space-4) 0 0;
    font-size: 80px;
    font-weight: 800;
    line-height: 1.05;
}

/* ---- Arrows (vertically centred on the active step) ---- */
.block-steps .steps-arrow {
    position: absolute;
    top: 74%;
    transform: translateY(-50%);
    width: 3.6rem;
    height: 3.6rem;
    min-width: 3.6rem;
    border-radius: 100px;
    background: #282829;
    border: 2px solid #282829;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 2px;
    overflow: hidden;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    z-index: 2;
}

.block-steps .steps-arrow svg {
    width: 20px;
    height: 20px;
}

/* straddles the content-left edge, 15px into the left gutter */
.block-steps .steps-arrow--prev { left: calc(var(--steps-bleed) - 15px); }

/* straddles the bubble's right edge, 21px into the gutter */
.block-steps .steps-arrow--next { right: -21px; }

.block-steps .steps-arrow:hover:not(:disabled) {
    background: #fff;
    color: #282829; /* icon inverts; border stays a black line circle */
}

.block-steps .steps-arrow:disabled {
    background: rgba(0, 0, 0, 0.4);
    border-color: rgba(0, 0, 0, 0.4);
    cursor: default;
}

/* ---- Dots + current label (below bubble) ---- */
.block-steps .steps-meta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
}

.block-steps .steps-dots {
    display: flex;
    gap: 120px;
    align-items: center;
}

.block-steps .steps-dot {
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: var(--accent-green, #01b483); /* all dots green */
    color: #fff;
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.25s ease;
    flex-shrink: 0;
}

/* check icon only shows on the active step */
.block-steps .steps-dot svg {
    display: none;
}

.block-steps .steps-dot.is-active svg {
    display: block;
}

/* Remaining inactive dots (neither active nor the pulsing next one): grey + 24px. */
.block-steps .steps-dot:not(.is-active):not(.is-next) {
    width: 24px;
    height: 24px;
    background: #a7a7a9;
}

/* The dot right after the active step: a smaller solid green circle with a
   second green circle pulsing out of it (heartbeat). */
.block-steps .steps-dot.is-next {
    width: 24px;
    height: 24px;
}

.block-steps .steps-dot.is-next::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--accent-green, #01b483);
    animation: steps-dot-heartbeat 1.4s ease-out infinite;
}

@keyframes steps-dot-heartbeat {
    0%   { transform: scale(1);   opacity: 0.7; }
    100% { transform: scale(2.4); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .block-steps .steps-dot.is-next::after { animation: none; }
}

.block-steps .steps-meta__labels {
    position: relative;
    text-align: center;
    min-height: 2.6em;
    width: 100%;
}

.block-steps .steps-meta__label {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    margin-top: 20px;
    padding-bottom: 20px;
    width: 100%; /* same width as the content column */
}

.block-steps .steps-meta__label.is-active {
    display: flex;
}

.block-steps .steps-meta__num {
    font-size: 18px;
    font-weight: 400;
    text-transform: uppercase;
}

.block-steps .steps-meta__title {
    font-size: 20px;
    font-weight: 700;
}

/* ============================================================
   RIGHT — full list of all steps. The section is tall, the left bubble is
   pinned (sticky) and the user scrolls THROUGH the steps (parallax) before
   reaching the next section. Previous steps scroll up out of view naturally.
   ============================================================ */
.block-steps .steps-content {
    position: relative;
    min-width: 0;           /* prevent grid blowout */
    text-align: left;
    overflow: hidden;       /* clip to the active step; the track slides within */
    transition: height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.block-steps .steps-content__track {
    display: flex;
    flex-direction: column;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}


.block-steps .steps-content__item {
    position: relative;
    padding: var(--space-6) 0 var(--space-6) var(--space-6);
    border-radius: 0;
    scroll-margin-top: calc(111px + var(--space-7)); /* click jumps land below header + gap */
}

/* bottom line spans the content width only (inset past the left padding) */
.block-steps .steps-content__item::after {
    content: '';
    position: absolute;
    left: var(--space-6);
    right: 0;
    bottom: 0;
    border-bottom: 1px solid var(--color-n-black);
    opacity: 0.3;
}

.block-steps .steps-content__num {
    display: block;
    font-size: 20px;
    font-weight: 800;
    text-transform: uppercase;
}

.block-steps .steps-content__title {
    margin: var(--space-3) 0 var(--space-3);
    font-weight: 800;
    line-height: 1.15;
}

.block-steps .steps-content__rule {
    display: block;
    width: 80px;
    height: 5px;
    border-radius: 0;
    margin-top: 20px;
    margin-bottom: var(--space-5);
    background: var(--step-accent, #01b483);
}

.block-steps .steps-content__lead {
    font-weight: 700;
    line-height: 1.5;
    margin: 0 0 var(--space-4);
}

.block-steps .steps-content__copy {
    margin: 0 0 var(--space-5);
}

.block-steps .steps-content__copy:last-child,
.block-steps .steps-content__lead:last-child {
    margin-bottom: 0;
}

.block-steps .steps-content__cta {
    margin-top: var(--space-2);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 991.98px) {
    .block-steps .steps-layout {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }

    /* Nav becomes a compact pinned bar above the content */
    .block-steps .steps-nav {
        position: sticky;
        top: 64px; /* clear the smaller mobile fixed header */
        height: auto;
        background: var(--bg, #fff);
        padding: var(--space-3) 0;
        z-index: 20;
    }

    .block-steps .steps-bubble {
        min-height: 0;
        padding: var(--space-6);
        margin-left: 0; /* no bleed once the layout stacks */
    }

    .block-steps .steps-bubble::after { display: none; }

    .block-steps .steps-bubble__title {
        font-size: clamp(1.75rem, 6vw, 2.25rem);
    }

    /* Smaller fixed header on mobile (64px) */
    .block-steps .steps-content__item {
        scroll-margin-top: 80px;
    }
}

@media (max-width: 575.98px) {
    .block-steps .steps-content__item {
        padding: var(--space-5) var(--space-4) var(--space-6);
    }
}