/**
 * Photo Gallery Styles
 * 
 * Styles for seamless infinite scrolling photo gallery slider
 */

/* Smooth infinite scroll animation */
@keyframes photo-gallery-scroll {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(-50%, 0, 0);
    }
}

/* Photo Gallery specific styles */
.photo-gallery-wrapper {
    width: 100%;
    overflow: hidden;
    margin: 20px 0;
    position: relative;
}

.photo-gallery-carousel {
    position: relative;
    width: 100%;
    height: 340px; /* Maximum height */
    display: flex;
    align-items: flex-start;
    will-change: transform;
    animation-play-state: running;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

.photo-gallery-slide {
    width: auto;
    margin-right: 15px;
    display: flex;
    align-items: flex-start; /* Top align */
    justify-content: center;
    flex-shrink: 0; /* Prevent slides from shrinking */
}

.photo-gallery-image-wrapper {
    display: flex;
    align-items: flex-start; /* Top align */
    justify-content: center;
    height: 100%;
    max-width: 400px; /* Maximum width */
    max-height: 340px; /* Maximum height */
}

.photo-gallery-image {
    max-width: 400px; /* Maximum width */
    max-height: 340px; /* Maximum height */
    width: auto;
    height: auto;
    object-fit: contain; /* Maintain aspect ratio */
    object-position: top; /* Align to top */
    display: block;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .photo-gallery-carousel {
        height: 280px;
    }
    
    .photo-gallery-image-wrapper {
        max-height: 280px;
    }
    
    .photo-gallery-image {
        max-height: 280px;
    }
}