/* =========================================================
   SPECTRAFLOW
   Spectra + Elementor
   Desktop > 1024px
   Mobile + Tablet <= 1024px
   ========================================================= */


/* =========================================================
   MAIN CAROUSEL
   Spectra: .maincol
   Elementor: .sf-carousel
   ========================================================= */

.maincol,
.sf-carousel{
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;

    overflow-x:auto !important;
    overflow-y:hidden !important;

    width:100% !important;
    max-width:100% !important;

    gap:32px !important;

    padding-inline:15vw !important;

    scroll-snap-type:x mandatory !important;
    scroll-padding-inline:15vw !important;

    /* browser native smooth scrolling */
    scroll-behavior:smooth !important;

    -webkit-overflow-scrolling:touch !important;

    scrollbar-width:none !important;

    cursor:grab;

    overscroll-behavior-x:contain !important;
}


/* Hide scrollbar Chrome / Safari / Edge */

.maincol::-webkit-scrollbar,
.sf-carousel::-webkit-scrollbar{
    display:none !important;
    width:0 !important;
    height:0 !important;
}


/* =========================================================
   SPECTRA CARDS
   ========================================================= */

.maincol > .hords,

.sf-carousel > .sf-card{
    flex:0 0 70vw !important;

    width:70vw !important;
    min-width:70vw !important;
    max-width:70vw !important;

    scroll-snap-align:center !important;
    scroll-snap-stop:always !important;

    transform:scale(.92);
    opacity:.55;

    transition:
        transform .35s ease,
        opacity .35s ease !important;

    will-change:transform, opacity;
}


/* =========================================================
   ACTIVE CARD
   ========================================================= */

.maincol > .hords.active,

.sf-carousel > .sf-card.active{
    transform:scale(1);
    opacity:1;
}


/* =========================================================
   SPECTRAFLOW NAVIGATION
   ========================================================= */

.sf-nav{
    display:flex !important;
    align-items:center !important;

    gap:14px !important;

    margin-top:22px !important;

    /*
       Deliberately keeps the navigation long.
       We are NOT forcing it to 30% / 40%.
    */
    padding-inline:15vw !important;

    width:auto !important;
}


/* =========================================================
   NAVIGATION BUTTONS
   ========================================================= */

.sf-prev,
.sf-next{
    flex:0 0 46px !important;

    width:46px !important;
    min-width:46px !important;
    max-width:46px !important;

    height:46px !important;
    min-height:46px !important;
    max-height:46px !important;

    padding:0 !important;

    border-radius:999px !important;
    border:none !important;

    background:#f1f3f5 !important;
    color:#111827 !important;

    font-size:20px !important;
    line-height:1 !important;

    cursor:pointer !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    transition:
        background .25s ease,
        opacity .25s ease !important;
}


.sf-prev:hover,
.sf-next:hover{
    background:#e5e7eb !important;
}


.sf-prev:disabled,
.sf-next:disabled{
    opacity:.35 !important;
    cursor:default !important;
}


/* =========================================================
   PROGRESS
   ========================================================= */

.sf-progress{
    flex:1 1 auto !important;

    width:auto !important;

    height:3px !important;

    background:#e5e7eb !important;

    border-radius:999px !important;

    overflow:hidden !important;
}


.sf-progress-bar{
    width:0%;

    height:100% !important;

    background:#7E828A !important;

    border-radius:999px !important;

    transition:width .25s ease !important;
}


/* =========================================================
   MOBILE + TABLET
   IMPORTANT:
   Tablet is intentionally treated as MOBILE.
   No separate tablet layout.
   ========================================================= */

@media (max-width:1024px){

    .maincol,
    .sf-carousel{
        gap:25px !important;

        padding-inline:15vw !important;

        scroll-padding-inline:15vw !important;

        scroll-behavior:smooth !important;
    }


    .maincol > .hords,
    .sf-carousel > .sf-card{
        /*
           Mobile card.
           The JS does NOT override this.
        */
        flex:0 0 70vw !important;

        width:70vw !important;
        min-width:70vw !important;
        max-width:70vw !important;

        scroll-snap-align:center !important;

        transform:scale(.92);
        opacity:.55;
    }


    .maincol > .hords.active,
    .sf-carousel > .sf-card.active{
        transform:scale(1);
        opacity:1;
    }


    .sf-nav{
        gap:14px !important;

        padding-inline:15vw !important;

        margin-top:22px !important;
    }


    .sf-prev,
    .sf-next{
        flex:0 0 46px !important;

        width:46px !important;
        min-width:46px !important;
        max-width:46px !important;

        height:46px !important;
        min-height:46px !important;
        max-height:46px !important;
    }


    .sf-progress{
        flex:1 1 auto !important;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width:480px){

    .maincol,
    .sf-carousel{
        gap:25px !important;

        padding-inline:15vw !important;

        scroll-padding-inline:15vw !important;
    }


    .maincol > .hords,
    .sf-carousel > .sf-card{
        flex:0 0 70vw !important;

        width:70vw !important;
        min-width:70vw !important;
        max-width:70vw !important;
    }


    .sf-nav{
        padding-inline:15vw !important;
    }

}


/* =========================================================
   DRAGGING
   ========================================================= */

.maincol.sf-dragging,
.sf-carousel.sf-dragging{
    cursor:grabbing !important;

    scroll-behavior:auto !important;
    scroll-snap-type:none !important;
}


.maincol.sf-dragging *,
.sf-carousel.sf-dragging *{
    user-select:none !important;
}