/* =========================================================================
   Villas in Bangalore — Responsive Stylesheet
   Breakpoints: mobile (<576), tablet (576-991), laptop (992-1279),
   desktop (1280-1919), large desktop (1920+)
   ========================================================================= */

/* ---------- Laptop and below: collapse two-column layout ---------- */
@media (max-width: 1023px) {
  .main-layout { grid-template-columns: 1fr; }
  .sidebar { position: static; }
}

/* ---------- Tablet ---------- */
@media (max-width: 767px) {
  /* Sticky bottom Call/WhatsApp/Enquire bar is mobile-only — desktop uses
     the fixed side enquiry tab instead (see .side-enquiry-tab). */
  body { padding-bottom: var(--sticky-cta-height); }
  .sticky-cta { display: flex; }

  /* The sticky bottom bar above already covers Call/Enquire on mobile —
     no need to repeat "Enquire Now" and the phone number in the header. */
  .site-header__cta, .site-header__phone, .site-header__logo { display: none; }

  .site-header__bar { flex-wrap: wrap; }
  .site-header__search { order: 3; max-width: none; flex-basis: 100%; }
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .site-nav { display: none; }
  .site-nav.is-open { display: block; }
  .site-nav__list { flex-direction: column; align-items: stretch; }
  .site-nav__item { margin-left: 0; }
  .site-nav__submenu { position: static; box-shadow: none; min-width: 0; }

  .project-grid, .hub-grid { grid-template-columns: 1fr; }
  .project-card__facts { grid-template-columns: 1fr; }
  .quick-facts { grid-template-columns: 1fr; }
  .amenities-list { grid-template-columns: 1fr; }
  .location-media { grid-template-columns: 1fr; }
  .contact-columns { grid-template-columns: 1fr; }
  .related-grid { grid-template-columns: repeat(2, 1fr); }
  .site-footer__links { grid-template-columns: 1fr 1fr; }
  .category-list, .location-list { columns: 1; }
  .btn-row .btn { flex: 1 1 100%; }
}

/* ---------- Mobile ---------- */
@media (max-width: 480px) {
  .container, .main-layout { padding-left: 14px; padding-right: 14px; }
  .site-footer__links { grid-template-columns: 1fr; padding: 24px 16px 12px; }
  .related-grid { grid-template-columns: 1fr; }
  .sticky-cta a, .sticky-cta button { font-size: 12px; gap: 4px; }
  h1 { font-size: 1.4rem; }
  .hero__badge, .project-card__badge { font-size: 14px; padding: 6px 12px; }
}

/* ---------- Large desktop ---------- */
@media (min-width: 1920px) {
  :root { --container-max: 1440px; }
  body { font-size: 17px; }
}

/* ---------- Print ---------- */
@media print {
  .sticky-cta, .back-to-top, .site-header, .subnav, .sidebar, .lightbox-overlay, .modal-overlay { display: none !important; }
}