/* =====================================================================
   mobile.css — shared MOBILE-ONLY optimization layer.

   Loaded AFTER each page's own stylesheet so it cascades last. EVERY rule
   lives inside a max-width media query, so desktop is never touched. Fixes the
   systemic phone issues site-wide: horizontal overflow, tiny tap targets,
   oversized hero text, overflowing tables/grids, and cramped forms/modals.

   Breakpoints:  <= 768px  phones + small tablets
                 <= 480px  small phones
   ===================================================================== */

/* ---------- Phones & small tablets ---------- */
@media (max-width: 768px) {

    /* Never allow sideways scrolling of the whole page. */
    html, body { max-width: 100%; overflow-x: hidden; }
    *, *::before, *::after { box-sizing: border-box; }

    /* Media & code never blow out the viewport. */
    img, video, canvas, svg, iframe { max-width: 100%; height: auto; }
    pre, code { max-width: 100%; overflow-x: auto; white-space: pre-wrap; word-break: break-word; }

    /* Comfortable page gutters (many containers use big desktop padding). */
    .container,
    .ib-wrap, .cl-wrap, .bol-wrap, .ct-wrap, .gl-wrap {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    .container { padding-top: 28px !important; padding-bottom: 28px !important; }

    /* Fluid hero headline so it never overflows a narrow screen. */
    .hero { padding: 60px 16px !important; height: auto !important; min-height: 70vh; }
    .hero h2 { font-size: clamp(30px, 9vw, 48px) !important; line-height: 1.15; word-break: break-word; }
    .hero p  { font-size: clamp(15px, 4.5vw, 20px) !important; }

    /* Section titles scale down. */
    .section-title { font-size: clamp(24px, 7vw, 34px) !important; }

    /* ---- Touch targets: min 44px tall, easy to tap ---- */
    nav a,
    .btn, .ui-btn, .discord-btn, .cl-manage, .pa-btn,
    button:not(.tr-ip-opt):not(.ib-modal-btn):not(.mdt-mini-btn) {
        min-height: 44px;
    }
    nav a { display: inline-flex; align-items: center; }

    /* ---- Grids collapse to a single column ---- */
    .grid, .org-grid, .staff-grid, .download-grid,
    .footer-grid, .commend-grid, .dept-grid, .member-grid,
    .rp-grid, .card-grid {
        grid-template-columns: 1fr !important;
    }

    /* ---- Wide tables scroll horizontally instead of overflowing ---- */
    table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* ---- Forms: 16px inputs (stops iOS auto-zoom) + full width ---- */
    input[type="text"], input[type="email"], input[type="password"],
    input[type="number"], input[type="search"], input[type="url"],
    input[type="date"], input[type="datetime-local"], select, textarea {
        font-size: 16px !important;
        max-width: 100%;
    }

    /* ---- Generic modal/overlay: fit the viewport, scroll inside ---- */
    .modal, .modal-box, .ui-modal, .popup, .modal-content {
        width: 96vw !important;
        max-width: 96vw !important;
        max-height: 90vh !important;
        overflow-y: auto;
    }

    /* Footer: center + single column reads better on a phone. */
    .footer, .main-footer { padding: 40px 16px 24px !important; }
    .footer-grid { text-align: center; gap: 24px !important; }

    /* Dept/org header blocks: stack image over text, sane sizes. */
    .dept-header, .org-header {
        flex-direction: column !important;
        gap: 20px !important;
        padding: 24px !important;
        text-align: center;
    }
    .dept-logo, .org-logo { height: auto !important; max-width: 60% !important; margin: 0 auto; }
    .dept-info h1, .org-info h1 { font-size: clamp(26px, 7vw, 40px) !important; }

    /* The home-page server strip already scrolls; just keep it in bounds. */
    .hero-servers { max-width: 100% !important; }
}

/* ---------- Small phones ---------- */
@media (max-width: 480px) {
    .container { padding-top: 20px !important; padding-bottom: 20px !important; }
    .hero { min-height: 62vh; }
    .hero h2 { font-size: clamp(26px, 9vw, 38px) !important; }

    /* Buttons that were fixed-width (e.g. 256px discord btn) go full width. */
    .discord-btn, .ui-btn.block { width: 100% !important; max-width: 320px; }

    /* Tighten card padding on the smallest screens. */
    .card, .info-card, .info-section, .settings-section,
    .org-card, .staff-card, .dept-card { padding: 16px !important; }
}