/* ══════════════════════════════════════
   CRYSTAL PEAK CHOPTA — mobile.css
   Targets: max-width 768px (phones)
            max-width 480px (small phones)
   ══════════════════════════════════════ */

/* ─────────────────────────────────────
   TABLET — 768px
───────────────────────────────────── */
@media (max-width: 768px) {

  /* ── Global spacing & overflow prevention ── */
  html { overflow-x: hidden; width: 100%; }
  body { max-width: 100vw; overflow-x: hidden; width: 100%; }
  section { padding: 3rem 1.2rem !important; max-width: 100%; }
  #packages { padding: 3rem 1.2rem !important; max-width: 100%; }

  /* ── NAV ── */
  #navbar { padding: 0.85rem 1.2rem; max-width: 100%; width: 100%; box-sizing: border-box; overflow: hidden; }
  .nav-links, .nav-cta { display: none !important; }
  .hamburger { display: flex !important; }
  .nav-logo { font-size: 1rem; }

  /* Mobile drawer links */
  .mobile-menu { max-width: 100vw !important; width: 100% !important; }
  .mobile-menu ul li a { font-size: 1.1rem; }
  .mobile-menu ul li { padding: 0.7rem 0; }

  /* ── HERO ── */
  #hero { height: 100svh; min-height: 500px; align-items: flex-end; padding-bottom: 5rem; max-width: 100%; width: 100%; overflow-x: hidden; }

  .hero-content {
    padding: 0 1.2rem !important;
    padding-top: 70px !important;
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
  }
  .hero-eyebrow { font-size: 0.68rem; margin-bottom: 0.6rem; }
  .hero-line-1,
  .hero-line-2,
  .hero-line-3 { font-size: 2.6rem !important; line-height: 1.05; }
  .hero-title { margin-bottom: 0.9rem; }
  .hero-sub {
    font-size: 0.85rem !important;
    line-height: 1.6;
    max-width: 100%;
  }
  .hero-sub br { display: none; }
  .hero-actions {
    margin-top: 1.4rem;
    gap: 0.7rem;
    flex-direction: column;
    align-items: flex-start;
  }
  .btn-hero-primary,
  .btn-hero-outline {
    padding: 0.78rem 1.6rem;
    font-size: 0.75rem;
    width: auto;
  }

  /* Slide dots */
  .slide-dots { bottom: 1.2rem; gap: 0.45rem; }
  .dot { width: 7px; height: 7px; }

  /* ── MARQUEE ── */
  .marquee-wrap { padding: 0.55rem 0; max-width: 100%; overflow: hidden; }
  .marquee-item { font-size: 0.6rem; gap: 0.9rem; }

  /* ── ABOUT ── */
  #about { grid-template-columns: 1fr !important; gap: 2rem !important; max-width: 100%; width: 100%; }

  /* Stack images — show only main image, hide accent */
  .about-image-stack { height: 220px !important; }
  .about-img-main {
    width: 100% !important; height: 220px !important;
    top: 0 !important; right: 0 !important; left: 0 !important;
    border-radius: 8px;
  }
  .about-img-accent { display: none; }
  .about-badge {
    width: 68px !important; height: 68px !important;
    top: auto !important; bottom: -20px !important;
    left: auto !important; right: 1rem !important;
    transform: none !important;
  }
  .about-badge strong { font-size: 1.1rem !important; }
  .about-badge span { font-size: 0.42rem !important; }

  .about-text .section-title { font-size: 1.7rem !important; margin-bottom: 0.9rem; }
  .about-text p { font-size: 0.95rem !important; line-height: 1.7; }
  .about-features { gap: 1rem; flex-wrap: wrap; margin-top: 1.2rem; }
  .feat-item { font-size: 0.75rem; }

  /* ── PACKAGES ── */
  .packages-header { margin-bottom: 2rem; }
  .section-title-white { font-size: 2rem !important; }
  .packages-sub { font-size: 0.88rem !important; }
  .packages-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
    max-width: 100% !important;
  }
  .package-card { padding: 1.6rem 1.4rem !important; }
  .package-card.featured { transform: none !important; }
  .package-name { font-size: 1.2rem !important; }
  .package-desc { font-size: 0.75rem !important; }
  .package-price { font-size: 2.2rem !important; }
  .pkg-per { font-size: 0.7rem !important; }
  .package-perks li { font-size: 0.78rem !important; padding: 0.35rem 0 !important; }
  .pkg-btn { padding: 0.75rem !important; font-size: 0.72rem !important; }
  .featured-tag { font-size: 0.55rem !important; }

  /* ── AMENITIES ── */
  #amenities { grid-template-columns: 1fr !important; gap: 2rem !important; max-width: 100%; width: 100%; }
  .amenities-left .section-title { font-size: 1.7rem !important; }
  .amenities-left > p { font-size: 0.9rem !important; margin-bottom: 1.2rem; }
  .amenities-grid { grid-template-columns: 1fr 1fr !important; gap: 0.7rem !important; }
  .amenity-item { padding: 0.9rem !important; }
  .amenity-emoji { font-size: 1.2rem !important; }
  .amenity-name { font-size: 0.75rem !important; }
  .amenity-desc { font-size: 0.65rem !important; }

  .amenities-right .section-title { font-size: 1.5rem !important; margin-bottom: 1rem !important; }
  .trek-cards { gap: 0.7rem !important; }
  .trek-card { padding: 1rem 1.1rem !important; gap: 0.8rem !important; }
  .trek-num { font-size: 1.5rem !important; min-width: 2rem !important; }
  .trek-info h4 { font-size: 0.82rem !important; }
  .trek-info p { font-size: 0.7rem !important; }
  .trek-dist { font-size: 0.65rem !important; }

  /* ── GALLERY ── */
  #gallery .section-title { font-size: 1.7rem !important; margin-bottom: 1.2rem; }
  .gallery-grid {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: 160px 160px 160px !important;
    gap: 0.5rem !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  .gallery-item:first-child { grid-row: auto !important; }
  .gallery-caption { font-size: 0.65rem !important; }

  /* ── TESTIMONIALS ── */
  #testimonials { text-align: left; max-width: 100%; width: 100%; }
  #testimonials .section-title { font-size: 1.7rem !important; }
  .testimonials-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
    margin-top: 1.5rem !important;
  }
  .testimonial-card { padding: 1.3rem !important; }
  .testimonial-image {
    width: 100% !important;
    margin: -1.3rem -1.3rem 1rem !important;
  }
  .testimonial-text { font-size: 0.92rem !important; margin-bottom: 0.9rem; }
  .testimonial-author { font-size: 0.7rem !important; }

  /* ── ANIMATIONS — Keep working on mobile (slower on mobile) ── */
  .reveal,
  .reveal-left,
  .reveal-right,
  .reveal-up {
    opacity: 0 !important;
    transition: opacity 1.5s ease, transform 1.5s cubic-bezier(0.34,1.56,0.64,1) !important;
  }
  .reveal.visible,
  .reveal-left.visible,
  .reveal-right.visible,
  .reveal-up.visible {
    opacity: 1 !important;
    transform: translate(0, 0) !important;
  }

  /* Slow down gallery animations on mobile */
  .gallery-item { transition: transform 1s ease !important; }
  .gallery-overlay { transition: opacity 0.6s !important; }

  /* Slow down package card animations on mobile */
  .package-card { transition: transform 0.6s, background 0.6s, border-color 0.6s !important; }
  .pkg-btn { transition: background 0.4s, color 0.4s, transform 0.4s !important; }

  /* Slow down button transitions on mobile */
  .btn-hero-primary,
  .btn-hero-outline {
    transition: background 0.4s, border-color 0.4s, transform 0.4s !important;
  }

  /* ── BOOKING ── */
  #booking { max-width: 100%; width: 100%; }
  #booking .section-title { font-size: 1.7rem !important; }
  #booking > .booking-inner > p { font-size: 0.9rem !important; margin-bottom: 1.5rem; }
  .booking-form {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }
  .form-group label { font-size: 0.6rem !important; }
  .form-group input,
  .form-group select { padding: 0.7rem 0.85rem !important; font-size: 0.85rem !important; }
  .whatsapp-btn { padding: 0.85rem !important; font-size: 0.78rem !important; }
  .booking-call { font-size: 0.68rem !important; }

  /* ── HOW TO REACH ── */
  #reach { grid-template-columns: 1fr !important; gap: 2rem !important; max-width: 100%; width: 100%; }
  .reach-text .section-title { font-size: 1.7rem !important; margin-bottom: 1.2rem !important; }
  .route-step { gap: 0.9rem; margin-bottom: 1.1rem; }
  .route-num { min-width: 1.8rem !important; height: 1.8rem !important; font-size: 0.78rem !important; }
  .route-info h3 { font-size: 0.82rem !important; }
  .route-info p { font-size: 0.74rem !important; }
  .reach-map iframe { height: 240px !important; }
  .map-link-bar { font-size: 0.68rem !important; padding: 0.6rem 0.85rem !important; }

  /* ── FOOTER ── */
  footer {
    grid-template-columns: 1fr 1fr !important;
    gap: 1.5rem !important;
    padding: 2rem 1.2rem 1.5rem !important;
    max-width: 100%;
    width: 100%;
  }
  .footer-brand { grid-column: 1 / -1; }
  .footer-brand .logo { font-size: 1.1rem !important; }
  .footer-brand p { font-size: 0.75rem !important; max-width: 100% !important; }
  .footer-col h5 { font-size: 0.6rem !important; margin-bottom: 0.7rem; }
  .footer-col ul li a { font-size: 0.75rem !important; }
  .footer-col address { font-size: 0.75rem !important; line-height: 1.7 !important; }
  .footer-bottom {
    padding: 0.85rem 1.2rem !important;
    flex-direction: column; gap: 0.25rem; text-align: center;
    max-width: 100%;
    width: 100%;
  }
  .footer-bottom p { font-size: 0.65rem !important; }

  /* ── FLOATING WA ── */
  .wa-float { width: 48px !important; height: 48px !important; font-size: 1.3rem !important; bottom: 1.2rem !important; right: 1.2rem !important; }

  /* ── SECTION TITLES general ── */
  .section-title { font-size: 1.75rem !important; }
  .section-sub { font-size: 0.9rem !important; margin-bottom: 1.8rem !important; }
  .section-label { font-size: 0.6rem !important; }
}

/* ─────────────────────────────────────
   SMALL PHONES — 480px
───────────────────────────────────── */
@media (max-width: 480px) {

  /* ── HERO ── */
  .hero-line-1,
  .hero-line-2,
  .hero-line-3 { font-size: 2rem !important; }

  /* ── ABOUT ── */
  .about-image-stack { height: 190px !important; }
  .about-img-main { height: 190px !important; }

  /* ── AMENITIES ── */
  .amenities-grid { grid-template-columns: 1fr 1fr !important; }

  /* ── GALLERY ── */
  .gallery-grid {
    grid-template-columns: 1fr !important;
    grid-template-rows: repeat(5, 160px) !important;
  }

  /* ── PACKAGES ── */
  .packages-grid { gap: 0.8rem !important; }

  /* ── FOOTER ── */
  footer { grid-template-columns: 1fr !important; }
  .footer-brand { grid-column: auto; }

  /* ── SECTION titles ── */
  .section-title { font-size: 1.5rem !important; }
  .section-title-white { font-size: 1.7rem !important; }
}

/* ─────────────────────────────────────
   VERY SMALL — 360px (budget Androids)
───────────────────────────────────── */
@media (max-width: 360px) {
  #navbar { padding: 0.75rem 1rem; }
  .nav-logo { font-size: 0.9rem; }

  .hero-line-1,
  .hero-line-2,
  .hero-line-3 { font-size: 1.75rem !important; }
  .hero-eyebrow { font-size: 0.6rem; }

  .btn-hero-primary,
  .btn-hero-outline { padding: 0.7rem 1.2rem !important; font-size: 0.7rem !important; }

  section { padding: 2.5rem 1rem !important; }
  #packages { padding: 2.5rem 1rem !important; }
}