/* mobile.css — phone + small-tablet responsive refinements.
   Closes #68 (P2 mobile from the 2026-04-26 site audit).

   The existing 1100px breakpoint (in styles.css + extras.css) handles the
   desktop → tablet collapse cleanly. This file adds the phone treatment
   (≤640px) and a few small-tablet refinements (≤900px) the existing rules
   don't cover.

   Loaded after styles.css + extras.css on every page. */

/* =====================================================================
   Small tablet refinements (≤ 900px)
   ===================================================================== */
@media (max-width: 900px) {
  /* About page: two-column dossier collapses to stacked. */
  .vc-about__inner {
    grid-template-columns: 1fr;
    gap: 56px;
    padding: 0 32px;
  }
  .vc-about__side {
    position: static;          /* drop sticky; sidebar moves above body */
    align-self: stretch;
  }

  /* Section h2 sizes step down. */
  .vc-section__h2 { font-size: 32px; line-height: 1.15; }

  /* Pull-quote inner padding lighter. */
  .vc-pq__inner { padding: 72px 40px; }

  /* Hero h1 step down once more. */
  .vc-hero__h1 { font-size: 44px; line-height: 1.05; }
}

/* =====================================================================
   Phone (≤ 640px) — the load-bearing mobile treatment
   ===================================================================== */
@media (max-width: 640px) {

  /* ---- Global section padding ---- */
  .vc-section,
  .vc-section--paper .vc-section__head,
  .vc-section--paper .vc-pillars { padding-left: 20px; padding-right: 20px; }
  .vc-section { padding-top: 56px; padding-bottom: 56px; }
  .vc-section__head { margin-bottom: 36px; }
  .vc-section__h2 { font-size: 26px; }
  .vc-section__sub { font-size: 16px; line-height: 1.55; }

  /* ---- Nav ---- */
  /* Tighten the brand band: drop the decorative "CMD & CONTROL" subtitle and
     divider, drop the right-side cluster (callsign / ⌘K / Support CTA — all
     of which live elsewhere on mobile already), and let the links wrap as
     needed under the brand. The flexbox is .vc-nav__inner (NOT .vc-nav). */
  .vc-nav__inner {
    padding: 10px 16px !important;
    gap: 12px !important;
    flex-wrap: wrap;
  }
  .vc-brand { gap: 8px !important; }
  .vc-brand__name { font-size: 12px !important; letter-spacing: 0.14em !important; }
  .vc-brand__sub,
  .vc-brand__div { display: none !important; }    /* CMD & CONTROL is desktop dressing */
  .vc-nav__links {
    margin-left: 0 !important;
    gap: 14px !important;
    flex-wrap: wrap;
  }
  .vc-nav__link { font-size: 10px !important; letter-spacing: 0.14em !important; }
  .vc-nav__right { display: none !important; }    /* Support CTA + ⌘K + callsign all live elsewhere on mobile */
  .vc-nav__cta-cmd { display: none; }

  /* Brand SVG mark — slightly smaller for tighter band */
  .vc-brand svg { width: 22px !important; height: 22px !important; }

  /* Static nav (article pages) — same shape but tighter. */
  .vc-nav[data-static="true"] { padding: 12px 16px; gap: 12px; flex-wrap: wrap; }
  .vc-nav[data-static="true"] .vc-nav__links { gap: 14px; }

  /* ---- Hero ---- */
  .vc-hero__inner { padding: 48px 20px !important; }
  .vc-hero__h1 { font-size: 34px !important; line-height: 1.05; }
  .vc-hero__lede { font-size: 17px; line-height: 1.5; }
  .vc-hero__cta { gap: 10px; }
  .vc-hero__cta .vc-cta { font-size: 12px; padding: 11px 16px; }
  .vc-hero__readout { display: none; }           /* tactical readout is desktop dressing */

  /* ---- Sub-page hero (Episodes / AARs / About / Doctrine) ---- */
  .vc-suph { padding: 48px 20px 40px !important; }
  .vc-suph__h1 { font-size: 30px !important; line-height: 1.1; }
  .vc-suph__lede { font-size: 16px; line-height: 1.55; }

  /* ---- Pull-quote ---- */
  .vc-pq__inner { padding: 56px 24px !important; }

  /* ---- Doctrine TOC rows ---- */
  /* Number column collapses; cat/title/excerpt stack tighter. */
  .vc-toc__row {
    grid-template-columns: 40px 1fr !important;
    gap: 14px !important;
    padding: 24px 0 !important;
  }
  .vc-toc__n { font-size: 22px !important; }
  .vc-toc__title { font-size: 19px !important; line-height: 1.25; }
  .vc-toc__excerpt { font-size: 15px !important; line-height: 1.55; }
  .vc-toc__open {
    grid-template-columns: 40px 1fr auto !important;
    padding-left: 20px !important;
    gap: 14px !important;
  }
  .vc-toc__open-lbl { font-size: 11px !important; letter-spacing: 0.08em !important; }

  /* ---- Field Notes archive ---- */
  .vc-fna { padding: 48px 16px 64px !important; }
  .vc-fna__h2 { font-size: 28px !important; }
  .vc-fna__head-row { gap: 24px !important; }
  .vc-fna__pull { font-size: 16px; }
  .vc-fna__card { padding: 20px 18px !important; }
  .vc-fna__title { font-size: 18px !important; }

  /* ---- AAR feed ---- */
  .vc-aar__inner { padding: 48px 20px !important; gap: 24px !important; }
  .vc-aar__entry { padding: 18px 0 !important; }
  .vc-aar__lesson { font-size: 16px !important; }
  .vc-aar__date { font-size: 11px !important; }

  /* ---- Episode grid ---- */
  .vc-epc { padding: 18px 16px; }
  .vc-epc__title { font-size: 18px; line-height: 1.25; }
  .vc-epc-filter { gap: 6px; }
  .vc-epc-filter__lbl { display: none; }         /* drop "FILTER §" label, chips speak for themselves */

  /* ---- Bench Notes (newsletter) form ---- */
  .vc-fn__inner { padding: 48px 20px !important; }
  .vc-fn__h2 { font-size: 28px !important; line-height: 1.1; }
  .vc-fn__lede { font-size: 16px; }
  .vc-fn__form { flex-direction: column; gap: 10px !important; }
  .vc-fn__form input, .vc-fn__form button { width: 100%; }

  /* ---- Support block (homepage) ---- */
  .vc-support { padding: 56px 20px !important; }
  .vc-support__h2 { font-size: 26px !important; line-height: 1.15; }
  .vc-support__lede { font-size: 15px; }
  .vc-support__row { gap: 14px; flex-direction: column; align-items: stretch; }
  .vc-support__row .vc-cta { width: 100%; text-align: center; }

  /* ---- About page (paper dossier) ---- */
  .vc-about { padding: 64px 0 !important; }
  .vc-about__inner { padding: 0 20px !important; gap: 40px !important; }
  .vc-about__h1 { font-size: 32px !important; }
  .vc-about__deck { font-size: 14px; }
  .vc-about__lede { font-size: 17px !important; }
  .vc-about__dropcap { font-size: 56px !important; line-height: 0.9; }
  .vc-about__pull { font-size: 18px !important; padding: 20px 24px !important; }

  /* ---- Footer ---- */
  .vc-footer { padding: 32px 16px !important; }
  .vc-footer__top { gap: 32px !important; padding-bottom: 36px; }
  .vc-footer__cols { grid-template-columns: 1fr 1fr; gap: 24px; display: grid; }
  .vc-footer__brand { font-size: 18px; }
  .vc-footer__btm { font-size: 9px !important; }

  /* ---- Operator badge: hide on phone (decorative, takes screen real estate) ---- */
  .vc-operator { display: none !important; }

  /* ---- Patreon tier card grid (already 1col at ≤760, tighten further) ---- */
  .vc-pat { gap: 12px; margin-top: 24px; }
  .vc-pat__tier { padding: 20px 18px 18px; }
  .vc-pat__amt { font-size: 30px; }

  /* ---- CTAs everywhere: usable tap targets ---- */
  .vc-cta { padding: 12px 18px; font-size: 12px; }
  .vc-cta--lg { padding: 14px 20px; font-size: 13px; }
}

/* =====================================================================
   Tiny phones (≤ 380px) — narrow iPhone SE etc.
   ===================================================================== */
@media (max-width: 380px) {
  .vc-hero__h1 { font-size: 28px !important; }
  .vc-suph__h1 { font-size: 26px !important; }
  .vc-section__h2 { font-size: 22px !important; }
  .vc-fn__h2,
  .vc-support__h2,
  .vc-about__h1 { font-size: 24px !important; }

  /* Nav: collapse links to a smaller cluster */
  .vc-nav__links a { font-size: 10px !important; }

  /* Footer cols: single column at the tightest */
  .vc-footer__cols { grid-template-columns: 1fr !important; }
}