/* =============================================================================
   LAMHA — HOMEPAGE SHELL

   Page-level presentation only. Shared navbar presentation lives in
   navbar-unified.css. All shared colors, typography, spacing, radius, shadows
   and motion primitives come from design-tokens.css.
   ============================================================================= */

.home-experience {
    min-height: 100vh;
    background: var(--bg-primary);
    color: var(--text-primary);
    overflow: clip;
}

.home-experience--landing {
    padding-top: 0;
}

.home-experience--results {
    padding-top: calc(var(--navbar-height) + var(--space-5));
}

/* =============================================================================
   GALLERY
   ============================================================================= */

.home-experience .gallery-section {
    position: relative;
    top: 0;
    min-height: 120px;
    margin-top: 0 !important;
    padding: clamp(var(--space-16), 7vw, calc(var(--space-24) + var(--space-3))) 0 var(--space-20);
    background: transparent;
}

.home-experience--results .gallery-section {
    padding-top: var(--space-5);
}

/* The discovery rail already creates its own visual separation. Avoid stacking
   its margin with the generic gallery section spacing. */
.home-experience--results .inspiration-discovery {
    margin-bottom: var(--space-2);
}

.home-experience--results .inspiration-discovery + .gallery-section {
    padding-top: var(--space-2);
}

.home-experience .category-entity-intro > .container-fluid ,
.home-experience .gallery-section > .container-fluid {
    width: 100%;
    max-width: var(--container-2xl);
    padding-inline: clamp(var(--space-3), 1.5vw, var(--space-6));
}

.home-experience .inspiration-card,
.home-experience .grid-item {
    border-radius: var(--radius-lg);
}

.home-experience .inspiration-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border-subtle);
    background: var(--bg-secondary);
    box-shadow: none;
    transform: translateZ(0);
    transition: var(--transition-normal);
}

@media (hover: hover) and (pointer: fine) {
    .home-experience .inspiration-card:hover {
        transform: translateY(-2px);
        border-color: var(--border-default);
        box-shadow: var(--shadow-lg);
    }
}

.home-experience .inspiration-card :is(.card-actions, .shot-actions, .card-overlay-actions),
.home-experience .shot-carousel__counter,
.home-experience .shot-carousel__nav {
    -webkit-backdrop-filter: blur(var(--radius-lg)) saturate(125%);
    backdrop-filter: blur(var(--radius-lg)) saturate(125%);
}

.home-experience .scroll-loading-indicator {
    width: min(520px, calc(100% - var(--space-8)));
    margin: var(--space-6) auto 0;
    padding: var(--space-6);
}

/* =============================================================================
   RESPONSIVE
   ============================================================================= */

@media (max-width: 991.98px) {
    .home-experience--results {
        padding-top: calc(var(--navbar-height-mobile) + var(--space-4));
    }
}

@media (max-width: 767.98px) {
    .home-experience .gallery-section {
        padding-top: var(--space-20);
    }

    .home-experience--results .inspiration-discovery + .gallery-section {
        padding-top: var(--space-2);
    }

    /* The root Inspiration results page begins directly with the gallery. Keep
       only a compact breathing space below the mobile navbar; category/entity
       pages retain their existing separation between the intro and gallery. */
    .home-experience--results > .gallery-section:first-child {
        padding-top: var(--space-3);
    }
}

@media (max-width: 575.98px) {
    .home-experience .gallery-section > .container-fluid {
        padding-inline: var(--space-3);
    }
}

/* =============================================================================
   MOTION / CAPABILITY FALLBACKS
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
    .home-experience .inspiration-card {
        transition: none !important;
    }
}