/*!
 * B2 Label Carousel — Elementor widget "Label Carousel"
 * Figma: B2 STRUCTURAL → node 5336:931
 *
 * A vertical list of labels beside a single image well. The list is a carousel
 * in its own right: the active label is pinned to the middle of the window and
 * the labels scroll past it, so travel always reads as the list moving rather
 * than a highlight jumping about. Its image cross-fades in behind it.
 *
 * JS clones the labels either side of the real ones, so the strip runs on past
 * both ends and the wrap from the last label back to the first is seamless.
 * Every image is stacked in the same well and only opacity changes, so the
 * well's height is fixed and the page never shifts.
 */

.b2lc {
    /* Layout — the image takes the width it is set, but never more than its
       share of the row, so the label column stays workable at the laptop and
       tablet widths in between the breakpoints as well as at them. */
    --b2lc-media-set:    624px;
    --b2lc-media-share:  49%;
    --b2lc-media-w:      min(var(--b2lc-media-set), var(--b2lc-media-share));
    --b2lc-ratio:        624 / 534;
    --b2lc-column-gap:   var(--cp-l, 32px);
    --b2lc-item-gap:     var(--cp-2xs, 8px);
    --b2lc-list-max:     619px;
    --b2lc-list-h:       100%;   /* 100% = as tall as the image well beside it */
    --b2lc-list-min-h:   0px;    /* a floor, so a narrow image can't crush it */
    --b2lc-fade-mask:    64px;

    /* Labels */
    --b2lc-label-size:   var(--heading-h3, 2rem);
    --b2lc-label-color:  var(--navy-n75, #96a5b2);
    --b2lc-label-active: var(--navy-n300, #002343);
    --b2lc-label-weight: 400;
    --b2lc-active-weight: 500;

    /* Motion */
    --b2lc-fade:         520ms;
    --b2lc-scroll:       620ms;
    --b2lc-ease:         cubic-bezier(0.4, 0, 0.2, 1);

    display:     flex;
    align-items: stretch; /* gives the list a definite height to be 100% of */
    gap:         var(--b2lc-column-gap);
    width:       100%;
}


/* Image well — every frame in the same grid cell, so the well is as tall as
   the tallest and nothing reflows when the active image changes.
--------------------------------------------- */
/* align-self keeps the image centred on the days the list's minimum height
   makes it the taller of the two. */
.b2lc__media {
    display:        grid;
    grid-template:  1fr / 1fr; /* one definite track, so the frames fill it exactly */
    flex:           0 0 var(--b2lc-media-w);
    align-self:     center;
    max-width:      100%;
    aspect-ratio:   var(--b2lc-ratio);
    /* Without this the automatic minimum size floors the well at its content's
       height and the aspect ratio is quietly ignored. */
    min-height:     0;
    min-width:      0;
    overflow:       hidden;
    background:     var(--concrete-c300, #ececec);
}

.b2lc__frame {
    grid-area:  1 / 1;
    position:   relative;
    min-height: 0;
    min-width:  0;
    margin:     0;
    overflow:   hidden;
    opacity:    0;
    transition: opacity var(--b2lc-fade) var(--b2lc-ease);
}

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

/* Taken out of flow so a tall source image can't feed its own height back into
   the well and stretch the crop into a portrait one. The frame keeps the
   624:534 the well was given and the image covers it from the centre. */
.b2lc__frame img {
    position:        absolute;
    inset:           0;
    display:         block;
    width:           100%;
    height:          100%;
    object-fit:      cover;
    object-position: center;
}


/* Label list
--------------------------------------------- */
.b2lc__list {
    flex:      1 1 auto;
    min-width: 0;
    max-width: var(--b2lc-list-max);
}

/* The window fades at both edges so a part-visible label reads as "more
   above and below" rather than as a clipped one.

   `touch-action` claims the vertical gesture for the carousel: a finger inside
   the window drags the strip instead of scrolling the page. Horizontal panning
   and pinch-zoom are left to the browser, so the page is still reachable and
   the labels can still be zoomed. */
.b2lc__viewport {
    position:    relative;
    height:      var(--b2lc-list-h);
    min-height:  var(--b2lc-list-min-h);
    overflow:    hidden;
    touch-action: pan-x pinch-zoom;

    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--b2lc-fade-mask), #000 calc(100% - var(--b2lc-fade-mask)), transparent 100%);
    mask-image:         linear-gradient(to bottom, transparent 0, #000 var(--b2lc-fade-mask), #000 calc(100% - var(--b2lc-fade-mask)), transparent 100%);
}

/* Absolute so its height never feeds back into the window's, and top:50% so
   the strip is already halfway down before JS offsets it — that way the first
   paint lands centred with no measurement and no flash of a top-aligned list. */
.b2lc__track {
    position:       absolute;
    top:            50%;
    left:           0;
    right:          0;
    display:        flex;
    flex-direction: column;
    align-items:    flex-start;
    gap:            var(--b2lc-item-gap);
    will-change:    transform;
    transition:     transform var(--b2lc-scroll) var(--b2lc-ease);
}

/* Under a finger or a wheel the strip is positioned frame by frame, so it must
   not also be easing towards where it was last told to go. */
.b2lc__track.is-dragging {
    transition:          none;
    user-select:         none;
    -webkit-user-select: none;
}

/* The cloned labels JS adds either side carry the same .b2lc__item styling —
   they are click-only, the real labels between them carry the tablist. */

/* `.elementor` prefix outranks the theme's global `[type="button"]` rules. */
.elementor .b2lc .b2lc__item,
.b2lc .b2lc__item {
    display:         block;
    width:           auto;
    max-width:       100%;
    overflow-wrap:   break-word;
    min-height:      0;
    margin:          0;
    padding:         0;
    border:          0;
    border-radius:   0;
    background:      none;
    background-color: transparent;
    color:           var(--b2lc-label-color);
    font-family:     var(--titleFont);
    font-size:       var(--b2lc-label-size);
    font-weight:     var(--b2lc-label-weight);
    line-height:     var(--line-h3, 1.3);
    letter-spacing:  var(--tracking-heading, 0.02em);
    text-align:      left;
    text-transform:  none;
    cursor:          pointer;
    transition:      color var(--b2lc-fade) var(--b2lc-ease);
}

.elementor .b2lc .b2lc__item:hover,
.elementor .b2lc .b2lc__item:focus {
    background-color: transparent;
}

.elementor .b2lc .b2lc__item:hover,
.b2lc .b2lc__item:hover {
    color: var(--b2lc-label-active);
}

.elementor .b2lc .b2lc__item.is-active,
.b2lc .b2lc__item.is-active {
    color:       var(--b2lc-label-active);
    font-weight: var(--b2lc-active-weight);
    cursor:      default;
}

.b2lc .b2lc__item:focus-visible {
    outline:        2px solid var(--b2lc-label-active);
    outline-offset: 4px;
}


/* Responsive
 *
 * The image is capped at a share of the row (see the widget's "Image width"
 * control, which writes a min() of the set width and that share), so the list
 * keeps a workable column at every laptop and tablet width in between the
 * breakpoints rather than only at them. What the breakpoints do is take the
 * labels down in size as that column narrows, and hold a floor under the
 * window so a label that has wrapped onto three lines is never clipped.
--------------------------------------------- */
@media all and (max-width: 1440px) {
    .b2lc {
        --b2lc-label-size: clamp(1.375rem, 2.2vw, 2rem);
        --b2lc-list-min-h: 300px;
        --b2lc-fade-mask:  48px;
    }
}

/* Tablet: an even split. The image gives up the extra it was still taking at
   49% of a much narrower row, which is what was crowding the labels out. */
@media all and (max-width: 1024px) {
    .b2lc {
        --b2lc-media-set:   50%;
        --b2lc-media-share: 50%;
        --b2lc-item-gap:    var(--cp-xs, 12px);
        --b2lc-column-gap:  var(--cp-m, 20px);
    }
}

/* Stacked: the image goes full width at a landscape crop, and the list has no
   sibling left to take its height from, so the window gets one of its own. */
@media all and (max-width: 767px) {
    .b2lc {
        --b2lc-ratio:      16 / 10;
        --b2lc-label-size: var(--heading-h4, 1.5rem);
        --b2lc-item-gap:   var(--cp-xs, 12px);
        --b2lc-list-h:     240px;
        --b2lc-list-min-h: 0px;
        --b2lc-fade-mask:  40px;

        flex-direction: column;
        gap:            var(--cp-l, 32px);
    }

    /* Column direction turns flex-basis into a height, so size the image by
       width here and let the aspect ratio give it its height. */
    .b2lc__media {
        flex:       0 0 auto;
        width:      100%;
        align-self: stretch;
    }

    .b2lc__list { max-width: none; }
}


/* Motion preferences
--------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .b2lc {
        --b2lc-fade:   1ms;
        --b2lc-scroll: 1ms;
    }
}