/* css/components/carousel.css */

.carousel-container {
    position: relative;
    padding-block: var(--sp-4);
    /* Fade edges to indicate more content */
    -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
    mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}

.carousel-track {
    display: flex;
    gap: var(--sp-3);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding-inline: max(var(--sp-3), calc((100vw - 1440px) / 2 + var(--sp-3))); /* Align with container grid */
    
    /* Hide native scrollbar but keep functionality */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE and Edge */
}

.carousel-track::-webkit-scrollbar {
    display: none; /* Chrome, Safari and Opera */
}

/* Elements inside the track */
.carousel-item {
    scroll-snap-align: start;
    flex: 0 0 85vw; /* Mobile width */
    max-width: 400px; /* Desktop max width */
}

@media (min-width: 768px) {
    .carousel-item {
        flex: 0 0 45vw;
    }
}

@media (min-width: 1024px) {
    .carousel-item {
        flex: 0 0 300px;
    }
}

/* --- RESPONSIVE MOBILE (Carousel) --- */
@media (max-width: 768px) {
    .carousel-item { 
        flex: 0 0 75vw; /* Occupe 75% de l'écran pour bien montrer la carte suivante */
    } 
    .carousel-track { 
        padding-inline: var(--sp-2); 
        gap: var(--sp-2); 
    }
}