/**
 * Module: Gallery Variant Composition Layer
 * Target: src/core_apps/frontend/static/frontend/themes/_shared/sections/gallery/gallery-variants.css
 *
 * Variant Identity Rules:
 *   default  → Tabbed category gallery with image hover zoom
 *   masonry  → Asymmetric multi-column wall with hover effects
 *   carousel → Horizontal snap-scroll with peek edges
 *
 * 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)
 */


/* =============================================================================
   0. SHARED BASE
   ============================================================================= */

.page-home .home-composer .section-gallery {
    position: relative;
    padding: clamp(3rem, 6vw, 5rem) 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg, 2.5rem);
}

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


/* =============================================================================
   1. VARIANT: DEFAULT — Tabbed Category Gallery
   
   Design: Category buttons for filtering, image grid with hover zoom + 
   subtle overlay gradient. Rounded corners via theme token.
   ============================================================================= */

/* Image hover zoom — all images in default gallery */
.page-home .home-composer .section-gallery--default .gallery__images img {
    border-radius: var(--border-radius-primary, 0.25rem);
    transition: transform 0.45s ease, box-shadow 0.45s ease;
    cursor: pointer;
}

.page-home .home-composer .section-gallery--default .gallery__images img:hover {
    transform: scale(1.03);
    box-shadow: var(--box-shadow-elevated, 0 10px 15px -3px rgba(0, 0, 0, 0.08));
}


/* =============================================================================
   2. VARIANT: MASONRY — Asymmetric Multi-Column Wall
   
   Design: CSS column-based masonry with image hover zoom + rounded corners.
   ============================================================================= */

/* Ensure the max-width wrapper inherits the vertical flex gap from .section-gallery */
.page-home .home-composer .section-gallery--masonry .container-default {
    display: flex;
    flex-direction: column;
    gap: inherit;
    width: 100%;
}

.page-home .home-composer .section-gallery--masonry .masonry-wall {
    column-count: 2;
    column-gap: clamp(0.5rem, 1.5vw, 1rem);
    padding: 0 var(--spacing-md, 1rem);
}

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

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

.page-home .home-composer .section-gallery--masonry .masonry-item {
    display: inline-block;
    width: 100%;
    margin-bottom: clamp(0.5rem, 1.5vw, 1rem);
    break-inside: avoid;
    overflow: hidden;
    border-radius: var(--border-radius-primary, 0.25rem);
}

.page-home .home-composer .section-gallery--masonry .masonry-item img {
    transition: transform 0.45s ease;
    cursor: pointer;
}

.page-home .home-composer .section-gallery--masonry .masonry-item:hover img {
    transform: scale(1.03);
}


/* =============================================================================
   3. VARIANT: CAROUSEL — Horizontal Snap-Scroll with Peek Edges
   
   Design: Horizontal scroll with snap alignment. Shows partial next/prev
   slides at edges (peek effect) to hint at more content.
   ============================================================================= */

.page-home .home-composer .section-gallery--carousel .carousel-container {
    display: flex;
    overflow-x: auto;
    gap: clamp(0.5rem, 1.5vw, 1rem);
    padding: var(--spacing-md, 1rem) clamp(1rem, 3vw, 2rem);

    /* Native CSS Scroll Snap — no JS required */
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

/* Hide scrollbars but retain scroll 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 85%; /* Mobile Peek: show 15% of next slide */
    max-width: 420px;
    aspect-ratio: 4 / 3;
    scroll-snap-align: start;
    border-radius: var(--border-radius-secondary, 0.75rem);
    overflow: hidden;
}

.page-home .home-composer .section-gallery--carousel .carousel-slide img {
    height: 100%;
    transition: transform 0.45s ease;
    cursor: pointer;
}

.page-home .home-composer .section-gallery--carousel .carousel-slide:hover img {
    transform: scale(1.03);
}

@media (min-width: 640px) {
    .page-home .home-composer .section-gallery--carousel .carousel-slide {
        flex: 0 0 45%; /* Tablet: show ~2 slides */
    }
}

@media (min-width: 1024px) {
    .page-home .home-composer .section-gallery--carousel .carousel-slide {
        flex: 0 0 32%; /* Desktop: show ~3 slides with peek */
    }
}

/* ── Carousel Navigation Buttons ── */
.page-home .home-composer .section-gallery--carousel .gallery-carousel-wrapper {
    position: relative;
    max-width: 1400px;
    margin: 0 auto;
}

.page-home .home-composer .section-gallery--carousel .carousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--background-primary);
    border: 1px solid rgba(0,0,0,0.1);
    box-shadow: var(--box-shadow-elevated, 0 4px 12px rgba(0,0,0,0.15));
    color: var(--brand-primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    opacity: 0.9;
}

.page-home .home-composer .section-gallery--carousel .carousel-nav:hover {
    transform: translateY(-50%) scale(1.05);
    opacity: 1;
}

.page-home .home-composer .section-gallery--carousel .carousel-nav--prev {
    left: clamp(0.5rem, 2vw, 1.5rem);
}

.page-home .home-composer .section-gallery--carousel .carousel-nav--next {
    right: clamp(0.5rem, 2vw, 1.5rem);
}

@media (max-width: 768px) {
    .page-home .home-composer .section-gallery--carousel .carousel-nav {
        display: none; /* Rely on native swipe on mobile to save screen space */
    }
    
    .page-home .home-composer .section-gallery--carousel .carousel-container {
        padding-left: var(--spacing-md, 1rem);
        padding-right: var(--spacing-md, 1rem);
    }
}