/* =========================================================================
   responsive.css — Institutional Breakpoints & Mobile Drawer
   ========================================================================= */

@media (max-width: 1200px) {
  .home-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .footer-grid { grid-template-columns: 1.8fr 1fr 1fr 1.2fr; gap: 28px; }
}

@media (max-width: 1024px) {
  .home-grid { grid-template-columns: repeat(2, 1fr); }
  .faculty-grid { grid-template-columns: repeat(3, 1fr); }
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .hero-stats { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .vm-tiles { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .nav ul {
    display: none;
    position: fixed;
    top: var(--header-h, 80px);
    left: 0;
    right: 0;
    z-index: 99;
    background: #ffffff;
    border-bottom: 2px solid var(--theme-accent);
    box-shadow: var(--shadow-lg);
    flex-direction: column;
    padding: 20px;
    gap: 6px;
    align-items: stretch;
  }
  .nav ul.open { display: flex; }
  .nav ul a {
    padding: 12px 16px;
    font-size: 15px;
  }
  .nav a.nav-cta {
    margin-left: 0;
    margin-top: 8px;
    text-align: center;
    justify-content: center;
  }

  .hero { padding: 60px 0 70px; }
  .hero h1 { font-size: 32px; }
  .hero-stats { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .course-toolbar { grid-template-columns: 1fr; }
  .contact-layout { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 768px) {
  section { padding: 56px 0; }
  .home-grid, .faculty-grid, .gallery-grid, .g2, .g3, .g4 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .header-inner { min-height: 70px; }
  .brand-name { font-size: 17px; }
  .brand-tag { display: none; }
  .hero-stats { grid-template-columns: 1fr 1fr; gap: 12px; }
  .form-card { padding: 24px 18px; }
  .list-item { padding: 14px 16px; flex-direction: column; gap: 6px; }
  .li-date { flex: 0 0 auto; }
}

@media (max-width: 480px) {
  .hero-eyebrow { font-size: 11px; }
  .hero-btns { flex-direction: column; width: 100%; }
  .hero-btns .btn { width: 100%; }
  .hero-stats { grid-template-columns: 1fr; gap: 12px; }
  .footer-bottom { flex-direction: column; text-align: center; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  html { scroll-behavior: auto; }
}