/* ==========================================================================
 * OST · Mobile Shrink v1
 * --------------------------------------------------------------------------
 * Goal (verbatim from product owner):
 *   "shrink our mobile pages by 25% ... pages 25% more larger size but
 *    smaller in content"
 *
 * Strategy:
 *   - 25% smaller TYPOGRAPHY + spacing on phones so each card/section fits
 *     more on a single screen (i.e. "25% smaller content").
 *   - Cards/sections themselves get a touch larger relative to the new
 *     baseline (negative margins clipped, max-width raised), so the OUTER
 *     surface looks bigger while the INNER text/padding shrinks.
 *   - Touch targets >= 40px preserved for accessibility.
 *
 * Loaded after mobile-shell.css to override safely.
 * ========================================================================== */

@media (max-width: 820px) {
  :root {
    /* 25% smaller base font on mobile (16px -> 12px) */
    --ost-mobile-shrink: 0.75;
  }

  html { font-size: 12px; }                  /* 25% reduction from 16px */
  body { line-height: 1.45; }

  /* ------- Typography compaction (75% of desktop) ----------------------- */
  h1, .hero-title           { font-size: 1.85rem !important; line-height: 1.15 !important; }
  h2, .section-title        { font-size: 1.45rem !important; line-height: 1.2 !important; }
  h3                        { font-size: 1.15rem !important; }
  h4, h5, h6                { font-size: 1rem  !important; }
  p, li, label, .text, .muted, .text-muted { font-size: 0.92rem !important; line-height: 1.45 !important; }
  small, .small             { font-size: 0.78rem !important; }

  /* ------- Spacing (paddings/margins/gaps) ------------------------------ */
  section, .section, .panel, .card, .glow-card, .converter-hub,
  .wallet-tab-panel, .convert-terminal, .topup-section {
    padding-top:    clamp(10px, 2.5vw, 18px) !important;
    padding-bottom: clamp(10px, 2.5vw, 18px) !important;
    padding-left:   clamp(10px, 3vw, 16px)  !important;
    padding-right:  clamp(10px, 3vw, 16px)  !important;
    margin-block:   clamp(8px,  2vw,  16px) !important;
    border-radius:  14px !important;
  }

  .container, .wrap, .layout, .content {
    padding-left:  10px !important;
    padding-right: 10px !important;
  }

  .grid, .row, .flex-row, .ct-body, .wallet-convert-grid {
    gap: 10px !important;
  }

  /* ------- Buttons: keep tap target >= 40px but slim text -------------- */
  .btn, button, .ct-convert-btn, .converter-btn {
    min-height: 40px;
    padding: 10px 14px !important;
    font-size: 0.92rem !important;
    border-radius: 10px !important;
  }
  .btn-sm { min-height: 34px; padding: 6px 10px !important; font-size: 0.8rem !important; }

  /* ------- Inputs: same idea, lighter visual weight -------------------- */
  input, select, textarea, .ct-amount, .ct-select {
    min-height: 40px;
    font-size: 0.92rem !important;
    padding: 8px 10px !important;
    border-radius: 10px !important;
  }

  /* ------- Make the OUTER card visually larger (per spec) -------------- */
  .converter-hub, .convert-terminal, .wallet-convert-grid > * {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box;
  }

  /* ------- Tighten common dense elements ------------------------------- */
  .ct-header h3, .ct-header .ct-status { margin: 0 0 4px !important; }
  .ct-sub                              { margin: 0 0 10px !important; }
  .ct-providers                        { margin-top: 10px !important; }
  .ct-prov-btns                        { gap: 6px !important; }
  .ct-prov-btn                         { padding: 6px 10px !important; font-size: .82rem !important; }

  /* Faucet hub, launchpad cards, prediction tiles */
  .faucet-card, .lp-card, .pred-card, .stock-card, .market-card {
    padding: 12px !important;
    margin-bottom: 10px !important;
    border-radius: 12px !important;
  }
  .faucet-card h3, .lp-card h3, .pred-card h3 { font-size: 1rem !important; }

  /* Tables get horizontal scroll instead of cramped layout */
  table { font-size: 0.82rem !important; }
  .table-wrap, .scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Hero / cinematic banners take 25% less vertical real estate */
  .hero, .cinematic, .splash {
    min-height: 60vh !important;
    padding: 30px 14px !important;
  }

  /* Bottom dock: keep finger-friendly */
  .mobile-dock, .bottom-nav { min-height: 52px; }
}

/* Even tighter on very small phones (<= 380px) */
@media (max-width: 380px) {
  html { font-size: 11.5px; }
  h1, .hero-title    { font-size: 1.65rem !important; }
  h2, .section-title { font-size: 1.3rem  !important; }
  .btn, button       { padding: 9px 12px !important; }
}