/* ==========================================================================
   Responsive rules layered on style.css
   ========================================================================== */
@media (max-width: 980px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  .nav { padding: 0 16px; }
  .nav-links {
    display: none; position: absolute; top: 68px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; background: var(--surface-color);
    border-bottom: 1px solid var(--divider-color); box-shadow: var(--shadow-lg);
    padding: 10px; gap: 2px;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 12px 14px; }
  .nav-links a::after { display: none; }
  .nav-toggle { display: inline-flex; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .hero { padding: 44px 0 28px; }
  .search-form { flex-direction: column; }
  .search-form .btn { width: 100%; }
  .profile-hero { gap: 16px; }
  .avatar { width: 64px; height: 64px; font-size: 1.7rem; border-radius: 15px; }
  .stat-card .value { font-size: 1.55rem; }
  .footer-grid { flex-direction: column; }
}

@media (max-width: 440px) {
  .container { padding: 0 13px; }
  .panel, .card { padding: 17px; }
  .nav .brand { font-size: 1.2rem; }
}

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