/* ============================================================
   SAFAR DIARY — RESPONSIVE OVERRIDES
   Breakpoints tested: 1920 / 1440 / 1200 / 992 / 768 / 576 / 375
   ============================================================ */

@media (max-width: 1200px) {
  .hero h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); }
}

@media (max-width: 991.98px) {
  .navbar-collapse {
    background: var(--sd-navy);
    margin-top: 14px;
    border-radius: 14px;
    padding: 16px;
    max-height: 78vh;
    overflow-y: auto;
  }
  .nav-link-main { padding: 12px 10px !important; border-bottom: 1px solid rgba(255,255,255,0.08); }
  .search-widget { padding: 16px; }
  .sticky-booking-card { position: static; margin-top: 24px; }
  .cta-band { padding: 40px 26px; text-align: center; }
  .auth-side { display: none; }
}

@media (max-width: 767.98px) {
  .section-py { padding: 48px 0; }
  .hero { min-height: 92vh; padding-top: 90px; }
  .hero-content { text-align: center; margin: 0 auto; }
  .hero p.lead { margin-left: auto; margin-right: auto; }
  .stats-strip .stat-num { font-size: 1.9rem; }
  .page-header { padding: 120px 0 40px; text-align: center; }
  .filter-card { margin-bottom: 20px; }
  .gallery-thumb { aspect-ratio: 1/1; }
  .card-price-new { font-size: 1.15rem; }
  .dash-sidebar { margin-bottom: 20px; }
  table.table-clean { font-size: 0.85rem; }
}

@media (max-width: 575.98px) {
  .navbar-brand-text .brand-main { font-size: 16px; }
  .logo-box { width: 42px; height: 42px; }
  .navbar-logo { width: 34px; }
  .hero h1 { font-size: 2rem; }
  .hero-kicker { font-size: 0.68rem; padding: 5px 12px; }
  .btn-gold, .btn-outline-gold, .btn-navy { padding: 9px 18px; font-size: 0.9rem; }
  .search-tabs .nav-link { padding: 8px 12px; font-size: 0.8rem; }
  .card-body-pad { padding: 16px; }
  .cta-band h2 { font-size: 1.5rem; }
  .back-to-top { width: 40px; height: 40px; bottom: 16px; right: 16px; }
  .footer-about { max-width: 100%; }
  .auth-card .row { flex-direction: column; }
  .step-indicator .step { height: 4px; }
}

/* Prevent horizontal scroll & overflow anywhere */
html, body { max-width: 100%; overflow-x: hidden; }
img, video { max-width: 100%; height: auto; }
table { display: block; overflow-x: auto; white-space: nowrap; }
table.table-clean { white-space: normal; }