/* =====================================================================
   UPSTANDER TECHNOLOGY — Horizontal Overflow Fix
   Include this AFTER style.css in your layout:
   <link rel="stylesheet" href="{{ asset('css/fix-overflow.css') }}">
   ===================================================================== */

/* ── 1. Root fix: prevent any horizontal scroll on entire page ── */
html {
    overflow-x: hidden;
    max-width: 100%;
}

body {
    overflow-x: hidden;
    max-width: 100%;
    position: relative;
}


/* ── 3. Container never wider than viewport ── */
.container {
    max-width: 1280px;
    box-sizing: border-box;
}

/* ── 4. Hero — particles and circle-bg can bleed; clip the hero ── */
.hero {
    overflow: hidden;
    position: relative;
}

/* ── 5. Device showcase fixed width — make it fluid ── */
.device-showcase {
    width: min(420px, 100%);
    height: auto;
    aspect-ratio: 1;
    position: relative;
}

/* ── 6. Mega panel width cap ── */
.mega-panel {
    max-width: min(720px, 94vw);
}

/* ── 7. Mobile drawer — already correct but enforce ── */
.mobile-drawer {
    max-width: 100vw;
}

/* ── 8. Device modal on very small screens ── */
/*.device-modal-content {*/
/*    max-width: 100%;*/
/*    box-sizing: border-box;*/
/*}*/

/* ── 9. SVG / device cards in hero that have absolute positioning ── */
.hero-bg,
.hero-bg * {
    max-width: 100%;
}

/* ── 10. Trust bar items wrap, never overflow ── */
.trust-items {
    flex-wrap: wrap;
    overflow: hidden;
}

/* ── 11. Devices grid SVG overflow ── */
.dsc-visual,
.device-svg {
    max-width: 100%;
    overflow: hidden;
}

/* ── 12. How-steps connector hidden overflow ── */
.how-steps {
    overflow: hidden;
}

/* ── 13. CTA section glows bleed — clip ── */
.cta-section {
    overflow: hidden;
}

/* ── 14. Contact hero orbs bleed — clip ── */
.contact-hero {
    overflow: hidden;
}

/* ── 15. Footer grid ── */
.footer {
    overflow: hidden;
}

/* ── 16. Timeline line overflow ── */
.timeline {
    overflow: hidden;
}

/* ── 17. Swiper overflow ── */
.swiper,
.testimonial-swiper {
    overflow: hidden !important;
}

/* ── 18. About icon grid ── */
.about-icon-grid {
    max-width: 100%;
    width: 100%;
}

/* ── 19. Cert grid and category grid ── */
.cert-grid,
.category-grid,
.devices-grid,
.products-grid,
.team-grid,
.mvv-grid,
.partners-grid,
.why-grid,
.cta-stat-grid {
    max-width: 100%;
    box-sizing: border-box;
}

/* ── 20. Navbar container ── */
/*.nav-container {*/
/*    box-sizing: border-box;*/
/*    max-width: 100%;*/
    /*overflow: visible; */
/*}*/

/* ── 21. Images and media ── */
img,
svg,
video,
iframe {
    max-width: 100%;
}

/* ── 22. Input/form elements ── */
input,
select,
textarea {
    max-width: 100%;
    box-sizing: border-box;
}

/* ── 23. Newsletter form ── */
.newsletter-form {
    max-width: 100%;
    box-sizing: border-box;
}
.newsletter-form input {
    min-width: 0;
    flex: 1;
}

/* ── 24. Mobile overlay must not add width ── */
.mobile-overlay {
    max-width: 100vw;
    overflow: hidden;
}

/* ── 25. Contact hero grid ── */
.ch-grid-layout {
    max-width: 100%;
    box-sizing: border-box;
}

/* ── 26. Contact form card ── */
.cf-card,
.ci-card {
    max-width: 100%;
    box-sizing: border-box;
}

/* ── 27. Map iframe ── */
.cm-map-wrap iframe {
    max-width: 100%;
}

/* ── 28. Shop layout ── */
.shop-layout,
.shop-main,
.shop-sidebar {
    max-width: 100%;
    box-sizing: border-box;
}

/* ── 29. Product cards ── */
.product-card,
.product-img-wrap {
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

/* ── 30. Footer grid last-resort ── */
.footer-grid {
    max-width: 100%;
    box-sizing: border-box;
}

/* =====================================================================
   EXTRA MOBILE FIXES (≤ 576px)
   ===================================================================== */
@media (max-width: 576px) {

    /* Hero text doesn't overflow */
    .hero-text h1 {
        font-size: clamp(1.5rem, 7vw, 2.2rem);
        word-break: break-word;
    }

    /* Stat numbers don't push layout */
    .hero-stats {
        flex-wrap: wrap;
        gap: 12px;
    }

    /* Device cards in hero — hide on very small screens */
    .hero-devices {
        display: none;
    }

    /* Section headers */
    .section-header h2 {
        font-size: clamp(1.3rem, 5.5vw, 1.8rem);
        word-break: break-word;
    }

    /* Buttons don't overflow */
    .btn-primary,
    .btn-outline,
    .dsc-btn-primary,
    .dsc-btn-ghost,
    .cta-btn-primary,
    .cta-btn-ghost {
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Hero buttons stack */
    .hero-buttons {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
    }

    /* CTA buttons */
    .cta-btns {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
    }
    .cta-btn-primary,
    .cta-btn-ghost {
        width: 100%;
        justify-content: center;
    }

    /* Device showcase card — single column, centered */
    .device-showcase-card {
        grid-template-columns: 1fr;
    }
    .device-svg {
        width: clamp(140px, 55vw, 200px);
    }

    /* Why us metrics */
    .why-metric-row {
        flex-wrap: wrap;
        gap: 16px;
    }

    /* Cert grid 2 columns */
    .cert-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* CTA stat grid */
    .cta-stat-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Footer form */
    .newsletter-form {
        flex-direction: column;
    }
    .newsletter-form button {
        border-radius: 8px;
        width: 100%;
    }

    /* Modal */
    .modal-device-layout {
        grid-template-columns: 1fr;
    }
    .modal-specs-grid {
        grid-template-columns: 1fr 1fr;
    }

    /* Contact quick actions */
    .ch-action {
        flex-wrap: wrap;
    }

    /* Form row single col */
    .cf-row {
        grid-template-columns: 1fr;
    }
}

/* ── Extra small (≤ 380px) ── */
@media (max-width: 380px) {
    .container {
        padding: 0 14px;
    }

    .hero-text h1 {
        font-size: 1.4rem;
    }

    .trust-item span {
        display: none; /* show only icon */
    }
    .trust-item i {
        font-size: 1.3rem;
    }

    .cert-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .cta-stat-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .stat-number {
        font-size: 1.6rem;
    }

    .device-svg {
        width: min(130px, 45vw);
    }

    /* Nav brand text truncate */
    .logo-main {
        font-size: .88rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 180px;
    }
}