/* ===========================================================
   Healium — mobile-overrides.css
   Loaded LAST. Additive overrides for phones (320px–768px).
   =========================================================== */

@media (max-width: 768px) {

  /* --- 1. Kill horizontal scroll / desktop widths --- */
  html, body, #root {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  body {
    font-size: 16px !important;      /* prevents iOS zoom-on-focus */
    -webkit-text-size-adjust: 100%;
  }

  /* --- 2. Main fixed-width containers --- */
  .frame,
  .container, .wrap, .wrapper, .shell, .page, .layout, .main,
  [class*="max-1060"], [style*="1060px"] {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 12px !important;
    box-sizing: border-box !important;
  }

  /* --- 3. Multi-column grids collapse to one column --- */
  .g2, .g3, .g4 {
    display: block !important;
    grid-template-columns: none !important;
    gap: 0 !important;
    width: 100% !important;
  }
  .g2 > *, .g3 > *, .g4 > * {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* --- 4. Cards --- */
  .card {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 12px !important;
    box-sizing: border-box !important;
  }

  /* --- 5. Touch targets --- */
  .btn, .chip, .clickable {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  /* --- 6. Media never overflows --- */
  img, video, svg, table, iframe, canvas, pre {
    max-width: 100% !important;
    height: auto;
  }
  table { display: block; overflow-x: auto; }

  /* --- 7. Journey / bar / field rows wrap --- */
  .jhead, .jbody, .journey, .bar, .field {
    width: 100% !important;
    max-width: 100% !important;
    flex-wrap: wrap !important;
    box-sizing: border-box !important;
  }
  .field input, .field select, .field textarea {
    width: 100% !important;
    font-size: 16px !important;
    box-sizing: border-box !important;
  }

  /* --- 8. Generic flex safety --- */
  [class*="row"], [class*="flex"] { flex-wrap: wrap !important; }
}

@media (max-width: 480px) {

  body { font-size: 16px !important; }

  /* Full-width actions on tiny screens */
  .btn, .chip {
    width: 100% !important;
    display: flex !important;
    margin: 0 0 8px !important;
  }
  .bar .btn, .bar .chip,
  .jhead .btn, .jhead .chip {
    width: auto !important;
    flex: 1 1 auto !important;
  }

  /* Tighter spacing */
  .frame,
  .container, .wrap, .wrapper, .shell, .page, .layout, .main {
    padding: 8px !important;
  }
  .card { padding: 12px !important; margin: 0 0 10px !important; }
  .jhead, .jbody, .journey, .bar { padding: 8px !important; gap: 8px !important; }

  h1 { font-size: 1.4rem !important; line-height: 1.25 !important; }
  h2 { font-size: 1.2rem !important; }
  h3 { font-size: 1.05rem !important; }
}