/* ============================================================
   FindMyPart — responsive layer
   ------------------------------------------------------------
   The app is built with inline styles (fixed-pixel grids). These
   media queries override those inline styles with !important so
   the layout reflows on tablet/mobile. Above 760px nothing here
   applies, so the desktop design is untouched.

   Breakpoints:
     ≤ 760px  →  tablet / mobile stacking
     ≤ 600px  →  condense top nav
     ≤ 480px  →  small-phone type + spacing tuning
   ============================================================ */

/* Guard against accidental horizontal scroll on small screens */
@media (max-width: 760px) {
  html, body { overflow-x: hidden; }

  /* ---------- Search card (hero + sticky compact) ---------- */
  .fmp-search-card { grid-template-columns: 1fr !important; gap: 10px !important; }
  .fmp-search-go-wrap { align-items: stretch !important; }
  .fmp-search-go { width: 100% !important; min-width: 0 !important; }

  /* Results sticky search bar: un-pin on mobile (stacked = too tall to pin)
     and let it scroll away to reclaim vertical space. */
  .fmp-results-searchbar { position: static !important; padding: 10px 14px !important; }

  /* ---------- Landing hero ---------- */
  .fmp-hero { padding: 34px 18px 18px !important; }
  .fmp-hero-h1 { font-size: 36px !important; letter-spacing: -0.6px !important; line-height: 1.06 !important; }
  .fmp-hero-p { font-size: 16px !important; }
  .fmp-hero-h1 br { display: none; }

  /* ---------- Trust strip / How it works ---------- */
  .fmp-trust { grid-template-columns: repeat(2, 1fr) !important; }
  .fmp-how { grid-template-columns: 1fr !important; }

  /* ---------- Smart value insight ---------- */
  .fmp-smart { grid-template-columns: 1fr !important; gap: 18px !important; padding: 18px !important; }
  .fmp-smart-side {
    border-left: 0 !important; padding-left: 0 !important;
    border-top: 1px dashed var(--border) !important; padding-top: 18px !important;
  }
  .fmp-smart-h2 { font-size: 21px !important; }

  /* ---------- Vehicle match banner ---------- */
  .fmp-vehicle-banner { flex-wrap: wrap !important; row-gap: 12px !important; padding: 14px !important; }
  .fmp-vehicle-right { align-items: flex-start !important; width: 100% !important; }

  /* ---------- Results: layout + filters ---------- */
  .fmp-results-container { padding: 14px 14px 90px !important; }
  .fmp-results-grid { grid-template-columns: 1fr !important; gap: 16px !important; margin-top: 18px !important; min-width: 0 !important; }
  /* Let the single column actually shrink to the viewport (grid items default
     to min-width:auto, which was forcing horizontal overflow on mobile). */
  .fmp-results-grid > * { min-width: 0 !important; }
  .fmp-filters { position: static !important; top: auto !important; }

  /* Tab bar: scroll horizontally instead of clipping the third tab */
  .fmp-tabbar { width: 100% !important; max-width: 100% !important; overflow-x: auto !important; }
  .fmp-tabbar > button { flex: 0 0 auto !important; }

  /* ---------- Result card ---------- */
  .fmp-result-card { grid-template-columns: 104px 1fr !important; gap: 12px !important; padding: 12px !important; }
  .fmp-thumb { width: 104px !important; height: 104px !important; }
  .fmp-result-meta { flex-wrap: wrap !important; row-gap: 4px !important; }
  .fmp-result-actions {
    grid-column: 1 / -1 !important;
    border-left: 0 !important; padding-left: 0 !important;
    border-top: 1px dashed var(--border) !important; padding-top: 14px !important;
  }

  /* ---------- Compare drawer ---------- */
  .fmp-compare { flex-wrap: wrap !important; gap: 10px !important; padding: 12px !important; }

  /* ---------- Listing detail ---------- */
  .fmp-detail-grid { grid-template-columns: 1fr !important; gap: 20px !important; }
  .fmp-spec-row { grid-template-columns: 110px 1fr !important; gap: 10px !important; }

  /* ---------- Footer ---------- */
  .fmp-footer-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 22px !important; }
  .fmp-footer-bottom { flex-direction: column !important; gap: 8px !important; align-items: flex-start !important; }
}

/* ---------- Condense the top nav ---------- */
@media (max-width: 600px) {
  .fmp-nav { padding: 0 16px !important; gap: 12px !important; }
  .fmp-nav-links, .fmp-nav-cur { display: none !important; }
}

/* ---------- Small-phone refinements ---------- */
@media (max-width: 480px) {
  .fmp-hero-h1 { font-size: 30px !important; }
  .fmp-hero-p { font-size: 15px !important; }
  .fmp-smart-h2 { font-size: 19px !important; }
  /* Tighter result card on very narrow screens */
  .fmp-result-card { grid-template-columns: 84px 1fr !important; }
  .fmp-thumb { width: 84px !important; height: 84px !important; }
}