/* ============================================================
   MOBILE RESPONSIVE REFINEMENT, Byteland Blog
   Breakpoints: 1024 (tablet) / 720 (phone) / 420 (small phone)
   Also: reduced-motion respect, touch target sizes, safe areas.
   Load LAST (after style.css / post.css / promo.css).
   ============================================================ */

/* ---------- base: smoother mobile behavior ---------- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { overflow-x: clip; }
img, svg, video { max-width: 100%; height: auto; }
/* 44px minimum touch targets on interactive elements (Apple HIG / WCAG) */
a, button, .ss-btn, .tts-btn { touch-action: manipulation; }

/* ---------- TABLET (<=1024px) ---------- */
@media (max-width: 1024px) {
  .hero-title { font-size: clamp(44px, 9vw, 96px); letter-spacing: -2px; }
  .section, .featured { padding-left: 28px; padding-right: 28px; }
  .grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 200px; gap: 14px; }
  #post { padding-left: 28px; padding-right: 28px; }
}

/* ---------- PHONE (<=720px) ---------- */
@media (max-width: 720px) {

  /* ===== NAV ===== */
  .nav { padding: 12px 16px; }
  .nav.scrolled { padding: 10px 16px; }
  .nav-brand { font-size: 13px; letter-spacing: 1.5px; gap: 9px; }
  .nav-brand img { width: 26px; height: 26px; }
  .nav-brand em { display: none; }               /* "BLOG"/"GAME LOCKER" tag hides on tiny screens */
  .nav-links { gap: 16px; }
  .nav-links a { font-size: 12px; padding: 8px 2px; }  /* taller tap area */

  /* ===== HERO (homepage) ===== */
  .hero { padding: 96px 18px 56px; min-height: 92vh; }
  .hero-title { font-size: clamp(38px, 12.5vw, 64px); letter-spacing: -1.5px; line-height: 1; }
  .hero-sub { font-size: 15px; margin-top: 18px; padding: 0 6px; }
  .hero-cta { flex-direction: column; width: 100%; max-width: 320px; gap: 12px; margin-top: 26px; }
  .btn-primary, .btn-ghost { width: 100%; text-align: center; padding: 14px 20px; }
  .hero-scroll { display: none; }                 /* wasted space + jitter on phones */
  .hero-orb { filter: blur(30px); }               /* soften: big blurs are GPU-heavy on phones */

  /* ===== FEATURED CARD (LATEST DROP) ===== */
  .featured { padding: 40px 16px 60px; }
  .fc-content { padding: 26px 20px 30px; }
  .fc-badge { font-size: 10px; letter-spacing: 1.5px; padding: 5px 12px; }
  .fc-title { font-size: clamp(24px, 7.5vw, 32px); }
  .fc-excerpt { font-size: 14px; }
  .fc-meta { gap: 10px; font-size: 11px; flex-wrap: wrap; }

  /* ===== ARCHIVE GRID (GTA collage) ===== */
  .section { padding: 56px 16px; }
  .section-title { font-size: clamp(24px, 7vw, 34px); }
  .grid { grid-template-columns: 1fr; grid-auto-rows: 168px; gap: 12px; margin-top: 24px; }
  /* phones: every tile is a full-width collage card with the thumb as backdrop */
  .post-card { border-radius: 16px; }
  .post-card.sz-a { grid-column: auto; grid-row: auto; }
  .post-card.sz-b, .post-card.sz-e { grid-column: auto; }
  .post-card.sz-c { grid-row: auto; }
  .post-card.sz-a .pc-excerpt { display: none; }
  .pc-body { padding: 16px; }
  .pc-title { font-size: 17px !important; }
  .pc-emoji { font-size: 40px; }

  /* ===== FOOTER ===== */
  footer { padding: 36px 18px; font-size: 11px; }
  footer img { width: 24px; height: 24px; }

  /* ===== POST PAGE: header ===== */
  #post { padding: 140px 16px 64px; }
  .article-cat { font-size: 11px; letter-spacing: 2.5px; margin-bottom: 14px; }
  .article-title { font-size: clamp(28px, 8.5vw, 40px); letter-spacing: -1px; }
  .article-sub { font-size: 16px; margin-top: 14px; }
  .article-meta { flex-wrap: wrap; gap: 12px; row-gap: 8px; font-size: 11px; }
  .article-meta .avatar { width: 34px; height: 34px; }

  /* CTA row (listen + share) wraps cleanly, full-width touch targets */
  .listen-cta, .share-cta { margin-top: 16px; padding: 12px 18px; font-size: 12px; }
  .article-meta { row-gap: 14px; }

  /* ===== POST PAGE: body ===== */
  .body { margin-top: 32px; }
  .body h2 { font-size: clamp(21px, 6vw, 27px); margin: 42px 0 14px; }
  .body h2 .n { display: block; margin: 0 0 6px; }   /* section number on its own line */
  .body p { font-size: 16px; line-height: 1.75; margin: 15px 0; }
  .body li { font-size: 15px; }
  .body ul { padding-left: 20px; }

  /* pullquote: lighter padding, keep the magenta spine */
  .pullquote {
    margin: 34px 0; padding: 20px 18px 20px 22px;
    font-size: 18px; line-height: 1.55;
  }

  /* stat cards: 2-up grid on phones instead of 4 across */
  .stats { grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 30px 0; }
  .stat { padding: 18px 12px; border-radius: 13px; }
  .stat .num { font-size: 26px; }
  .stat .label { font-size: 10px; letter-spacing: 0.5px; }

  /* diagrams: full-width column layout, smaller nodes */
  .diagram { margin: 34px 0; padding: 24px 14px; border-radius: 14px; }
  .diagram-caption { font-size: 10px; letter-spacing: 1.5px; margin-bottom: 18px; }
  .diagram-row { flex-direction: column; gap: 10px; }
  .diagram-row .flow-arrow { transform: rotate(90deg); }  /* arrows point down when stacked */
  .node { padding: 12px 14px; font-size: 12px; text-align: center; width: 100%; max-width: 300px; box-sizing: border-box; }

  /* code blocks: scroll horizontally, never break layout */
  .codeblock { margin: 26px 0; border-radius: 12px; }
  .codeblock pre { padding: 14px 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .codeblock code { font-size: 11.5px; line-height: 1.65; }

  /* callouts */
  .callout { margin: 26px 0; padding: 16px 16px; font-size: 14px; border-radius: 12px; }

  /* press-shot figures */
  .post-img { margin: 28px 0; border-radius: 13px; }
  .post-img figcaption { font-size: 9.5px; letter-spacing: 1px; padding: 9px 12px; }

  /* ecosystem + inline promo cards */
  .ecosystem { grid-template-columns: 1fr; gap: 14px; }
  .promo-card { padding: 20px 16px; }
  .pc-top { gap: 11px; }
  .pc-logo { width: 40px; height: 40px; font-size: 19px; }
  .pc-name { font-size: 16px; }
  .pc-img { height: 150px; }
  .pc-bottom { padding: 14px 16px; flex-direction: column; align-items: flex-start; gap: 10px; }
  .inline-promo { margin: 28px 0; }
  .ip-cta { padding: 10px 20px; font-size: 12px; }

  /* ===== FLOATING UI ===== */
  .tts-bar { bottom: calc(14px + env(safe-area-inset-bottom, 0px)); right: 14px; gap: 6px; padding: 7px 8px; }
  .tts-btn { min-width: 38px; height: 38px; font-size: 11px; }
  .share-sheet { width: 100vw; max-width: none; border-radius: 20px 20px 0 0; padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px)); }
  .ss-btn { padding: 13px 6px; }
  .ss-btn svg { width: 28px; height: 28px; }

  /* post hero: shorter, softer on small screens */
  .post-hero { height: 44vh; min-height: 240px; max-height: 360px; }
}

/* ---------- SMALL PHONES (<=420px) ---------- */
@media (max-width: 420px) {
  .hero { padding: 88px 14px 48px; }
  .hero-title { font-size: clamp(34px, 13vw, 52px); }
  .hero-sub { font-size: 14px; }
  .nav { padding: 10px 12px; }
  .nav-links { gap: 12px; }
  .nav-links a { font-size: 11px; }
  #post { padding: 150px 13px 56px; }
  .article-title { font-size: clamp(25px, 9vw, 34px); }
  .article-sub { font-size: 15px; }
  .article-meta { font-size: 10px; gap: 9px; }
  .listen-cta, .share-cta { width: 100%; justify-content: center; }
  .stats { gap: 9px; }
  .stat .num { font-size: 22px; }
  .fc-title { font-size: clamp(22px, 8vw, 28px); }
  .codeblock code { font-size: 10.5px; }
  .ss-row { gap: 8px; }
  .ss-btn span { font-size: 9px; }
}

/* ---------- ACCESSIBILITY: respect reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- LANDSCAPE PHONES: keep hero usable ---------- */
@media (max-width: 926px) and (orientation: landscape) and (max-height: 480px) {
  .hero { min-height: auto; padding: 90px 24px 44px; }
  .hero-scroll { display: none; }
  .post-hero { height: 100vh; max-height: none; }
}