/* ============================================
   HOTELSSTAY — MOBILE RESPONSIVE STYLES
   Applies to all pages via <link> tag
   ============================================ */

/* ── TABLET (max 768px) ── */
@media (max-width: 768px) {

  /* NAV */
  .nav { padding: 0 1.2rem; height: 56px; }
  .nav-links { display: none; }
  .nav-search-btn span { display: none; }
  .nav-search-btn { padding: 7px 12px; }

  /* HERO */
  .hero { min-height: 520px; padding: 2rem 1.2rem 3rem; }
  .hero-title { font-size: 40px; }
  .hero-sub { font-size: 13px; margin-bottom: 1.8rem; }

  /* SEARCH BAR — stack into grid */
  .search-wrap { padding: 0 0.2rem; }
  .search-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-radius: 8px;
    overflow: visible;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
  }
  .search-field.dest {
    grid-column: 1 / -1;
    height: 56px;
    border-right: none !important;
    border-bottom: 0.5px solid #e8e0d4;
    border-radius: 8px 8px 0 0;
  }
  #checkin-field {
    height: 52px;
    border-right: 0.5px solid #e8e0d4 !important;
    border-bottom: 0.5px solid #e8e0d4;
  }
  #checkout-field {
    height: 52px;
    border-right: none !important;
    border-bottom: 0.5px solid #e8e0d4;
  }
  .search-go {
    grid-column: 1 / -1;
    height: 50px;
    justify-content: center;
    font-size: 12px;
    letter-spacing: 2px;
    border-radius: 0 0 8px 8px;
  }

  /* AUTOCOMPLETE — full width on mobile */
  #ac-list {
    left: 1rem !important;
    right: 1rem !important;
    width: auto !important;
    max-height: 280px;
    overflow-y: auto;
  }

  /* CITY HERO */
  .city-hero { height: 260px; padding: 1.5rem 1.2rem; }
  .city-title { font-size: 40px; }
  .city-subtitle { font-size: 12px; }
  .breadcrumb { font-size: 10px; }

  /* INTRO STRIP */
  .intro-strip { flex-direction: column; padding: 1.4rem 1.2rem; gap: 1.2rem; }
  .intro-stats { gap: 1.5rem; justify-content: center; }

  /* DESTINATIONS SECTION */
  .section { padding: 2.5rem 1.2rem; }
  .section-title { font-size: 28px; }
  .dest-grid { grid-template-columns: 1fr 1fr; gap: 0.8rem; }
  .dest-card.wide { grid-column: span 2; min-height: 200px; }
  .dest-card { aspect-ratio: 4/3; }
  .dest-name { font-size: 20px; }
  .dest-card.wide .dest-name { font-size: 26px; }

  /* HOTEL CARDS — stack vertically */
  .hotel-card { grid-template-columns: 1fr !important; display: grid !important; }
  .hotel-img { min-height: 220px !important; width: 100% !important; }
  .hotel-body { padding: 1.2rem !important; }
  .hotel-name { font-size: 20px !important; }
  .hotel-footer { flex-direction: column !important; align-items: stretch !important; gap: 0.8rem !important; margin-top: 1rem !important; }
  .book-btn { justify-content: center !important; padding: 14px !important; width: 100% !important; font-size: 12px !important; }
  .avail-note { justify-content: center !important; }

  /* HOTELS SECTION */
  .hotels-section { padding: 2rem 1.2rem; }
  .section-heading { font-size: 26px; }

  /* FOOTER */
  .footer-top { grid-template-columns: 1fr 1fr; gap: 1.8rem; padding: 2.5rem 1.2rem 1.8rem; }
  .footer-bottom { flex-direction: column; padding: 1.2rem; gap: 0.8rem; }
  .footer-disclaimer { text-align: left; max-width: 100%; }

  /* ABOUT PAGE */
  .values-grid { grid-template-columns: 1fr; gap: 1rem; }
  .about-section { padding: 2.5rem 1.2rem; }
  .page-hero { padding: 3rem 1.2rem 2.5rem; }
  .page-hero h1 { font-size: 38px; }
  .contact-strip { padding: 2.5rem 1.2rem; }

  /* DESTINATIONS PAGE */
  .destinations-section { padding: 2.5rem 1.2rem; }
  .city-grid { grid-template-columns: 1fr 1fr !important; gap: 0.8rem !important; }
  .continent-header { flex-direction: column; align-items: flex-start; gap: 0.3rem; }
}

/* ── MOBILE (max 480px) ── */
@media (max-width: 480px) {

  /* NAV */
  .nav-logo { font-size: 18px; }

  /* HERO */
  .hero { min-height: 480px; }
  .hero-title { font-size: 32px; line-height: 1.15; }
  .eyebrow { font-size: 10px; letter-spacing: 2px; }
  .hero-trust { font-size: 10px; text-align: center; }

  /* SEARCH BAR — single column on small phones */
  .search-bar { grid-template-columns: 1fr; }
  .search-field.dest { border-radius: 8px 8px 0 0; }
  #checkin-field {
    border-right: none !important;
    border-bottom: 0.5px solid #e8e0d4;
    height: 50px;
  }
  #checkout-field {
    border-bottom: 0.5px solid #e8e0d4;
    height: 50px;
  }
  .search-go { border-radius: 0 0 8px 8px; }

  /* CALENDAR — bottom sheet on mobile */
  #cal-popup {
    position: fixed !important;
    bottom: 0 !important;
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 18px 18px 0 0 !important;
    padding: 1.5rem 1.2rem 2rem !important;
    box-shadow: 0 -8px 40px rgba(0,0,0,0.18) !important;
  }

  /* CITY HERO */
  .city-hero { height: 220px; padding: 1.2rem 1rem; }
  .city-title { font-size: 32px; }
  .city-subtitle { font-size: 11px; }

  /* DESTINATIONS GRID — single column */
  .dest-grid { grid-template-columns: 1fr; }
  .dest-card.wide { grid-column: span 1; min-height: 200px; }
  .dest-card { aspect-ratio: 16/9; }

  /* DESTINATIONS PAGE — single column */
  .city-grid { grid-template-columns: 1fr !important; }

  /* INTRO STRIP */
  .intro-text { font-size: 13px; }
  .stat-num { font-size: 24px; }

  /* HOTEL CARDS */
  .hotel-img { min-height: 200px !important; }
  .hotel-name { font-size: 19px !important; }
  .hotel-desc { font-size: 13px !important; }

  /* FOOTER */
  .footer-top { grid-template-columns: 1fr; gap: 1.5rem; }
  .footer-logo { font-size: 20px; }

  /* SECTION HEADINGS */
  .section-title { font-size: 26px; }
  .section-heading { font-size: 24px; }

  /* PAGE HERO */
  .page-hero h1 { font-size: 32px; }
  .page-hero { padding: 2.5rem 1rem 2rem; }

  /* ABOUT */
  .about-block h2 { font-size: 26px; }
}