/* ==========================================================================
 * OST · Mobile Scale v2 — replaces mobile-shrink.css
 * --------------------------------------------------------------------------
 * mobile-shrink.css forced html{font-size:12px} (11.5px on iPhone SE), a
 * global −25% zoom that testers reported as "everything is too cramped".
 * Native iOS/Android apps use a 16-17px body. This file restores a proper
 * native-app type scale and comfortable spacing on phones while keeping
 * sections compact enough to scan.
 *
 * Breakpoints:
 *   ≤ 820px          — phones + small tablets (matches mobile-shell.css)
 *   ≤ 430px          — iPhone 12–17 Pro Max class
 *   ≤ 380px          — iPhone SE / mini class
 * ========================================================================== */

@media (max-width: 820px) {
  html { font-size: 16px; }            /* native-app baseline (was 12px) */
  body { line-height: 1.55; }

  /* ------- Type ramp: readable, not shrunken ---------------------------- */
  h1, .hero-title           { font-size: clamp(1.7rem, 6.5vw, 2.15rem) !important; line-height: 1.14 !important; }
  h2, .section-title        { font-size: clamp(1.35rem, 5.2vw, 1.6rem) !important; line-height: 1.2 !important; }
  h3                        { font-size: 1.15rem !important; }
  h4, h5, h6                { font-size: 1rem !important; }
  p, li, label              { font-size: 0.97rem !important; line-height: 1.55 !important; }
  small, .small             { font-size: 0.82rem !important; }

  /* ------- Section rhythm: comfortable, single visual column ------------ */
  section, .section, .panel, .card, .glow-card, .converter-hub,
  .wallet-tab-panel, .convert-terminal, .topup-section {
    padding-top:    clamp(16px, 4vw, 24px) !important;
    padding-bottom: clamp(16px, 4vw, 24px) !important;
    padding-left:   clamp(14px, 4vw, 18px) !important;
    padding-right:  clamp(14px, 4vw, 18px) !important;
    margin-block:   clamp(12px, 3vw, 20px) !important;
    border-radius:  16px !important;
  }
  .container, .wrap, .layout, .content {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .grid, .row, .flex-row, .ct-body, .wallet-convert-grid { gap: 12px !important; }

  /* ------- Touch targets: Apple HIG 44px minimum ------------------------ */
  .btn, button, .ct-convert-btn, .converter-btn {
    min-height: 44px;
    padding: 11px 16px !important;
    font-size: 0.95rem !important;
    border-radius: 12px !important;
  }
  .btn-sm { min-height: 38px; padding: 8px 12px !important; font-size: 0.84rem !important; }
  input, select, textarea, .ct-amount, .ct-select {
    min-height: 44px;
    font-size: 1rem !important;        /* ≥16px = no iOS focus auto-zoom */
    padding: 10px 12px !important;
    border-radius: 12px !important;
  }

  /* ------- Cards that were previously squeezed -------------------------- */
  .faucet-card, .lp-card, .pred-card, .stock-card, .market-card {
    padding: 14px !important;
    margin-bottom: 12px !important;
    border-radius: 14px !important;
  }
  .faucet-card h3, .lp-card h3, .pred-card h3 { font-size: 1.05rem !important; }

  /* Wide data goes to horizontal scroll — never a cramped squeeze. */
  table { font-size: 0.88rem !important; }
  .table-wrap, .scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Hero banners: full-width presence without eating two screens. */
  .hero, .cinematic, .splash {
    min-height: 62vh !important;
    padding: 36px 16px !important;
  }

  /* Stat strips: 2 columns of readable numbers beats 4 columns of slivers. */
  .hero-stats, .stats-grid, .stat-row, .metric-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
}

/* iPhone 12–17 Pro / Pro Max class — slightly tighter chrome, same type. */
@media (max-width: 430px) {
  .container, .wrap, .layout, .content {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

/* iPhone SE / mini — trim the scale a touch, never below readable. */
@media (max-width: 380px) {
  html { font-size: 15px; }            /* was 11.5px */
  h1, .hero-title    { font-size: 1.6rem !important; }
  h2, .section-title { font-size: 1.28rem !important; }
  .btn, button       { padding: 10px 13px !important; }
}