/* --- 22. RESPONSIVE --- */

@media (max-width: 1100px) {
  .skills-grid { grid-template-columns: 1fr 1fr; }
  .cert-grid { grid-template-columns: repeat(3, 1fr); }
  .insight-panel { border-top: 1px solid var(--border); }
  .chart-panel { border-right: none; }
  .bio-chapters { grid-template-columns: 1fr; }
  .about-timeline { grid-template-columns: 1fr; }
  .projects-overview { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; text-align: left; }
  .hero-right { display: flex; }
  .hero-bento { max-width: 100%; }
  .hero-desc { margin: 0 0 2rem; }
  .hero-actions { justify-content: flex-start; }
  .hero-stats { grid-template-columns: 1fr; }
  .blog-card { flex: 0 0 calc((100% - 1.4rem) / 2); }
  .proj-grid { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .projects-archive-header { align-items: start; flex-direction: column; }
}

@media (max-width: 768px) {
  .nav-links, .btn-outline-sm { display: none; }
  .hamburger { display: flex; }
  .about-box { grid-template-columns: 1fr; padding: 1.5rem; }
  .bio-facts { grid-template-columns: 1fr; }
  .skills-grid { grid-template-columns: 1fr; }
  .blog-card { flex: 0 0 100%; }
  .blog-arrow { width: 2rem; height: 2rem; font-size: .85rem; }
  .proj-grid { grid-template-columns: 1fr; }
  .proj-tabs { gap: .35rem; }
  .projects-overview { grid-template-columns: 1fr; }
  .cursor-dot, .cursor-ring { display: none; }
  .cert-grid { grid-template-columns: repeat(2, 1fr); }
  .hud-container { display: none; }
  body { cursor: auto; }
  a, button { cursor: pointer; }
}

@media (max-width: 640px) {
  .corner-scientist { display: none; }
}

@media (max-width: 576px) {
  .hero-bento { grid-template-columns: 1fr; }
  .bento-id, .bento-focus { grid-column: span 1; grid-row: auto; }
  .bento-id { flex-direction: column; align-items: flex-start; }
  .id-profile-wrap { width: 112px; height: 112px; }
  .id-meta { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .hero-name { font-size: 2.5rem; }
  .hero-desc { margin: 0 0 2rem; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .cert-grid { grid-template-columns: 1fr; }
}