/* Responsive breakpoints: desktop (default) / tablet / mobile */

/* ---- Tablet: <= 1100px — collapse right-hand TOC ---- */
@media (max-width: 1100px) {
  .layout { grid-template-columns: var(--sidebar-width) minmax(0, 1fr); }
  .toc { display: none; }
}

/* ---- Tablet/small desktop: <= 900px — narrower sidebar ---- */
@media (max-width: 900px) {
  :root { --sidebar-width: 240px; }
  .content { padding: 24px 24px 60px; }
  .hero, .home-section { padding-left: 24px; padding-right: 24px; }
}

/* ---- Mobile: <= 720px — off-canvas sidebar, stacked layout ---- */
@media (max-width: 900px) {
  .sidebar-collapse-btn { display: none; }
}

@media (max-width: 720px) {
  .menu-toggle { display: flex; }
  .site-header .brand span.brand-text { display: none; }
  .search-box { max-width: none; }
  .search-box .search-kbd { display: none; }

  .layout { display: block; }

  .sidebar {
    position: fixed; top: var(--header-height); left: 0; bottom: 0;
    width: 82vw; max-width: 320px; height: auto;
    transform: translateX(-100%);
    transition: transform .18s ease;
    z-index: 45; box-shadow: var(--shadow);
  }
  .sidebar.open { transform: translateX(0); }
  .sidebar-backdrop {
    display: none; position: fixed; inset: var(--header-height) 0 0 0;
    background: rgba(10, 12, 16, .45); z-index: 40;
  }
  .sidebar-backdrop.open { display: block; }

  .content { padding: 20px 16px 48px; }
  .page-header h1 { font-size: 26px; }
  .hero { padding: 32px 16px 20px; }
  .hero h1 { font-size: 28px; }
  .hero p.lead { font-size: 16px; }
  .home-section { padding: 8px 16px 32px; }
  .card-grid { grid-template-columns: 1fr 1fr; }
  .page-nav { grid-template-columns: 1fr; }
  .page-nav .next { text-align: left; grid-column: 1; }
  .site-footer { padding: 20px 16px; flex-direction: column; gap: 10px; }
}

@media (max-width: 480px) {
  .card-grid { grid-template-columns: 1fr; }
  .stat-row { gap: 20px; }
}