.carousel-container {
    width: 100%;
    position: relative;
    overflow: hidden;
    height: 80vh;
}

.slides {
    display: flex;
    height: 100%;
}

.slide {
    flex-shrink: 0;
    position: relative;
}

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

.slide-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    color: white;
    padding: 30px 0;
}

.slide-content .title {
    font-size: 28px;
    margin-bottom: 8px;
}

.slide-content p {
    font-size: 16px;
    opacity: 0.9;
}

/* Badge pausa */
.pause-hint {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(0,0,0,0.6);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    opacity: 0;
    transition: opacity 0.3s;
    z-index: 10;
}

.carousel-container:hover .pause-hint {
    opacity: 1;
}

/* ============================================
   CONFIGURAZIONI PER 1 SLIDE
   ============================================ */
.carousel-1 .slides {
    width: 100%;
    /* Nessuna animazione per 1 sola slide */
}

.carousel-1 .slide {
    width: 100%;
}

/* ============================================
   CONFIGURAZIONI PER 2 SLIDE
   ============================================ */
.carousel-2 .slides {
    width: 200%;
    animation: slide-2 8s infinite;
}

.carousel-2 .slide {
    width: 50%;
}

@keyframes slide-2 {
    0%, 45% {
        transform: translateX(0%);
    }
    50%, 95% {
        transform: translateX(-50%);
    }
    100% {
        transform: translateX(0%);
    }
}

.carousel-2:hover .slides {
    animation-play-state: paused;
}

/* ============================================
   CONFIGURAZIONI PER 3 SLIDE
   ============================================ */
.carousel-3 .slides {
    width: 300%;
    animation: slide-3 12s infinite;
}

.carousel-3 .slide {
    width: 33.333%;
}

@keyframes slide-3 {
    0%, 30% {
        transform: translateX(0%);
    }
    33.33%, 63.33% {
        transform: translateX(-33.333%);
    }
    66.66%, 96.66% {
        transform: translateX(-66.666%);
    }
    100% {
        transform: translateX(0%);
    }
}

.carousel-3:hover .slides {
    animation-play-state: paused;
}

/* ============================================
   CONFIGURAZIONI PER 4 SLIDE
   ============================================ */
.carousel-4 .slides {
    width: 400%;
    animation: slide-4 16s infinite;
}

.carousel-4 .slide {
    width: 25%;
}

@keyframes slide-4 {
    0%, 22.5% {
        transform: translateX(0%);
    }
    25%, 47.5% {
        transform: translateX(-25%);
    }
    50%, 72.5% {
        transform: translateX(-50%);
    }
    75%, 97.5% {
        transform: translateX(-75%);
    }
    100% {
        transform: translateX(0%);
    }
}

.carousel-4:hover .slides {
    animation-play-state: paused;
}

/* ============================================
   CONFIGURAZIONI PER 5 SLIDE
   ============================================ */
.carousel-5 .slides {
    width: 500%;
    animation: slide-5 20s infinite;
}

.carousel-5 .slide {
    width: 20%;
}

@keyframes slide-5 {
    0%, 18% {
        transform: translateX(0%);
    }
    20%, 38% {
        transform: translateX(-20%);
    }
    40%, 58% {
        transform: translateX(-40%);
    }
    60%, 78% {
        transform: translateX(-60%);
    }
    80%, 98% {
        transform: translateX(-80%);
    }
    100% {
        transform: translateX(0%);
    }
}

.carousel-5:hover .slides {
    animation-play-state: paused;
}