/* WP Scrolling Gallery CSS */
.wpsg-container {
    --wpsg-cols: 4;
    --wpsg-rows: 2;
    --wpsg-speed: 20s;
    --wpsg-gap: 10px;
    --wpsg-copies: 2;
    --wpsg-radius: 8px;

    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    
    /* Disables all click interactions within the entire container */
    pointer-events: none; 
    
    /* Container queries to calculate children sizing reliably */
    container-type: inline-size;
}

.wpsg-track {
    display: flex;
    width: fit-content;
    will-change: transform; /* Hardware acceleration for smooth scrolling */
}

.wpsg-grid {
    display: grid;
    box-sizing: content-box;
    
    /* Generate rows dynamically based on CSS variable */
    grid-template-rows: repeat(var(--wpsg-rows), 1fr);
    grid-auto-flow: column;
    
    /* 
     * Formula to enforce exact columns within the viewport.
     * Subtracts the total gap widths from 100% container width,
     * then divides by number of visible columns.
     */
    grid-auto-columns: calc( (100cqi - ((var(--wpsg-cols) - 1) * var(--wpsg-gap))) / var(--wpsg-cols) );
    gap: var(--wpsg-gap);
    
    /* Separators act as the gap between the cloned track grids */
    padding-right: var(--wpsg-gap);
}

.wpsg-item {
    border-radius: var(--wpsg-radius, 8px);
    overflow: hidden;
    background-color: #f3f4f6; /* Fallback for empty spaces / loading */
    aspect-ratio: 16 / 9; /* Ensures uniform scaling */
    display: flex;
    align-items: center;
    justify-content: center;
}

.wpsg-item img,
.wpsg-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    display: block;
}

/* Animations */
.wpsg-autoplay {
    animation: wpsg-scroll var(--wpsg-speed) linear infinite;
}

/* Scrolling into the right */
.wpsg-scroll-right.wpsg-autoplay {
    animation-direction: reverse;
}

/* Scrolling to the left */
.wpsg-scroll-left.wpsg-autoplay {
    animation-direction: normal;
}

/* The loop seamlessly connects exactly one copy length */
@keyframes wpsg-scroll {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(calc(-100% / var(--wpsg-copies)), 0, 0);
    }
}