/* mobile.css — responsive overrides for the FPDS marketing site.
   Loaded after site.css. Uses high-specificity attribute selectors to win
   over inline styles without rewriting every component. */

/* ============================================================
   TABLET (≤ 1024px) — 2-up most things, slim padding, smaller plates
   ============================================================ */
@media (max-width: 1024px) {

  .container,
  .container-wide {
    padding: 0 20px;
  }

  /* Two-column hero / about / contact / model intros → stack */
  [style*="gridTemplateColumns:'1fr 1.4fr'"],
  [style*="gridTemplateColumns:'1.1fr 1fr'"],
  [style*="gridTemplateColumns:'1fr 1.2fr'"],
  [style*="grid-template-columns:1fr 1.4fr"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  /* 4-column card decks → 2-up */
  [style*="gridTemplateColumns:'repeat(4, 1fr)'"],
  [style*="grid-template-columns:repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* 4-up max-content stat row → wrap */
  [style*="gridTemplateColumns:'repeat(4, max-content)'"] {
    grid-template-columns: repeat(2, max-content) !important;
    gap: 32px !important;
  }
}

/* ============================================================
   MOBILE (≤ 720px) — full single-column, hide hero plates,
   bigger touch targets, navbar collapse
   ============================================================ */
@media (max-width: 720px) {

  /* ---------- Container & layout ---------- */
  .container,
  .container-wide {
    padding: 0 18px;
  }

  /* Headlines a notch smaller for narrow viewports */
  .display { font-size: clamp(34px, 9vw, 44px); }
  .h2-display { font-size: clamp(28px, 7vw, 36px); }
  .lede { font-size: 17px; }

  /* All multi-column grids → single column on mobile */
  [style*="gridTemplateColumns:'repeat(2, 1fr)'"],
  [style*="gridTemplateColumns:'repeat(3, 1fr)'"],
  [style*="gridTemplateColumns:'repeat(4, 1fr)'"],
  [style*="gridTemplateColumns:'repeat(2, max-content)'"],
  [style*="gridTemplateColumns:'repeat(4, max-content)'"],
  [style*="grid-template-columns:repeat(3, 1fr)"],
  [style*="grid-template-columns:repeat(4, 1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* ---------- HERO ---------- */
  /* Hide the floating evidence plates on mobile — they collide with copy.
     The HeroClaimCard section right below the hero still shows the same
     three-stage trace (POLICY/PURCHASE/PERFORMER) inside the home flow. */
  .page-canvas + section [style*="position:'absolute'"][style*="top:'10%'"],
  .page-canvas + section [style*="position:'absolute'"][style*="top:'36%'"],
  .page-canvas + section [style*="position:'absolute'"][style*="top:'62%'"] {
    display: none !important;
  }
  /* HeroBackground SVG / aurora / connectors — keep paper, hide busy bits */
  .page-canvas + section svg { opacity: 0.6; }

  /* Hero section padding tighter */
  .page-canvas + section[style*="paddingTop:180"] {
    padding-top: 120px !important;
    padding-bottom: 64px !important;
  }

  /* ---------- NAVBAR ---------- */
  /* Hide the navigation links + CTA on tiny screens; show brand only.
     A real hamburger menu is post-launch work. For now, mobile users hit
     the brand → home and scroll, then use in-page CTAs. */
  nav .container-wide > div:nth-of-type(2) {  /* nav-items wrapper */
    display: none !important;
  }
  nav .container-wide > a[href="#/contact"] {  /* "Talk to us" CTA */
    padding: 8px 12px !important;
    font-size: 12px !important;
  }
  nav .container-wide {
    height: 60px !important;
    gap: 12px !important;
  }

  /* ---------- TYPOGRAPHY ---------- */
  /* Bring oversized hero stat numbers in line on mobile */
  .stat-num { font-size: clamp(32px, 9vw, 44px) !important; }

  /* ---------- CARDS / PADDING ---------- */
  /* Most card paddings shrink modestly */
  [style*="padding:'32px 28px'"],
  [style*="padding:'32px 30px'"],
  [style*="padding:'36px 36px'"] {
    padding: 22px 18px !important;
  }
  [style*="padding:'24px 26px'"],
  [style*="padding:'28px 28px'"] {
    padding: 20px 18px !important;
  }

  /* Section vertical padding */
  .section { padding: 56px 0 !important; }

  /* ---------- TABLES ---------- */
  /* Prevent overflow on the convergence/competitive tables — let them scroll */
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

}

/* ============================================================
   ULTRA-NARROW (≤ 380px) — last-resort fits
   ============================================================ */
@media (max-width: 380px) {
  .display { font-size: 30px; }
  .h2-display { font-size: 24px; }
  .container, .container-wide { padding: 0 14px; }
}