/* Mobile adaptation. Брейкпоинты:
   - 1024px: tablet — sidebar тоньше, padding меньше
   - 960px:  burger menu, sidebar СКРЫТ (иконки переезжают в выпадающее меню),
             секции 1 колонка. Раньше было 768, но на 769-959 контент уходит
             под sidebar — поэтому подняли порог.
   - 480px:  ультра-компакт, шрифты меньше
*/

/* SVG-иконки рядом с текстом в выпадающем burger-меню — видны только на mobile */
.nav-link-icon {
  display: none;
  width: 18px; height: 18px;
  fill: currentColor;
  flex-shrink: 0;
}

/* ── Burger button ── */
.nav-burger {
  display: none;
  background: transparent; border: none; padding: 8px;
  cursor: pointer; flex-direction: column; gap: 4px;
}
.nav-burger span {
  display: block; width: 22px; height: 2px;
  background: var(--text); border-radius: 2px;
  transition: transform 0.2s, opacity 0.2s;
}
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ── Tablet ── */
@media (max-width: 1024px) {
  main { padding-left: 64px; }
  .sidebar { left: 12px; }
  .section { padding: 72px 32px; }
  .section-sm { padding: 48px 32px; }
  .footer { padding: 36px 32px; }
  .footer-grid { gap: 32px; }
  /* compensation для уменьшенного sidebar (76 → 64) */
  .section, .page-hero, .article-hero, .hero, footer.footer {
    margin-left: -64px !important;
    width: calc(100% + 64px) !important;
    padding-left: 80px !important;
    padding-right: 80px !important;
  }
}

/* ── Mobile ── */
@media (max-width: 960px) {
  /* Navbar — burger */
  .navbar { gap: 12px; padding: 0 16px; }
  .navbar-logo { font-size: 15px; }
  .nav-burger { display: flex; margin-left: auto; order: 3; }
  .nav-socials { margin-left: 0; }
  .nav-social-label { display: none; }

  .nav-links {
    position: fixed; top: 64px; left: 0; right: 0;
    flex-direction: column; gap: 0;
    background: var(--dark);
    border-bottom: 1px solid var(--border);
    padding: 16px;
    transform: translateY(-100vh);
    transition: transform 0.25s ease;
    z-index: 49;
  }
  .nav-links.open { transform: translateY(0); }
  .nav-links a {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 8px; width: 100%; font-size: 15px;
  }
  .nav-link-icon { display: block; }

  /* Sidebar — полностью скрыт на mobile, иконки переехали в burger menu */
  .sidebar { display: none; }

  /* Main: без sidebar — без левого отступа */
  main { padding-left: 0; padding-bottom: 0; }

  /* Сбрасываем full-width хак (на mobile sidebar нет, margin-left не нужен) */
  .section, .page-hero, .article-hero, .hero, footer.footer {
    margin-left: 0 !important;
    width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Sections: 1 колонка, меньше отступы */
  .section { padding: 48px 16px; }
  .section-sm { padding: 32px 16px; }
  .section-title { font-size: 26px; }

  /* Footer: 1 колонка */
  .footer { padding: 32px 16px; }
  .footer-grid { grid-template-columns: 1fr; gap: 24px; }
  .footer-bottom { flex-direction: column; gap: 12px; align-items: flex-start; }

  /* Custom cursor — на touch отключается через JS, но на всякий случай */
  .cursor-dot, .cursor-ring { display: none; }
  html, body, a, button, select, input, textarea, label, [role=button], .card { cursor: auto !important; }
}

/* ── Compact mobile ── */
@media (max-width: 480px) {
  body { font-size: 15px; }
  .navbar { height: 56px; }
  main { padding-top: 56px; }
  .nav-links { top: 56px; }
  .section { padding: 32px 14px; }
  .section-title { font-size: 22px; }
  .stat-num { font-size: 32px; }
  .footer { padding: 24px 14px; }
}