/* ============================================
   RESPONSIVE BREAKPOINTS
   ============================================ */
@media (max-width: 900px) {
  nav { padding: 1.2rem 2rem; }
  nav.scrolled { padding: 1rem 2rem; }
  .nav-links { display: none; }
  .hamburger { display: flex; }
  .nav-logo svg { width: 270px; }
  .logo-tagline { font-size: 9px; letter-spacing: 2px; }
  section { padding: 4rem 2rem; }
  .trust-strip { padding: 1.5rem 2rem; }
  .about-grid,
  .packages-intro,
  .contact-layout {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .about-image { height: 320px; }
  .dest-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .form-row { grid-template-columns: 1fr; }
  .page-hero { padding: 3rem 2rem; }
  .pkg-full { padding: 3.5rem 2rem; }
  .pkg-full-inner,
  .pkg-full-inner.reverse {
    grid-template-columns: 1fr;
    direction: ltr;
    gap: 2rem;
  }
  .pkg-highlights { grid-template-columns: 1fr; }
  .pkg-gallery { grid-template-rows: 220px 150px; }
  footer { padding: 3rem 2rem; }
  .footer-bottom { flex-direction: column; text-align: center; }
}

@media (max-width: 500px) {
  .dest-grid { grid-template-columns: 1fr; }
  .hero-title { font-size: clamp(2.4rem, 9vw, 3.5rem); }
}
/* ============================================
   IMAGE GRID RESPONSIVENESS (added)
   ============================================ */
@media (max-width: 900px) {
  .hero { min-height: 560px; }
  .featured-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .featured-grid-4 .featured-image { height: 200px; }
  .featured-grid-2 .featured-image { height: 200px; }
  .mini-gallery-4 { grid-template-columns: repeat(3, 1fr); }
  .mini-gallery-item { height: 160px; }
  .dest-gallery { grid-template-columns: 1fr 1fr; }
  .dest-gallery-item { height: 220px; }
  .icon-card-grid { grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }
  .about-image { height: 300px; }
  .dest-card { height: 260px; }
  .pkg-img { height: 190px; }
}

@media (max-width: 640px) {
  .hero { min-height: 480px; }
  .featured-grid-4,
  .featured-grid-2 { grid-template-columns: 1fr 1fr; gap: 0.6rem; }
  .featured-grid-4 .featured-image,
  .featured-grid-2 .featured-image { height: 150px; }
  .mini-gallery-4 { grid-template-columns: repeat(2, 1fr); gap: 5px; }
  .mini-gallery-item { height: 130px; }
  .dest-gallery { grid-template-columns: 1fr; gap: 0.5rem; }
  .dest-gallery-item { height: 220px; }
  .icon-card-grid { grid-template-columns: 1fr; }
  .about-image { height: 240px; }
  .dest-card { height: 220px; }
  .pkg-gallery { grid-template-rows: 180px 130px; }
  .pkg-img { height: 170px; }
  .stats-row { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 400px) {
  .featured-grid-4,
  .featured-grid-2 { grid-template-columns: 1fr; }
  .featured-grid-4 .featured-image,
  .featured-grid-2 .featured-image { height: 190px; }
  .mini-gallery-4 { grid-template-columns: repeat(2, 1fr); }
  .mini-gallery-item { height: 110px; }
  .stats-row { grid-template-columns: 1fr; }
}

/* ============================================
   FOOTER OVERFLOW FIX
   ============================================ */
@media (max-width: 640px) {
  footer { padding: 2.5rem 1.2rem; }
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-bottom: 2rem;
  }
  .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: 0.5rem;
  }
}

/* ============================================
   SERVICE / DESTINATION DETAIL RESPONSIVENESS
   ============================================ */
@media (max-width: 900px) {
  .detail-panel { padding: 2.5rem 2rem; }
  .detail-grid { grid-template-columns: 1fr; gap: 2rem; }
}

@media (max-width: 500px) {
  .detail-panel { padding: 2rem 1.2rem; }
}

/* ============================================
   NAV LOGO / FOOTER LOGO RESPONSIVENESS
   (logos previously had zero responsive sizing,
   causing horizontal overflow on narrow phones)
   ============================================ */
@media (max-width: 640px) {
  nav { padding: 0.9rem 1.2rem; gap: 0.5rem; }
  nav.scrolled { padding: 0.7rem 1.2rem; }
  .nav-logo svg { width: 215px; }
  .logo-tagline, .logo-tagline-line { display: none; }
  footer svg { width: 260px !important; height: auto !important; }
}

@media (max-width: 420px) {
  nav { padding: 0.7rem 0.8rem; }
  .nav-logo svg { width: 175px; }
  .theme-toggle-wrapper { margin-right: 0; gap: 0.3rem; }
  footer svg { width: 220px !important; }
}

/* ============================================
   ABOUT PAGE REASON BLOCKS -- stack with image
   on top, text below, on mobile (both variants)
   ============================================ */
@media (max-width: 900px) {
  .reason-block,
  .reason-block-reverse {
    grid-template-columns: 1fr;
    gap: 1.75rem;
    margin-top: 2.75rem;
  }
  .reason-block .reason-image,
  .reason-block-reverse .reason-image { order: -1; }
  .reason-block .reason-text,
  .reason-block-reverse .reason-text { order: 2; }
  .reason-image { height: 240px; }
}

/* Photo gallery + lightbox responsive */
@media (max-width: 640px) {
  .photo-gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.6rem;
  }
  .lightbox {
    padding: 1.2rem;
  }
  .lightbox-prev, .lightbox-next {
    width: 38px;
    height: 38px;
    font-size: 1.4rem;
  }
  .lightbox-prev { left: 0.4rem; }
  .lightbox-next { right: 0.4rem; }
  .lightbox-close {
    top: 0.8rem;
    right: 0.8rem;
    width: 36px;
    height: 36px;
  }
  .lightbox-caption {
    bottom: 1rem;
    font-size: 0.78rem;
    padding: 0 3rem;
  }
}