/* responsive.css — Breakpoint overrides. Loaded last so its media queries win.
   Extracted from the original single-file index.html (2026-08-29 split).
*/

/* ═══════════════════════════════════════════════ RESPONSIVE */
@media(max-width:768px){
  :root{--sidebar:0px}
  .sidebar{transform:translateX(-272px);width:272px}
  .sidebar.open{transform:translateX(0)}
  .sidebar-overlay.show{display:block}
  .main-wrapper{margin-left:0}
  .hamburger{display:flex}
  main{padding:1.2rem 1rem 3rem}
  .card-grid.cols-3{grid-template-columns:1fr}
  .card-grid.cols-2{grid-template-columns:1fr}
  .hero{padding:2rem .5rem 1.5rem}
  .hero-stats{gap:1.5rem}
  .bar-chart{height:80px}
}
@media(max-width:520px){
  h1{font-size:1.6rem}
  h2{font-size:1.3rem}
  .module-title{font-size:1.4rem}
}