/* ==========================================================================
   RESPONSIVE BREAKPOINTS
   Mobile-first base lives in style.css. This file layers on larger-screen
   layout changes: desktop nav, multi-column grids, sidebar filters, etc.
   ========================================================================== */

/* Add bottom padding on mobile so fixed bottom nav / sticky CTA never
   covers content */
body { padding-bottom: var(--mobile-nav-h); }
body.has-sticky-cta { padding-bottom: calc(var(--mobile-nav-h) + 56px); }

/* ---------- ≥ 560px : small tablets / large phones ---------- */
@media (min-width: 560px) {
  .hero-trust { grid-template-columns: repeat(2, 1fr); }
  .budget-grid { grid-template-columns: repeat(2, 1fr); }
  .brand-grid { grid-template-columns: repeat(3, 1fr); }
  .form-row.two-col { grid-template-columns: 1fr 1fr; }
  .spec-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- ≥ 768px : tablets ---------- */
@media (min-width: 768px) {
  .finder-grid { grid-template-columns: repeat(2, 1fr) 1fr; }
  .benefit-grid { grid-template-columns: repeat(2, 1fr); }
  .review-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .emi-wrap { grid-template-columns: 1fr 1fr; }
  .exchange-banner { flex-direction: row; align-items: center; justify-content: space-between; }
  .brand-grid { grid-template-columns: repeat(4, 1fr); }
  .branch-grid { grid-template-columns: repeat(2, 1fr); }
  .page-banner { padding: 60px 0 76px; }
}

/* ---------- ≥ 900px : inventory sidebar becomes usable, hero 2-col ---------- */
@media (min-width: 900px) {
  .hero-grid { grid-template-columns: 1.1fr 0.9fr; }
  .hero { padding: 12px 0 40px; }
  .finder-submit .btn { width: 100%; }
  .inventory-layout { grid-template-columns: 260px 1fr; align-items: start; }
  .filter-sidebar { display: block; position: sticky; top: calc(var(--header-h) + 20px); }
  .filter-trigger-mobile { display: none; }
  .bike-detail-grid { grid-template-columns: 1fr 1fr; }
  .sticky-mobile-cta { display: none; }
  body.has-sticky-cta { padding-bottom: var(--mobile-nav-h); }
}

/* ---------- ≥ 1024px : desktop nav + bottom nav hidden ---------- */
@media (min-width: 1024px) {
  .main-nav { display: block; }
  .menu-toggle { display: none; }
  .icon-btn-call { display: inline-flex; }
  .mobile-bottom-nav { display: none; }
  .floating-whatsapp { bottom: 20px; }
  body { padding-bottom: 0; }
  body.has-sticky-cta { padding-bottom: 0; }
  .budget-grid { grid-template-columns: repeat(4, 1fr); }
  .section-head.center { max-width: 720px; }
  section { padding: 88px 0; }
}

/* ---------- ≥ 1240px : large desktop refinements ---------- */
@media (min-width: 1240px) {
  .hero-title { font-size: 72px; }
}

/* Guard against horizontal overflow everywhere */
html, body { max-width: 100%; }