/* ═══════════════════════════════════════════════════════════════════════
   21.10.2026: МОБИЛЬНАЯ АДАПТАЦИЯ — 380px и ниже (минимальный ориентир).
   Проблема: на /docs/*/ документ растягивался до 1110px при экране 380px —
   горизонтальная прокрутка из-за длинных <code> строк и широких таблиц.

   Решения:
     • code/pre — перенос строк (overflow-wrap: anywhere + white-space: pre-wrap);
     • таблицы — горизонтальный скролл ВНУТРИ контейнера, а не всей страницы;
     • grid .doc-wrap — одна колонка (меню сверху, контент снизу);
     • длинные URL и слова — break-word везде.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 0. Базовая защита от горизонтального переполнения ── */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* ── 1. Только мобильные (380 и меньше) ── */
@media (max-width: 480px) {
  /* контейнеры не шире экрана */
  .wrap, .doc-wrap, .doc-main, article, main, section {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* СЕТКА ДОКОВ: одна колонка вместо 250px + 1fr */
  .doc-wrap {
    display: block !important;
    grid-template-columns: 1fr !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .doc-wrap > nav,
  .doc-nav {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 18px !important;
    padding-right: 0 !important;
    border-right: 0 !important;
  }
  .doc-wrap > article,
  article.doc {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    min-width: 0 !important;
  }

  /* КОД: переносим длинные строки, не даём распирать страницу */
  pre,
  pre code,
  code {
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }
  pre {
    white-space: pre-wrap !important;
    overflow-x: auto !important;
    font-size: 11.5px !important;
    line-height: 1.55 !important;
    padding: 12px !important;
    border-radius: 10px !important;
  }
  /* одиночный inline-code внутри текста */
  p code, li code, td code, h2 code, h3 code {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  /* ТАБЛИЦЫ: скролл внутри, а не вся страница вправо */
  table {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    font-size: 12px !important;
  }
  table thead, table tbody, table tr {
    width: auto !important;
  }
  th, td {
    padding: 7px 9px !important;
    font-size: 12px !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    min-width: 0 !important;
  }
  /* первая колонка (имя поля) не даёт раздувать */
  th:first-child, td:first-child {
    min-width: 70px !important;
  }

  /* Заголовки и текст — соразмерно экрану */
  h1 { font-size: 22px !important; line-height: 1.25 !important; }
  h2 { font-size: 18px !important; line-height: 1.3 !important; }
  h3 { font-size: 15.5px !important; }
  body, p, li { font-size: 13.5px !important; line-height: 1.6 !important; }

  /* Ссылки и длинные слова не вылезают */
  a, span, div, p, li, td {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* Кнопки и пилюли — на всю ширину, если не влезают */
  .btn, .btn-primary, .btn-ghost {
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  /* Кнопки в шапке — компактнее */
  .top-right .btn {
    padding: 8px 10px !important;
    font-size: 12.5px !important;
  }

  /* Скрыть горизонтальный декор, который может вылезать */
  .glow, .bg-glow, .orb {
    display: none !important;
  }

  /* Отступы страницы */
  main, section, article {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* ── 2. Очень узкие (380 и меньше): ещё компактнее ── */
@media (max-width: 380px) {
  .doc-wrap {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  main, section, article {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  pre {
    font-size: 11px !important;
    padding: 10px !important;
  }
  h1 { font-size: 20px !important; }
  h2 { font-size: 17px !important; }
  th, td {
    padding: 6px 8px !important;
    font-size: 11.5px !important;
  }
  .top-right { gap: 6px !important; }
  .top-right .btn { padding: 7px 9px !important; font-size: 12px !important; }
}
/* ═══ 21.10.2026 v2: мобильная адаптация — дополнение ═══
   Главная: .price-table имел фиксированную ширину 560px → горизонтальный скролл.
   /docs/: другая структура (.doc-nav + .doc-main в .doc-wrap 1120px) → одна колонка.
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
  /* ── ГЛАВНАЯ: таблица цен ── */
  .price-table,
  .price-table > table,
  div[class*="price-table"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box !important;
  }
  .price-table table {
    width: max-content !important;
    min-width: 100% !important;
  }

  /* ── /docs/ (индекс): .doc-wrap 1120px ── */
  .doc-wrap {
    display: block !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    box-sizing: border-box !important;
  }
  .doc-nav,
  aside.doc-nav {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: block !important;
    margin: 0 0 18px 0 !important;
    padding: 0 0 14px 0 !important;
    border-right: 0 !important;
    border-bottom: 1px solid #262636 !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  /* пункты меню в строку — компактно */
  .doc-nav ul, .doc-nav ol {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }
  .doc-nav li {
    margin: 0 !important;
  }
  .doc-nav li a {
    display: inline-block !important;
    padding: 6px 10px !important;
    border: 1px solid #2a2a3e !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
  }

  .doc-main,
  main.doc-main {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  /* все блочные дети документа не шире экрана */
  .doc-main > *, .doc-main > * > * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ── Главная: прочие широкие блоки ── */
  .wrap {
    max-width: 100% !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    box-sizing: border-box !important;
  }
  .table-wrap, .table-scroll, .scroll-x {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* карточки услуг — в одну колонку */
  .grid, .cards, .services-grid, .features {
    grid-template-columns: 1fr !important;
  }

  /* декоративные широкие элементы (полосы, градиенты) не должны распирать */
  [style*="width: 1200px"], [style*="width:1200px"],
  [style*="min-width: 1200px"], [style*="min-width:1200px"] {
    width: 100% !important;
    min-width: 0 !important;
  }
}

@media (max-width: 380px) {
  .wrap {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .doc-wrap {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}
/* ═══ 21.10.2026 v3: /docs/ индекс — ОДЕРЖИМАЯ ширина 1120px ═══
   Виновник: html body .doc-wrap { width: 1120px; max-width: 1120px }
   в docs-lay6-220113.css и docs-align-221910.css (специфичность 0,0,2).
   Мой .doc-wrap внутри @media проигрывал — поднимаю специфичность до той же
   и добавляю !important на width/max-width/grid-template-columns.
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
  html body .doc-wrap,
  html body .doc-wrap.doc-wrap,
  html body .doc-foot,
  html body .doc-foot.doc-foot {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: 1fr !important;
    display: block !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    box-sizing: border-box !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  html body .doc-wrap .doc-nav,
  html body .doc-wrap nav,
  html body .doc-wrap aside {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 16px 0 !important;
    padding: 0 0 12px 0 !important;
    border-right: 0 !important;
    border-bottom: 1px solid #262636 !important;
    box-sizing: border-box !important;
  }

  html body .doc-wrap .doc-main,
  html body .doc-wrap .doc-body,
  html body .doc-wrap article,
  html body .doc-wrap main {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* таблицы внутри docs-индекса */
  html body .doc-wrap table {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* код и длинные строки */
  html body .doc-wrap pre,
  html body .doc-wrap pre code,
  html body .doc-wrap code {
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }
  html body .doc-wrap pre {
    white-space: pre-wrap !important;
    overflow-x: auto !important;
    font-size: 11.5px !important;
  }

  /* шапка docs не шире экрана */
  html body .doc-top {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  html body .doc-top .wrap,
  html body .doc-top > div {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* подвал docs */
  html body .doc-brand-foot,
  html body .doc-foot {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}

@media (max-width: 380px) {
  html body .doc-wrap {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  html body .doc-top {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}