/* ==========================================================================
   ChennaiTrips — Responsive Rules
   Mobile-first content is already fluid via clamp(); these breakpoints
   handle structural layout changes (grids collapsing, nav becoming a drawer).
   ========================================================================== */

@media (max-width: 1320px) {
  .navbar__whatsapp { display: none; }
}

@media (max-width: 1180px) {
  .navbar__links { display: none; }
  .navbar__toggle { display: flex; }
  .navbar__phone { display: none; }

  .hero__grid { grid-template-columns: 1fr; }
  .hero__title { font-size: clamp(2.4rem, 8vw, 3.4rem); }
}

@media (max-width: 1080px) {
  .site-footer__grid { grid-template-columns: 1fr 1fr 1fr; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .masonry { columns: 3 200px; }
}

@media (max-width: 960px) {
  .trust-grid__row { flex-wrap: wrap; grid-template-columns: repeat(3, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .site-footer__grid { grid-template-columns: 1fr 1fr; gap: var(--space-lg); }
  .masonry { columns: 2 200px; }
  .numbered-item__num { font-size: 2.6rem; }
  .route-strip { flex-wrap: wrap; }
  .route-strip__line { display: none; }
}

@media (max-width: 640px) {
  :root {
    --space-2xl: 5rem;
    --space-3xl: 6.5rem;
    --header-height: 76px;
  }

  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .booking-card .field-row { grid-template-columns: 1fr; }
  .trust-grid__row { grid-template-columns: repeat(2, 1fr); }
  .site-footer__grid { grid-template-columns: 1fr; gap: var(--space-lg); text-align: left; }
  .masonry { columns: 2 160px; }
  .cta-banner { padding: var(--space-lg) var(--space-sm); }
  .testimonial { padding: var(--space-md); }
  .dest-card__media { aspect-ratio: 4/5; }

  /* Native-feeling mobile chrome */
  .mobile-bar { display: block; }
  .floating-actions { display: none; }
  body { padding-bottom: 78px; }

  .page-header { padding-top: calc(var(--header-height) + var(--space-lg)); padding-bottom: var(--space-lg); }
}

@media (min-width: 641px) and (max-width: 1180px) {
  .mobile-bar { display: none; }
}

/* Utility: hide on mobile / desktop */
@media (max-width: 640px) { .hide-mobile { display: none !important; } }
@media (min-width: 641px) { .hide-desktop { display: none !important; } }

/* No horizontal scroll, anywhere */
html, body { max-width: 100%; overflow-x: hidden; }
.table-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }