@media (max-width: 980px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 20;
    width: var(--sidebar-width);
    transform: translateX(-100%);
    transition: transform 180ms ease;
  }

  body.sidebar-open .sidebar {
    transform: translateX(0);
  }

  .sidebar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 19;
    display: none;
    background: rgba(7, 59, 42, 0.32);
  }

  body.sidebar-open .sidebar-backdrop {
    display: block;
  }

  .menu-toggle {
    display: inline-flex;
  }

  .stats-grid,
  .dashboard-grid,
  .feature-grid,
  .gallery-grid,
  .hero-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .public-stat-strip,
  .facility-grid,
  .public-program-grid,
  .announcement-grid,
  .cms-gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .public-overview-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .site-header .container,
  .topbar,
  .toolbar,
  .module-header,
  .panel-header,
  .section-title {
    align-items: stretch;
    flex-direction: column;
  }

  .site-nav {
    overflow-x: auto;
    width: 100%;
    padding-bottom: 8px;
  }

  .site-header .brand { flex-basis: auto; }
  .site-header .brand strong { max-width: none; }
  .site-nav a { flex: 0 0 auto; }

  .topbar-actions { width: 100%; justify-content: flex-start; margin-left: 0; }

  .public-hero { min-height: 560px; }
  .public-stat-strip { grid-template-columns: 1fr 1fr; margin-top: -36px; }
  .public-stat-strip article:nth-child(2) { border-right: 0; }
  .public-stat-strip article { border-bottom: 1px solid var(--line); }
  .public-section { padding: 56px 0; }
  .public-section-head { align-items: flex-start; }
  .facility-grid,
  .public-program-grid,
  .announcement-grid,
  .cms-gallery-grid { grid-template-columns: 1fr; }
  .cms-anchor-nav { position: static; }
  .site-footer-grid { grid-template-columns: 1fr; }

  .content {
    padding: 16px;
  }

  .stats-grid,
  .dashboard-grid,
  .feature-grid,
  .gallery-grid,
  .hero-grid,
  .form-grid {
    grid-template-columns: 1fr;
  }

  .btn {
    width: 100%;
  }

  .row-actions .btn,
  .btn.icon {
    width: 40px;
  }
}