/* =======================================================
   KASHTBHANJAN HORIZONS — Responsive Enhancements
   Loaded after style.css / animations.css so these rules win.
   Fills gaps and guarantees a clean layout on all screens.
   ======================================================= */

/* ---- Global safety: never allow horizontal scroll ---- */
html, body { max-width: 100%; overflow-x: hidden; }
*, *::before, *::after { box-sizing: border-box; }

/* Media never overflows its container */
img, video, iframe, table { max-width: 100%; }

/* Long words / URLs wrap instead of pushing layout wide */
p, li, h1, h2, h3, h4, a, span, td, th { overflow-wrap: break-word; word-break: break-word; }

/* Fluid headings so big titles never overflow small screens */
.section-head h2,
.banner-content h1 { font-size: clamp(1.6rem, 4.5vw, 2.6rem); line-height: 1.2; }
.service-text h3   { font-size: clamp(1.3rem, 3.5vw, 1.8rem); }
.cta-content h2    { font-size: clamp(1.7rem, 5vw, 2.8rem); }

/* ============ TABLET (max-width: 1024px) ============ */
@media (max-width: 1024px) {
  .container { padding: 0 20px; }

  /* Two-up the dense card grids on tablet */
  .services-grid,
  .destinations-grid,
  .packages-grid,
  .testimonials-grid,
  .contact-cards,
  .mv-grid { grid-template-columns: repeat(2, 1fr); }

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

  /* Stacked two-column layouts */
  .why-grid,
  .contact-grid,
  .details-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* ============ MOBILE (max-width: 768px) ============ */
@media (max-width: 768px) {
  .container { padding: 0 18px; }

  /* Single column for all card grids */
  .services-grid,
  .destinations-grid,
  .packages-grid,
  .testimonials-grid,
  .contact-cards,
  .mv-grid { grid-template-columns: 1fr; }

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

  /* Section banners shorter on phones */
  .page-banner { padding: 90px 0 50px; min-height: auto; }

  /* Package tabs wrap nicely */
  .package-tabs { flex-wrap: wrap; }

  /* Contact map keeps a sensible height on mobile */
  .contact-map iframe { min-height: 320px !important; }

  /* Details sidebar stacks below content */
  .details-grid .details-sidebar { position: static; }

  /* Auth / login card fits the viewport */
  .auth-section { padding: 100px 0 60px; }
  .auth-card { max-width: 100%; margin: 0 16px; padding: 32px 24px; }
}

/* ============ SMALL PHONES (max-width: 480px) ============ */
@media (max-width: 480px) {
  .container { padding: 0 14px; }

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

  .hero-stats { grid-template-columns: repeat(2, 1fr); }

  .btn { width: 100%; }
  .hero-cta .btn,
  .cta-buttons .btn { width: 100%; }
  .cta-buttons { flex-direction: column; align-items: stretch; }

  .breadcrumb { font-size: 12px; flex-wrap: wrap; }

  .auth-card { padding: 28px 20px; }
}

/* =======================================================
   PREMIUM POLISH PASS  (loaded last — overrides above)
   Goal: modern · trustworthy · premium · calm
   ======================================================= */

/* ---- 1. Calm the motion: kill decorative infinite loops ---- */
/* Keep only tasteful entrance + hover + slider + whatsapp ring. */
.topbar,
.logo .logo-icon,
.hero h1 .gold,
.hero::after,                 /* flying plane */
.hero-eyebrow,
.btn-primary,
.floating-badge,
.pkg-tag,
.price-card,
.price-card::before,
.pkg-price strong,
.stars,
.style-link,
.partner-item,
.newsletter-icon { animation: none !important; }

/* Re-fill any text that used animated gradient clip, so it stays visible */
.pkg-price strong,
.hero h1 .gold { -webkit-text-fill-color: currentColor; }

/* Slow, gentle hover only — no jitter */
.service-card, .testimonial-card, .package-card,
.mv-card, .stat-card, .contact-card, .dest-card,
.style-card, .offer-card {
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease !important;
}

/* ---- 2. Dial gold back to a true accent ---- */
:root { --gold: #c8973f; --gold-dark: #a87a26; }

/* Eyebrows: refined uppercase neutral, gold only as a small tick */
.section-head .eyebrow,
.eyebrow {
  color: #8a6d2f !important;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 12px;
}

/* Primary button: solid premium gold (no shifting gradient) */
.btn-primary {
  background: var(--gold) !important;
  box-shadow: 0 6px 18px rgba(200,151,63,.28) !important;
}
.btn-primary:hover {
  background: var(--gold-dark) !important;
  box-shadow: 0 10px 26px rgba(200,151,63,.40) !important;
}

/* Softer, more confident section rhythm */
.section { padding: 84px 0; }
.section-head { margin-bottom: 48px; }

/* Refined navbar: subtle, premium */
.navbar.scrolled { box-shadow: 0 6px 24px rgba(10,77,140,.08); }

/* Consistent, premium card image treatment */
.dest-card, .style-card, .offer-card { border-radius: 16px; }

/* WhatsApp ring kept but calmer */
.whatsapp-float i { animation: none !important; }

/* Service icons (now Font Awesome): size & accent color */
.service-icon i { font-size: 34px; color: var(--primary); }
.service-card:hover .service-icon i { color: #fff; }
.service-card:hover .service-icon { transform: scale(1.06); } /* calmer than 360° spin */

@media (max-width: 768px) {
  .section { padding: 60px 0; }
  .section-head { margin-bottom: 34px; }

  /* Hide top bar on mobile to reclaim vertical space */
  .topbar { display: none; }

  /* Breathing room for logo + menu icon on mobile */
  .nav-inner { padding: 12px 18px; gap: 12px; }
  .logo { min-width: 0; }                 /* allow logo to shrink, not overflow */
  .hamburger {
    display: block;
    margin-left: auto;
    padding: 6px 8px;
    font-size: 22px;
    line-height: 1;
  }

  /* ---- Mobile nav-links: robust slide-down menu ---- */
  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1000;                 /* sit above hero/content */
    background: #fff;
    flex-direction: column;
    align-items: stretch;          /* full-width rows */
    gap: 0;
    padding: 0 16px;               /* horizontal only; vertical added when open */
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    box-shadow: 0 14px 30px rgba(10,77,140,.12);
    border-top: 1px solid var(--gray-100);
    transition: max-height .35s ease, opacity .25s ease, padding .35s ease, visibility .35s;
  }
  .nav-links.open {
    max-height: calc(100vh - 64px); /* fit viewport, scroll if taller */
    overflow-y: auto;
    opacity: 1;
    visibility: visible;
    padding: 10px 16px 16px;
  }
  .nav-links > a {
    width: 100%;
    text-align: left;
    padding: 14px 6px;             /* large tap target */
    border-bottom: 1px solid var(--gray-100);
    font-size: 15px;
  }
  .nav-links > a:last-of-type { border-bottom: none; }
  /* Disable BOTH desktop underlines on mobile rows (the long gold bar) */
  .nav-links > a:not(.nav-cta)::before,
  .nav-links > a.active::after { display: none !important; }
  .nav-links > a.active { color: var(--primary); font-weight: 600; }
  /* CTA becomes a full-width button at the bottom */
  .nav-links .nav-cta {
    margin-top: 12px;
    text-align: center;
    border-bottom: none;
    padding: 13px 22px;
    border-radius: 50px;
  }
}