/*!
 * B2 Vertical Steps — Elementor widget "Vertical Steps"
 * Figma: B2 STRUCTURAL → node 5422:2250
 *
 * Width is fluid: the rail is intrinsically sized, the panel column takes the
 * remainder of whatever Elementor container the widget is dropped into.
 * All tunables are custom properties written by the widget's Style controls.
 */

.b2vs {
    /* Rail */
    --b2vs-num-size:          30px;
    --b2vs-num-gap:           48px;
    --b2vs-num-bg:            var(--concrete-c300, #ececec);
    --b2vs-num-color:         var(--black, #000);
    --b2vs-num-bg-hover:      #dcdcdc;
    --b2vs-num-color-hover:   var(--black, #000);
    --b2vs-num-bg-active:     var(--orange-o300, #ee4c01);
    --b2vs-num-color-active:  var(--black, #000);
    --b2vs-num-border-done:   var(--orange-o300, #ee4c01);

    --b2vs-line-width:        2px;
    --b2vs-line-color:        var(--concrete-c300, #ececec);
    --b2vs-line-color-active: var(--orange-o300, #ee4c01);

    /* Panel */
    --b2vs-column-gap:        190px;
    --b2vs-content-max:       460px;
    --b2vs-icon-size:         25px;
    --b2vs-icon-color:        var(--orange-o300, #ee4c01);
    --b2vs-label-color:       var(--orange-o300, #ee4c01);
    --b2vs-title-color:       var(--navy-n300, #002343);
    --b2vs-desc-color:        var(--navy-n300, #002343);
    --b2vs-next-color:        var(--navy-n300, #002343);
    --b2vs-next-color-hover:  var(--orange-o300, #ee4c01);

    /* Motion */
    --b2vs-fade:              720ms;
    --b2vs-slide-gap:         24px;
    --b2vs-line-duration:     760ms;

    /* Intro (scroll-triggered) */
    --b2vs-intro-stagger:     120ms;
    --b2vs-intro-duration:    500ms;
    --b2vs-intro-rise:        12px;
    --b2vs-intro-draw:        700ms;
    --b2vs-ease:              cubic-bezier(0.4, 0, 0.2, 1);
    /* Step travel — barely any ease-in, then a long glide out, so a step reads
       as one continuous movement rather than a snap. Kept separate from
       --b2vs-ease so the intro and the hover states are unaffected. */
    --b2vs-ease-slide:        cubic-bezier(0.32, 0.02, 0.12, 1);

    display:     flex;
    align-items: flex-start;
    gap:         var(--b2vs-column-gap);
    width:       100%;
}


/* Rail — numbered boxes over a track line
--------------------------------------------- */
.b2vs__rail {
    position: relative;
    flex:     0 0 auto;
}

.b2vs__track {
    position:   absolute;
    top:        0;
    bottom:     0;
    left:       calc(var(--b2vs-num-size) / 2);
    width:      var(--b2vs-line-width);
    transform:  translateX(-50%);
    background: var(--b2vs-line-color);
    z-index:    0;
}

.b2vs__progress {
    position:   absolute;
    top:        0;
    left:       0;
    width:      100%;
    height:     0;
    background: var(--b2vs-line-color-active);
    transition: height var(--b2vs-line-duration) var(--b2vs-ease-slide);
}

/* Intro — the boxes fade up one after another, then the track draws down
   through them all.
   ---------------------------------------------------------------------------
   AOS supplies only the scroll trigger: it puts `data-aos` on the rail (one
   element, so every part of the sequence starts on the same frame) and adds
   `.aos-animate` when the rail scrolls into view. The timing below is ours, so
   it isn't at the mercy of AOS's global duration or its 50ms delay steps. Once
   the sequence has played out, b2-vertical-steps.js strips the `data-aos`
   attribute — that retires every rule here and hands the boxes back their
   ordinary hover transitions.
--------------------------------------------- */
.b2vs .b2vs__rail[data-aos] .b2vs__num {
    opacity:   0;
    transform: translateY(var(--b2vs-intro-rise));
    /* --i is the step's position, written onto the button by the widget. */
    transition:
        opacity   var(--b2vs-intro-duration) var(--b2vs-ease) calc(var(--i, 0) * var(--b2vs-intro-stagger)),
        transform var(--b2vs-intro-duration) var(--b2vs-ease) calc(var(--i, 0) * var(--b2vs-intro-stagger));
}

.b2vs .b2vs__rail[data-aos].aos-animate .b2vs__num {
    opacity:   1;
    transform: none;
}

/* The track waits out every box — one stagger beat past the last one's start,
   plus the length of its fade — then draws from the top down. --b2vs-intro-steps
   is the step count, written onto the rail by the widget. */
.b2vs .b2vs__rail[data-aos] .b2vs__track {
    transform:        translateX(-50%) scaleY(0);
    transform-origin: 50% 0;
    transition: transform var(--b2vs-intro-draw) var(--b2vs-ease)
        calc(var(--b2vs-intro-steps, 1) * var(--b2vs-intro-stagger) + var(--b2vs-intro-duration));
}

.b2vs .b2vs__rail[data-aos].aos-animate .b2vs__track {
    transform: translateX(-50%) scaleY(1);
}

.b2vs__nums {
    position:       relative;
    z-index:        1;
    display:        flex;
    flex-direction: column;
    gap:            var(--b2vs-num-gap);
}

/* `.elementor` prefix outranks the theme's global `[type="button"]` rules */
.elementor .b2vs .b2vs__num,
.b2vs .b2vs__num {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           var(--b2vs-num-size);
    height:          var(--b2vs-num-size);
    min-height:      0;
    padding:         0;
    border:          0;
    border-radius:   0;
    background-color: var(--b2vs-num-bg);
    color:           var(--b2vs-num-color);
    font-family:     var(--bodyFont);
    font-size:       1.125rem; /* 18 */
    font-weight:     var(--fw-medium);
    line-height:     1.5;
    letter-spacing:  0.02em;
    text-transform:  none;
    cursor:          pointer;
    /* Slower than a hover would need, so the box that lights up as a step lands
       arrives with the panel rather than ahead of it. */
    transition:
        background-color 0.4s var(--b2vs-ease-slide),
        color            0.4s var(--b2vs-ease-slide),
        box-shadow       0.4s var(--b2vs-ease-slide);
}

/* Steps already passed keep their fill but gain an orange outline, so the rail
   reads as "done / here / to come". Inset shadow, not a border, so the box
   geometry — and therefore the progress line's maths — never shifts. */
.elementor .b2vs .b2vs__num.is-done,
.b2vs .b2vs__num.is-done {
    box-shadow: inset 0 0 0 var(--b2vs-line-width) var(--b2vs-num-border-done);
}

.elementor .b2vs .b2vs__num:hover,
.b2vs .b2vs__num:hover {
    background-color: var(--b2vs-num-bg-hover);
    color:            var(--b2vs-num-color-hover);
}

.elementor .b2vs .b2vs__num:focus-visible,
.b2vs .b2vs__num:focus-visible {
    outline:        2px solid var(--b2vs-line-color-active);
    outline-offset: 3px;
}

.elementor .b2vs .b2vs__num.is-active,
.elementor .b2vs .b2vs__num.is-active:hover,
.elementor .b2vs .b2vs__num.is-active:focus,
.b2vs .b2vs__num.is-active {
    background-color: var(--b2vs-num-bg-active);
    color:            var(--b2vs-num-color-active);
    cursor:           default;
}


/* Panels — stacked in one grid cell, sliding like a filmstrip
   ---------------------------------------------------------------------------
   Every panel is stretched to the cell (grid's default align-self), so a panel
   is exactly as tall as the tallest one and translateY(100%) clears the window
   precisely. Outgoing and incoming move together at the same rate one window
   apart, so they tile instead of overlapping — no fade needed, and the whole of
   both panels stays legible the entire way across.
--------------------------------------------- */
.b2vs__panels {
    display:   grid;
    flex:      1 1 auto;
    min-width: 0;
    /* The window the filmstrip runs through: everything outside it is cut. */
    overflow:  clip;
    overflow-clip-margin: 8px; /* leaves room for the Next button's focus ring */
}

/* Idle panels sit parked one window away, waiting to enter — below when the
   user is advancing, above when they're stepping back. No transition here: a
   change of direction must re-park them instantly, not animate an unseen panel. */
.b2vs__panel {
    grid-area:      1 / 1;
    display:        flex;
    flex-direction: column;
    align-items:    flex-start;
    max-width:      var(--b2vs-content-max);
    opacity:        0;
    visibility:     hidden;
    transform:      translateY(calc(100% + var(--b2vs-slide-gap)));
    transition:     none;
}

.b2vs[data-b2vs-dir="back"] .b2vs__panel {
    transform: translateY(calc(-100% - var(--b2vs-slide-gap)));
}

/* The outgoing panel leaves the way the content is travelling: up when
   advancing, down when stepping back — the opposite of where the next one waits.
   It stays fully opaque all the way out. */
.b2vs .b2vs__panel.is-leaving {
    visibility: visible;
    opacity:    1;
    transform:  translateY(calc(-100% - var(--b2vs-slide-gap)));
    transition: transform var(--b2vs-fade) var(--b2vs-ease-slide);
}

.b2vs[data-b2vs-dir="back"] .b2vs__panel.is-leaving {
    transform: translateY(calc(100% + var(--b2vs-slide-gap)));
}

/* Incoming panel travels in lockstep with the outgoing one — same duration, no
   delay, no opacity change. */
.b2vs .b2vs__panel.is-active {
    opacity:    1;
    visibility: visible;
    transform:  none;
    transition: transform var(--b2vs-fade) var(--b2vs-ease-slide);
}

.b2vs__meta {
    display:     flex;
    align-items: center;
    gap:         var(--cp-s, 16px);
}

.b2vs__icon {
    display:     inline-flex;
    align-items: center;
    color:       var(--b2vs-icon-color);
    font-size:   var(--b2vs-icon-size);
    line-height: 1.4;
}

.b2vs__icon svg {
    width:  var(--b2vs-icon-size);
    height: var(--b2vs-icon-size);
    fill:   currentColor;
}

.b2vs__label {
    color:          var(--b2vs-label-color);
    font-family:    var(--bodyFont);
    font-size:      0.875rem; /* 14 */
    font-weight:    var(--fw-medium);
    line-height:    1.5;
    letter-spacing: var(--tracking-body, 0.02em);
}

.b2vs .b2vs__title {
    margin:         var(--cp-l, 32px) 0 0;
    color:          var(--b2vs-title-color);
    font-family:    var(--titleFont);
    font-size:      var(--heading-h3, 2rem);
    font-weight:    400;
    line-height:    var(--line-h3, 1.3);
    letter-spacing: var(--tracking-heading, 0.02em);
}

.b2vs__meta + .b2vs__title { margin-top: var(--cp-l, 32px); }
.b2vs__panel > .b2vs__title:first-child { margin-top: 0; }

.b2vs__desc {
    margin-top:     var(--cp-s, 16px);
    color:          var(--b2vs-desc-color);
    font-family:    var(--bodyFont);
    font-size:      var(--body-body-sm, 1.125rem);
    font-weight:    400;
    line-height:    var(--line-body-sm, 1.4);
    letter-spacing: var(--tracking-body, 0.02em);
}

.b2vs__desc p { margin: 0 0 0.75em; }
.b2vs__desc p:last-child { margin-bottom: 0; }

.b2vs__actions {
    display:     flex;
    align-items: center;
    flex-wrap:   wrap;
    gap:         var(--cp-l, 32px);
    margin-top:  var(--cp-xl, 48px);
}

.elementor .b2vs .b2vs__next,
.b2vs .b2vs__next,
.b2vs .b2vs__link {
    display:          inline-flex;
    align-items:      center;
    gap:              var(--cp-s, 16px);
    min-height:       0;
    padding:          0;
    border:           0;
    border-radius:    0;
    background:       none;
    background-color: transparent;
    color:            var(--b2vs-next-color);
    font-family:      var(--bodyFont);
    font-size:        var(--component-button-buttondefault, 1rem);
    font-weight:      var(--fw-semibold);
    line-height:      1;
    letter-spacing:   var(--tracking-button, 0.0625em);
    text-transform:   uppercase;
    text-decoration:  none;
    cursor:           pointer;
    transition:       color 0.25s var(--b2vs-ease);
}

.elementor .b2vs .b2vs__next:hover,
.elementor .b2vs .b2vs__next:focus,
.b2vs .b2vs__next:hover,
.b2vs .b2vs__link:hover {
    background-color: transparent;
    color:            var(--b2vs-next-color-hover);
}

.elementor .b2vs .b2vs__next:focus-visible,
.b2vs .b2vs__next:focus-visible,
.b2vs .b2vs__link:focus-visible {
    outline:        2px solid var(--b2vs-next-color-hover);
    outline-offset: 4px;
}

.b2vs__arrow {
    flex:       0 0 auto;
    width:      0.875em;
    height:     0.875em;
    transition: transform 0.25s var(--b2vs-ease);
}

.b2vs__next:hover .b2vs__arrow,
.b2vs__link:hover .b2vs__arrow {
    transform: translateX(4px);
}


/* Responsive
--------------------------------------------- */

@media all and (max-width: 1440px) {
    .b2vs {
        gap: 110px;
    }
}

@media all and (max-width: 900px) {
    .b2vs {
        gap: 48px;
    }
}

@media all and (max-width: 767px) {
    .b2vs {
        --b2vs-content-max: 100%;
    }
    .b2vs .b2vs__title {
        font-size: var(--heading-h4, 1.5rem);
    }
    .b2vs__actions {
        gap: var(--cp-m, 20px);
    }
}


/* Motion preferences
--------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .b2vs {
        --b2vs-fade:           1ms;
        --b2vs-slide-gap:      0px;
        --b2vs-line-duration:  1ms;
        --b2vs-intro-stagger:  0ms;
        --b2vs-intro-duration: 1ms;
        --b2vs-intro-rise:     0px;
        --b2vs-intro-draw:     1ms;
    }
    .b2vs__arrow,
    .b2vs .b2vs__num {
        transition: none;
    }
}


/* Elementor editor — panels are stacked and mostly invisible, so give the
   editor a way to see every step at once while a step is being edited.
--------------------------------------------- */
.elementor-editor-active .b2vs__panel,
.elementor-editor-preview .b2vs__panel {
    pointer-events: auto;
}