/*!
 * B2 Image Carousel — Elementor widget "Image Carousel"
 * Figma: B2 STRUCTURAL → node 5383:1302
 *
 * Centre-focus carousel. Every slide occupies an identical, fixed slot — the
 * size difference between the active slide and its neighbours is a transform,
 * never a width or a font-size. Nothing in the animation touches layout, so
 * the band's height is constant and the page never shifts.
 *
 * JS translates the track so the active slot's centre lands on the viewport
 * centre, and nudges each slide sideways to close the gap the scale-down
 * leaves behind (a scaled slot is narrower than the slot it sits in).
 */

.b2ic {
    /* Band */
    --b2ic-bg:                   var(--concrete-c300, #ececec);

    /* Slides */
    --b2ic-slide-w:              512px;
    --b2ic-scale:                0.75;
    --b2ic-ratio:                512 / 342;
    --b2ic-gap:                  85px;
    --b2ic-side-opacity:         1;

    /* Captions */
    --b2ic-caption-gap:          12px;
    --b2ic-caption-max:          233px;
    --b2ic-caption-size:         16px;
    --b2ic-caption-color:        #96a5b2;
    --b2ic-caption-color-active: var(--navy-n300, #002343);

    /* Pager */
    --b2ic-pager-gap:            42px;
    --b2ic-dot-size:             11px;
    --b2ic-dot-active-w:         32px;
    --b2ic-dot-gap:              5px;
    --b2ic-dot-color:            var(--white, #fff);
    --b2ic-dot-track:            var(--navy-n300, #002343);
    --b2ic-dot-fill:             var(--orange-o300, #ee4c01);

    /* Motion */
    --b2ic-speed:                520ms;
    --b2ic-autoplay:             4000ms;
    --b2ic-ease:                 cubic-bezier(0.4, 0, 0.2, 1);

    position:   relative;
    width:      100%;
    padding:    48px 0;
    background: var(--b2ic-bg);
    overflow:   hidden;
}

/* Zero-height probes JS reads for the slot width and the scaled width. They
   never transition, so measuring them mid-animation is safe. */
.b2ic__measure {
    position:       absolute;
    top:            0;
    left:           0;
    height:         0;
    overflow:       hidden;
    visibility:     hidden;
    pointer-events: none;
}

.b2ic__measure span { display: block; height: 0; }
.b2ic__measure-active { width: var(--b2ic-slide-w); }
.b2ic__measure-side   { width: calc(var(--b2ic-slide-w) * var(--b2ic-scale)); }

/* pan-y hands vertical gestures back to the page for scrolling and keeps the
   horizontal ones for us — without it a touch swipe is swallowed by the
   browser's own scrolling before a pointermove ever arrives. */
.b2ic__viewport {
    width:       100%;
    overflow:    hidden;
    touch-action: pan-y;
}

.b2ic--dragging,
.b2ic--dragging .b2ic__caption {
    user-select:         none;
    -webkit-user-select: none;
}

.b2ic__track {
    display:     flex;
    align-items: center;
    gap:         var(--b2ic-gap);
    width:       max-content;
    will-change: transform;
    transition:  transform var(--b2ic-speed) var(--b2ic-ease);
}

.b2ic--dragging .b2ic__track,
.b2ic--dragging .b2ic__slide {
    transition: none;
}

/* Set by JS around an instant re-layout — the loop's silent re-centre, a
   resize, a rebuild of the belt. Everything that would otherwise ease has to
   be held still, including the active slide's scale and its caption colour,
   or the re-centre reads as a slide losing focus. */
.b2ic--snap .b2ic__track,
.b2ic--snap .b2ic__slide,
.b2ic--snap .b2ic__inner,
.b2ic--snap .b2ic__caption {
    transition: none;
}

.b2ic--dragging .b2ic__track { cursor: grabbing; }

/* Fixed slot, always sized for the ACTIVE slide — that is what keeps the track
   height constant no matter which slide is centred. */
.b2ic__slide {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    flex:            0 0 auto;
    width:           var(--b2ic-slide-w);
    opacity:         var(--b2ic-side-opacity);
    transition:
        transform var(--b2ic-speed) var(--b2ic-ease),
        opacity   var(--b2ic-speed) var(--b2ic-ease);
}

.b2ic__slide.is-active {
    opacity: 1;
}

/* Image and caption scale together as one group, about the slot's centre.
   Doing it here rather than on the frame keeps every measurement — frame
   height, caption size, the gap between them — laid out at active size, so
   the slot's height is identical for every slide and nothing reflows. */
.b2ic__inner {
    width:            100%;
    transform:        scale(var(--b2ic-scale));
    transform-origin: center center;
    transition:       transform var(--b2ic-speed) var(--b2ic-ease);
}

.b2ic__slide.is-active .b2ic__inner {
    transform: scale(1);
}

/* The image is a button so a side slide can be clicked into the centre.
   `.elementor` prefix outranks the theme's global `[type="button"]` rules. */
.elementor .b2ic .b2ic__frame,
.b2ic .b2ic__frame {
    display:          block;
    width:            100%;
    aspect-ratio:     var(--b2ic-ratio);
    min-height:       0;
    margin:           0;
    padding:          0;
    border:           0;
    border-radius:    0;
    background:       none;
    background-color: transparent;
    overflow:         hidden;
    cursor:           pointer;
}

.elementor .b2ic .b2ic__frame:hover,
.elementor .b2ic .b2ic__frame:focus {
    background-color: transparent;
}

.b2ic .b2ic__frame:focus-visible {
    outline:        2px solid var(--b2ic-caption-color-active);
    outline-offset: 4px;
}

/* pointer-events:none keeps the browser's native image-drag from hijacking a
   mouse swipe, and lets clicks fall through to the button. */
.b2ic__frame img {
    display:          block;
    width:            100%;
    height:           100%;
    object-fit:       cover;
    pointer-events:   none;
    -webkit-user-drag: none;
}

/* Laid out at the active size always; the visual step down to the Figma's 12px
   comes from the wrapper's 0.75 scale. An animated font-size would rewrap long
   captions and move the band's height with them. */
.b2ic__caption {
    max-width:      var(--b2ic-caption-max);
    margin:         var(--b2ic-caption-gap) auto 0;
    color:          var(--b2ic-caption-color);
    font-family:    var(--bodyFont);
    font-size:      var(--b2ic-caption-size);
    font-weight:    400;
    line-height:    1.4;
    letter-spacing: var(--tracking-body, 0.02em);
    text-align:     center;
    transition:     color var(--b2ic-speed) var(--b2ic-ease);
}

.b2ic__slide.is-active .b2ic__caption {
    color: var(--b2ic-caption-color-active);
}


/* Pager
--------------------------------------------- */
.b2ic__pager {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             var(--b2ic-dot-gap);
    margin-top:      var(--b2ic-pager-gap);
}

.elementor .b2ic .b2ic__dot,
.b2ic .b2ic__dot {
    position:         relative;
    display:          block;
    flex:             0 0 auto;
    width:            var(--b2ic-dot-size);
    height:           var(--b2ic-dot-size);
    min-height:       0;
    padding:          0;
    border:           0;
    border-radius:    33px;
    background-color: var(--b2ic-dot-color);
    overflow:         hidden;
    cursor:           pointer;
    transition:
        width            var(--b2ic-speed) var(--b2ic-ease),
        background-color var(--b2ic-speed) var(--b2ic-ease);
}

.elementor .b2ic .b2ic__dot.is-active,
.b2ic .b2ic__dot.is-active {
    width:            var(--b2ic-dot-active-w);
    background-color: var(--b2ic-dot-track);
    cursor:           default;
}

.b2ic .b2ic__dot:focus-visible {
    outline:        2px solid var(--b2ic-dot-fill);
    outline-offset: 3px;
}

/* Fill sweeps the active pill while autoplay counts down; with autoplay off it
   simply sits at 100%, which is the Figma resting state. */
.b2ic__dot-fill {
    position:         absolute;
    inset:            0 auto 0 0;
    width:            0;
    background-color: var(--b2ic-dot-fill);
    border-radius:    inherit;
}

.b2ic__dot.is-active .b2ic__dot-fill {
    width:      100%;
    transition: width var(--b2ic-autoplay) linear;
}

.b2ic--no-autoplay .b2ic__dot.is-active .b2ic__dot-fill {
    width:      100%;
    transition: none;
}


/* Motion preferences
--------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .b2ic {
        --b2ic-speed: 1ms;
    }
    .b2ic__dot.is-active .b2ic__dot-fill {
        transition: none;
        width:      100%;
    }
}