/* ============================================================
   NDIAMBOUR BUSINESS INTERNATIONAL — Responsive layout
   ============================================================ */

/* ---------- Tablet (<= 1024px) ---------- */
@media (max-width: 1024px) {
  section { padding: 58px 0; }

  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .benefits-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .contact-cards { grid-template-columns: 1fr 1fr; }
  .exchange-grid { grid-template-columns: 1fr; gap: 34px; }
  .two-col { grid-template-columns: 1fr; gap: 30px; }
  .hero-visual { display: none; }
  .hero-slides { min-height: 560px; min-height: min(560px, calc(100svh - 110px)); }
  .hero-slide { padding: clamp(30px, 5vh, 70px) 0 clamp(52px, 8vh, 96px); min-height: 560px; min-height: min(560px, calc(100svh - 110px)); }
  .hero-arrow { width: 42px; height: 42px; }
  .hero-dots { gap: 9px; }
  .brand-logo img { height: 54px; }
  .main-nav > ul > li > a,
  .main-nav .dropdown-toggle { padding: 12px 10px; font-size: 0.87rem; }
  .nav-cta { margin-left: 4px; }
  .contact-banner-grid { grid-template-columns: auto 1fr; }
  .contact-banner-grid .cta-col { grid-column: 1 / -1; }
}

/* ---------- Small tablet / large phone (<= 860px) ---------- */
@media (max-width: 860px) {
  .nav-toggle { display: flex; }

  /* The nav overlay is a sibling of <header>. The header's z-index creates a
     stacking context that traps the slide-in panel below the overlay, so the
     menu opened but stayed hidden behind the dim layer. Raise the whole header
     above the overlay so the panel (and the toggle) sit on top of it. */
  .site-header { z-index: 160; }

  .main-nav {
    position: fixed;
    top: 0;
    right: -340px;
    width: min(320px, 86vw);
    height: 100vh;
    background: var(--white);
    box-shadow: -12px 0 40px rgba(6, 40, 90, 0.25);
    flex-direction: column;
    align-items: stretch;
    padding: 90px 22px 30px;
    gap: 4px;
    transition: right 0.28s ease;
    z-index: 150;
    overflow-y: auto;
  }
  .main-nav.open { right: 0; }
  .main-nav > ul { flex-direction: column; align-items: stretch; gap: 2px; }
  .main-nav > ul > li > a,
  .main-nav .dropdown-toggle {
    width: 100%;
    justify-content: space-between;
    padding: 14px 12px;
    font-size: 0.98rem;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
  }
  .main-nav > ul > li.active > a::after { display: none; }
  .main-nav > ul > li.active > a { background: var(--bg-light); }

  .dropdown {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: 0;
    display: none;
    min-width: 0;
    padding: 4px 0 8px 14px;
  }
  .main-nav li.open .dropdown { display: block; }

  .nav-cta { margin: 18px 0 0; width: 100%; }
  .nav-overlay {
    position: fixed;
    inset: 0;
    background: rgba(4, 24, 56, 0.55);
    z-index: 140;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease;
  }
  .nav-overlay.show { opacity: 1; visibility: visible; }

  .destination-inner { flex-direction: column; align-items: flex-start; }
  .departure-days { max-width: 100%; width: 100%; }
  .contact-banner-grid { grid-template-columns: 1fr; text-align: center; }
  .contact-numbers { justify-content: center; }
  .banner-map-head { justify-content: center; }
  .map-wrapper--sm .gmap_iframe { height: 320px !important; }
  .banner-map .gmap_iframe { height: 320px !important; }
}

/* ---------- Mobile (<= 640px) ---------- */
@media (max-width: 640px) {
  body { font-size: 15px; }
  section { padding: 46px 0; }

  .topbar .container { justify-content: center; }
  .topbar-contacts { justify-content: center; gap: 4px 14px; }
  .topbar-sep { display: none; }

  .brand-logo img { height: 46px; }
  .hero-slides { min-height: 480px; min-height: min(480px, calc(100svh - 96px)); }
  .hero-slide { padding: clamp(24px, 4.5vh, 54px) 0 clamp(48px, 8vh, 88px); min-height: 480px; min-height: min(480px, calc(100svh - 96px)); }
  .hero h1 { font-size: clamp(1.55rem, 7vw, 1.9rem); }
  .hero-actions .btn { width: 100%; }
  .hero-actions { margin-bottom: 22px; }
  .hero-features { gap: 10px 18px; }
  .hero-feature { font-size: 0.8rem; }
  .hero-flags img { height: 26px; }
  .hero-arrow { width: 36px; height: 36px; font-size: 1.1rem; }
  .hero-arrow.prev { left: 8px; }
  .hero-arrow.next { right: 8px; }
  .hero-dots { gap: 8px; }

  .services-grid { grid-template-columns: 1fr; }
  .benefits-grid { grid-template-columns: 1fr; }
  .contact-cards { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .calc-row { grid-template-columns: 1fr; }
  .calc-card { padding: 22px; }
  .calc-actions .btn { width: 100%; }

  .route-display { gap: 12px; justify-content: center; width: 100%; }
  .route-flags { justify-content: center; width: 100%; }

  .step { flex-direction: column; gap: 12px; }
  .cta-band .btn-row .btn { width: 100%; }

  .footer-bottom { justify-content: center; text-align: center; }
  .footer-bottom .legal-links { justify-content: center; width: 100%; }

  .page-hero { padding: 60px 0; }
  .info-table { display: block; overflow-x: auto; }
}

/* ---------- Short viewports (landscape phones / small laptops) ----------
   The sticky topbar+header (~170px) eats vertical space, so cap the hero
   height against the *remaining* viewport and scale the text to fit. */
@media (max-height: 760px) {
  .hero-slides { min-height: min(480px, calc(100svh - 180px)); }
  .hero-slide { padding: 26px 0 46px; min-height: min(480px, calc(100svh - 180px)); }
  .hero-flags { margin-bottom: 12px; }
  .hero-flags img { height: 26px; }
  .hero-kicker { font-size: 0.72rem; margin-bottom: 6px; }
  .hero h1 { font-size: clamp(1.5rem, 3.6vw, 2.3rem); margin-bottom: 10px; }
  .hero .hero-slide-title,
  .hero-slide-title { font-size: clamp(1.35rem, 3.2vw, 2rem); margin-bottom: 10px; }
  .hero .hero-tagline { font-size: 0.95rem; margin-bottom: 16px; }
  .hero-actions { margin-bottom: 18px; }
  .hero-feature .ico { width: 32px; height: 32px; }
  .hero-feature { font-size: 0.82rem; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}