/* Мобильная адаптация — общий слой (редакция 2).
   Подключается на лендинге и в app-страницах. Правила точечные: дополняют
   существующие @media, а не переписывают их.
   v2: компактная шапка nav.js (900/480), полноширинные CTA героя, чипы соцсетей
   в футере, увеличенный запас прокрутки под sticky-навбар. */

/* базовое поведение касаний и инерция скролла */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 72px; }
body { overscroll-behavior-y: none; }
button, a, [role="button"], summary, label { touch-action: manipulation; }
a, button { -webkit-tap-highlight-color: transparent; }
input, textarea, select {
  font-size: 16px; /* iOS Safari зумит страницу на фокусе, если <16px */
  max-width: 100%;
}

/* общие контейнеры: не давать жёстким колонкам вылезать за экран */
@media (max-width: 860px) {
  .wrap, .container, .topbar-in, .appbar-in, .cat-top { padding-left: 14px; padding-right: 14px; }
}

@media (max-width: 860px) {
  /* сетки колонок → одна колонка; боковая панель уходит в конец */
  .grid, .hero-inner, .eco-grid { grid-template-columns: 1fr; }
  .grid aside { order: 2; }
  /* внутренние двухколонники (разбор профиля, статья+сайдбар) */
  .split { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  /* таблицы и широкие блоки — горизонтальный скролл вместо обрезки */
  table, .scrolly, pre { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  img { max-width: 100%; height: auto; }
  h1 { font-size: clamp(23px, 6.4vw, 30px); }
  .btn { font-size: 14.5px; padding: 12px 16px; }
  /* тосты не должны перекрывать композер */
  .toasts { bottom: calc(16px + env(safe-area-inset-bottom)); }
}

/* модальные окна на телефоне — «лист» снизу, удобно дотянуться большим пальцем */
@media (max-width: 640px) {
  .overlay {
    padding: 0; align-items: flex-end; justify-content: center;
    background: rgba(33, 29, 24, 0.55);
  }
  .overlay > * {
    width: 100%; max-width: none; max-height: 92vh; max-height: calc(100dvh - 24px);
    border-radius: 16px 16px 0 0; border-bottom: none;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding-bottom: calc(18px + env(safe-area-inset-bottom));
    animation: sheet-up 0.22s ease;
  }
  @keyframes sheet-up { from { transform: translateY(28px); opacity: .6; } to { transform: none; opacity: 1; } }
}
/* sticky-CTA/баннеры: не залезать на home-indicator iOS */
.mobile-cta { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }

/* герой лендинга: CTA-кнопки на всю ширину — bigger target, аккуратнее стек */
@media (max-width: 640px) {
  .hero-cta { gap: 10px; }
  .hero-cta .btn { flex: 1 1 100%; justify-content: center; min-height: 48px; }
  .hero-badge { font-size: 11px; padding: 6px 11px; }
}

/* футер: чипы соцсетей — крупные тап-цели, не жмутся на узких экранах */
@media (max-width: 640px) {
  .kat-full-footer__socials { display: grid; grid-template-columns: 1fr; gap: 8px; }
  .kat-full-footer__socials > span { padding-left: 2px; }
  .soc-chip { justify-content: center; min-height: 44px; }
}

/* планшеты портрет: двухколонники лендинга/курса дышат */
@media (max-width: 860px) {
  .incl { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .incl { grid-template-columns: 1fr; }
}