/* mobile.css — mobile-first hardening layer (loaded last).
   The phone is the primary experience. Rules here apply mobile-up; desktop-only
   deltas are guarded with min/max-width. No global overflow-x:hidden (it breaks
   position:sticky nav) — overflow is prevented by sizing instead. */

/* ---- Fluid, mobile-first typography (smooth scale, no fixed desktop jumps) ---- */
.hero h1 { font-size: clamp(2rem, 7vw, 3.2rem); }
.hero .tagline { font-size: clamp(1rem, 2.6vw, 1.18rem); }
.article-hero h1 { font-size: clamp(1.7rem, 5.5vw, 2.5rem); }
.section-title { font-size: clamp(1.35rem, 4vw, 1.6rem); }
.article-content h2 { font-size: clamp(1.3rem, 4.2vw, 1.55rem); }
.featured-card-body .article-card-title { font-size: clamp(1.25rem, 4.5vw, 1.5rem); }

/* ---- 44px minimum tap targets (WCAG 2.5.5 / comfortable thumbs) ---- */
.btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.nav-toggle { min-width: 44px; min-height: 44px; }
.footer-links a { display: inline-block; padding: 10px 12px; }
.consent-btn { min-height: 44px; }

/* ---- Media never overflows its container ---- */
img, figure, table, iframe, video { max-width: 100%; }

/* ---- Phone layout (<= 768px) ---- */
@media (max-width: 768px) {
  /* Bigger, finger-friendly nav drawer rows */
  .nav-links.open > li > a { min-height: 44px; display: flex; align-items: center; }
  .nav-dropdown a { min-height: 44px; display: flex; align-items: center; }

  /* Comfortable reading gutters (was a flat 28px everywhere) */
  .section { padding: 44px 20px; }
  .article-content { padding: 32px 20px 64px; }
  .article-hero { padding: 60px 20px 28px; }
  .breadcrumb, .article-byline, .ad-slot, .related-strip { padding-left: 20px; padding-right: 20px; }

  /* Wide tables scroll inside the column instead of blowing out the layout */
  .article-content table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Single-column everywhere it matters */
  .related-grid { grid-template-columns: 1fr; }
  .article-img-row { grid-template-columns: 1fr; }

  /* Tame full-bleed image breaks to the 20px gutter so they don't cause overflow */
  .mistake-img-break, .img-placeholder.mistake-img-break {
    width: calc(100% + 40px); margin-left: -20px; margin-right: -20px; height: 200px;
  }
}

/* ---- Small phones (<= 560px): stack the consent bar, respect the notch ---- */
.consent-banner { padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 560px) {
  .consent-banner { flex-direction: column; align-items: stretch; text-align: left; }
  .consent-actions { justify-content: flex-end; }
  .hero .cta-row .btn { width: 100%; }
}