/* ============================================================
   Fultz Visibility — responsive layer (website UI kit only)
   The screens are authored desktop-first with inline styles.
   These rules layer mobile/tablet behavior on top: inline styles
   remain the desktop default; media queries override with
   !important at smaller widths. Token overrides (no !important
   needed) fluidly scale the type ramp the inline styles consume.
   Breakpoints: tablet ≤900px · phone ≤620px.
   ============================================================ */

/* ---- Mobile stability: eliminate horizontal overflow / lateral drift ----
   `clip` (not `hidden`) is deliberate: it stops any child from widening the
   page or letting it scroll sideways, WITHOUT establishing a scroll container
   — so the sticky header and in-page anchors keep working. Applied at every
   width; harmless on desktop where nothing overflows. */
html, body {
  overflow-x: clip;
  max-width: 100%;
}
/* Belt-and-suspenders for older engines without `clip` support (falls back to
   hidden only on phones, where there is no sticky-ancestor interaction to break). */
@supports not (overflow-x: clip) {
  @media (max-width: 900px) {
    html, body { overflow-x: hidden; }
  }
}

/* ---- Fluid type: shrink the largest steps on phones ---- */
@media (max-width: 620px) {
  :root {
    --text-7xl: 3rem;      /* 76 → 48 */
    --text-6xl: 2.625rem;  /* 62 → 42 */
    --text-5xl: 2.25rem;   /* 50 → 36 */
    --text-4xl: 2rem;      /* 40 → 32 */
    --text-3xl: 1.75rem;   /* 32 → 28 */
  }
}

/* ---- Section side padding tightens on small screens ---- */
@media (max-width: 700px) {
  .r-section { padding-left: 22px !important; padding-right: 22px !important; }
}

/* ---- Tablet: collapse the densest layouts ---- */
@media (max-width: 900px) {
  .r-split   { grid-template-columns: 1fr !important; }
  .r-grid-3  { grid-template-columns: repeat(2, 1fr) !important; }
  .r-grid-4  { grid-template-columns: repeat(2, 1fr) !important; }
  .r-footer  { grid-template-columns: 1fr 1fr !important; }
  /* Capabilities: narrative always reads before its "what this can include" list. */
  .cap-row .cap-narr { order: 0 !important; }
  .cap-row .cap-list { order: 1 !important; }
}

/* ---- Heroes on phones ----
   Full-bleed hero background images are landscape and sit behind a heavy navy scrim.
   On a tall/narrow phone hero, `cover` zooms into a thin central vertical strip, which
   (a) over-crops and can cut the landmark out, and (b) makes the hero taller than it
   needs to be. Trim the oversized vertical padding and re-aim the crop per page so the
   recognizable subject stays in frame. Desktop is untouched (all inside the phone query).
   `.fv-hero` = the six standard navy heroes; `.fv-story-hero` keeps its flush-bottom
   portrait so it only loses its top padding. */
@media (max-width: 620px) {
  .fv-hero { padding-top: 64px !important; padding-bottom: 56px !important; }
  .fv-hero-media--home      { background-position: 34% center !important; } /* keep the Space Needle in view */
  .fv-hero-media--resources { background-position: 74% center !important; } /* keep the Space Needle in view */
  .fv-story-hero            { padding-top: 56px !important; }
  .fv-hero-media--story     { background-position: 70% center !important; } /* keep Mount Rainier in view */
  .fv-story-heroText        { padding-bottom: 44px !important; }
}

/* ---- Phone: single column throughout ---- */
@media (max-width: 620px) {
  .r-split    { grid-template-columns: 1fr !important; gap: 28px !important; }
  .r-grid-3   { grid-template-columns: 1fr !important; }
  .r-grid-2   { grid-template-columns: 1fr !important; }
  .r-footer   { grid-template-columns: 1fr !important; gap: 30px !important; }
  .r-scoreband{ grid-template-columns: 1fr !important; gap: 24px !important; justify-items: start; }
  .r-scoreband > div:first-child { align-self: start; }
  .r-sysrow   { grid-template-columns: 92px 1fr auto !important; gap: 10px !important; }
  .r-statrow  { flex-direction: column !important; gap: 18px !important; align-items: stretch !important; }
  .r-grid-4   { grid-template-columns: 1fr 1fr !important; }
}

/* ---- Phone: long-label buttons must never exceed the viewport ----
   The design-system Button uses inline `white-space:nowrap` + `line-height:1`, so a long
   label (e.g. "Start Your Strategic Systems Assessment" at size lg) renders wider than a
   narrow phone and overflows its section (centered CTAs overflow both sides). Allow the
   label to wrap and cap width so every CTA stays inside its container. Wrapping is a
   rendering fix only — single-line labels are unaffected; no fonts/design/copy change.
   Scoped to content-section + hero buttons (not the sticky-header nav buttons). */
@media (max-width: 620px) {
  .r-section button,
  .fv-hero button,
  .fv-story-hero button {
    white-space: normal !important;
    line-height: 1.2 !important;
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  /* Exception: the horizontal-scroll Tabs strip stays single-line + swipeable
     (wrapping its tab labels would break the intended scroll UX). */
  .fv-scroll-x button {
    white-space: nowrap !important;
    line-height: 1 !important;
    overflow-wrap: normal;
  }
}