/* ==========================================================================
   Hotel Leopard Valley Kumbhalgarh — Responsive Styles
   ========================================================================== */

/* ---- Large Desktop / Ultra-wide ---- */
@media (min-width: 1600px){
  :root{ --container-width: 1400px; }
  .hero-title{ font-size: 5.6rem; }
}

/* ---- Laptop / Small Desktop ---- */
@media (max-width: 1200px){
  .why-grid{ grid-template-columns: repeat(3, 1fr); }
  .amenities-grid{ grid-template-columns: repeat(4, 1fr); }
}

/* ---- Tablet ---- */
@media (max-width: 992px){
  section{ padding: 90px 0; }

  .nav-menu{
    position: fixed; top: 0; right: -100%; width: min(340px, 82%); height: 100vh;
    background: var(--color-white); flex-direction: column; align-items: flex-start;
    padding: 110px 2rem 2rem; gap: 1.5rem; box-shadow: var(--shadow-lg);
    transition: right var(--transition-base); z-index: 999;
  }
  .nav-menu.open{ right: 0; }
  .nav-link{ color: var(--color-text) !important; font-size: 1.05rem; width: 100%; }
  .nav-book{ display: none; }
  .nav-toggle{ display: flex; }
  .nav-toggle.open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2){ opacity: 0; }
  .nav-toggle.open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

  .about-grid, .restaurant-grid, .faq-grid, .contact-grid{ grid-template-columns: 1fr; gap: 3rem; }
  .restaurant-media{ order: -1; }
  .about-img-main img{ height: 420px; }

  .why-grid{ grid-template-columns: repeat(2, 1fr); }
  .amenities-grid{ grid-template-columns: repeat(3, 1fr); }

  .experience-grid{ grid-template-columns: repeat(2, 1fr); grid-auto-rows: 220px; }
  .experience-card.large{ grid-column: span 2; grid-row: span 1; }

  .attractions-grid{ grid-template-columns: repeat(2, 1fr); }
  .attraction-card.featured{ grid-column: span 2; grid-template-columns: 1fr; }
  .attraction-card.featured img{ min-height: 220px; }

  .policies-grid{ grid-template-columns: repeat(2, 1fr); }
  .gallery-grid{ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
  .form-row{ grid-template-columns: 1fr; }

  .footer-grid{ grid-template-columns: 1fr 1fr; }
}

/* ---- Mobile Landscape / Large Phones ---- */
@media (max-width: 768px){
  .hero-buttons{ flex-direction: column; width: 100%; max-width: 320px; margin: 0 auto; }
  .hero-buttons .btn{ width: 100%; }
  .hero-badges{ gap: .6rem; }
  .hero-badge-card{ font-size: .75rem; padding: .7rem 1rem; }

  .why-grid{ grid-template-columns: 1fr 1fr; }
  .amenities-grid{ grid-template-columns: repeat(2, 1fr); }
  .rooms-nav{ display: none; }

  .attractions-grid{ grid-template-columns: 1fr; }
  .attraction-card.featured{ grid-column: span 1; }

  .booking-buttons{ flex-direction: column; align-items: stretch; }
  .booking-numbers{ flex-direction: column; gap: .75rem; }

  .policies-grid{ grid-template-columns: 1fr 1fr; }
  .footer-grid{ grid-template-columns: 1fr; gap: 2.5rem; }
  .footer-bottom{ flex-direction: column; text-align: center; }

  .sticky-booking{
    display: flex; align-items: center; justify-content: center; gap: .6rem;
    position: fixed; bottom: 0; left: 0; width: 100%; z-index: 998;
    background: linear-gradient(135deg, var(--color-gold-light), var(--color-gold));
    color: var(--color-dark); font-weight: 700; padding: 1rem; font-size: .92rem;
    box-shadow: 0 -6px 24px rgba(0,0,0,0.12);
  }
  .whatsapp-float{ bottom: 84px; width: 54px; height: 54px; font-size: 1.5rem; }
  .back-to-top{ bottom: 84px; }
}

/* ---- Mobile Portrait ---- */
@media (max-width: 576px){
  .container{ padding: 0 18px; }
  section{ padding: 70px 0; }
  .section-header{ margin-bottom: 40px; }

  .hero{ min-height: 580px; }
  .hero-title{ font-size: 2.5rem; }
  .hero-subtitle{ font-size: 1rem; }

  .why-grid, .amenities-grid, .policies-grid{ grid-template-columns: 1fr; }
  .gallery-grid{ grid-template-columns: repeat(2, 1fr); gap: .85rem; }
  .experience-grid{ grid-template-columns: 1fr; grid-auto-rows: 240px; }
  .experience-card.large{ grid-column: span 1; }

  .about-img-float{ display: none; }
  .about-stat-card{ position: static; margin-top: -50px; margin-left: 1rem; width: fit-content; }

  .room-facilities{ grid-template-columns: 1fr; }
  .contact-form-wrap{ padding: 1.75rem; }
  .map-embed iframe{ height: 300px; }

  .faq-question{ font-size: 1rem; }

  .nav-logo-text{ font-size: 1.1rem; }
  .mouse-follower{ display: none; }
}

/* ---- Foldables / Very Narrow ---- */
@media (max-width: 360px){
  .hero-title{ font-size: 2.1rem; }
  .btn-lg{ padding: .95rem 1.75rem; font-size: .9rem; }
}

/* ---- Landscape phones ---- */
@media (max-height: 480px) and (orientation: landscape){
  .hero{ height: auto; min-height: 100vh; padding: 120px 0 60px; }
  .scroll-indicator{ display: none; }
}

/* ---- Print ---- */
@media print{
  .site-header, .whatsapp-float, .back-to-top, .sticky-booking, .scroll-progress, .mouse-follower, .floating-leaves, #loader{ display: none !important; }
}