/*
 * Binary³ Global Mobile Responsiveness
 * Applies universally across all templates as a final-pass override layer.
 * Breakpoints: 900px | 768px | 640px | 480px | 390px
 */

/* ─── 1. Viewport safety ────────────────────────────────────────────────────── */
html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

*, *::before, *::after {
    box-sizing: border-box;
    min-width: 0; /* critical: prevents flex children from overflowing */
}

img, svg, video, canvas, iframe {
    max-width: 100%;
    height: auto;
}

/* ─── 2. Touch targets — min 44×44px ────────────────────────────────────────── */
@media (max-width: 900px) {
    /* Buttons only — don't override inline <a> links which would break text flow */
    button,
    input[type="submit"],
    input[type="button"],
    .btn,
    .b3-login,
    .b3-logout,
    .cta-button,
    .b3-mobile-link,
    .b3-tab {
        min-height: 44px;
    }
}

/* ─── 3. Scrollable tables ───────────────────────────────────────────────────── */
.table-responsive-b3 {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

table {
    width: 100%;
}

/* ─── 4. Card grids — prevent horizontal overflow ───────────────────────────── */
@media (max-width: 640px) {
    /* Any grid using repeat(auto, minmax(Npx, 1fr)) collapses to 1 col */
    [class*="grid-cols-"]:not([class*="sm:grid"]):not([class*="md:grid"]):not([class*="lg:grid"]) {
        grid-template-columns: 1fr !important;
    }
}

/* ─── 5. binarycubed.css overrides — 768px ──────────────────────────────────── */
@media (max-width: 768px) {
    /* Nav: compact padding — links hidden via binarycubed.css .nav-link { display: none } */
    .navbar {
        padding: 12px 0;
    }

    /* Hero two-column → single column */
    .hero-content {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
        text-align: center !important;
    }

    .hero-title {
        font-size: 2.25rem !important;
    }

    .hero-subtitle {
        font-size: 1.1rem !important;
    }

    /* Shield/visual container */
    .security-icon {
        width: 220px !important;
        height: 220px !important;
    }

    .shield-image {
        width: 180px !important;
        height: 180px !important;
    }

    /* CTA buttons full-width on mobile */
    .cta-button {
        display: block;
        width: 100%;
        text-align: center;
        padding: 14px 20px !important;
        font-size: 1rem !important;
    }

    /* Section titles */
    .section-title,
    .about-title {
        font-size: 1.8rem !important;
    }

    .cta-content h2 {
        font-size: 1.75rem !important;
    }

    /* Features / expertise grids */
    .features-grid,
    .expertise-grid,
    .stats-grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    /* Products grid */
    .products-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ─── 6. 480px — small phones ───────────────────────────────────────────────── */
@media (max-width: 480px) {
    .hero-title {
        font-size: 1.75rem !important;
    }

    .hero-subtitle {
        font-size: 1rem !important;
    }

    .security-icon {
        width: 180px !important;
        height: 180px !important;
    }

    .shield-image {
        width: 140px !important;
        height: 140px !important;
    }

    .section-title,
    .about-title,
    .cta-content h2 {
        font-size: 1.5rem !important;
    }

    /* Padding reductions */
    .hero-section {
        padding: 80px 0 48px !important;
    }

    .features-section,
    .cta-section {
        padding: 48px 0 !important;
    }

    .container {
        padding: 0 16px !important;
    }
}

/* ─── 7. 390px — very small phones (iPhone SE, Galaxy A) ────────────────────── */
@media (max-width: 390px) {
    .hero-title {
        font-size: 1.5rem !important;
    }

    .security-icon {
        width: 150px !important;
        height: 150px !important;
    }

    .shield-image {
        width: 120px !important;
        height: 120px !important;
    }
}

/* ─── 8. hero_section.css overrides ─────────────────────────────────────────── */
@media (max-width: 480px) {
    .hero-badge {
        font-size: 0.7rem !important;
        padding: 4px 10px !important;
    }

    .scan-form,
    .scan-input-group {
        flex-direction: column !important;
        gap: 8px !important;
    }

    .scan-input-group input,
    .scan-input-group button {
        width: 100% !important;
        border-radius: 8px !important;
    }
}

/* ─── 9. Dashboard cards / RQE pages — Tailwind + custom hybrid ─────────────── */
@media (max-width: 640px) {
    /* Override inline-flex microbar that causes overflow in hero */
    .b3-stat-bar {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 0 !important;
    }

    .b3-stat-bar-sep {
        display: none !important;
    }

    .b3-stat-bar-cell {
        flex: 0 0 50% !important;
        border-right: none !important;
        border-bottom: 1px solid rgba(6,182,212,0.1) !important;
        padding: 8px 12px !important;
    }

    .b3-stat-bar-cell:last-child {
        flex: 0 0 100% !important;
    }
}

/* ─── 10. RQE / API docs — code blocks ──────────────────────────────────────── */
@media (max-width: 768px) {
    pre, code {
        white-space: pre-wrap !important;
        word-break: break-all !important;
        overflow-x: auto;
    }
}

/* ─── 11. Platform dashboard — table and card overflow ──────────────────────── */
@media (max-width: 768px) {
    /* findings table */
    #findings-table-wrapper,
    .findings-table-container,
    .overflow-x-auto {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Risk branch mini-stats */
    .risk-branch-grid {
        grid-template-columns: 1fr 1fr !important;
    }
}

@media (max-width: 480px) {
    .risk-branch-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ─── 12. Print suppression of mobile-only elements ─────────────────────────── */
@media print {
    .b3-nav__mobile-toggle,
    .b3-nav__mobile-menu {
        display: none !important;
    }
}

/* ─── 13. Saas homepage overrides ───────────────────────────────────────────── */
@media (max-width: 480px) {
    .hero-stats {
        flex-direction: column !important;
        gap: 12px !important;
        align-items: center !important;
    }

    .stat-item {
        width: 100%;
        text-align: center;
    }
}

/* ─── 14. microdefend-dark.css overrides ────────────────────────────────────── */
@media (max-width: 640px) {
    .scan-container,
    .results-container {
        padding: 16px !important;
    }

    .severity-grid,
    .finding-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ─── 15. Embeddable badge / verify pages ───────────────────────────────────── */
@media (max-width: 640px) {
    .embed-code-box {
        font-size: 11px !important;
        overflow-x: auto !important;
        white-space: pre !important;
    }

    .trust-score-panel {
        flex-direction: column !important;
        gap: 16px !important;
    }
}