/* ============================================================
   Banner Carousel V2
   ============================================================ */

/* ── Keyframes ── */
@keyframes gteaBannerV2WordSweep {
    from {
        background-position:   0%   center;
        -webkit-mask-position: 100% center;
                mask-position: 100% center;
    }
    to {
        background-position:   100% center;
        -webkit-mask-position: 0%   center;
                mask-position: 0%   center;
    }
}

@keyframes gteaBannerV2Wave {
    0%   { box-shadow: 0 0 0 0                         var(--wave-color, rgba(255,255,255,0.45)); }
    70%  { box-shadow: 0 0 0 var(--wave-size, 18px)    rgba(0, 0, 0, 0); }
    100% { box-shadow: 0 0 0 0                         rgba(0, 0, 0, 0); }
}

@keyframes gteaBannerV2ModalFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes gteaBannerV2ModalScale {
    from { opacity: 0; transform: scale(0.9); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes gteaBannerV2ModalSlideDown {
    from { opacity: 0; transform: translateY(-20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Root ── */
.gtea-widget-banner-carousel-v2 {
    position: relative;

    .embla { overflow: hidden; }

    .embla__container {
        display: flex;
    }

    .embla__slide {
        flex: 0 0 100%;
        min-width: 0;
    }

    /* ── Item ── */
    .gtea-widget-banner-carousel-v2__item {
        position: relative;
        width: 100%;
        min-height: 60vh;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    /* ── Background image – full-width behind ── */
    .gtea-widget-banner-carousel-v2__item-bg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;

        picture {
            display: block;
            width: 100%;
            height: 100%;
        }

        img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
        }

        /* Overlay */
        &::after {
            content: '';
            position: absolute;
            inset: 0;
            pointer-events: none;
        }
    }

    /* ── Inner container – centered, max-width constrained ── */
    .gtea-widget-banner-carousel-v2__item-inner {
        position: relative;
        z-index: 1;
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 1rem;
        min-height: inherit;
        box-sizing: border-box;
        align-items: center;
        flex: 1;
    }

    /* ── Content column ── */
    .gtea-widget-banner-carousel-v2__item-content {
        display: flex;
        flex-direction: column;
        width: 50%;
        box-sizing: border-box;
        align-self: stretch;

        &.gtea-widget-banner-carousel-v2__item-content--left  { margin-right: auto; }
        &.gtea-widget-banner-carousel-v2__item-content--right { margin-left: auto; }

        > * + * { margin-top: 1rem; }

        > *:last-child { margin-bottom: 0; }
    }

    /* ── Two-column layout ── */
    .gtea-widget-banner-carousel-v2__item-inner--two-cols {
        .gtea-widget-banner-carousel-v2__item-content {
            margin-right: 0;
            margin-left: 0;
            flex: 0 1 auto; /* flex-basis:auto → width property takes effect */
            width: 50%;     /* default; overridable via inline style from Elementor control */
            min-width: 0;
        }

        .gtea-widget-banner-carousel-v2__item-col--right {
            flex: 0 1 auto; /* flex-basis:auto → width property takes effect */
            width: 50%;     /* default; overridable via inline style from Elementor control */
        }
    }

    /* ── Single-column layout (one column takes full width) ── */
    .gtea-widget-banner-carousel-v2__item-inner--one-col {
        .gtea-widget-banner-carousel-v2__item-content {
            width: 100% !important;
            flex: 0 0 100%;
            margin-right: 0;
            margin-left: 0;
        }

        .gtea-widget-banner-carousel-v2__item-col--right {
            width: 100% !important;
            flex: 0 0 100%;
        }
    }

    /* ── Column image ── */
    .gtea-widget-banner-carousel-v2__item-col-image {
        display: block;
        box-sizing: border-box;

        picture {
            display: block;
            width: 100%;
        }

        img {
            display: block;
            width: 100%;
            height: auto;
            object-fit: cover;
            object-position: center;
        }

        a {
            display: block;
        }
    }

    .gtea-widget-banner-carousel-v2__item-col--right {
        display: flex;
        flex-direction: column;
        flex: 0 1 auto; /* flex-basis:auto → width property takes effect */
        min-width: 0;
        box-sizing: border-box;
        align-items: flex-start;
        align-self: stretch;

        > * + * { margin-top: 1rem; }

        > *:last-child { margin-bottom: 0; }
    }

    /* ── Title ── */
    .gtea-widget-banner-carousel-v2__item-title {
        margin: 0 0 0.75rem;
    }

    /* Gradient word-by-word sweep — JS sequences per real rendered line */
    .gtea-widget-banner-carousel-v2__item-title--gradient {
        --title-from:     #ffffff;
        --title-to:       #cccccc;
        --title-duration: 1.5s;
        --title-delay:    0s;
    }

    /* Each word: inline-block for reliable mask + background-clip support.
       No trailing space inside the span — spacing comes from explicit
       .gtea-bcv2-space spans, avoiding inline-block whitespace stripping. */
    .gtea-widget-banner-carousel-v2__item-title--gradient .gtea-bcv2-word {
        display: inline-block;
        vertical-align: baseline;

        /* Text invisible until its animation starts */
        -webkit-text-fill-color: transparent;
        color: transparent;

        /* Gradient background: bright color (left half) → settled (right half) */
        background-image: linear-gradient(
            to right,
            var(--title-from) 50%,
            var(--title-to)   50%
        );
        background-size:         200% 100%;
        background-position:     0% center;
        -webkit-background-clip: text;
                background-clip: text;

        /* Mask: soft brush edge lives at 40-50% of the 200%-wide image.
           At mask-position 100% the visible range is 50-100% → all transparent
           → word is completely hidden before animation starts. */
        -webkit-mask-image: linear-gradient(
            to right,
            black 0%, black 40%,
            rgba(0, 0, 0, 0.7) 44%,
            rgba(0, 0, 0, 0.15) 48%,
            transparent 50%, transparent 100%
        );
                mask-image: linear-gradient(
            to right,
            black 0%, black 40%,
            rgba(0, 0, 0, 0.7) 44%,
            rgba(0, 0, 0, 0.15) 48%,
            transparent 50%, transparent 100%
        );
        -webkit-mask-size: 200% 100%;
                mask-size: 200% 100%;
        -webkit-mask-position: 100% center; /* fully hidden initially */
                mask-position: 100% center;
    }

    /* Space between words: invisible but occupies its natural glyph-advance width.
       display:inline keeps it in the normal text flow alongside inline-block words. */
    .gtea-widget-banner-carousel-v2__item-title--gradient .gtea-bcv2-space {
        display: inline;
        color: transparent;
    }

    /* Word currently sweeping — gradient paint brush left→right */
    .gtea-widget-banner-carousel-v2__item-title--gradient .gtea-bcv2-word--active {
        animation-name:            gteaBannerV2WordSweep;
        animation-timing-function: ease-out;
        animation-fill-mode:       forwards;
    }

    /* Word fully revealed — clean settled state, mask and clip removed */
    .gtea-widget-banner-carousel-v2__item-title--gradient .gtea-bcv2-word--revealed {
        -webkit-mask-image:      none;
                mask-image:      none;
        background:              none;
        -webkit-background-clip: border-box;
                background-clip: border-box;
        -webkit-text-fill-color: var(--title-to, #cccccc);
        color:                   var(--title-to, #cccccc);
    }

    /* Space after a revealed word also shows the settled color */
    .gtea-widget-banner-carousel-v2__item-title--gradient .gtea-bcv2-space--visible {
        color: var(--title-to, #cccccc);
    }

    /* ── Description ── */
    .gtea-widget-banner-carousel-v2__item-description {
        margin: 0;
        > *:last-child { margin-bottom: 0; }
    }

    /* ── CTA container ── */
    .gtea-widget-banner-carousel-v2__item-ctas-container {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .gtea-widget-banner-carousel-v2__item-cta {
        display: inline-flex;
        align-items: center;
        gap: 0.4em;
        text-decoration: none;
        cursor: pointer;
    }

    .gtea-widget-banner-carousel-v2__item-cta-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        svg { width: 1em; height: 1em; }
    }

    /* ── CTA icon-wrap (GteaHelperCta render pattern) ── */
    .gtea-widget-banner-carousel-v2__item-cta__icon-wrap {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }

    .gtea-widget-banner-carousel-v2__item-cta__icon-wrap svg {
        width: 1em;
        height: 1em;
    }

    .gtea-widget-banner-carousel-v2__item-cta__icon-clip {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: relative;
        flex-shrink: 0;
    }

    .gtea-widget-banner-carousel-v2__item-cta__icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .gtea-widget-banner-carousel-v2__item-cta__icon--clone {
        position: absolute;
        inset: 0;
        transform: translateX(-110%);
    }

    /* Slide animation */
    .gtea-widget-banner-carousel-v2__item-cta__icon-wrap--anim-slide
    .gtea-widget-banner-carousel-v2__item-cta__icon-clip {
        overflow: hidden;
    }

    .gtea-widget-banner-carousel-v2__item-cta__icon-wrap--anim-slide
    .gtea-widget-banner-carousel-v2__item-cta__icon:not(.gtea-widget-banner-carousel-v2__item-cta__icon--clone) {
        transition: transform var(--gtea-icon-anim-duration, 300ms) cubic-bezier(0.4, 0, 0.2, 1);
    }

    .gtea-widget-banner-carousel-v2__item-cta__icon-wrap--anim-slide
    .gtea-widget-banner-carousel-v2__item-cta__icon--clone {
        transition: transform var(--gtea-icon-anim-duration, 300ms) cubic-bezier(0.4, 0, 0.2, 1);
    }

    .gtea-widget-banner-carousel-v2__item-cta:hover
    .gtea-widget-banner-carousel-v2__item-cta__icon-wrap--anim-slide.gtea-widget-banner-carousel-v2__item-cta__icon-wrap--on-hover
    .gtea-widget-banner-carousel-v2__item-cta__icon:not(.gtea-widget-banner-carousel-v2__item-cta__icon--clone) {
        transform: translateX(110%);
    }

    .gtea-widget-banner-carousel-v2__item-cta:hover
    .gtea-widget-banner-carousel-v2__item-cta__icon-wrap--anim-slide.gtea-widget-banner-carousel-v2__item-cta__icon-wrap--on-hover
    .gtea-widget-banner-carousel-v2__item-cta__icon--clone {
        transform: translateX(0);
    }

    .gtea-widget-banner-carousel-v2__item-cta:focus
    .gtea-widget-banner-carousel-v2__item-cta__icon-wrap--anim-slide.gtea-widget-banner-carousel-v2__item-cta__icon-wrap--on-focus
    .gtea-widget-banner-carousel-v2__item-cta__icon:not(.gtea-widget-banner-carousel-v2__item-cta__icon--clone) {
        transform: translateX(110%);
    }

    .gtea-widget-banner-carousel-v2__item-cta:focus
    .gtea-widget-banner-carousel-v2__item-cta__icon-wrap--anim-slide.gtea-widget-banner-carousel-v2__item-cta__icon-wrap--on-focus
    .gtea-widget-banner-carousel-v2__item-cta__icon--clone {
        transform: translateX(0);
    }

    /* ── Video poster ── */
    .gtea-widget-banner-carousel-v2__item-video-poster {
        position: relative;
        overflow: hidden;
        aspect-ratio: 16 / 9; /* overridden by inline style */

        img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }

    .gtea-widget-banner-carousel-v2__item-video-overlay {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
    }

    .gtea-widget-banner-carousel-v2__item-video-title {
        color: #fff;
        text-align: center;
        padding: 0 1rem;
    }

    .gtea-widget-banner-carousel-v2__item-video-play {
        width: 56px;
        height: 56px;
        border: none;
        border-radius: 50%;
        background-color: rgba(0, 0, 0, 0.6);
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        transition: background-color 0.2s ease;
        flex-shrink: 0;

        &:hover { background-color: rgba(0, 0, 0, 0.85); }

        svg {
            width: 45%;
            height: 45%;
            fill: #fff;
            margin-left: 3px;
        }
    }

    /* ── Counter ── */
    .gtea-widget-banner-carousel-v2__item-counter {
        display: flex;
        flex-direction: column;
        gap: 0.15rem;
    }

    .gtea-widget-banner-carousel-v2__item-counter-wrap {
        display: flex;
        align-items: baseline;
        gap: 0.1em;
    }

    .gtea-widget-banner-carousel-v2__item-counter-value,
    .gtea-widget-banner-carousel-v2__item-counter-prefix,
    .gtea-widget-banner-carousel-v2__item-counter-suffix {
        font-variant-numeric: tabular-nums;
    }

    /* ── Combined component ── */
    .gtea-widget-banner-carousel-v2__item-combined {
        display: flex;
        align-items: center;
        gap: 1.5rem;
    }

    .gtea-widget-banner-carousel-v2__item-combined-left {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .gtea-widget-banner-carousel-v2__item-combined-counter {
        display: flex;
        flex-direction: column;
        gap: 0.1rem;
    }

    .gtea-widget-banner-carousel-v2__item-combined-number-wrap {
        display: flex;
        align-items: baseline;
        gap: 0.1em;
    }

    .gtea-widget-banner-carousel-v2__item-combined-value,
    .gtea-widget-banner-carousel-v2__item-combined-prefix,
    .gtea-widget-banner-carousel-v2__item-combined-suffix {
        font-variant-numeric: tabular-nums;
    }

    .gtea-widget-banner-carousel-v2__item-combined-image img {
        display: block;
        max-width: 100%;
        height: auto;
    }

    .gtea-widget-banner-carousel-v2__item-combined-right {
        flex-shrink: 0;
    }

    /* ── Combined play button (with wave) ── */
    .gtea-widget-banner-carousel-v2__item-combined-play {
        --wave-color:    rgba(255, 255, 255, 0.45);
        --wave-size:     18px;

        width: 64px;
        height: 64px;
        border: none;
        border-radius: 50%;
        background-color: rgba(255, 255, 255, 0.15);
        cursor: pointer;
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.25rem;
        padding: 0;
        animation: gteaBannerV2Wave 1.5s ease-out infinite;

        svg {
            width: 40%;
            height: 40%;
            fill: #fff;
            margin-left: 3px;
            flex-shrink: 0;
        }
    }

    .gtea-widget-banner-carousel-v2__item-combined-play-label {
        font-size: 0.65em;
        line-height: 1;
    }

    .gtea-widget-banner-carousel-v2__item-combined-cta-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        svg { width: 1em; height: 1em; }
    }

    /* ── Embla controls ── */
    .embla__controls {
        position: relative;
    }

    .embla__buttons {
        display: flex;
        gap: 0.5rem;
    }

    .embla__button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: none;
        background: transparent;
        cursor: pointer;
        padding: 0;
        width: 45px;
        height: 45px;
        svg { pointer-events: none; }
    }

    /* ── Dots ── */
    .embla__dots {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        padding: 0.75rem 0;
    }

    .embla__dot {
        display: block;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        border: 1px solid currentColor;
        background-color: transparent;
        cursor: pointer;
        padding: 0;
        transition: background-color 0.2s ease;

        &.embla__dot--selected { background-color: currentColor; }
    }
}

/* ============================================================
   Shared Modal (scoped to widget root via nearest ancestor)
   ============================================================ */
.gtea-widget-banner-carousel-v2__modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999;
    align-items: center;
    justify-content: center;

    &[aria-hidden="false"] { display: flex; }

    .gtea-widget-banner-carousel-v2__modal-backdrop {
        position: absolute;
        inset: 0;
        background-color: rgba(0, 0, 0, 0.75);
        cursor: pointer;
    }

    .gtea-widget-banner-carousel-v2__modal-container {
        position: relative;
        z-index: 1;
        background-color: #000;
        width: calc(100% - 2rem);
        max-width: 900px;
        border-radius: 4px;
        overflow: hidden;
        animation-fill-mode: both;
    }

    .gtea-widget-banner-carousel-v2__modal-container[data-bcv2-animation="fade"] {
        animation-name: gteaBannerV2ModalFade;
        animation-duration: 300ms;
        animation-timing-function: ease-out;
    }

    .gtea-widget-banner-carousel-v2__modal-container[data-bcv2-animation="scale"] {
        animation-name: gteaBannerV2ModalScale;
        animation-duration: 300ms;
        animation-timing-function: ease-out;
    }

    .gtea-widget-banner-carousel-v2__modal-container[data-bcv2-animation="slide-down"] {
        animation-name: gteaBannerV2ModalSlideDown;
        animation-duration: 300ms;
        animation-timing-function: ease-out;
    }

    .gtea-widget-banner-carousel-v2__modal-close {
        position: absolute;
        top: 0.5rem;
        right: 0.5rem;
        z-index: 2;
        width: 36px;
        height: 36px;
        border: none;
        border-radius: 50%;
        background-color: rgba(0, 0, 0, 0.5);
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        transition: background-color 0.2s ease;

        &:hover { background-color: rgba(0, 0, 0, 0.9); }

        svg {
            width: 60%;
            height: 60%;
            fill: #fff;
            pointer-events: none;
        }
    }

    .gtea-widget-banner-carousel-v2__modal-video-wrap {
        width: 100%;
        aspect-ratio: 16 / 9;

        iframe,
        video {
            display: block;
            width: 100%;
            height: 100%;
            border: none;
        }
    }
}