/* ==============================================
   Grid to Carousel — gtc.css
   Pure CSS scroll-snap. No Swiper dependency.
   ============================================== */

/* ── Carousel wrapper ── */
.gtc-carousel-wrap {
    width: 100%;
    overflow: hidden;
        padding: 20px;
}

/* ── Scroll track ── */
.gtc-track {
    display: flex;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;        /* Firefox */
    -ms-overflow-style: none;     /* IE/Edge */
    gap: 12px;
}

.gtc-track::-webkit-scrollbar {
    display: none;                /* Chrome/Safari */
}

/* ── Each slide ── */
.gtc-slide {
    scroll-snap-align: start;
    flex-shrink: 0;
    /* flex-basis set inline via JS based on slidesPerView */
}

/* Make cloned Elementor containers fill the slide */
.gtc-slide > .e-con {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
}

/* ── Dots ── */
.gtc-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
}

.gtc-dot {
    height: 8px;
    width: 8px;
    border-radius: 99px;
    border: none;
    padding: 0;
    cursor: pointer;
    background: #d1d1d1;
    transition: width .25s ease, background .25s ease;
}

.gtc-dot-active {
    width: 22px;        /* overridden by inline style from PHP */
    background: #f97316;/* overridden by inline style from PHP */
}