/* ==========================================================================
   ANAND RESORT — Responsive Overrides
   Breakpoints follow Bootstrap 5: >=1200 desktop, 992 laptop, 768 tablet, <768 mobile
   ========================================================================== */

/* ---------- Laptop / Small Desktop ---------- */
@media (max-width: 1199.98px) {
  .hero-title { font-size: clamp(2rem, 5vw, 3.6rem); }
  .welcome-badge { padding: 18px 20px; }
}

/* ---------- Tablet ---------- */
@media (max-width: 991.98px) {
  .navbar-resort .navbar-collapse {
    background: var(--color-white);
    margin-top: 14px;
    padding: 20px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
  }
  .navbar-resort .nav-link-resort { color: var(--color-text) !important; margin: 6px 0; }
  .navbar-resort .nav-phone-btn { color: var(--color-primary) !important; margin: 10px 0; }
  .navbar-resort:not(.scrolled) .navbar-brand-resort,
  .navbar-toggler-resort .bi { color: var(--color-white); }

  .hero-content { max-width: 100%; }
  .hero-actions .btn { padding: 12px 22px; font-size: 0.9rem; }

  .welcome-badge { position: static; margin-top: -40px; margin-left: 20px; display: inline-block; }

  .contact-info-card { margin-top: 30px; }

  .gallery-item img { height: 220px; }
}

/* ---------- Mobile ---------- */
@media (max-width: 767.98px) {
  .page-header { padding: 150px 0 70px; }
  .hero-title { font-size: 2rem; }
  .hero-sub { font-size: 1rem; }
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; text-align: center; }
  .hero-nav-btn { width: 40px; height: 40px; }
  .hero-nav-btn i { font-size: 1rem; }

  .section-title { font-size: 1.7rem; }

  .contact-form-card, .contact-info-card { padding: 26px; }

  .lightbox-prev, .lightbox-next { width: 38px; height: 38px; }
  .lightbox-close { top: 14px; right: 14px; width: 38px; height: 38px; }
  .lightbox-prev { left: 8px; }
  .lightbox-next { right: 8px; }

  .floating-actions { right: 14px; bottom: 14px; }
  .fab { width: 48px; height: 48px; font-size: 1.2rem; }
  .back-to-top { right: 14px; width: 40px; height: 40px; }
  .back-to-top.show { bottom: 76px; }

  .gallery-item img { height: 200px; }

  .footer-resort { padding-top: 56px; text-align: center; }
  .footer-brand { justify-content: center; }
  .footer-social { justify-content: center; display: flex; }
}

/* ---------- Small Mobile ---------- */
@media (max-width: 400px) {
  .hero-title { font-size: 1.7rem; }
  .section-title { font-size: 1.5rem; }
  .contact-form-card, .contact-info-card { padding: 18px; }
}