/* assets/css/mobile-overrides.css — affects ONLY screens under 900px */
@media (max-width: 899.98px){
  html, body { max-width:100%; overflow-x:hidden }
  body { -webkit-text-size-adjust:100% }
  h1 { font-size: clamp(24px, 6vw, 34px); line-height: 1.15 }
  h2 { font-size: clamp(20px, 5vw, 28px); line-height: 1.2 }
  h3 { font-size: clamp(18px, 4.5vw, 24px); line-height: 1.25 }
  p, li { font-size: clamp(14px, 3.8vw, 17px); line-height: 1.55 }
  .wrap, .wrap-page, .container, .inner, main, section, header, footer {
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }
  .table-wrap, .table-responsive { width:100%; overflow:auto; -webkit-overflow-scrolling:touch }
  .table-wrap > table, .table-responsive > table { min-width: 640px }
  img, svg, canvas, video, iframe { max-width: 100%; height: auto }
  nav .nav, nav ul, .nav, .navbar, .menu, .header-nav {
    display:flex; gap:10px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:thin;
  }
  a, button, .btn, .nav a, .menu a { min-height:40px; line-height:1.2 }
  [class*="col-"], .row, .columns, .grid, .cards, .card-grid, .gallery, .deck {
    display:block;
  }
  [class*="col-"] > *, .row > *, .columns > *, .grid > *, .cards > *, .card-grid > *, .gallery > *, .deck > * {
    width:100% !important; max-width:100% !important; margin-left:0 !important;
  }
  .grid, .row, .columns, .cards, .card-grid { gap: 12px }
  input, select, textarea { width:100%; min-height:40px }
  .sticky, .fixed, [class*="sticky-"], [class*="fixed-"] { max-width:100% }
  .m-hide { display:none !important } .m-stack{ display:flex; flex-direction:column; gap:12px }
  .m-center{ display:grid; place-items:center } .m-pad{ padding:12px !important } .m-gap{ gap:12px !important }
}