/* =====================================================================
   KPM program + info pages: compact phone layout (Oct 9)
   Same idea as mobile-compact.css on the homepage (Josh's format):
   nothing removed from the page, just tighter spacing, 2-per-row grids
   and photo-left cards on phones. Linked ONLY on new-athletes.html,
   veteran-athletes.html, method.html and coaches.html, after styles.css.
   Bump ?v= when you change it. Everything sits inside the phone-only
   query, so tablet and desktop do not change.
   ===================================================================== */

@media (max-width: 640px) {

  /* ---------- 0. Rhythm ---------- */
  main .wrap { padding-left: 16px; padding-right: 16px; }
  main > section.section { padding-top: 44px; padding-bottom: 44px; }
  main section h2 { font-size: 30px; }
  main .sec-note, main .rt-lead { font-size: 15px; line-height: 1.5; }

  /* ---------- 1. Results cards (New Athletes): smaller video, tighter table ---------- */
  #results .nxr-pair { gap: 14px; }
  #results .nxr-pair .nx-reel { padding: 16px; }
  #results .nxr-pair .nx-reel-side { max-width: 210px; margin-bottom: 14px; }
  #results .nx-reel-copy h3 { font-size: 28px; }
  #results .nx-reel-copy p { font-size: 14px; }
  #results .nx-mia-head b { font-size: 32px; }
  #results .nx-mia th, #results .nx-mia td { padding: 6px 4px; font-size: 12.5px; }

  /* ---------- 2. Process (New + Veteran): tests 2 per row, pillars 2 x 2 ---------- */
  #process .nxstep-tests { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  #process .nxstep-tests li { padding: 7px 8px; font-size: 11px; }
  #process .nxstep-get div { padding-top: 8px; padding-bottom: 8px; }
  #process .nxstep-get dd { font-size: 13px; line-height: 1.4; }
  #process .nxstep-copy p { font-size: 14.5px; line-height: 1.5; }
  #process .nxr-fan { max-width: 230px; margin-inline: auto; }
  #process .nxp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  #process .nxp { padding: 12px 11px; }
  #process .nxp > p { display: none; }
  #process .nxp h3 { font-size: 17px; line-height: 1.05; }
  #process .nxp-see { font-size: 9px; margin-top: 6px; }
  #process .nxp ul li { font-size: 12px; line-height: 1.3; padding-top: 4px; padding-bottom: 4px; }
  #process .nxstep-proof > div { padding-top: 10px; padding-bottom: 10px; }

  /* ---------- 3. Coaches: photo left, name beside it, story below ---------- */
  #staff .cx { padding-top: 26px; padding-bottom: 26px; }
  #staff .cx-inner { display: grid !important; grid-template-columns: 104px 1fr; column-gap: 14px; align-items: start; }
  #staff .cx-media { grid-column: 1; grid-row: 1 / span 2; width: 104px; order: 0 !important; }
  #staff .cx-frame, #staff .cx-ph { height: 132px; }
  #staff .cx-ph img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
  #staff .cx-no { display: none; }
  #staff .cx-body { display: contents; }
  #staff .cx-name { grid-column: 2; grid-row: 1; font-size: 26px; line-height: .95; }
  #staff .cx-kick { grid-column: 2; grid-row: 2; font-size: 13px; line-height: 1.4; margin-top: 6px; }
  #staff .cx-chips, #staff .cx-lead, #staff .cx-toggle, #staff .cx-body > *:not(.cx-name):not(.cx-kick) { grid-column: 1 / -1; }
  #staff .cx-chips { margin-top: 14px; gap: 6px; }
  #staff .cx-chips li { font-size: 10px; padding: 6px 8px; }
  #staff .cx-lead { font-size: 14.5px; line-height: 1.55; }

  /* Coaches' bests (same layout as the homepage) */
  #can-do .cdo-head { margin-bottom: 18px; }
  #can-do .cdo-grid { gap: 12px; }
  #can-do .cdo-card { display: grid; grid-template-columns: 108px 1fr; grid-template-rows: auto 1fr; }
  #can-do .cdo-shot { display: contents; }
  #can-do .cdo-shot img { grid-column: 1; grid-row: 1 / span 2; width: 108px; height: 100%; min-height: 150px;
    object-fit: cover; object-position: top; aspect-ratio: auto; }
  #can-do .cdo-shot figcaption { position: static; grid-column: 2; grid-row: 1; padding: 12px 14px 2px; background: none; }
  #can-do .cdo-role { font-size: 9.5px; }
  #can-do .cdo-name { font-size: 18px; }
  #can-do .cdo-prs { grid-column: 2; grid-row: 2; padding: 2px 14px 10px; }
  #can-do .cdo-prs li { padding: 6px 0; gap: 10px; }
  #can-do .cdo-prs b { font-size: 18px; }
  #can-do .cdo-prs span { font-size: 11px; }
  #can-do .cdo-note { font-size: 11px; margin-top: 12px; }

  /* Private training coaches: photo left */
  #private .ptc-grid { gap: 12px; }
  #private .ptc { display: grid; grid-template-columns: 96px 1fr; column-gap: 14px; align-items: start; }
  #private .ptc-ph { width: 96px; height: 120px; overflow: hidden; border-radius: 8px; }
  #private .ptc-ph img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
  #private .ptc-body { padding: 0; }
  #private .ptc-body p { font-size: 13.5px; line-height: 1.5; }

  /* ---------- 4. The Method ---------- */
  #pillars .fp-grid { gap: 12px; }
  #pillars .fp { display: grid; grid-template-columns: 96px 1fr; column-gap: 14px; align-items: start; }
  #pillars .fp-ph { width: 96px; height: 130px; overflow: hidden; border-radius: 8px; position: relative; }
  #pillars .fp-ph img { width: 100%; height: 100%; object-fit: cover; }
  #pillars .fp-no { font-size: 20px; }
  #pillars .fp-body { padding: 0; }
  #pillars .fp-body p { font-size: 13.5px; line-height: 1.5; }
  #resistance .hs-fig, #resistance .hs-fig img { max-height: 220px; object-fit: cover; width: 100%; }
  #resistance .mr-grid { gap: 12px; }
  #resistance .mr-card { padding: 16px; }
  main .statrail { grid-template-columns: 1fr 1fr; column-gap: 16px; }
  main .statrail .stat { padding: 12px 0 10px; }
  #education .edu-shot, #education .edu-shot img { max-height: 220px; object-fit: cover; width: 100%; }
  #cycle .cyc, #who .cyc { padding-top: 14px; padding-bottom: 14px; }
  #cycle .cyc p, #who .cyc p { font-size: 14px; line-height: 1.5; }
}