/* ═══════════════════════════════════════════════════════════════════════
   MOBILE TOUCH — comfort pass for phones (≤768px). Loaded by index.html and
   every case study. Purely additive: no existing rule is rewritten.

   Two things to know before changing numbers here:

   1. The site runs `html { zoom: 0.75 }` as its baseline (index.html:48,
      cs.css:18). Every CSS pixel renders at 0.75px. So a control declared
      48px CSS is only 36px under an actual thumb. That is why the values
      below look large — divide by 1.333 for what the eye sees.

   2. Every control here already owns ::before and/or ::after for its glow
      and sweep effects. Do NOT add pseudo-element hit-area overlays — they
      silently replace those effects. Size the element itself instead.

   Scope is deliberately narrow: the booking flow, the contact form, the
   Read Project buttons and the close buttons — the places where a missed
   tap actually costs something. The nav bar is left alone on purpose; it is
   tight at 390px and enlarging those icons risks wrapping it.
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ── Nav bar ────────────────────────────────────────────────────────────
     Kept modest on purpose. At 390px the bar holds logo + toggle + LinkedIn
     + CTA + hamburger; pushing these to a full 59px (44 rendered) makes the
     bar noticeably taller and risks wrapping. 44px CSS ≈ 33px rendered is a
     real improvement on 24px without changing the bar's proportions.
     "Let's Talk?" gets slightly more because it is the conversion target. */
  .theme-toggle,
  .nav-linkedin,
  .nav-hamburger {
    min-width: 44px; min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .nav-cta {
    min-height: 46px;
    display: inline-flex; align-items: center; justify-content: center;
  }

  /* ── Booking calendar ───────────────────────────────────────────────────
     Worst offenders on the site: duration pills rendered 20px tall and the
     month arrows 21×22. This is the conversion flow, so it gets fixed first.
     48px CSS ≈ 36px rendered. */
  .cal-dur {
    min-height: 48px;
    padding-left: 22px; padding-right: 22px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .cal-nav-btn {
    min-width: 48px; min-height: 48px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .cal-slot { min-height: 48px; }

  /* ── Contact form ───────────────────────────────────────────────────────
     iOS Safari auto-zooms the whole page when a focused field's *rendered*
     font-size is under 16px. 13px CSS renders at 9.75px, well under, so the
     page jumps on every tap. 22px CSS ≈ 16.5px rendered — no jump. */
  .cf-input,
  .cf-select,
  .cf-textarea {
    font-size: 22px;
    min-height: 52px;
  }
  .cf-textarea { min-height: 104px; }
  .cf-submit { min-height: 52px; }

  /* ── Read Project buttons (×12 on the homepage) ─────────────────────────
     Primary navigation into the case studies. 28px rendered → 36px. */
  .cs-btn {
    min-height: 48px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  /* cs.css scopes this as `.cs-back-bar .cs-back-btn`, so match that
     specificity or the min-height is ignored. It also animates font-size and
     padding on scroll, so only min-height is set — nothing that would fight
     the collapse transition. */
  .cs-back-bar .cs-back-btn { min-height: 46px; }

  /* ── Close buttons ──────────────────────────────────────────────────────
     cw-close renders 11×15 and cs-lightbox-close 16×21 — genuinely hard to
     hit, and both are the only way out of what they close. */
  .cw-close,
  .cs-lightbox-close {
    min-width: 48px; min-height: 48px;
    display: inline-flex; align-items: center; justify-content: center;
  }

  /* ── Legibility floor ───────────────────────────────────────────────────
     Only classes measured below 10px are lifted, and only to 10px. The many
     10px tracked labels are left exactly as designed. */
  .tm-sub,
  .vc-dur,
  .nm-label,
  .tt-label,
  .tm-heading,
  .scroll-cue-label,
  .crm-card-caption,
  .eo-sidebar-label,
  .eo-thumb-name,
  .eo-replied-tag { font-size: 10px; }

  /* These four are declared with !important or a higher-specificity selector
     upstream, so a bare class cannot reach them. Matched at equal-or-greater
     specificity rather than blanket-!important. */
  .tm-item .tm-sub { font-size: 10px; }
  .va-sim-badge { font-size: 10px !important; }        /* index.html:816 uses !important */
  .crm-card-caption { font-size: 10px !important; }    /* index.html:2597 uses !important */
  .project-tags span { font-size: 10px; }              /* 8px at ≤768, 9px in #case-studies */
  #case-studies .project-tags span { font-size: 10px; }

  /* Case-study captions and stack roles, both 9px and both scoped upstream. */
  .cs-screenshot-caption .tag { font-size: 10px; }
  .cs-stack-item .role { font-size: 10px; }

  /* Deliberately NOT touched: text inside the inline-SVG diagrams (6–9px).
     Those labels are positioned artwork — resizing them breaks the drawings. */
}