/*
 * mobile_base.css — Shared responsive base for all FreeOrigins public pages.
 *
 * Include via: <link rel="stylesheet" href="/public/mobile_base.css">
 * Place AFTER page-specific styles so these act as safety nets, not overrides.
 *
 * Covers:
 *   - overflow-x prevention
 *   - 375px (phone), 768px (tablet), 1024px (small desktop) breakpoints
 *   - Touch target minimums (44px)
 *   - Safe font scaling
 */

/* ── Global safety ────────────────────────────────────────────────────────── */
html {
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
}

body {
    overflow-x: hidden;
    min-height: 100vh;
}

/* Prevent fixed-width elements from causing horizontal scroll */
img, video, iframe, table, pre, code {
    max-width: 100%;
}

/* ── Touch targets ────────────────────────────────────────────────────────── */
a, button, [role="button"], input[type="submit"], input[type="button"] {
    min-height: 44px;
    min-width: 44px;
}

/* ── Tablet (768px) ───────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    /* Stack flex/grid layouts */
    .grid-2, .grid-3, .card-grid, .feature-grid {
        grid-template-columns: 1fr !important;
    }

    /* Reduce aggressive padding/margins */
    .container, .wrapper, .content, main, section {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* Cap fixed widths */
    [style*="width: 1000px"],
    [style*="width: 1040px"],
    [style*="width: 1100px"],
    [style*="max-width: 1000px"],
    [style*="max-width: 1040px"],
    [style*="max-width: 1100px"] {
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Navigation stacking */
    nav {
        flex-wrap: wrap;
    }

    /* Table scrolling */
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ── Phone (375px) ────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    /* Further reduce spacing */
    .container, .wrapper, .content, main, section {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    /* Ensure headings don't overflow */
    h1 { font-size: clamp(1.5rem, 5vw, 2.5rem); }
    h2 { font-size: clamp(1.25rem, 4vw, 2rem); }
    h3 { font-size: clamp(1.1rem, 3.5vw, 1.5rem); }

    /* Full-width buttons on mobile */
    .btn, .button, [class*="btn-"] {
        width: 100%;
        text-align: center;
    }

    /* Stack horizontal layouts */
    .flex-row, .hstack, .inline-flex {
        flex-direction: column !important;
    }

    /* Card padding reduction */
    .card, .panel, .box, [class*="card"] {
        padding: 1rem;
    }

    /* Hide decorative elements on small screens */
    .desktop-only, .hide-mobile {
        display: none !important;
    }
}