/* ==========================================================================
   Article Heaven — responsive.css
   Breakpoints: 1024, 900, 768, 560, 430, 375, 320
   ========================================================================== */

@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .toc ol { columns: 1; }
}

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .layout { grid-template-columns: 1fr; }
  .sidebar { order: 2; }
  .method-band { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }

  /* Mobile navigation: accordion drawer */
  .nav-toggle { display: inline-flex; }
  .mainnav { border-bottom: 0; }
  .mainnav__list {
    display: none; flex-direction: column; border-top: 1px solid var(--line);
    background: var(--card); padding: 6px 0 14px;
  }
  .mainnav.is-open .mainnav__list { display: flex; }
  .mainnav__item { border-bottom: 1px solid var(--line-soft); }
  .mainnav__link { padding: 14px var(--pad-x); border-bottom: 0; justify-content: space-between; }
  .megamenu {
    position: static; min-width: 0; border: 0; border-radius: 0; box-shadow: none;
    padding: 0 var(--pad-x) 12px; background: var(--paper);
  }
  .megamenu__grid { grid-template-columns: 1fr; }
  .megamenu__grid a { padding: 10px 8px; }
}

@media (max-width: 768px) {
  body { font-size: 16px; }
  .topstrip__note { display: none; }
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .ledger { grid-template-columns: 1fr; }
  .proscons { grid-template-columns: 1fr; }
  .card--horizontal a.card__link { grid-template-columns: 104px 1fr; }
  .toc { position: static; }
  .toc__toggle { display: flex; justify-content: space-between; align-items: center; }
  .toc__toggle::after { content: "▾"; color: var(--primary); }
  .toc__toggle[aria-expanded="false"]::after { content: "▸"; }
  .toc__inner[hidden] { display: none; }
  .toc h2 { display: none; }
  .prevnext { grid-template-columns: 1fr; }
  .authorbox { grid-template-columns: 64px 1fr; }
  .authorbox img { width: 64px; height: 64px; }
  .leaders dd { max-width: 55%; }
  .section { padding: 26px 0; }
}

@media (max-width: 560px) {
  :root { --pad-x: 18px; }
  .grid-4 { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; gap: 20px; padding: 28px 0 18px; }
  .masthead__row { padding: 12px 0; }
  .brand__mark { width: 38px; height: 38px; }
  .brand__name { font-size: 1.3rem; }
  .brand__tag { display: none; }
  .iconbtn span { display: none; }
  .iconbtn { padding: 9px 11px; }
  .hero-grid .stack .card--horizontal a.card__link { grid-template-columns: 88px 1fr; }
  .specbox__head { padding: 12px 16px; }
  .specbox__body { padding: 12px 16px; }
  .leaders > div { flex-wrap: wrap; }
  .leaders dd { max-width: 100%; text-align: left; margin-left: 0; flex-basis: 100%; }
  .leaders .lead { display: none; }
  .card--ranked a.card__link { grid-template-columns: auto 52px 1fr; }
  .search-panel { padding: 14px; }
}

@media (max-width: 375px) {
  :root { --pad-x: 16px; }
  h1 { font-size: 1.65rem; }
  .btn { padding: 11px 16px; font-size: .9rem; }
  .card--horizontal a.card__link { grid-template-columns: 1fr; }
  .card--horizontal .card__media { border-right: 0; border-bottom: 1px solid var(--line-soft); }
  .card--horizontal .card__media img { aspect-ratio: 16/9; }
}

/* Sticky TOC only on tall desktop screens */
@media (min-width: 1100px) and (min-height: 700px) {
  .toc--sticky { position: sticky; top: 16px; z-index: 5; max-height: calc(100vh - 32px); overflow-y: auto; }
}