/* ═══════════════════════════════════════════
   PATHWAY — Shared Responsive Stylesheet
   Breakpoints: 1024px (tablet), 768px (mobile), 480px (small)
   ═══════════════════════════════════════════ */

/* ── HAMBURGER BUTTON ── */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  border-radius: 8px;
  transition: background 0.15s;
  flex-shrink: 0;
}
.nav-hamburger:hover { background: var(--bg-alt, #F7F5FD); }
.nav-hamburger span {
  display: block;
  height: 2px;
  background: var(--text, #1C0F30);
  border-radius: 2px;
  transition: transform 0.25s, opacity 0.25s, width 0.25s;
  width: 24px;
}
.nav-hamburger span:nth-child(3) { width: 16px; }
.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); width: 24px; }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); width: 24px; }

/* Mobile/tablet side navigation */
.mobile-nav {
  display: flex;
  position: fixed;
  top: 0;
  left: auto;
  right: 0;
  bottom: 0;
  height: 100vh;
  height: 100dvh;
  width: min(360px, 88vw);
  background: #fff;
  border-left: 1px solid var(--border, #E8E0F5);
  box-shadow: -12px 0 36px rgba(28,15,48,0.14);
  z-index: 1100;
  padding: calc(var(--nav-h, 70px) + 24px) 24px 32px;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  overflow-y: auto;
  visibility: hidden;
  transform: translateX(100%);
  transition: transform 0.3s ease, visibility 0s linear 0.3s;
}
.mobile-nav.open {
  visibility: visible;
  transform: translateX(0);
  transition-delay: 0s;
}
.nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(28,15,48,0.28);
  z-index: 1050;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}
.nav-overlay.open {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}
body.nav-open { overflow: hidden; }
body.nav-open .wa-float { visibility: hidden; }
.mobile-nav a {
  display: block;
  padding: 12px 16px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text, #1C0F30);
  border-radius: 8px;
  transition: background 0.15s;
}
.mobile-nav a:hover { background: var(--bg-alt, #F7F5FD); color: var(--purple, #5B2D87); }
.mobile-nav a.active { color: var(--purple, #5B2D87); background: var(--purple-tint, #F3EDFB); }
.mobile-nav .mobile-nav-cta {
  margin-top: 8px;
  background: var(--purple, #5B2D87);
  color: #fff !important;
  text-align: center;
  border-radius: 8px;
  padding: 13px 16px;
}

/* ── TABLET (≤1024px) ── */
@media (max-width: 1024px) {
  /* Use the compact navigation on tablets and phones. */
  #mainNav { z-index: 1150; }
  .nav-hamburger {
    display: flex !important;
    position: fixed;
    top: 15px;
    right: 24px;
    z-index: 1200;
  }
  .nav-links { display: none !important; }
  .nav-cta { display: none !important; }

  /* Index hero */
  .hero-in { grid-template-columns: 1fr !important; gap: 32px !important; }
  .hero-visual { display: none !important; }

  /* Country page hero */
  .hero-in[style*="340px"],
  div.hero-in { grid-template-columns: 1fr !important; }
  .hero-flag-block { max-width: 320px; margin: 0 auto; }

  /* Two-col layouts */
  .two-col, .two-col-3-2 { grid-template-columns: 1fr !important; gap: 36px !important; }
  .story-grid { grid-template-columns: 1fr !important; gap: 36px !important; }
  .contact-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  .ceo-card { grid-template-columns: 1fr !important; }

  /* Destination grid */
  .dest-grid { grid-template-columns: repeat(4, 1fr) !important; }

  /* Partner institutions - 3 cols on tablet */
  div[style*="repeat(5,1fr)"] { grid-template-columns: repeat(3, 1fr) !important; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }

  /* Stats */
  .stats-row { grid-template-columns: repeat(2, 1fr) !important; }
  .stats-row .stat { border-right: none !important; border-bottom: 1px solid rgba(255,255,255,0.15); padding-bottom: 20px; }
  .stats-row .stat:nth-child(odd) { border-right: 1px solid rgba(255,255,255,0.15) !important; }
  .stats-row .stat:nth-last-child(-n+2) { border-bottom: none; }

  /* Grids */
  .why-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .team-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .mvv-grid { grid-template-columns: 1fr 1fr !important; }
  .visa-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .lang-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .cities-grid { grid-template-columns: 1fr 1fr !important; }
}

/* ── MOBILE (≤768px) ── */
@media (max-width: 768px) {
  .nav-hamburger { right: 16px; }

  /* Sections */
  section { padding: 48px 0 !important; }
  .container { padding: 0 16px !important; }

  /* Typography scale */
  h1 { font-size: clamp(26px, 7vw, 38px) !important; }
  h2 { font-size: clamp(20px, 5vw, 30px) !important; }

  /* Hero */
  .hero-in { padding: 40px 16px !important; }
  .hero-sub { font-size: 15px !important; }
  .hero-actions { flex-direction: column !important; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .hero-stats { flex-wrap: wrap; gap: 16px !important; }

  /* Country hero */
  .country-hero { min-height: auto !important; }
  .hero-flag-block { padding: 20px !important; }

  /* Destinations */
  .dest-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }

  /* Services / Why / Process */
  .svc-grid, .why-grid, .proc-track { grid-template-columns: 1fr !important; }

  /* Visa / Language */
  .visa-grid { grid-template-columns: 1fr !important; }
  .lang-grid { grid-template-columns: 1fr !important; }

  /* Partner institutions - 2 cols on mobile */
  div[style*="repeat(5,1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
  div[style*="repeat(4,1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }

  /* Cities */
  .cities-grid { grid-template-columns: 1fr !important; }

  /* Teams */
  .team-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .mvv-grid { grid-template-columns: 1fr !important; }
  .ceo-card { padding: 24px !important; }

  /* Stats band */
  .stats-band { padding: 24px 0 !important; }
  .stats-row { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; }
  .stats-row .stat { border: none !important; padding: 0 !important; }

  /* Contact form */
  .f-row { grid-template-columns: 1fr !important; }
  .contact-grid { grid-template-columns: 1fr !important; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
  .footer-bottom { flex-direction: column !important; text-align: center !important; gap: 8px !important; }

  /* Reviews */
  .g-rating-hero { flex-direction: column !important; gap: 20px !important; padding: 24px !important; }
  .g-divider { display: none !important; }
  .g-reviews-grid { grid-template-columns: 1fr !important; }

  /* Modal */
  .modal-hero { flex-direction: column !important; gap: 10px !important; padding: 20px !important; }
  .modal-body { padding: 20px !important; }
  .modal-cta { flex-direction: column !important; }

  /* Country page two-col */
  .two-col, .two-col-3-2 { grid-template-columns: 1fr !important; gap: 28px !important; }
  .uni-list { gap: 8px !important; }

  /* WhatsApp float */
  .wa-float { bottom: 16px !important; right: 16px !important; }
  .wa-btn { width: 52px !important; height: 52px !important; }

  /* CTA band */
  .cta-band { padding: 48px 0 !important; }
  .cta-band .btn { width: 100%; justify-content: center; }

  /* Process page */
  .proc-grid { grid-template-columns: 1fr !important; }

  /* Story block image */
  .story-img-block { min-height: 280px !important; }
}

@media (min-width: 1025px) {
  .mobile-nav,
  .nav-overlay { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-nav,
  .nav-overlay,
  .nav-hamburger span { transition: none; }
}

/* ── SMALL MOBILE (≤480px) ── */
@media (max-width: 480px) {
  .dest-grid { grid-template-columns: repeat(2, 1fr) !important; }
  div[style*="repeat(5,1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
  .partner-logo-card { min-width: unset !important; max-width: unset !important; padding: 12px 8px !important; }
  .hero-stats { gap: 12px !important; }
  .stat-val { font-size: 28px !important; }
  .wa-label { display: none !important; }
  .stats-row .stat .num { font-size: 20px !important; }
}