/*
 * Plugin Name: WP Gallery Scroller
 * Description: Styles for the dynamic image gallery.
 */

.wp-gallery-scroller-container {
    display: flex;
    align-content: space-between;
	justify-content: space-between;
	flex-wrap: wrap; /* Allow columns to wrap on smaller screens */
}

.slider {
    height: var(--windowHeight);
	width: var(--width);
    overflow: hidden;
    margin: 0; /* Reset margin from original code to use gap in flex container */
    flex-shrink: 0; /* Prevent columns from shrinking below their width */
    flex-grow: 0; /* Prevent columns from growing */
}

.slider .list {
    display: flex;
    flex-direction: column; /* Stack items vertically */
    width: 100%;
    min-height: calc(var(--height) * var(--imgsPerCol));
    position: relative;
}

.slider .list .item {
    width: var(--width);
    height: var(--height);
    position: absolute;
    top: 100%;
    animation: autoRun var(--speed) linear infinite;
    transition: filter 0.5s;
    animation-delay: calc( (var(--speed) / var(--imgsPerCol)) * (var(--position) - 1) - var(--speed))!important;
    background-color: transparent; /* Changed from aqua to transparent */
}

.slider .list .item img {
    width: 100%;
    height: 100%; /* Ensure image fills the item container */
    object-fit: cover; /* Crop image to fit without distortion */
    display: block; /* Remove extra space below image */
}

@keyframes autoRun {
    from {
        top: 100%;
    }
    to {
        top: calc(var(--height) * -1);
    }
}

.slider:hover .item {
    animation-play-state: paused!important;
    filter: grayscale(1);
}

.slider .item:hover {
    filter: grayscale(0);
}

.slider[reverse="true"] .item {
    animation: reversePlay var(--speed) linear infinite;
}

@keyframes reversePlay {
    from {
        top: calc(var(--height) * -1);
    }
    to {
        top: 100%;
    }
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .wp-gallery-scroller-container {
        flex-direction: column; /* Stack columns vertically on small screens */
        align-items: center; /* Center stacked columns */
    }
    .slider {
        margin-bottom: 20px; /* Add space between stacked columns */
    }
}

@media (max-width: 480px) {
    .slider {
        width: 90vw; /* Make columns fill more of the screen width */
    }
    /* Adjust --width variable in shortcode for smaller screens if needed */
}