/* Carousel Base Styles */
.carousel-container {
    width: 100%;
    overflow: hidden;
}

.carousel {
    gap:var(--gap);
}

.carousel-all,
.carousel-mobile{
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    cursor: grab;
    user-select: none;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.carousel::-webkit-scrollbar {
    display: none;
}
.carousel.dragging {
    cursor: grabbing;
    scroll-behavior: auto;
    scroll-snap-type: none;
}
.carousel-all .carousel-item,
.carousel-mobile .carousel-item {
    flex: 0 0 auto;
    scroll-snap-align: start;
    transition: transform 0.2s ease;
}
.carousel.dragging .carousel-item {
    pointer-events: none;
}

.carousel-item .media-wrapper video:hover,
.carousel-item .media-wrapper img:hover {
    transform: scale(1.02);
    border-radius: var(--radius);
}
.carousel-item .media-wrapper{
    border-radius: var(--radius);
}

@media(min-width:772px){
    .carousel-mobile{
        display: grid;
        grid-template-columns:repeat(3,1fr);
    }
    .carousel-mobile .carousel-item {
        flex:none;
    }
}


/* Width Classes - Full Width (showing partial next item) */
.carousel-item.w-full {
    width: calc(100% - 48px);
}

.carousel-item.w-full-peek {
    width: calc(100% / 1.15);
}

/* Width Classes - Multiple Items */
.carousel-item.w-1-2 {
    width: calc((100% - 16px) / 2);
}

.carousel-item.w-1-3 {
    width: calc((100% - 32px) / 3);
}

.carousel-item.w-1-4 {
    width: calc((100% - 48px) / 4);
}

.carousel-item.w-1-5 {
    width: calc((100% - 64px) / 5);
}

.carousel-item.w-1-6 {
    width: calc((100% - 80px) / 6);
}

/* Width Classes - Showing Peek of Next Item */
.carousel-item.w-1-2-peek {
    width: calc((100% - 16px) / 2.2);
}

.carousel-item.w-1-3-peek {
    width: calc((100% - 32px) / 3.2);
}

.carousel-item.w-1-4-peek {
    width: calc((100% - 48px) / 4.2);
}

.carousel-item.w-1-5-peek {
    width: calc((100% - 64px) / 5.2);
}

/* Grid Mode (no carousel behavior) */
.carousel.carousel-grid {
    overflow-x: visible;
    flex-wrap: wrap;
    cursor: default;
    scroll-snap-type: none;
}

.carousel.carousel-grid .carousel-item {
    scroll-snap-align: none;
}

.carousel.carousel-grid .carousel-item:hover {
    transform: none;
}

/* Fixed Width Classes */
.carousel-item.w-200 { width: 200px; }
.carousel-item.w-250 { width: 250px; }
.carousel-item.w-280 { width: 280px; }
.carousel-item.w-300 { width: 300px; }
.carousel-item.w-350 { width: 350px; }
.carousel-item.w-400 { width: 400px; }

/* Responsive Width Classes */
@media (max-width: 773px) {
    .carousel{
        gap:var(--gap);
    }
    .carousel-item {
        padding-left: 1rem;
    }
    .carousel-item.w-sm-full { width: calc(100% - 48px); }
    .carousel-item.w-sm-full-peek { width: calc(100% / 1.15); }
    .carousel-item.w-sm-1-2 { width: calc((100% - 16px) / 2); }
    .carousel-item.w-sm-1-3 { width: calc((100% - 32px) / 3); }
    .carousel-item.w-sm-1-2-peek { width: calc((100% - 16px) / 2.2); }
    .carousel-item.w-sm-1-3-peek { width: calc((100% - 32px) / 3.2); }
}

@media (min-width: 773px) {
    .carousel-all .carousel-item.w-lg-1-3 { width: calc((100% - 32px) / 3); }
    .carousel-all .carousel-item.w-lg-1-4 { width: calc((100% - 48px) / 4); }
    .carousel-all .carousel-item.w-lg-1-5 { width: calc((100% - 64px) / 5); }
    .carousel-all .carousel-item.w-lg-1-6 { width: calc((100% - 80px) / 6); }
    .carousel-all .carousel-item.w-lg-200 { width: 200px; }
    .carousel-all .carousel-item.w-lg-280 { width: 280px; }
    .carousel-all .carousel-item.w-lg-300 { width: 300px; }
    
    /* Grid mode on desktop */
    .carousel.carousel-lg-grid {
        overflow-x: visible;
        flex-wrap: wrap;
        cursor: default;
        scroll-snap-type: none;
    }
    
    .carousel.carousel-lg-grid .carousel-item {
        scroll-snap-align: none;
    }
    
    .carousel.carousel-lg-grid .carousel-item:hover {
        transform: scale(1.02);
    }
}