/* ============================================================
   SUAD ARCHITECTS — responsive.css
   Mobile-first breakpoints (overrides desktop defaults below 1100px)
   ============================================================ */

/* Large desktop ↓ */
@media (max-width: 1199px) {
  .footer-grid { grid-template-columns: 1.4fr 1fr 1.4fr; }
  .footer-grid .f-links-2 { display: none; }
}

/* Tablet landscape ↓ */
@media (max-width: 991px) {
  .grid-3, .process-grid, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); gap: 34px 16px; }

  .nav-menu {
    position: fixed; top: 0; right: 0; height: 100vh; width: min(82vw, 360px);
    background: var(--cream); flex-direction: column; align-items: flex-start;
    justify-content: flex-start; gap: 0; padding: 100px 36px 40px;
    box-shadow: -20px 0 60px rgba(0,0,0,.18);
    transform: translateX(100%); transition: transform .45s var(--ease); z-index: 1100;
    overflow-y: auto;
  }
  .nav-menu.open { transform: translateX(0); }
  .nav-menu a { width: 100%; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: .95rem; }
  .nav-menu a::after { display: none; }
  .nav-menu .nav-cta { margin: 22px 0 0; }
  .nav-menu .nav-cta .btn-suad { width: 100%; justify-content: center; }
  .nav-toggle { display: block; z-index: 1200; }

  .nav-backdrop {
    position: fixed; inset: 0; background: rgba(20,19,17,.45); z-index: 1050;
    opacity: 0; visibility: hidden; transition: opacity .4s var(--ease);
  }
  .nav-backdrop.open { opacity: 1; visibility: visible; }

  .split { grid-template-columns: 1fr; gap: 48px; }
  .split--media-right .split-media { order: -1; }
  .svc-row, .svc-row.flip { grid-template-columns: 1fr; gap: 30px; }
  .svc-row.flip .svc-media { order: -1; }

  .process-grid .process-step::after { display: none; }
  .gallery { grid-template-columns: repeat(2, 1fr); }

  .figure-stack .fig-float { width: 46%; right: 0; bottom: -24px; }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
  .footer-grid .f-links-2 { display: block; }
}

/* Tablet portrait / large phone ↓ */
@media (max-width: 767px) {
  .topbar .t-meta { gap: 16px; }
  .topbar .t-meta .hide-sm { display: none; }

  .hero-strip li { min-width: 50%; flex: 1 1 50%; border-bottom: 1px solid rgba(255,255,255,.12); }
  .hero-strip li:nth-child(2) { border-right: 0; }

  .hero p { font-size: 1rem; }
  .hero-actions .btn-suad { padding: 14px 26px; }
}

/* Phone ↓ */
@media (max-width: 575px) {
  .grid-3, .grid-2, .grid-4, .process-grid, .stats, .gallery, .svc-points { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 30px; }
  .footer-bottom .inner { flex-direction: column; text-align: center; }

  .filter-bar button { padding: 9px 18px; font-size: .7rem; }
  .figure-stack .fig-float { display: none; }
  .figure-stack .fig-badge { left: 0; }

  .topbar .t-meta { display: none; }
  .topbar .inner { justify-content: center; }

  .hero-strip { display: none; }
  .hero { min-height: 88vh; }

  .lightbox .lb-nav { width: 44px; height: 44px; }
  .lightbox .lb-nav.prev { left: 12px; }
  .lightbox .lb-nav.next { right: 12px; }

  .sign-row { gap: 18px; }
  .to-top { right: 16px; bottom: 16px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}