/**
 * NEOXWEB — Mobile + Laptop dual layout
 * Desktop: full website with top navbar
 * Mobile: app shell + touch-friendly content
 */

/* ── Global: no horizontal scroll ── */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

html,
body.neoxweb-site {
    overflow-x: hidden;
    max-width: 100vw;
}

body.neoxweb-site img,
body.neoxweb-site video,
body.neoxweb-site svg {
    max-width: 100%;
    height: auto;
}

/* ── LAPTOP / DESKTOP (901px+) ── */
@media (min-width: 901px) {
    /* Navbar offset lives on hero inner padding — avoid double gap with body */
    body.neoxweb-site:not(.nx-app-body) {
        padding-top: 0;
    }

    body.neoxweb-site:not(.nx-app-body) main > :first-child:not(.hero-section--pro):not(.hero-section--neoxweb):not(.nx-page-hero):not(.web-hero):not(.svc-banner-hero):not(.ui-hero):not(.contact-page-hero) {
        padding-top: var(--nav-h, 72px);
    }

    body.neoxweb-site:not(.nx-app-body) main {
        width: 100%;
    }

    body.neoxweb-site:not(.nx-app-body) .container {
        width: min(1200px, calc(100% - 3rem));
        margin-inline: auto;
    }

    #nxAppHeader,
    #nxBottomNav,
    #nxAppDrawer,
    #nxPageLoader {
        display: none !important;
    }

    .custom-cursor {
        display: block;
    }
}

/* ── MOBILE + TABLET (900px and below) ── */
@media (max-width: 900px) {
    body.neoxweb-site {
        padding-top: 0;
        -webkit-overflow-scrolling: touch;
    }

    .custom-cursor {
        display: none !important;
    }

    /* Hero homepage only — inner page heroes use nx-page-hero padding */
    .hero-section--neoxweb:not(.nx-page-hero):not(.contact-page-hero) {
        min-height: auto !important;
        padding: clamp(5.5rem, 14vw, 7rem) 0 clamp(2.5rem, 6vw, 3.5rem) !important;
    }

    .hero-section--pro.nx-page-hero,
    .hero-section--pro.contact-page-hero {
        padding: 0 0 clamp(2.5rem, 6vw, 3.5rem) !important;
        min-height: min(92vh, 800px) !important;
    }

    .hero-section--pro.nx-page-hero .nx-page-hero__inner,
    .hero-section--pro.nx-page-hero .contact-hero-inner,
    .hero-section--pro.contact-page-hero .contact-hero-inner {
        padding-top: calc(var(--nav-h, 72px) + 0.5rem);
    }

    .hero-section--neoxweb .hero-grid--bg {
        grid-template-columns: 1fr !important;
        gap: 1.5rem;
        padding-inline: 1rem;
    }

    .hero-section--neoxweb .hero-title {
        font-size: clamp(1.75rem, 7vw, 2.35rem) !important;
    }

    .hero-section--neoxweb .hero-text {
        font-size: 0.95rem;
        max-width: 100%;
    }

    .hero-section--neoxweb .hero-actions {
        flex-direction: column;
        align-items: flex-start;
    }

    .hero-section--neoxweb .hero-actions .btn {
        width: auto;
        min-width: min(100%, 280px);
        min-height: 48px;
        justify-content: center;
    }

    .hero-section--neoxweb .hero-statcards {
        grid-template-columns: 1fr !important;
        gap: 0.75rem;
    }

    .hero-visual-art {
        display: none;
    }

    /* Service cards */
    .neox-service-cards {
        grid-template-columns: 1fr !important;
        gap: 1rem;
    }

    .nx-why-grid,
    .nx-team-grid,
    .project-grid,
    .testimonial-slider,
    .trusted-grid {
        grid-template-columns: 1fr !important;
    }

    .trusted-grid {
        gap: 0.65rem;
    }

    .section-padding {
        padding: clamp(2.5rem, 6vw, 3.5rem) 0;
    }

    .container {
        width: min(100%, calc(100% - 2rem)) !important;
        padding-inline: 0;
    }

    body.neoxweb-site.service-page main .container,
    body.neoxweb-site.service-page .svc-banner-hero__inner {
        width: 100% !important;
        margin-inline: 0 !important;
        padding-inline: clamp(1rem, 2.5vw, 1.5rem) !important;
    }

    /* Service pages */
    .svc-banner-hero {
        padding: clamp(5rem, 12vw, 6.5rem) 0 clamp(1.5rem, 4vw, 2rem) !important;
    }

    .svc-banner-hero__inner {
        width: 100% !important;
        margin-inline: 0 !important;
        padding-inline: clamp(1rem, 2.5vw, 1.5rem) !important;
        text-align: left;
    }

    .svc-banner-hero h1 {
        font-size: clamp(1.5rem, 6vw, 2rem) !important;
    }

    .svc-pain-grid,
    .svc-engage-grid,
    .svc-vertical-grid,
    .ui-process-grid {
        grid-template-columns: 1fr !important;
    }

    .svc-logo-strip {
        gap: 0.5rem;
        padding: 1rem 0.75rem;
    }

    .svc-logo-strip span {
        font-size: 0.65rem;
        padding: 0.35rem 0.65rem;
    }

    /* Touch-friendly taps */
    a,
    button,
    .btn,
    .quote-btn,
    .nav-links a {
        touch-action: manipulation;
    }

    .btn,
    button,
    .btn-login,
    .quote-btn,
    .ui-btn-getstarted {
        min-height: 44px;
        min-width: 44px;
    }

    input,
    textarea,
    select {
        font-size: 16px !important;
    }

    /* Footer hidden on mobile app mode */
    body.nx-app-body .site-footer {
        display: none !important;
    }

    /* WhatsApp FAB above bottom nav */
    body.nx-app-body .nx-wa-fab {
        bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px)) !important;
    }

    body:not(.nx-app-body) .nx-wa-fab {
        bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
    }

    #pwaInstallBanner {
        left: 0.75rem;
        right: 0.75rem;
        bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px));
    }

    /* Contact page */
    .contact-neoxweb-grid,
    .contact-page-main .grid-two {
        grid-template-columns: 1fr !important;
    }

    /* Auth */
    body.auth-page .auth-layout {
        grid-template-columns: 1fr !important;
    }

    body.auth-page .auth-brand {
        display: none;
    }
}

/* ── Small phones ── */
@media (max-width: 380px) {
    .navbar__logo.logo {
        font-size: 1.35rem;
    }

    .neox-cities span {
        font-size: 0.65rem;
        padding: 0.3rem 0.55rem;
    }
}

/* ── Tablet landscape: still use website navbar if wide enough ── */
@media (min-width: 901px) and (max-width: 1100px) {
    .navbar .nav-links > li > a {
        padding: 0.5rem 0.65rem;
        font-size: 0.85rem;
    }

    .navbar__quote-btn {
        padding: 0.55rem 1rem;
        font-size: 0.85rem;
    }
}

/* Home, About, Our Team — hero text left */
.home-page .hero-section--pro .hero-grid--bg,
.home-page .hero-section--pro .container.hero-grid--bg {
    margin-left: clamp(1rem, 3vw, 2rem) !important;
    margin-right: auto !important;
    text-align: left !important;
    justify-items: start !important;
}

.home-page .hero-section--pro .hero-copy,
.home-page .hero-section--pro .hero-copy h1,
.home-page .hero-section--pro .hero-copy .hero-text,
.home-page .hero-section--pro .hero-actions {
    text-align: left !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
}

.hero-section--pro.hero-section--neoxweb .container.nx-page-hero__inner,
.hero-section--pro .nx-page-hero__inner,
.hero-section--pro .nx-page-hero__inner h1,
.hero-section--pro .nx-page-hero__inner .section-tag,
.hero-section--pro .nx-page-hero__inner .nx-page-hero__lead {
    text-align: left !important;
}

.hero-section--pro .container.nx-page-hero__inner {
    margin-left: clamp(1rem, 3vw, 2rem) !important;
    margin-right: auto !important;
    width: min(1200px, calc(100% - 2rem)) !important;
}

.hero-section--pro .nx-page-hero__actions,
.hero-section--pro .nx-page-hero__stats {
    justify-content: flex-start !important;
}

.hero-section--pro .nx-page-hero__stat {
    text-align: left !important;
}

.hero-section--pro .nx-page-hero__lead,
.hero-section--pro .nx-page-hero__inner > p {
    margin-left: 0 !important;
    margin-right: auto !important;
}