/* ============================================
   Lightli.uk — Home Base Styles
   ============================================ */

/* --- Base ----------------------------------------------- */

/*
   Responsive policy: home
   - Desktop / 4K: full landing phone stack, shared fixed nav, real footer, vertical app sections.
   - Carousel shell: compact no-phone landing, no shared nav, fake carousel contact/footer.
   - Carousel shell includes phone portrait, phone landscape, tablet portrait, and tablet landscape.
   - Carousel app cards are column layout in portrait and row layout in landscape.
*/

:root {
    /* Shared layout */
    --site-nav-height: clamp(60px, 5vw, 80px);
    --app-section-gutter: clamp(16px, 3svh, 36px);
    --app-section-scroll-offset: calc(var(--site-nav-height) + var(--app-section-gutter));

    /* Background layer */
    --home-fixed-bg-logo-size: 25%;
}

html {
    scroll-behavior: smooth;

    @media (max-width: 1050px) and (orientation: portrait), (max-width: 960px) and (max-height: 500px) and (orientation: landscape), (min-width: 961px) and (max-width: 1366px) and (min-height: 600px) and (orientation: landscape) {
        background: #ffffff;
        scroll-snap-type: y proximity;
    }

    @media (min-width: 1000px) and (orientation: portrait) {
        background: #ffffff;
    }

}

body {
    overflow-x: hidden;
    width: 100vw;
    margin: 0;
}


/* --- Scroll Snap ---------------------------------------- */

.portrait-scroll-snap-container {
    scroll-snap-type: none;

}

.slider-snap {
    scroll-snap-align: none;

    @media (max-width: 1050px) and (orientation: portrait), (max-width: 960px) and (max-height: 500px) and (orientation: landscape), (min-width: 961px) and (max-width: 1366px) and (min-height: 600px) and (orientation: landscape) {
        scroll-snap-align: center;
    }
}

/* --- Sticky Background ---------------------------------- */

.fixed-bg-logo {
    background: url("/assets/images/branding/Lightli_brand_logo.svg") #ffffff no-repeat center;
    background-size: var(--home-fixed-bg-logo-size);
    z-index: -10;
    position: fixed;
    height: 100vh;
    width: 100vw;

    @media (max-width: 1050px) and (orientation: portrait), (max-width: 960px) and (max-height: 500px) and (orientation: landscape), (min-width: 961px) and (max-width: 1366px) and (min-height: 600px) and (orientation: landscape) {
        background: none;
    }

}