/* ============================================
   RESPONSIVE — ALL BREAKPOINTS
   ============================================ */

@media (max-width: 1200px) {
  .stats-grid { padding: 0 40px; }
  .district-sidebar { width: 240px; padding: 60px 28px; }
  .villa-content { padding: 36px; }
  .projects-grid { grid-template-columns: repeat(2, 1fr); }
  .journal-grid, .blog-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  :root { --section-padding: 60px 0; }

  .navbar .nav-center,
  .navbar .nav-right .nav-phone,
  .navbar .nav-right .btn-register { display: none; }
  .navbar .hamburger { display: flex; }

  .hero h1 { font-size: 52px; }
  .hero-content { left: 6%; max-width: 88%; bottom: 18%; }

  .stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 0;
    padding: 0 20px;
  }
  .stat:not(:last-child)::after { display: none; }

  .landmark {
    grid-template-columns: 1fr;
  }
  .landmark-text { padding: 60px 20px 40px; order: 2; }
  .landmark-image .bg { min-height: 320px; }

  .districts { flex-direction: column; height: auto; }
  .district-sidebar {
    width: 100%;
    padding: 40px 20px;
    border-right: none;
    border-bottom: 1px solid var(--color-border);
  }
  .district-viewport { min-height: 380px; }
  .district-panel { position: static; opacity: 0; height: 0; overflow: hidden; }
  .district-panel.active { opacity: 1; height: auto; overflow: visible; }
  .district-content { padding: 32px 20px; }
  .district-content .panel-title { font-size: 42px; }

  .villas { flex-direction: column; height: auto; }
  .villa-panel { height: 52vh; min-height: 380px; }
  .villa-panel .villa-content { padding: 32px 20px; }

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

  .location-grid { grid-template-columns: 1fr; gap: 50px; }
  .map-container { height: 340px; }

  .projects-grid { grid-template-columns: 1fr; }
  .journal-grid, .blog-grid { grid-template-columns: 1fr; }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .footer-bottom { flex-direction: column; gap: 10px; text-align: center; }

  .form-row { grid-template-columns: 1fr; }
  .form-card { padding: 32px 24px; }

  .mini-stats { gap: 18px; }
}

@media (max-width: 480px) {
  .amenities-grid,
  .philosophy-grid,
  .projects-grid { grid-template-columns: 1fr; }

  .stat-number { font-size: 48px; }
  .hero h1 { font-size: 46px; }
  .district-content .panel-title { font-size: 36px; }

  .footer-grid { grid-template-columns: 1fr; }
  .villa-panel { height: 46vh; }
}