/* ═══════════════════════════════════════════════════════════════════
   MOBILE OPTIMIZATIONS — compact public-facing UI (≤576px)
   Loaded after riohub-theme.css on every public page (includes/layout.php).
   Goal: denser, modern phone layout — smaller padding/margin/font, no overflow,
   tap targets kept ≥44px. Desktop is untouched (everything sits in @media).
   Token scale (--space-*, --fs-*, --pad-*) shrinks in riohub-theme.css ≤576px.
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 576px) {

    /* ─── Containers / sections ─── */
    .container,
    .container-fluid {
        padding-left: var(--space-3);
        padding-right: var(--space-3);
    }
    section { padding-top: var(--space-5); padding-bottom: var(--space-5); }
    .py-5 { padding-top: var(--space-5) !important; padding-bottom: var(--space-5) !important; }
    .py-4 { padding-top: var(--space-4) !important; padding-bottom: var(--space-4) !important; }
    .my-5 { margin-top: var(--space-5) !important; margin-bottom: var(--space-5) !important; }
    .mb-5 { margin-bottom: var(--space-5) !important; }
    .mb-4 { margin-bottom: var(--space-4) !important; }
    .mt-5 { margin-top: var(--space-5) !important; }
    .mt-4 { margin-top: var(--space-4) !important; }
    .gap-4 { gap: var(--space-3) !important; }
    .gap-3 { gap: var(--space-2) !important; }

    /* ─── Cards ─── */
    .card,
    .rh-card { border-radius: var(--radius); }
    .card-body { padding: var(--pad-card); }

    /* ─── Typography ─── */
    h1, .h1 { font-size: var(--fs-3xl); line-height: 1.2; }
    h2, .h2 { font-size: var(--fs-2xl); line-height: 1.25; }
    h3, .h3 { font-size: var(--fs-xl); line-height: 1.3; }
    h4, .h4, h5, .h5, h6, .h6 { font-size: var(--fs-lg); }
    .display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
        font-size: var(--fs-3xl);
        line-height: 1.15;
    }
    .lead { font-size: var(--fs-base); }
    small, .small { font-size: var(--fs-xs); }

    /* ─── Buttons — compact but keep ≥44px tap target ─── */
    .btn {
        font-size: var(--fs-sm);
        padding: 0.55rem 0.95rem;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .btn-sm { padding: 0.4rem 0.7rem; min-height: 38px; }
    .btn-rh-primary,
    .btn-rh-outline { padding: 0.55rem 1rem; }

    /* ─── Forms ─── */
    /* Note: font-size is intentionally NOT set here — riohub-theme.css keeps
       inputs at 16px ≤767px to prevent iOS focus-zoom. We only compact padding. */
    .form-control,
    .form-select {
        padding: 0.55rem 0.7rem;
        min-height: 44px;
    }
    textarea.form-control { min-height: 80px; }
    label, .form-label { font-size: var(--fs-sm); margin-bottom: 0.25rem; }

    /* ─── Navbar (sticky) ─── */
    .rh-navbar { padding: 0.4rem 0; }
    .rh-navbar .container-fluid.px-4 { padding-left: var(--space-3) !important; padding-right: var(--space-3) !important; }
    .rh-logo { height: 42px; margin-top: -0.5rem; margin-bottom: -0.5rem; }

    /* ─── Tables — scroll instead of breaking layout ─── */
    .table-responsive { -webkit-overflow-scrolling: touch; }
    table { font-size: var(--fs-sm); }

    /* ─── Media never overflows ─── */
    img { max-width: 100%; height: auto; }
}