/**
 * Parallax Gallery Scroll Styles
 */

.wml-parallax-gallery {
    width: 100%;
}

.wml-pg-container {
    width: 100%;
    height: 640px;
    /* Default, overridden by control */
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    /* Hide scrollbar for cleaner look (optional, matches standard modern design) */
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE 10+ */
}

.wml-pg-container::-webkit-scrollbar {
    display: none;
    /* Chrome/Safari */
}

.wml-pg-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    /* Default */
    padding: 40px;
    max-width: 1200px;
    margin: 0 auto;
    align-items: start;
}

.wml-pg-column {
    display: grid;
    gap: 40px;
    /* Default */
    width: 100%;
    will-change: transform;
    /* Optimize for animation */
}

.wml-pg-item {
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
}

.wml-pg-img {
    width: 100%;
    height: 320px;
    /* Approx h-80 */
    object-fit: cover;
    object-position: left top;
    display: block;
    border-radius: 8px;
}

/* Responsive Breakpoints */

/* Tablet (2 columns) */
@media (max-width: 1024px) {
    .wml-pg-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Hide 3rd column content or merge? 
       The React code uses grid-cols-1 md:grid-cols-2 lg:grid-cols-3.
       However, we split images into 3 fixed arrays in PHP.
       Simply hiding the 3rd column would lose images.
       For a robust responsive implementation with fixed PHP arrays, 
       we might need to just stack them or accept that on mobile 
       it's still 3 columns but very thin, OR use flex/wrap.
       
       Actually, standard behavior for this type of parallax grid on mobile 
       is often just 1 column. 
       
       Let's try to make it graceful:
       On mobile, we can display: block for the grid, so columns stack vertically.
    */
}

@media (max-width: 768px) {
    .wml-pg-grid {
        grid-template-columns: 1fr;
        padding: 20px;
        gap: 20px;
    }

    .wml-pg-column {
        gap: 20px;
    }

    /* Disable parallax transform on mobile for better UX? 
       Or keep it. The JS will still apply transforms. 
       If columns stack, parallax might look weird (overlapping).
       We should probably disable parallax on mobile via JS check or CSS override.
    */
}