/* ===================================================================
   Ketan Camping – Responsive Overrides
=================================================================== */

/* -------- Large Desktops -------- */
@media (max-width: 1399.98px){
  .insta-grid{ grid-template-columns: repeat(6,1fr); }
}

/* -------- Laptops / small desktops -------- */
@media (max-width: 1199.98px){
  .masonry-grid{ column-count: 3; }
  .hero-stats{ gap: 26px; }
  .owner-card{ padding: 36px; }
  .insta-grid{ grid-template-columns: repeat(4,1fr); }
}

/* -------- Tablets -------- */
@media (max-width: 991.98px){
  .video-showcase{ background-attachment: scroll; padding: 90px 0; }
  .video-play-btn{ width: 90px; height: 90px; font-size: 1.5rem; }
  .section-pad{ padding: 80px 0; }
  .section-pad-sm{ padding: 54px 0; }
  .hero{ min-height: 580px; }
  .hero-dots{ display:none; }
  .hero-btn-row{ gap: 14px; }
  .masonry-grid{ column-count: 2; }
  .weather-days{ padding-bottom: 10px; }
  .package-card.featured{ transform: none; }
  .package-card.featured:hover{ transform: translateY(-10px); }
  .insta-grid{ grid-template-columns: repeat(3,1fr); }
  .owner-photo{ margin-bottom: 30px; }
  .footer-top{ padding: 60px 0 30px; text-align: left; }
  .contact-form-wrap{ padding: 34px; }
  .booking-cta{ padding: 54px 30px; }
}

/* -------- Large phones / small tablets -------- */
@media (max-width: 767.98px){
  .section-pad{ padding: 64px 0; }
  .topbar .d-none-mobile{ display:none; }
  /* Topbar + logo shrink on mobile, so the hero must be pulled up by less than
     the desktop value (-156px) or its top gets tucked underneath the nav. */
  .hero.nav-overlap{ margin-top: -126px; }
  .hero-title{ font-size: clamp(2.1rem, 8vw, 3rem); }
  .hero-desc{ font-size: 1rem; }
  .hero-stats{ gap: 20px; justify-content: space-between; width: 100%; }
  .hero-stats .stat b{ font-size: 1.5rem; }
  .scroll-indicator{ display: none; }
  .masonry-grid{ column-count: 2; column-gap: 14px; }
  .masonry-item{ margin-bottom: 14px; }
  .gallery-filters{ gap: 8px; }
  .gallery-filters button{ padding: 9px 18px; font-size: .8rem; }
  .insta-grid{ grid-template-columns: repeat(3,1fr); gap: 8px; }
  .owner-card{ padding: 28px 22px; }
  .weather-widget{ padding: 28px 22px; }
  .booking-cta h2{ font-size: 1.8rem; }
  .whatsapp-float{ width: 54px; height: 54px; font-size: 1.4rem; right: 18px; bottom: 18px; }
  .back-to-top{ width: 40px; height: 40px; right: 18px; bottom: 84px; }
  .page-header{ height: 42vh; min-height: 320px; }
  .stat-box .num{ font-size: 2rem; }
}

/* -------- Phones -------- */
@media (max-width: 575.98px){
  .container{ padding-left: 18px; padding-right: 18px; }
  .section-title{ font-size: clamp(1.7rem, 8vw, 2.2rem); }
  .hero-btn-row{ flex-direction: column; align-items: stretch; }
  .hero-btn-row .btn{ width: 100%; }
  .masonry-grid{ column-count: 1; }
  .room-media{ height: 230px; }
  .activity-card{ height: 300px; }
  .insta-grid{ grid-template-columns: repeat(2,1fr); }
  .contact-form-wrap{ padding: 26px 20px; }
  .owner-card::before{ font-size: 2.6rem; }
  .lightbox-nav{ width: 40px; height: 40px; }
  .lightbox-close{ width: 40px; height: 40px; top: 14px; right: 14px; }
  .lightbox-prev{ left: 10px; }
  .lightbox-next{ right: 10px; }
  .faq-accordion .accordion-button{ font-size: .92rem; padding: 18px 20px; }
  .marquee-track span{ font-size: .92rem; padding: 0 20px; }
  .navbar-brand .brand-text b{ font-size: 1.05rem; }
  .navbar-brand img{ height: 54px !important; width: 54px !important; }
}

/* -------- Very small phones -------- */
@media (max-width: 400px){
  .hero-stats{ flex-wrap: wrap; }
  .insta-grid{ grid-template-columns: repeat(2,1fr); }
  .feature-card{ padding: 32px 20px; }
}

/* -------- Reduced motion -------- */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}