/* ============================================
   Photo Carousel Component - BEM Architecture
   ============================================
   
   Block: photo-carousel
   Purpose: Horizontally scrolling image carousel
   Features: Continuous horizontal scroll, seamless loop
   ============================================ */

/* Block: photo-carousel */
.photo-carousel {
    position: relative;
    width: 100%;
    height: 180px;
    overflow: hidden;
    opacity: 0.6;
    background: var(--color-surface, #141414);
}

/* Element: Track - container that moves horizontally */
.photo-carousel__track {
    display: flex;
    height: 100%;
    width: max-content;
    animation: photoCarouselScroll 60s linear infinite;
}

/* Element: Image - individual photo in the carousel */
.photo-carousel__image {
    flex: 0 0 auto;
    width: 25vw;
    height: 100%;
    background-size: cover;
    background-position: center 30%;
    background-repeat: no-repeat;
    filter: grayscale(20%) brightness(0.8);
    position: relative;
}

/* Modifier: Wider images for 3-image carousels (event-info page) */
.photo-carousel--three-images .photo-carousel__image {
    width: 33.33vw;
}

/* Modifier: Adjust animation for 3-image carousels */
.photo-carousel--three-images .photo-carousel__track {
    animation: photoCarouselScroll3 60s linear infinite;
}

@keyframes photoCarouselScroll3 {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100vw);
    }
}

/* ============================================
   Animation: Horizontal Scroll
   ============================================ */

@keyframes photoCarouselScroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100vw);
    }
}

/* ============================================
   Responsive Design
   ============================================ */

/* Tablet and smaller */
@media (max-width: 768px) {
    .photo-carousel {
        height: 180px;
    }
    
    .photo-carousel__track {
        animation: photoCarouselScroll 50s linear infinite;
    }
}

/* Mobile */
@media (max-width: 480px) {
    .photo-carousel {
        height: 180px;
    }
    
    .photo-carousel__track {
        animation: photoCarouselScroll 40s linear infinite;
    }
}

/* ============================================
   Accessibility: Reduced Motion Support
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    .photo-carousel__track {
        animation: none;
    }
    
    .photo-carousel {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
    }
    
    .photo-carousel__image {
        scroll-snap-align: start;
    }
}

/* ============================================
   Performance Optimization
   ============================================ */

/* GPU acceleration for smooth scrolling */
.photo-carousel__track {
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}