/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE-FIRST BASELINE — VSHR Sage
   Shipped 2026-04-17 (Phase 0 of finish-sage-properly design doc).

   CSS DUPLICATION AUDIT (Wave 0.10, 2026-04-18):
     vs public/svc-components.css → zero selector overlap.
     mobile-first-baseline owns layout primitives (.grid, .sec, .container,
     trust-chip, mobile overflow guards). svc-components owns service-page
     component classes (.svc-*). No deduplication needed.

   LOAD ORDER (from app.blade.php):
     1. Google Fonts (font-display swap)
     2. Tailwind reset (via Vite/WP)
     3. THIS FILE (mobile-first-baseline.css)     ← defaults
     4. site.css (tokens + existing styles)        ← builds on defaults
     5. premium.css (premium overrides)
     6. ind-components.css                          ← Phase 1 component styles
     7. vshr-v4.css (v4 overrides, legacy)

   PRINCIPLES (from _strategy/04-mobile-first-rules.md):
     - 17px body minimum on mobile
     - 48×48px touch targets
     - No 2+ column grids below 768px
     - No horizontal page scroll
     - Images declare aspect-ratio (zero CLS)
     - font-display: swap with system fallback

   BREAKPOINTS (min-width ONLY — no max-width baseline):
     - Mobile (default, no query): 0-767px
     - Tablet: min-width: 768px
     - Desktop: min-width: 1024px
     - Wide: min-width: 1280px

   DO NOT add max-width media queries in this file. Mobile is the baseline;
   wider is the enhancement. Override-in-place is an anti-pattern here.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 0. RESET + BOX MODEL ──────────────────────────────────────────── */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── 1. BREAKPOINT + TOUCH TOKENS ──────────────────────────────────── */

:root {
  --bp-tablet: 768px;
  --bp-desktop: 1024px;
  --bp-wide: 1280px;

  /* Touch target minimum — 48×48 per mobile-first rule #5.
     Apple HIG 44, Android/WCAG 48 — we take 48. */
  --touch-min: 48px;

  /* Page-level horizontal rhythm — no horizontal scroll rule #8. */
  --page-pad-mobile: 20px;
  --page-pad-desktop: 32px;
}

/* ── 2. HTML + BODY BASELINE ───────────────────────────────────────── */

html {
  /* Prevent iOS auto text inflation; respect user's font-size preference. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Smooth scroll for #anchor navigation */
  scroll-behavior: smooth;
  /* No horizontal scroll on the page itself (rule #8) */
  overflow-x: hidden;
}

body {
  font-family: var(--font-b, "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
  font-size: var(--fs-base, 17px);          /* ← 17px mobile baseline */
  line-height: 1.6;
  color: var(--text, #0D1829);
  background: var(--off, #F4F8FC);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  /* Safari iOS — bounce-scroll behavior */
  overscroll-behavior-y: contain;
}

/* ── 3. TYPOGRAPHY — MOBILE FIRST, DESKTOP ENHANCES ────────────────── */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-h, "Poppins", system-ui, -apple-system, sans-serif);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--navy, #07192E);
  text-wrap: balance;    /* Modern browsers only — graceful fallback */
}

/* Mobile scale — caps per design doc § Mobile-First Operating Rules */
h1 { font-size: clamp(28px, 8vw, 40px); line-height: 1.1; }
h2 { font-size: clamp(22px, 5.5vw, 28px); line-height: 1.2; }
h3 { font-size: clamp(18px, 4.5vw, 22px); line-height: 1.3; }
h4 { font-size: clamp(16px, 4vw, 19px); line-height: 1.35; }
h5 { font-size: 16px; line-height: 1.4; }
h6 { font-size: 14px; line-height: 1.4; text-transform: uppercase; letter-spacing: 0.08em; }

p { line-height: 1.6; max-width: 65ch; }

/* Desktop enhancement — larger heading scale */
@media (min-width: 1024px) {
  h1 { font-size: clamp(40px, 4.5vw, 64px); }
  h2 { font-size: clamp(28px, 3vw, 42px); }
  h3 { font-size: clamp(22px, 2.2vw, 28px); }
  h4 { font-size: clamp(19px, 1.8vw, 22px); }
  body { font-size: 18px; }
}

/* ── 4. LINKS — TOUCHABLE + ACCESSIBLE ─────────────────────────────── */

a {
  color: var(--blue, #1479A3);
  text-decoration: none;
  /* Inline-link tap area — rule #5. Adds invisible padding without layout shift. */
  touch-action: manipulation;
}

a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* All interactive elements hit the 48×48 minimum on mobile */
button,
.btn,
a.btn,
[role="button"],
input[type="button"],
input[type="submit"],
input[type="reset"] {
  min-height: var(--touch-min);
  min-width: var(--touch-min);
  touch-action: manipulation;
}

/* Disable webkit tap highlight; replace with focus-visible */
a, button, [role="button"], input, select, textarea {
  -webkit-tap-highlight-color: transparent;
}

:focus-visible {
  outline: 2px solid var(--blue, #1479A3);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ── 5. MEDIA — ZERO LAYOUT SHIFT ──────────────────────────────────── */

img, picture, video, svg, canvas, iframe {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Force aspect-ratio declaration — rule #9. Elements missing width/height
   attributes get a fallback 16:9. Components should override per-instance. */
img:not([width]):not([height]) {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* Icon SVGs inside buttons/links default to reasonable size */
a > svg:not([width]), button > svg:not([width]), span > svg:not([width]) {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}
.trust-chip svg, .trust-row svg { width: 16px !important; height: 16px !important; }
.btn-icon { width: 18px !important; height: 18px !important; }

/* ── 6. FORM ELEMENTS — 48px+ ON MOBILE ────────────────────────────── */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="date"],
input[type="time"],
textarea,
select {
  min-height: var(--touch-min);
  font-size: 16px;   /* 16px min prevents iOS zoom on focus */
  font-family: inherit;
  line-height: 1.4;
}

textarea { min-height: calc(var(--touch-min) * 2); }

/* iOS removes default select chrome; ensure visual affordance survives */
select {
  appearance: none;
  -webkit-appearance: none;
}

/* ── 7. LAYOUT PRIMITIVES — MOBILE FIRST ───────────────────────────── */

/* .sec — every <section> wrapper. 64px vertical mobile / 96px desktop. */
.sec {
  padding-top: var(--s-8, 64px);
  padding-bottom: var(--s-8, 64px);
  padding-left: var(--page-pad-mobile);
  padding-right: var(--page-pad-mobile);
}

@media (min-width: 1024px) {
  .sec {
    padding-top: var(--s-9, 96px);
    padding-bottom: var(--s-9, 96px);
    padding-left: var(--page-pad-desktop);
    padding-right: var(--page-pad-desktop);
  }
}

/* Container — centered, max 1200px, zero horizontal scroll */
.container,
.wrap {
  width: 100%;
  max-width: var(--max-w, 1200px);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--page-pad-mobile);
  padding-right: var(--page-pad-mobile);
}

@media (min-width: 1024px) {
  .container, .wrap {
    padding-left: var(--page-pad-desktop);
    padding-right: var(--page-pad-desktop);
  }
}

/* ── 8. GRIDS — MOBILE SINGLE-COL, DESKTOP ENHANCES ────────────────── */

/* Default grid: 1 column mobile. Grid systems upgrade at min-width: 768px+. */
.grid-default,
.ind-grid,
.svc-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5, 24px);
}

@media (min-width: 768px) {
  .grid-2,
  .ind-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-5, 24px);
  }
}

@media (min-width: 1024px) {
  .grid-3,
  .ind-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-5, 24px);
  }
  .grid-4,
  .ind-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s-5, 24px);
  }
}

/* ── 9. HORIZONTAL SNAP RAILS — rule #7 ────────────────────────────── */

/* Pattern: "3+ of same thing" on mobile → snap rail, not stacked graveyard.
   Usage: <div class="snap-rail"><div class="snap-item">...</div>...</div> */
.snap-rail {
  display: flex;
  gap: var(--s-4, 16px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--page-pad-mobile);
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  /* Edge padding so first/last card aligns with page edge */
  padding-left: var(--page-pad-mobile);
  padding-right: var(--page-pad-mobile);
  /* Negative margin to break out of parent padding */
  margin-left: calc(var(--page-pad-mobile) * -1);
  margin-right: calc(var(--page-pad-mobile) * -1);
}

.snap-item {
  flex: 0 0 auto;
  scroll-snap-align: start;
  min-width: 80%;        /* Mobile: ~80% viewport width per card */
}

@media (min-width: 768px) {
  .snap-item { min-width: 48%; }
}
@media (min-width: 1024px) {
  .snap-rail {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    overflow-x: visible;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
  }
  .snap-item { min-width: 0; }
}

/* ── 10. TABULAR NUMBERS (for calculator/rate/data) ────────────────── */

.tnum, [data-tnum] {
  font-variant-numeric: tabular-nums;
  font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

/* ── 11. STICKY MOBILE CTA ZONE (product pages, rule #6) ───────────── */

/* Opt-in: add .has-sticky-cta to <body> on product templates. */
@media (max-width: 767.98px) {
  body.has-sticky-cta {
    padding-bottom: 80px;  /* Reserve space for the sticky bar */
  }
  body.has-sticky-cta .mobile-sticky-cta {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-top: 1px solid var(--border, #E2ECF4);
    padding: 12px var(--page-pad-mobile);
    z-index: 100;
    box-shadow: 0 -8px 24px rgba(7,25,46,0.08);
  }
}
body:not(.has-sticky-cta) .mobile-sticky-cta,
@media (min-width: 768px) { .mobile-sticky-cta { display: none; } }

/* ── 12. 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;
  }
}

/* ── 13. BANNED PATTERNS — guard rails ─────────────────────────────── */

/* Stacked-card graveyard guard: warn in dev if 5+ same-class cards appear.
   Can't enforce in CSS, but these selectors make the pattern visible. */
[data-card] + [data-card] + [data-card] + [data-card] + [data-card] + [data-card] {
  /* If you see this red border in dev, you have 6+ stacked cards. Use a snap-rail. */
  outline: 2px dashed rgba(233, 47, 48, 0.6);
}
body.production [data-card] { outline: none; }

/* ── 14. MOBILE OVERFLOW PREVENTION 2026-04-17 ────────────────────────
   Comprehensive sweep fix. Audit found body.scrollWidth = 1171px on
   360px viewport because page-specific .proof-inner / .team-bench-strip__row
   / .*-grid declared fixed-pixel multi-column grids that don't shrink.
   `html { overflow-x: clip }` was masking the problem; content was being
   silently cut off off-screen.

   This block targets the 5 systemic patterns that bleed past viewport:
     1. proof / stats / pricing / pain / audience / steps grids
     2. team bench horizontal strips
     3. process / cycle multi-step layouts
     4. case-study / mid-CTA wide containers
     5. trust marquees and chip rows

   Strategy: at <=540px, force single-column for any *-grid, allow
   bench strips to scroll-snap horizontally instead of overflowing,
   and shrink any flex row that doesn't already wrap. */

@media (max-width: 540px) {
  /* Universal grid collapse — any class containing -grid forces single col.
     Higher specificity than ind-components / svc-components / *-page rules
     via attribute selector + !important. */
  [class*="proof-inner"],
  [class*="proof-grid"],
  [class*="-stats-grid"],
  [class*="-pen-stats"],
  [class*="-card-grid"],
  [class*="-cards-grid"],
  [class*="pricing-grid"],
  [class*="pain-grid"],
  [class*="audience-grid"],
  [class*="steps-grid"],
  [class*="process-grid"],
  [class*="plan-grid"],
  [class*="which-grid"],
  [class*="zz-callout-stats"],
  [class*="im-stats"] {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px !important;
  }

  /* Team bench horizontal strip — scroll-snap rather than overflow */
  .team-bench-strip__row,
  [class*="team-bench"][class*="row"] {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 8px !important;
  }
  .team-bench-strip__row > *,
  [class*="team-bench"][class*="row"] > * {
    scroll-snap-align: start !important;
    flex: 0 0 auto !important;
  }

  /* Insurance-scroll, integrations stack, hub grids — same treatment */
  .ind-insurance-scroll-track,
  .sp-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Wide sec-label / eyebrow texts — wrap instead of stretching */
  .sec-label,
  [class*="eyebrow"] {
    max-width: 100% !important;
    word-break: break-word !important;
  }

  /* Any section/div that still bleeds — last-resort containment */
  main, section, article {
    max-width: 100vw !important;
    overflow-x: clip !important;
  }
}