/* ─────────────────────────────────────────────────────────────────────────
   JetPatient · Marketing-pages mobile optimization
   Loaded by: index, employers, clinics, ai-suite, pathway, quality, hubs,
              marketplace, brokers, Savings Calculator
   Scope: ALL rules inside @media (max-width: 768px) only — desktop layouts
   are completely untouched. Targets the recurring patterns observed in the
   iPhone Pro Max screenshots: stat grids overflowing, multi-col panels
   crushing text, inline grids with no mobile rule, role-tab pills clipping,
   mockup overlays bleeding outside cards, CTA pairs running off the right.
   ───────────────────────────────────────────────────────────────────────── */

/* ════════════════════════════════════════════════════════════════════════
   Tier 1 · ≤ 768px (small tablet + all phones)
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* NOTE: Earlier versions of this file set `html, body { overflow-x: hidden;
     max-width: 100vw }` as a horizontal-overflow safety net. iOS Safari
     interpreted that combination as a hard scroll lock on the marketplace
     hero (the .search-hero comment in marketplace.html explicitly warns:
     "overflow-y must stay visible so dropdowns aren't clipped on mobile").
     We rely on per-element guards below + each page's own overflow handling
     instead, and let the document scroll naturally. */

  /* Inline 4-column grids → 2 columns */
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns: repeat(4,1fr)"],
  [style*="grid-template-columns:repeat(4, 1fr)"],
  [style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 18px !important;
  }

  /* Generic class-based 4-col grids most pages use */
  .stat-row-4, .stats-4, .grid-4, .cards-4 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 18px !important;
  }

  /* Site-wide stat-band on Home (#network-stats was repeat(4,1fr) inline) */
  #network-stats {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 28px !important;
    padding: 28px 22px !important;
  }

  /* Card-grid stacks (3-col → 1-col already exists in .ai3/.cards3 etc on
     some pages; ensure consistent across all marketing surfaces) */
  .cards3, .ai3, .testi3, .savings-grid {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  /* Tab pill (For Patients / For Clinics / For Employers) — make it adapt to
     viewport width without clipping. Each tab shrinks; the pill caps at
     viewport minus side padding. Previously was width: fit-content with no
     mobile rule, causing the right edge to clip on iPhone Pro Max. */
  .tab-bar {
    width: 100% !important;
    max-width: calc(100vw - 32px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 4px !important;
    gap: 2px !important;
    box-sizing: border-box !important;
  }
  .tab-bar .tab {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding: 9px 10px !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    text-align: center !important;
  }

  /* Long words in headings should break rather than push the card width */
  h1, h2, h3, h4, .lead, .desc, .cta { overflow-wrap: break-word; word-wrap: break-word; }

  /* Cards / sections that have very long bullet text — let them wrap */
  li, p { overflow-wrap: break-word; word-wrap: break-word; }

  /* Mockups / device frames / dashboard previews positioned absolute or
     overflowing their card on desktop — convert to in-flow + scaled. */
  .mockup, .preview, .dashboard-mockup, .phone-mockup, .device-mockup,
  [class*="-mockup"], [class*="-preview"] {
    position: static !important;
    transform: none !important;
    margin-top: 16px !important;
    max-width: 100% !important;
    width: 100% !important;
    right: auto !important;
    left: auto !important;
    bottom: auto !important;
    top: auto !important;
  }

  /* CTA button pairs (e.g., "Calculate My Savings →" + "Explore Procedures")
     that sit side-by-side via flex on desktop. Stack them at full width. */
  .cta-pair, .hero-cta-row, .hero-actions, .hero-ctas {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    width: 100% !important;
  }
  .cta-pair > *, .hero-cta-row > *, .hero-actions > *, .hero-ctas > * {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    text-align: center !important;
  }

  /* Inputs at 16px to prevent iOS auto-zoom when focused */
  input[type="text"], input[type="email"], input[type="tel"],
  input[type="number"], input[type="search"], input[type="url"],
  input[type="password"], select, textarea {
    font-size: 16px !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   Tier 2 · ≤ 640px (most phones, including iPhone Pro Max portrait)
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {

  /* Inline 3-column grids → 1 column */
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns: repeat(3,1fr)"],
  [style*="grid-template-columns:repeat(3, 1fr)"],
  [style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* Inline 1fr 1fr grids (the "How we measure" pattern in jetpatient-quality)
     where two narrow columns crush text on mobile */
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* Process grids using fixed pixel arrows (e.g., "1fr 72px 1fr 72px 1fr") —
     stack vertically and hide the arrow cells (which become useless when
     vertical) */
  [style*="grid-template-columns:1fr 72px 1fr 72px 1fr 72px 1fr"],
  [style*="grid-template-columns: 1fr 72px 1fr 72px 1fr 72px 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* Class-based 2-column content panels */
  .cat-grid, .quality-2col, .two-col, .col-2, .grid-2 {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* Ensure cards never exceed viewport width */
  .card, .panel, .tile, [class*="-card"], [class*="-panel"], [class*="-tile"] {
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Fluid typography — clamp() heroes that get too large on iPhone */
  h1, .hero h1, .hero-title { font-size: clamp(28px, 7vw, 38px) !important; line-height: 1.15 !important; }
  h2, .section-title       { font-size: clamp(22px, 5.5vw, 28px) !important; line-height: 1.2 !important; }

  /* Generic horizontal scroll on tabs/chips that have many entries —
     turn the row into a horizontal swipe instead of overflowing */
  .chip-row, .filter-chips, .pill-row, .tabs-scroll {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none;
  }
  .chip-row::-webkit-scrollbar,
  .filter-chips::-webkit-scrollbar,
  .pill-row::-webkit-scrollbar,
  .tabs-scroll::-webkit-scrollbar { display: none; }

  /* Section padding — nudge in from the edge */
  section, .section { padding-left: 18px !important; padding-right: 18px !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   Tier 3 · ≤ 480px (small phones + iPhone SE / Mini)
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

  /* Tighter section padding on very small screens */
  section, .section { padding-left: 14px !important; padding-right: 14px !important; }

  /* Ensure card padding shrinks too so internal content has more room */
  .card, .panel, .tile, .stat-card,
  [class*="-card"], [class*="-panel"], [class*="-tile"] {
    padding: 18px 16px !important;
  }

  /* Hero CTA full-width is already covered by .cta-pair stack above; here
     we ensure single-CTA hero buttons grow to full width too */
  .hero .cta, .hero-cta, .btn-hero, .btn-primary-lg {
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: center !important;
  }

  /* Big number + label stat tiles: keep numbers from blowing through the
     card on extremely narrow viewports */
  [class*="stat"] [class*="num"],
  [class*="stat"] [class*="value"],
  [class*="stat"] .v {
    font-size: clamp(20px, 7vw, 30px) !important;
  }

  /* For Patients / Clinics / Employers tab pill — even tighter on small phones */
  .tab-bar .tab { padding: 8px 6px !important; font-size: 11px !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   Page-specific surgical overrides — kept here (vs per-page inline) when
   the selector is unique enough that targeting it from a shared file does
   not risk accidental matches elsewhere.
   ════════════════════════════════════════════════════════════════════════ */

/* index.html · "Why Clinics Choose JetPatient" 3-card grid (the .cards3 rule
   above already handles this; this is the safety net if class names diverge) */
@media (max-width: 640px) {
  .why-clinics-grid, .why-jp-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
}

/* jetpatient-employers.html · PREDICT card with mockup overlay on the right.
   The mockup uses inline absolute positioning. Stack it below text. */
@media (max-width: 768px) {
  .predict-card .mockup,
  .predict-card-mockup,
  [class*="predict"] [class*="mockup"],
  .employer-ai-card img,
  .employer-ai-card .preview {
    position: static !important;
    transform: none !important;
    margin: 16px auto 0 !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
  }
}

/* jetpatient-pathway.html · "Stage 03-05" red callout's 3-stat row */
@media (max-width: 640px) {
  .stage-callout .stat-row,
  .pathway-stage .stat-row,
  [class*="stage"] [class*="stat-row"] {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
}

/* jetpatient-quality.html · "Fiduciary-grade transparency" card with very
   long text that overflows on iPhone. Force tight padding + word-break */
@media (max-width: 640px) {
  .fiduciary-card, .quality-fiduciary, [class*="fiduciary"] {
    padding: 22px 18px !important;
  }
  .fiduciary-card *, [class*="fiduciary"] * {
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
    max-width: 100% !important;
  }
}

/* JetPatient_Savings_Calculator.html · "See What You Could Save" hero CTAs */
@media (max-width: 640px) {
  .savings-hero-cta, .calc-cta-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .savings-hero-cta > *, .calc-cta-row > * {
    width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   index.html · Homepage hero — globe SVG was bleeding into the text on
   mobile, making body copy unreadable. Hide the visual on mobile, tighten
   hero padding, bump heading + body to legible sizes.
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
  /* Tighten hero padding on mobile (was 148px 28px 96px on desktop) */
  #hero { padding: 110px 20px 56px !important; }
  /* Hide the globe + decorative cards visual on mobile — it was overlapping
     the text content, making the lead paragraph illegible. Cards return on
     tablet/desktop. */
  #hero .hero-visual { display: none !important; }
  /* Single-column hero text takes full width */
  #hero .hero-inner {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    padding-top: 0 !important;
  }
  /* Larger, bolder hero title on mobile (clamp scales gracefully) */
  #hero .hero-title {
    font-size: clamp(34px, 9vw, 48px) !important;
    line-height: 1.1 !important;
    margin-bottom: 16px !important;
  }
  /* Lead text — slightly larger + tighter line-height for readability */
  #hero .hero-text .lead {
    font-size: 15.5px !important;
    line-height: 1.55 !important;
    color: #4a5870 !important;  /* darker than var(--muted) for contrast */
    max-width: none !important;
    margin-bottom: 8px !important;
  }
  /* CTAs full-width on mobile so they're easy to tap */
  #hero .hero-ctas { flex-direction: column !important; gap: 10px !important; margin-top: 24px !important; }
  #hero .hero-ctas > .btn { width: 100% !important; box-sizing: border-box !important; text-align: center !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   jetpatient-pathway.html · "Maria R · Bariatric sleeve" trip dashboard
   The avatar + text in the header crammed together; timeline rows had a
   72px-fixed Day column that squeezed the middle text column on mobile.
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  /* Tighten the dashboard padding on mobile (was 38px 40px 44px) */
  .dash { padding: 26px 18px 30px !important; border-radius: 18px !important; }
  /* Header — let it stack cleanly */
  .dash-head {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
    margin-bottom: 18px !important;
  }
  .dash-who { gap: 12px !important; min-width: 0 !important; width: 100% !important; }
  .dash-avatar {
    width: 44px !important; height: 44px !important;
    font-size: 16px !important;
    flex-shrink: 0 !important;
  }
  /* Allow long names + city/hospital line to wrap rather than crush */
  .dash-who > div:last-child { min-width: 0 !important; flex: 1 1 auto !important; }
  .dash-name {
    font-size: 15px !important;
    line-height: 1.25 !important;
    margin-bottom: 3px !important;
    overflow-wrap: break-word !important;
  }
  .dash-trip { font-size: 11.5px !important; line-height: 1.4 !important; }
  /* Status pill — keep compact */
  .dash-status { font-size: 10.5px !important; padding: 5px 10px !important; }
  /* Timeline rows — switch to a tighter 2-row layout per item:
     row 1: Day + chip; row 2: event description full-width. */
  .timeline { padding: 0 !important; }
  .timeline h4 { font-size: 13px !important; margin-bottom: 8px !important; }
  .tl-row {
    grid-template-columns: 1fr auto !important;
    grid-template-rows: auto auto !important;
    grid-template-areas: "day chip" "event event" !important;
    gap: 4px 10px !important;
    padding: 10px 0 !important;
  }
  .tl-day { grid-area: day !important; font-size: 10.5px !important; }
  .tl-chip { grid-area: chip !important; font-size: 9.5px !important; padding: 3px 8px !important; }
  .tl-event {
    grid-area: event !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    overflow-wrap: break-word !important;
  }
  /* Side panel cards — center alignment + tighter spacing */
  .dash-side { gap: 12px !important; }
  .card-mini { padding: 14px 14px !important; }
  .card-mini h4 { font-size: 12.5px !important; margin-bottom: 8px !important; }
  .vital, .contact-row { font-size: 12.5px !important; padding: 7px 10px !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   jetpatient-pathway.html · "Stage 03-05 · Always-on" red callout
   Tighten padding, give the long lead paragraph room to wrap, keep the
   3-up SLA cards but cut their padding so they fit comfortably.
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .fastlane { padding: 28px 20px !important; border-radius: 18px !important; }
  .fl-grid { grid-template-columns: 1fr !important; gap: 22px !important; }
  /* Lead paragraph — readable size with proper word wrap */
  .fl-lead {
    font-size: 14px !important;
    line-height: 1.55 !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
  }
  .fl-lead strong { font-weight: 700 !important; }
  /* SLA mini-cards (the 3 stats) — keep 3 columns but tighten everything */
  .fl-sla {
    gap: 6px !important;
    margin-top: 14px !important;
    grid-template-columns: repeat(3, 1fr) !important;
  }
  .fl-sla-card { padding: 10px 6px !important; border-radius: 10px !important; }
  .fl-sla-num { font-size: 22px !important; line-height: 1 !important; }
  .fl-sla-lbl {
    font-size: 9px !important;
    letter-spacing: .04em !important;
    line-height: 1.25 !important;
    margin-top: 6px !important;
  }
  /* "What happens when a red flag trips" panel — tighter on mobile */
  .fl-flow { padding: 18px 16px !important; border-radius: 14px !important; }
  .fl-flow h4 { font-size: 13px !important; margin-bottom: 10px !important; }
  .fl-step { grid-template-columns: 32px 1fr !important; gap: 12px !important; padding: 10px 0 !important; }
  .fl-step-num { width: 28px !important; height: 28px !important; font-size: 12px !important; }
  .fl-step-title { font-size: 13px !important; }
  .fl-step-desc { font-size: 12px !important; line-height: 1.5 !important; overflow-wrap: break-word !important; }
  .fl-step-time { font-size: 10.5px !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   marketplace.html · Find Clinics scroll lock fix (defensive layer)
   Removes any inherited scroll constraints from the search-hero so the
   document can always scroll vertically. The .search-hero already declares
   overflow-y: visible — this rule guarantees no parent contradicts it.
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .search-hero { overflow-y: visible !important; min-height: 0 !important; height: auto !important; }
  .search-hero .hero-inner { min-height: 0 !important; height: auto !important; }
  /* Tighten search-hero padding on mobile so users see content lower on the
     page sooner (it had padding: 28px 24px 0 on desktop) */
  .search-hero { padding-top: 20px !important; padding-bottom: 20px !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   Inline-styled CTA banner pattern (recurring across marketing pages)

   Pattern:
     <div style="...display:flex;...justify-content:space-between;
                 ...flex-wrap:wrap;...">
       <div style="flex:1;min-width:220px;">...text...</div>
       <div style="display:flex;...flex-shrink:0;">
         <a>...primary CTA...</a>
         <a>...secondary CTA...</a>
       </div>
     </div>

   On iPhone Pro Max the buttons div doesn't shrink (flex-shrink:0), the
   text div hits its min-width floor (220px), so the buttons get pushed
   off-screen on the right. Force both children to stack vertically full
   width on mobile.
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  /* The wrapper itself becomes a vertical stack */
  .tp [style*="justify-content:space-between"][style*="flex-wrap:wrap"],
  .tp [style*="justify-content: space-between"][style*="flex-wrap: wrap"] {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 18px !important;
  }
  /* Direct children take full width and lose their min-width floor */
  .tp [style*="justify-content:space-between"][style*="flex-wrap:wrap"] > div,
  .tp [style*="justify-content: space-between"][style*="flex-wrap: wrap"] > div {
    width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 100% !important;
  }
  /* CTA pair inside the second child stacks vertically too */
  .tp [style*="justify-content:space-between"][style*="flex-wrap:wrap"] > div[style*="flex-shrink:0"],
  .tp [style*="justify-content: space-between"][style*="flex-wrap: wrap"] > div[style*="flex-shrink:0"] {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  /* Anchors inside such CTA pairs become full-width centered buttons */
  .tp [style*="justify-content:space-between"][style*="flex-wrap:wrap"] > div[style*="flex-shrink:0"] > a,
  .tp [style*="justify-content: space-between"][style*="flex-wrap: wrap"] > div[style*="flex-shrink:0"] > a {
    width: 100% !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   PREDICT card hero ("89% / 14mo / $2.4M / 40+" stat blocks beside a
   floating dashboard mockup that's positioned absolutely on desktop and
   bleeds outside the card on mobile).
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* The PREDICT card's inline 3-up "89% / 14mo / $2.4M" stat row */
  [style*="background:rgba(0,201,192,.15)"][style*="grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns: 1fr !important;
  }
  /* Any absolutely-positioned mockup inside the PREDICT hero */
  .predict-hero [style*="position:absolute"],
  [class*="predict"] img[style*="position:absolute"],
  [class*="predict"] [class*="mockup"][style*="position:absolute"] {
    position: static !important;
    transform: none !important;
    margin: 16px auto 0 !important;
    max-width: 100% !important;
    height: auto !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   "Stage 03-05 · Always-on" red callout block on jetpatient-pathway.html
   with three pill stats (<15m / <1h / 30d) that overflow on mobile.
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  /* The red stage callout's inline 3-col stat grid */
  [style*="background"][style*="DC2626"] [style*="grid-template-columns:repeat(3"],
  [style*="background"][style*="rgb(220,38,38)"] [style*="grid-template-columns:repeat(3"],
  [style*="background:#DC2626"] [style*="grid-template-columns:repeat(3"] {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
  }
  /* Tighten the stat tiles inside red callouts so 3 still fit on a small phone */
  [style*="background:#DC2626"] [style*="grid-template-columns:repeat(3"] > * {
    padding: 10px 6px !important;
    font-size: 11px !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   "Why Clinics Choose JetPatient" 3-card grid — third card was clipping on
   the right. This hits the page's inline 3-col grid wrapper.
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  /* The grid wrapper that holds the 3 "Referral Fees / Own Profile / etc" cards */
  [style*="grid-template-columns:repeat(3,1fr)"][style*="gap:18px"],
  [style*="grid-template-columns:repeat(3,1fr)"][style*="gap:20px"],
  [style*="grid-template-columns:repeat(3,1fr)"][style*="gap:22px"] {
    grid-template-columns: 1fr !important;
  }
}