/* ============================================================
   MapleBridge Immigration - Responsive (responsive.css)
   Breakpoints: <=1080 (tablet-land), <=900 (tablet),
                <=768 (mobile-land / nav), <=560 (mobile)
   ============================================================ */

/* ---------- Large tablet / small desktop ---------- */
@media (max-width: 1080px) {
  :root { --container: 960px; }
  .grid-4 { grid-template-columns: repeat(3, 1fr); }
  .stats-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; }
  .footer-top { grid-template-columns: repeat(4, 1fr); }
  .footer-brand { grid-column: 1 / -1; max-width: 520px; }
}

/* ---------- Tablet ---------- */
@media (max-width: 900px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; gap: 40px; }
  .split .media-frame { order: -1; }
  .eligibility-layout { grid-template-columns: 1fr; }
  .result-panel { position: static; }
  .hero { min-height: auto; padding-top: calc(var(--nav-h) + 60px); padding-bottom: 130px; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 32px; }
}

/* ---------- Mobile nav breakpoint ---------- */
@media (max-width: 768px) {
  :root { --nav-h: 66px; }

  .hamburger { display: flex; }

  .nav-menu {
    position: fixed;
    top: var(--nav-h);
    right: 0;
    height: calc(100vh - var(--nav-h));
    width: min(300px, 82vw);
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 24px 20px;
    background: var(--bg);
    border-left: 1px solid var(--border);
    box-shadow: -20px 0 50px rgba(0, 0, 0, 0.16);
    transform: translateX(105%);
    transition: transform 0.4s var(--ease);
    overflow-y: auto;
  }
  .nav-menu.open { transform: translateX(0); }
  .nav-link { padding: 14px 16px; border-radius: 12px; font-size: 1.02rem; }
  .nav-link::after { display: none; }
  .nav-link:hover, .nav-link.active { background: var(--red-soft); }
  .nav-cta { text-align: center; margin-top: 8px; }

  .nav-overlay {
    position: fixed;
    inset: 0;
    top: var(--nav-h);
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
    z-index: 999;
  }
  .nav-overlay.show { opacity: 1; visibility: visible; }

  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { width: 100%; }
  .hero-stats { gap: 26px; }
  .scroll-cue { display: none; }

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

  /* Timeline becomes single column */
  .timeline::before { left: 22px; }
  .timeline-item,
  .timeline-item:nth-child(even) { width: 100%; left: 0; text-align: left; padding: 14px 0 14px 62px; }
  .timeline-item:nth-child(odd) { text-align: left; }
  .timeline-item:nth-child(odd) .timeline-dot,
  .timeline-item:nth-child(even) .timeline-dot { left: 0; right: auto; }

  .form-row { grid-template-columns: 1fr; gap: 0; }

  .testimonial { padding: 32px 22px; }

  .float-stack { left: 16px; bottom: 16px; }
  .back-to-top { right: 16px; bottom: 16px; }
  .chat-widget { left: 16px; bottom: 84px; }
}

/* ---------- Small mobile ---------- */
@media (max-width: 560px) {
  .container { padding-inline: 18px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .section-header { margin-bottom: 40px; }
  .footer-top { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .newsletter-form { flex-direction: column; border-radius: var(--radius); background: transparent; padding: 0; }
  .newsletter-form input { background: rgba(255, 255, 255, 0.15); border-radius: 100px; text-align: center; }
  .newsletter-form button { width: 100%; }
  .card, .glass-card { padding: 26px 22px; }
  .float-btn { width: 50px; height: 50px; font-size: 1.3rem; }
  .hero-stat .num { font-size: 1.7rem; }
  .trust-row { gap: 18px; }
}

/* ---------- Very small ---------- */
@media (max-width: 380px) {
  h1 { font-size: 1.9rem; }
  .nav-logo span { font-size: 1.1rem; }
  .stats-grid { grid-template-columns: 1fr; }
}

/* ---------- Large desktop enhancement ---------- */
@media (min-width: 1400px) {
  :root { --container: 1280px; }
}

/* Print */
@media print {
  .navbar, .float-stack, .back-to-top, .chat-widget, .preloader, .newsletter { display: none !important; }
  body { color: #000; background: #fff; }
}