/* Mobile-native polish — app-like layout on phones & tablets */

/* Prevent horizontal scroll sitewide */
html {
    overflow-x: clip;
}

body.home-body {
    padding-bottom: env(safe-area-inset-bottom, 0);
}

.home-scene,
.spa-outlet,
.home-scene > main {
    max-width: 100%;
    overflow-x: clip;
}

/* Faster tap response (no 300ms delay) */
.home-btn,
.home-tabbar__item,
.home-hamburger,
.home-drawer__nav a,
.home-icon-btn,
.home-drawer__close,
.home-join-modal__close,
.home-faq__trigger {
    touch-action: manipulation;
}

/* iOS: keep 16px inputs to avoid auto-zoom on focus */
@media (max-width: 768px) {
    .home-join-field input,
    .home-join-field select,
    .home-join-otp__digit,
    .home-contact input,
    .home-contact select,
    .home-contact textarea {
        font-size: 16px;
    }
}

/* Standalone / Add-to-Home-Screen */
@media (display-mode: standalone) {
    body.home-body--refined {
        --home-header-h: calc(72px + env(safe-area-inset-top, 0px));
    }

    body.home-body--refined .home-nav {
        padding-top: env(safe-area-inset-top, 0px);
    }

    .home-tabbar {
        bottom: max(12px, env(safe-area-inset-bottom, 12px));
    }
}

/* Join modal — bottom sheet on phones */
@media (max-width: 640px) {
    .home-join-modal {
        align-items: flex-end;
        justify-content: stretch;
        padding: 0;
    }

    .home-join-modal__panel {
        width: 100%;
        max-width: none;
        max-height: min(92dvh, calc(100dvh - env(safe-area-inset-top, 0px)));
        border-radius: 24px 24px 0 0;
        padding: clamp(20px, 5vw, 28px);
        padding-bottom: calc(clamp(20px, 5vw, 28px) + env(safe-area-inset-bottom, 0px));
        animation: homeJoinSheetIn 0.38s var(--home-ease, cubic-bezier(0.22, 1, 0.36, 1));
    }

    @keyframes homeJoinSheetIn {
        from { opacity: 0; transform: translateY(100%); }
        to { opacity: 1; transform: none; }
    }

    .home-join-otp {
        gap: 6px;
    }

    .home-join-otp__digit {
        min-height: 48px;
        font-size: 1.15rem;
    }
}

@media (max-width: 360px) {
    .home-join-otp__digit {
        min-height: 44px;
        font-size: 1rem;
        border-radius: 10px;
    }
}

/* Video lightbox — edge-to-edge on small screens */
@media (max-width: 640px) {
    .home-video-modal {
        padding: 0;
        align-items: center;
    }

    .home-video-modal__panel {
        width: 100%;
        border-radius: 0;
    }

    .home-video-modal__close {
        top: max(12px, env(safe-area-inset-top, 12px));
        right: 12px;
    }
}

/* Branches — single column on narrow phones */
@media (max-width: 520px) {
    .home-branches__grid {
        grid-template-columns: 1fr;
    }
}

/* Coop flow — stack on very small screens */
@media (max-width: 480px) {
    .home-coop__flow {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .home-coop__flow-arrow {
        display: none;
    }
}

/* Tab bar — compact labels on tiny screens */
@media (max-width: 360px) {
    .home-tabbar {
        padding: 6px 6px;
        gap: 2px;
    }

    .home-tabbar__item {
        font-size: 9px;
        min-height: 48px;
        padding: 4px 2px;
    }

    .home-tabbar__item i {
        font-size: 16px;
    }

    .home-tabbar__fab {
        width: 42px;
        height: 42px;
        margin-top: -20px;
        font-size: 16px;
    }
}

/* Inner-page hero — tighter on mobile with tab bar */
@media (max-width: 900px) {
    .home-page-hero__banner {
        min-height: clamp(200px, 32vw, 280px);
    }

    .home-page-hero__banner-inner {
        padding-bottom: clamp(20px, 4vw, 32px);
    }

    .home-page-hero__title {
        font-size: clamp(1.65rem, 7vw, 2.25rem);
    }
}

/* Split panels & value cards — stack on narrow screens */
@media (max-width: 768px) {
    .home-split__panel--values {
        gap: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-join-modal__panel {
        animation: none;
    }
}