/* 
 * CAROUSEL 3 RANGÉES HORIZONTALES - HEADER
 * Landing Page Mariage Coline - Emotion Prestige
 * 3 rangées verticales avec défilement horizontal asynchrone
 */

/* Header avec carousel 3 rangées */
.hero-carousel {
    position: relative;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    background: #ffffff;
}

/* Container principal des 3 rangées */
.three-rows-carousel {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    gap: 1rem;
    padding: 1rem 0;
}

/* Chaque rangée */
.row-track {
    flex: 1;
    display: flex;
    flex-direction: row;
    opacity: 0;
    transition: opacity 1s ease;
    overflow: hidden;
    position: relative;
    width: max-content; /* Largeur adaptée au contenu */
    min-width: 100%; /* Au minimum la largeur de l'écran */
}

/* Animations différentes pour chaque rangée (asynchrone) */
.row-1 {
    animation: horizontalScroll1 45s linear infinite;
}

.row-2 {
    animation: horizontalScroll2 38s linear infinite;
    animation-delay: -15s; /* Décalage pour effet asynchrone */
}

.row-3 {
    animation: horizontalScroll3 52s linear infinite;
    animation-delay: -30s; /* Décalage pour effet asynchrone */
}

/* Animations de défilement horizontal pour chaque rangée */
@keyframes horizontalScroll1 {
    0% { transform: translateX(0); }
    100% { transform: translateX(-66.66%); }
}

@keyframes horizontalScroll2 {
    0% { transform: translateX(0); }
    100% { transform: translateX(-66.66%); }
}

@keyframes horizontalScroll3 {
    0% { transform: translateX(0); }
    100% { transform: translateX(-66.66%); }
}

/* Éléments individuels dans chaque rangée */
.row-item {
    flex-shrink: 0;
    height: 100%;
    margin-right: 2rem; /* Plus d'espacement */
    display: flex;
    justify-content: center;
    align-items: center;
    width: auto; /* Largeur automatique */
    min-width: 200px; /* Largeur minimale */
    max-width: 400px; /* Largeur maximale pour éviter les images trop grandes */
}

/* Images dans les rangées avec correction d'orientation */
.row-item img {
    width: auto;
    height: 85%; /* Réduire un peu la hauteur pour éviter les coupures */
    max-width: 350px; /* Largeur maximale */
    max-height: 100%;
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    background: #f8f8f8;
    
    /* Auto-orientation des images */
    image-orientation: from-image;
    transform-origin: center;
}

/* Effet hover */
.row-item:hover img {
    transform: scale(1.03);
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.15);
    border-radius: 16px;
}

/* Responsive pour mobile */
@media (max-width: 768px) {
    .three-rows-carousel {
        gap: 0.5rem;
        padding: 0.5rem 0;
    }
    
    .row-item {
        margin-right: 1rem;
        min-width: 150px;
    }
    
    .row-item img {
        max-width: 200px;
        border-radius: 8px;
    }
    
    /* Ralentir les animations sur mobile */
    .row-1 { animation-duration: 55s; }
    .row-2 { animation-duration: 48s; }
    .row-3 { animation-duration: 62s; }
}