/* ==========================================================================
   Widget: Vertical Text Carousel
   BEM root: .gtea-vertical-text-carousel
   ========================================================================== */

/* ── Root ────────────────────────────────────────────────────────── */
.gtea-vertical-text-carousel {
    position: relative;
    width: 100%;
    box-sizing: border-box;
}

/* ── Inner row ───────────────────────────────────────────────────── */
.gtea-vertical-text-carousel__inner {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    width: 100%;
    box-sizing: border-box;
}

/* ── Nav column ──────────────────────────────────────────────────── */
.gtea-vertical-text-carousel__nav-col {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    overflow: hidden;
    box-sizing: border-box;
}

/* ── Nav list ────────────────────────────────────────────────────── */
/* height:100% lets flex-basis % on children resolve against the col  */
/* height. transform is driven by JS to scroll the clipped items.     */
.gtea-vertical-text-carousel__nav-list {
    display: flex;
    flex-direction: column;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    transition: transform 300ms ease-in-out;
    will-change: transform;
}

/* ── Nav item ────────────────────────────────────────────────────── */
/* flex-basis is set via --vtc-nav-visible and --vtc-nav-gap so each  */
/* item occupies (100% - gaps) / N; items beyond N are clipped by the */
/* overflow:hidden on the nav column. Subtracting the cumulative gap  */
/* keeps the visible count exact when a gap > 0 is applied.           */
.gtea-vertical-text-carousel__nav-item {
    flex: 0 0 calc((100% - (var(--vtc-nav-visible, 4) - 1) * var(--vtc-nav-gap, 0px)) / var(--vtc-nav-visible, 4));
    min-height: 0;
    overflow: hidden;
    cursor: pointer;
    user-select: none;
    box-sizing: border-box;
}

.gtea-vertical-text-carousel__nav-item:focus {
    outline: none;
}

.gtea-vertical-text-carousel__nav-item:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* ── Slides column — Embla viewport ─────────────────────────────── */
.gtea-vertical-text-carousel__slides-col {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    height: 500px; /* default; overridden by Elementor slide_height control */
    box-sizing: border-box;
}

/* ── Slides track — Embla container ─────────────────────────────── */
/* Embla applies transform here. flex-direction matches axis:'y'. */
.gtea-vertical-text-carousel__slides-track {
    display: flex;
    flex-direction: column;
    height: 100%;
    will-change: transform;
    user-select: none;
    -webkit-user-select: none;
    box-sizing: border-box;
}

/* ── Single slide — Embla slide ──────────────────────────────────── */
/* flex: 0 0 100% makes each slide fill the viewport exactly once.   */
.gtea-vertical-text-carousel__slide {
    flex: 0 0 100%;
    min-height: 0;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}

/* ── Slide background ────────────────────────────────────────────── */
.gtea-vertical-text-carousel__slide-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

/* ── Slide overlay ───────────────────────────────────────────────── */
.gtea-vertical-text-carousel__slide-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
}

/* ── Slide content ───────────────────────────────────────────────── */
.gtea-vertical-text-carousel__slide-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

/* ── Slide title ─────────────────────────────────────────────────── */
.gtea-vertical-text-carousel__slide-title {
    margin: 0;
    box-sizing: border-box;
}

/* ── Slide description ───────────────────────────────────────────── */
.gtea-vertical-text-carousel__slide-desc {
    margin: 0;
    box-sizing: border-box;
}

/* ── Mobile: horizontal layout (≤ 767 px) ───────────────────────── */
/* Embla is destroyed/reinited with axis:'x' at this breakpoint.     */
@media (max-width: 767px) {
    .gtea-vertical-text-carousel__inner {
        flex-direction: column !important;
    }

    .gtea-vertical-text-carousel__nav-col {
        width: 100% !important;
        overflow-x: auto;
        overflow-y: hidden;
        flex-direction: row;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .gtea-vertical-text-carousel__nav-col::-webkit-scrollbar {
        display: none;
    }

    .gtea-vertical-text-carousel__nav-list {
        flex-direction: row;
        flex-wrap: nowrap;
        width: max-content;
    }

    /* Nav list: horizontal scrolling strip, no transform-based scroll */
    .gtea-vertical-text-carousel__nav-list {
        flex-direction: row;
        flex-wrap: nowrap;
        width: max-content;
        height: auto;
        transform: none !important;
        transition: none;
    }

    /* Nav items: auto width on mobile (ignore the desktop flex-basis) */
    .gtea-vertical-text-carousel__nav-item {
        flex: 0 0 auto;
    }

    /* The inner row becomes a column on mobile, so the slides column's flex
       main axis flips to vertical. With flex:1 (flex-basis:0%) the basis would
       then govern the column's HEIGHT and override the `height` property emitted
       by both the Slides Column and Slide height controls. Reset to flex:0 0 auto
       so the explicit height from those controls governs again on mobile. */
    .gtea-vertical-text-carousel__slides-col {
        flex: 0 0 auto;
    }

    /* Embla container switches to row for axis:'x'. Keep height:100% so
       each slide fills the slides column height set from the Elementor
       Slides Column / Slide height controls (auto would collapse it). */
    .gtea-vertical-text-carousel__slides-track {
        flex-direction: row;
        height: 100%;
    }

    .gtea-vertical-text-carousel__slide {
        flex: 0 0 100%;
        min-width: 0;
        width: 100%;
        height: 100%;
    }
}