/* ==========================================================================
   Travel Box Hotels — Responsive Stylesheet
   Breakpoints: 1200, 992, 768, 576, 400
   ========================================================================== */

/* ---------- Large desktops down ---------- */
@media (max-width: 1200px) {
  .hero h1 { font-size: 4rem; }
  .about-img-stack .img-main img { height: 460px; }
}

/* ---------- Tablet landscape ---------- */
@media (max-width: 992px) {
  :root { --sp-7: 64px; --sp-6: 56px; }

  .navbar-travelbox .navbar-collapse {
    background: rgba(255,255,255,.97);
    border-radius: var(--radius);
    padding: 18px;
    margin-top: 12px;
    box-shadow: var(--shadow);
  }
  .navbar-travelbox:not(.scrolled) .navbar-collapse {
    background: rgba(12,19,32,.95);
  }
  .navbar-travelbox .nav-link {
    color: var(--neutral-800) !important;
    padding: 10px 14px !important;
  }
  .navbar-travelbox:not(.scrolled) .nav-link { color: #fff !important; }
  .navbar-travelbox .navbar-brand { font-size: 1.4rem; }

  .b2b-banner {
    flex-direction: column;
    text-align: center;
    padding: 22px;
  }
  .b2b-banner .b2b-text h3 { justify-content: center; }

  .about-img-stack .exp-badge { right: 10px; }
  .about-img-stack .img-float { left: 10px; }

  .room-card { flex-direction: column; }
  .room-card .room-img { flex: none; }
  .room-card .room-img img { height: 220px; }

  .gallery-grid { column-count: 2; }

  .hero-stats { gap: 30px; }
  .hero-search { padding: 16px; }
}

/* ---------- Tablet portrait ---------- */
@media (max-width: 768px) {
  :root { --sp-7: 48px; --sp-6: 40px; }

  .hero { min-height: 90vh; }
  .hero h1 { font-size: 3rem; }
  .hero p.lead { font-size: 1.1rem; }
  .hero-stats { gap: 24px; margin-top: 40px; }
  .hero-stat .num { font-size: 1.8rem; }

  .section-title { font-size: 2rem; }
  .section-subtitle { margin-bottom: 32px; }

  .detail-hero { height: 50vh; min-height: 360px; }
  .detail-slider .slide { height: 320px; }
  .slider-thumbs { flex-wrap: wrap; }
  .slider-thumbs button { flex: 0 0 calc(25% - 9px); }

  .about-img-stack .img-float { display: none; }
  .about-img-stack .exp-badge { width: 96px; height: 96px; }
  .about-img-stack .exp-badge .num { font-size: 1.6rem; }

  .package-card { height: 400px; }

  .footer .newsletter .btn { width: 100%; margin-top: 10px; }

  .whatsapp-float { bottom: 80px; right: 18px; width: 50px; height: 50px; font-size: 1.3rem; }
  .back-to-top { right: 18px; width: 44px; height: 44px; }
}

/* ---------- Mobile ---------- */
@media (max-width: 576px) {
  :root { --sp-7: 40px; --sp-6: 32px; }

  .hero { min-height: 88vh; }
  .hero h1 { font-size: 2.4rem; }
  .hero p.lead { font-size: 1rem; }
  .hero-buttons { flex-direction: column; width: 100%; }
  .hero-buttons .btn { width: 100%; justify-content: center; }
  .hero-stats { gap: 20px; }
  .hero-stat .num { font-size: 1.6rem; }
  .hero-stat .label { font-size: .72rem; }

  .section-title { font-size: 1.7rem; }
  .navbar-brand { font-size: 1.25rem !important; }
  .navbar-brand .brand-mark { width: 36px; height: 36px; font-size: 1.1rem; }
  .navbar-brand .brand-text small { font-size: .55rem; }

  .b2b-banner .b2b-text h3 { font-size: 1.25rem; }
  .b2b-banner .b2b-cta { padding: 12px 22px; font-size: .9rem; width: 100%; justify-content: center; }

  .hotel-card .card-img-wrap { height: 200px; }
  .hotel-card .card-actions { flex-direction: column; }
  .hotel-card .card-actions .btn { width: 100%; }

  .gallery-grid { column-count: 1; }
  .gallery-grid .gallery-item { margin-bottom: 12px; }

  .package-card { height: 360px; }
  .package-card .pkg-title { font-size: 1.4rem; }

  .booking-form-wrap { padding: 22px; }

  .detail-slider .slide { height: 260px; }
  .slider-thumbs button img { height: 60px; }

  .lightbox { padding: 20px; }
  .lightbox .lb-prev, .lightbox .lb-next { width: 44px; height: 44px; }
  .lightbox .lb-close { top: 16px; right: 16px; width: 44px; height: 44px; }

  .page-header { min-height: 280px; }
  .page-header h1 { font-size: 2rem; }

  .footer-bottom { font-size: .8rem; text-align: center; }
  .footer .social-icons { justify-content: flex-start; }

  .stats-band .stat-num { font-size: 2rem; }
}

/* ---------- Small mobile ---------- */
@media (max-width: 400px) {
  .hero h1 { font-size: 2rem; }
  .section-title { font-size: 1.5rem; }
  .navbar-brand .brand-text small { display: none; }
  .b2b-banner .b2b-text h3 { font-size: 1.1rem; }
  .package-card .pkg-title { font-size: 1.25rem; }
}