/**
 * Module: Gallery Variant Composition Layer
 * Target: src/core_apps/frontend/static/frontend/themes/_shared/sections/gallery/gallery-variants.css
 * 
 * Specifications (HMS-Grade):
 * - Rule A: Zero sibling positional dependence
 * - Rule B: Rigid Static Weight Budget (Limit: 10 KB uncompressed)
 * - Rule C: Absolute scoping containment
 * - Rule D: Progressive Enhancement: Native CSS Scroll Snap (No-JS Carousel)
 */

.page-home .home-composer .section-gallery {
    position: relative;
    width: 100%;
    padding: var(--spacing-xl, 4rem) 0;
}

/* Rigid multi-tenant aspect ratio normalization */
.page-home .home-composer .section-gallery img {
    width: 100%;
    object-fit: cover;
    overflow: hidden;
    display: block;
}


/* =============================================================================
   1. VARIANT: MASONRY (Asymmetric Multi-Column Layout)
   ============================================================================= */
.page-home .home-composer .section-gallery--masonry .masonry-wall {
    column-count: 1;
    column-gap: var(--spacing-md, 1rem);
    padding: 0 var(--spacing-md, 1rem);
}

@media (min-width: 640px) {
    .page-home .home-composer .section-gallery--masonry .masonry-wall {
        column-count: 2;
    }
}

@media (min-width: 1024px) {
    .page-home .home-composer .section-gallery--masonry .masonry-wall {
        column-count: 3;
    }
}

.page-home .home-composer .section-gallery--masonry .masonry-item {
    display: inline-block;
    width: 100%;
    margin-bottom: var(--spacing-md, 1rem);
    break-inside: avoid;
}


/* =============================================================================
   2. VARIANT: CAROUSEL (Horizontal Scrolling Grid with Snap Alignment)
   ============================================================================= */
.page-home .home-composer .section-gallery--carousel .carousel-container {
    display: flex;
    overflow-x: auto;
    gap: var(--spacing-md, 1rem);
    padding: var(--spacing-md, 1rem);
    
    /* The Sacred No-JS Progressive Scroll Snap Implementation */
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

/* Hide scrollbars but retain functionality */
.page-home .home-composer .section-gallery--carousel .carousel-container::-webkit-scrollbar {
    display: none;
}
.page-home .home-composer .section-gallery--carousel .carousel-container {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.page-home .home-composer .section-gallery--carousel .carousel-slide {
    flex: 0 0 80%;
    max-width: 400px;
    scroll-snap-align: start;
}

@media (min-width: 768px) {
    .page-home .home-composer .section-gallery--carousel .carousel-slide {
        flex: 0 0 33.33%;
    }
}