/* ================================================================
   STAYVIBES — Global Mobile Fix
   No horizontal scroll, no side gaps, crystal clear mobile view
   ================================================================ */

/* Hard reset for mobile bleed */
html { overflow-x: hidden; scroll-behavior: smooth; }
body { overflow-x: hidden; max-width: 100vw; }

/* All sections get safe horizontal padding on mobile */
@media (max-width: 768px) {
  /* Prevent any element from causing horizontal scroll */
  section, footer, nav, .container-fluid { max-width: 100%; }

  /* Navbar */
  .navbar-sv { padding: 0 16px; height: 64px; }
  .nav-logo img { height: 48px; }

  /* Cities grid */
  .cities-grid { grid-template-columns: repeat(2,1fr); gap: 10px; }
  .cities-sec { padding: 70px 16px; }

  /* Properties */
  .props-sec { padding: 70px 16px; }
  .props-grid { grid-template-columns: 1fr; gap: 20px; }

  /* Gallery */
  .gallery-sec { padding: 0 16px 70px; }
  .gallery-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 180px 180px;
  }
  .gallery-main { grid-row: 1 / 3; }

  /* Amenities */
  .amenities-sec { padding: 70px 16px; }
  .amenities-grid { grid-template-columns: repeat(2,1fr); gap: 10px; }
  .amenity-card { padding: 20px 12px; }

  /* How it works */
  .how-sec { padding: 70px 16px; }
  .how-grid { grid-template-columns: 1fr; gap: 28px; }
  .how-grid::before { display: none; }

  /* Testimonials */
  .testi-sec { padding: 70px 16px; }
  .testi-grid { grid-template-columns: 1fr; gap: 16px; }

  /* CTA */
  .cta-sec { padding: 70px 16px; }
  .cta-btns { flex-direction: column; align-items: stretch; }
  .cta-wa, .cta-out { justify-content: center; }

  /* Footer */
  footer { padding: 48px 16px 0; }
  .footer-inner { grid-template-columns: 1fr; gap: 28px; }
  .footer-bottom { flex-direction: column; text-align: center; padding: 16px 0; }

  /* Section headers */
  .section-header { margin-bottom: 36px; }
  .section-title { font-size: clamp(1.7rem, 7vw, 2.2rem); }

  /* WhatsApp float */
  .wa-float { bottom: 20px; right: 16px; width: 50px; height: 50px; font-size: 20px; }

  /* Mobile menu */
  .mobile-menu { padding: 16px; }
}

@media (max-width: 480px) {
  .cities-grid { grid-template-columns: repeat(2,1fr); }
  .amenities-grid { grid-template-columns: repeat(2,1fr); }
  .gallery-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .gallery-main { grid-row: auto; height: 240px; }
  .gallery-item { height: 160px; }
  .gallery-item:nth-child(n+3) { display: none; }
  .how-card { padding: 0 8px; }
}

/* Property page mobile */
@media (max-width: 768px) {
  .breadcrumb-bar { padding: 10px 16px; font-size: 12px; overflow-x: auto; white-space: nowrap; }
  .container-fluid.px-4 { padding: 0 !important; }
  .pg-pills { gap: 6px; }
  .pg-pill { font-size: 12px; padding: 6px 12px; }
  .info-box { padding: 18px 16px; margin-bottom: 14px; }
  .rules-grid { grid-template-columns: 1fr; }
  .amenity-detail-grid { grid-template-columns: repeat(3,1fr); gap: 8px; }
  .amenity-detail-item { padding: 12px 6px; }
}

/* Listings page mobile */
@media (max-width: 768px) {
  .listings-hero { padding: 100px 16px 50px; }
  .form-sec { padding: 50px 16px; }
  .map-sec { padding: 0 16px 50px; }
  .contact-cards-sec { padding: 50px 16px 0; }
  .faq-sec { padding: 50px 16px; }
  .values-sec { padding: 70px 16px; }
  .stat-strip { padding: 50px 16px; }
  .story-sec { padding: 70px 16px; }
}

/* Fix any overflowing elements */
img { max-width: 100%; }
table { max-width: 100%; overflow-x: auto; display: block; }
pre, code { max-width: 100%; overflow-x: auto; }

/* Prevent text from causing overflow */
* { word-break: break-word; }
a, button { -webkit-tap-highlight-color: transparent; }