/* ============================================================ mobile.css — Shared mobile responsiveness layer Assistiv ecosystem (services / tools / co) Loaded last in so it overrides page styles. Tuned to the grid patterns actually used in these repos: 220px 1fr footers · repeat(2/3/4,1fr) · 1fr 1fr splits ============================================================ */ html, body { max-width: 100%; overflow-x: hidden; } img, svg, canvas, video { max-width: 100%; height: auto; } /* ============================================================ TABLET AND BELOW (<= 820px) ============================================================ */ @media (max-width: 820px) { [style*="grid-template-columns: 220px 1fr"], [style*="grid-template-columns:220px 1fr"], [style*="grid-template-columns: 240px 1fr"], [style*="grid-template-columns:240px 1fr"] { grid-template-columns: 1fr !important; gap: 2rem !important; } } /* ============================================================ PHONE AND BELOW (<= 640px) ============================================================ */ @media (max-width: 640px) { /* ---- Footer / link column grids ---- */ footer > div { padding-left: 1.25rem !important; padding-right: 1.25rem !important; } [style*="grid-template-columns: repeat(4,1fr)"], [style*="grid-template-columns:repeat(4,1fr)"], [style*="grid-template-columns: repeat(4, 1fr)"], [style*="grid-template-columns:repeat(4, 1fr)"] { grid-template-columns: 1fr 1fr !important; gap: 1.5rem !important; } [style*="grid-template-columns: repeat(3,1fr)"], [style*="grid-template-columns:repeat(3,1fr)"], [style*="grid-template-columns: repeat(3, 1fr)"], [style*="grid-template-columns:repeat(3, 1fr)"] { grid-template-columns: 1fr !important; } [style*="grid-template-columns: repeat(2,1fr)"], [style*="grid-template-columns:repeat(2,1fr)"], [style*="grid-template-columns: repeat(2, 1fr)"], [style*="grid-template-columns:repeat(2, 1fr)"] { grid-template-columns: 1fr !important; } /* ---- 1fr 1fr and weighted two-column splits stack ---- */ [style*="grid-template-columns:1fr 1fr"], [style*="grid-template-columns: 1fr 1fr"], [style*="grid-template-columns:1.2fr 1fr"], [style*="grid-template-columns: 1.2fr 1fr"], [style*="grid-template-columns:1fr 1fr 1fr"], [style*="grid-template-columns: 1fr 1fr 1fr"] { grid-template-columns: 1fr !important; } /* ---- Class-based grid helpers ---- */ .grid-2, .grid-3, .two-col, .split-2, .cols-2, .cols-3 { grid-template-columns: 1fr !important; } /* ---- Tables scroll instead of overflowing ---- */ table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* ---- Sticky nav padding ---- */ nav[style*="position:sticky"], nav[style*="position: sticky"] { padding-left: 0.85rem !important; padding-right: 0.85rem !important; } /* ---- Tighter section padding ---- */ .wrap, .container, .section-inner { padding-left: 1rem !important; padding-right: 1rem !important; } /* ---- Clamp oversized display type ---- */ h1 { font-size: clamp(1.5rem, 7vw, 2.3rem) !important; line-height: 1.15 !important; } /* ---- Flex rows wrap ---- */ .stat-row, .badge-row, .meta-row, .cta-row { flex-wrap: wrap !important; } } /* ============================================================ SMALL PHONE (<= 400px) ============================================================ */ @media (max-width: 400px) { [style*="grid-template-columns: repeat(4,1fr)"], [style*="grid-template-columns:repeat(4,1fr)"], [style*="grid-template-columns: repeat(4, 1fr)"] { grid-template-columns: 1fr !important; } }