/* ============================================================================
   VD5 «ADAPTIV» · adaptive.css — v1 (2026-09-19, волна VD_REDESIGN)
   ----------------------------------------------------------------------------
   Назначение: единый адаптивный корректирующий слой 320–1920px для светлой
   темы VD1 (хедер VD2 с бургером, анимации VD3). Грузится ПОСЛЕДНИМ — после
   base.css / landing.css / mainpage.css / mp-anim.css / cro.css /
   header-neon.css / темы VD1 / хедера VD2:

     <link rel="stylesheet" href="/assets/css/adaptive.css?v=vd5a1">

   Принципы:
   • Только ЛЭЙАУТ/АДАПТИВ/ТАП/ЧИТАЕМОСТЬ. Цвета не перекрашиваются:
     значения — через существующие токены (var(--border), var(--text-faint),
     …), которые VD1 переопределяет на светлые → слой theme-agnostic и
     работает в тёмной (текущий прод) и светлой (VD1) темах.
   • Специфичность: правила, перебивающие инлайн-<style> в <head>/<body>
     страниц (эти теги стоят ПОСЛЕ css-ссылок), помечены «(спец)» и несут
     приставку body/main — выигрыш по специфичности, а не по !important.
     !important в файле НЕ используется (кроме принт-блока — его нет).
   • Брейкпоинты волны: 1920+ / 1440 / 1200 / 1024 / 768 / 560 / 380 / 320.
   • Контейнеры: max-width 1200px, паддинги clamp(16px, 4vw, 48px).
   • Горизонтальный скролл на 320px лечится в источниках:
     grid-min 300px → 240px (v-hub-grid / svc-grid), таблицы со скроллом,
     overflow-wrap для длинных токенов.
   • Согласован с VD2: панель бургера и её стили — зона VD2
     (header-neon.css / новый хедер); здесь только дедупликация дубля
     шапки, глобальный бургер-диапазон 861–1179 и компакт ландшафта.

   Исследование (curl 19.09.2026, копии в research/): index, /voprosy/,
   /uslugi/, /sravneniya/, статья, вопрос + base/landing/mainpage/
   mp-anim/cro/header-neon css. Полный список находок — ADAPTIV_AUDIT.md.
   ========================================================================== */

/* ============================================================================
   §1. КОНТЕЙНЕРЫ — единая геометрия 1200 / clamp(16px, 4vw, 48px)
   ========================================================================== */
:root { --container: 1200px; }               /* было 1180 — канон волны */

.container {
  max-width: 1200px;
  padding-inline: clamp(16px, 4vw, 48px);    /* было 28px / 18px ≤640 */
}

/* собственный контейнер среза доверия на главной (инлайн-<style> в body) (спец) */
body .mp-trust .mp-container {
  max-width: 1200px;
  padding-inline: clamp(16px, 4vw, 48px);
}

/* контейнер хедера mn-*: те же метрики, без фикс-щели 40px */
.mn-container {
  width: auto;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 48px);
}

/* ============================================================================
   §2. ТИПОГРАФИКА — H1/H2 clamp по канону волны, минимум 16px чтения
   ========================================================================== */

/* H1: жёсткие размеры (v-h1 34px-флор, mp-hero__title 28px <767, инлайны)
   заменяются единой шкалой 30 → 56 */
h1, .v-h1, .mp-hero__title,
body .mp-hero__title {                        /* (спец) против инлайн-<style> */
  font-size: clamp(30px, 6vw, 56px);
  line-height: 1.12;
  text-wrap: balance;
}

/* H2: v-h2 27–40, mp-title 26–40, .v-article h2 фикс 26px, V5-7 36px ≤1100
   → единая шкала 24 → 36 */
h2, .v-h2, .mp-title, .mp-h2, .mp-services__title, .mp-cta__title,
main.mp .mp-title, main.mp .mp-h2, main.mp .mp-services__title,
main.mp .mp-cta__title, main.mp .v-h2,
body .v-article h2,                           /* (спец) против FACTORY-инлайна */
main.mp .mp-trust .mp-h2 {                    /* (спец) против body-инлайна */
  font-size: clamp(24px, 4vw, 36px);
  line-height: 1.18;
  text-wrap: balance;
}

/* Вредные <br> в заголовках (ручные переносы, собранные под десктоп):
   на узких экранах выключаем — перенос делает браузер.
   FACT: в проверенных live-страницах <br> в H1/H2 нет — правило защитное. */
@media (max-width: 559px) {
  h1 br, h2 br, .v-h1 br, .v-h2 br,
  .mp-hero__title br, .mp-title br, .mp-h2 br { display: none; }
}

/* Минимум 16px для ЧИТАЕМОГО текста на мобильных (капшны/подписи 12–14px
   не трогаем — это не чтение). Поля ввода 16px уже есть в base.css ≤860
   (iOS-автозум). */
@media (max-width: 559px) {
  body .v-article p, body .v-article li,      /* (спец) против инлайна */
  .mp .mp-lead, .mp .mp-hero__lead, .mp .mp-card__text,
  .mp .mp-faq__a, .faq__a, .mp .mp-cta__text,
  .svc-card .svc-one, .hero__panel li {
    font-size: 16px;
  }
}

/* Длинные токены (URL, номера приказов, ИНН, коды) не рвут верстку на 320 */
.v-article, .mp { overflow-wrap: break-word; }
.v-article code, .v-article a, .qa-links,
.mp-case__code, .mp-stat__src { overflow-wrap: anywhere; }

/* ============================================================================
   §3. СЕТКИ — деградация auto-fill 240px, на <560 одна колонка
   ========================================================================== */

/* v-hub-grid (хаб /voprosy/) и svc-grid (хаб /uslugi/): инлайн-мин 300px
   переполнял 320–360px (контент 284px < 300px) → горизонтальный скролл.
   (спец): body-префикс против FACTORY-инлайна в <head> после ссылок. */
body .v-hub-grid,
body .svc-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
}

/* мега-грид хедера: фиксированные 3 колонки → авто-деградация (только
   desktop-режим меги ≥1021; в мобильном аккордеоне ≤1020 остаётся 1fr от
   header-neon.css — не трогаем) */
@media (min-width: 1021px) {
  .mn-header .mn-mega-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
  }
}

/* v-сетки: одна колонка на <560 (базовое схлопывание 640px переносим вниз
   к единой точке волны; в 560–640 v-grid--2 остаётся 2 колонки ≥240px) */
@media (max-width: 559px) {
  .v-grid--2, .v-grid--3, .v-grid--4 { grid-template-columns: 1fr; }
  /* хабовые и сервисные сетки — явно одна колонка (бриф VD5) */
  body .v-hub-grid, body .svc-grid { grid-template-columns: 1fr; }
}

/* ============================================================================
   §4. ТАБЛИЦЫ — скролл + тонкая подсказка «→» на мобильных
   ========================================================================== */

/* Канонная обёртка для НОВОЙ разметки волны (VD1/VD4/VD6):
   <div class="table-scroll"><table>…</table></div> */
.table-scroll {
  position: relative;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

/* Живые обёртки .v-table-wrap уже скроллятся (base.css) — страхуем максимум
   ширины (спец — на случай инлайн-переопределений) */
body .v-table-wrap { max-width: 100%; }

/* Таблицы БЕЗ обёртки (легаси-контент фабрик): CSS-only скролл самим
   элементом table. FACT 19.09: на проверенных страницах все таблицы
   обёрнуты — правило защитное. */
body .v-article > table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Подсказка «→» на мобильных: тонкая строка под таблицей; стрелка «едет»
   у правого края, пока есть что скроллить (position:sticky), и гаснет:
     1) при горизонтальном скролле — CSS scroll-timeline (Chrome/Edge 115+,
        Safari 26+, Android): прогресс до 50% скролла → opacity 0;
     2) деградация без scroll-timeline (старые Safari/iOS): автотаймер 4s.
   Видна только ≤768px. Не рисуется при print. */
@media (max-width: 768px) {
  .table-scroll::after,
  .v-table-wrap::after {
    content: "→";
    display: block;
    position: sticky;               /* в потоке ПОД таблицей, липнет вправо */
    right: 0;                       /* правый край видимой области скроллера */
    text-align: right;
    font-size: 12px;
    line-height: 1;
    padding-top: 6px;
    color: var(--text-faint, #98a2b3);
    pointer-events: none;
    animation: vd5-hint-out 0.6s ease 4s forwards;   /* таймер-деградация */
  }
  @supports (animation-timeline: scroll()) {
    .table-scroll::after,
    .v-table-wrap::after {
      /* ДВЕ анимации с РАЗНЫМИ таймлайнами (список в animation-timeline
         циклится — потому только лонгхендами, чтобы таймер остался
         на времени, а гашение по скроллу шло параллельно) */
      animation-name: vd5-hint-out, vd5-hint-scroll;
      animation-duration: 0.6s, 0.2s;
      animation-timing-function: ease, linear;
      animation-delay: 4s, 0s;
      animation-fill-mode: forwards, both;
      animation-timeline: auto, scroll(nearest x);  /* ближайший скроллер = обёртка */
      animation-range: normal, 0 50%;               /* ушла к половине скролла */
    }
  }
}
@keyframes vd5-hint-out   { to { opacity: 0; } }
@keyframes vd5-hint-scroll { to { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .table-scroll::after, .v-table-wrap::after { animation: none; } /* без мигания */
}
@media print {
  .table-scroll::after, .v-table-wrap::after { content: none; }
}

/* ============================================================================
   §5. ТАП-ТАРГЕТЫ ≥44px на touch (media pointer:coarse)
   ========================================================================== */
@media (pointer: coarse) {

  /* пункты меню: старая панель .v-nav__links (высота была ~36px) */
  .v-nav__links a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* ссылки мега-аккордеона хедера (было ~23px — padding 3px 0) */
  .mn-seg-title,
  .mn-seg-list a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* футер: плотные списки ссылок (line-height 24px) */
  .v-footer ul a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* хлебные крошки */
  .v-crumbs a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* микроссылки контента: быстрые ответы, чипы реестров, опции квиза */
  .qa-links a,
  .mp-check__links a,
  .quiz-opts label,
  .cro-quiz .quiz__opt {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* стрелки-ссылки «→» внизу карточек (было ~20px) */
  .mp-card__link, .product-card__link, .card-link,
  .mp-service-card__go, .mp-eco .mp-card__link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* ============================================================================
   §6. ХЕДЕР — дедуп дубля, бургер 861–1179, топ-бар <560, ландшафт
   (панель бургера и её наполнение — зона VD2; здесь только адаптив-каркас)
   ========================================================================== */

/* 6.1. Дедупликация ДВОЙНОЙ шапки (FACT 19.09: на /voprosy/, /uslugi/,
   /sravneniya/ и страницах-вопросах подряд стоят mn-header + устаревший
   .v-nav, оба sticky top:0 z-90: ~170px шапки на мобиле и взаимное
   перекрытие при скролле; меню .v-nav на 861–1020 переполняло контейнер).
   Канон — mn-header (на главной и статьях .v-nav уже нет): скрываем дубль.
   NOTE для VD2/VD7: если VD2 сменит классы хедера — правило станет no-op. */
.mn-header ~ .v-nav { display: none; }

/* 6.2. Глобальный бургер 861–1179px (M9-паттерн с главной, но теперь для
   ВСЕХ страниц с .v-nav без mn-header): полному меню нужно ~1134px, в этом
   диапазоне оно переполняло строку. Кнопка .v-burger уже в разметке,
   тогглер .is-open — main.js (базовый механизм base.css ≤860 не меняется). */
@media (min-width: 861px) and (max-width: 1179px) {
  .v-nav__links {
    display: none;
    position: absolute;
    top: var(--nav-h);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    background: var(--glass-strong, rgba(16, 19, 29, 0.97));
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    border-bottom: 1px solid var(--border);
    padding: 14px 22px 20px;
    gap: 6px;
  }
  .v-nav__links.is-open { display: flex; }
  .v-nav__links a { padding: 12px 14px; font-size: 16px; }
  .v-nav__cta { margin: 8px 0 0; }
  .v-burger { display: grid; place-items: center; }
}

/* 6.2a. mn-панель бургера расширяется до 1199px (FIX живого overflow-бага:
   FACT 19.09, Playwright 1024×900: bar mn-header требовал 1168px →
   горизонтальный скролл всей страницы на 1021–1199). Панель = зеркало
   мобильного режима header-neon.css (≤1020); тогглер .mn-is-open в
   header-neon.js вешается без проверки ширины → CSS-расширение безопасно.
   NOTE для VD2: если VD2 перепишет хедер — заменить весь §6.2a на его
   механизм. Граница 1199 выровнена с контейнером волны 1200 (§1). */
@media (min-width: 1021px) and (max-width: 1199px) {
  .mn-cta--desktop { display: none; }
  .mn-cta--panel { display: inline-flex; }
  .mn-burger { display: inline-flex; margin-left: 0; }

  .mn-nav {
    position: absolute;
    top: calc(100% + 10px);
    left: 10px;
    right: 10px;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    max-height: calc(100vh - 120px);
    max-height: calc(100dvh - 120px);
    margin-left: 0;
    padding: 14px;
    border: 1px solid var(--border-strong);
    border-radius: 20px;
    background: var(--glass-strong, rgba(11, 13, 20, 0.96));
    -webkit-backdrop-filter: blur(26px) saturate(150%);
    backdrop-filter: blur(26px) saturate(150%);
    box-shadow: var(--shadow-card, 0 18px 50px rgba(0, 0, 0, 0.45));
    overflow-y: auto;
    overscroll-behavior: contain;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px) scale(0.985);
    transition: opacity 0.22s ease, transform 0.22s ease,
      visibility 0s linear 0.22s;
  }
  .mn-nav.mn-is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    transition: opacity 0.22s ease, transform 0.22s ease;
  }

  .mn-link {
    min-height: 50px;
    width: 100%;
    justify-content: space-between;
    padding: 12px 14px;
    border-radius: 13px;
    font-size: 16.5px;
  }
  .mn-link::after { display: none; }
  .mn-chevron { width: 12px; height: 8px; }

  /* мега → аккордеон внутри панели */
  .mn-nav-item--mega::after { display: none; }
  .mn-mega {
    position: static;
    width: 100%;
    max-height: 0;
    padding: 0 6px;
    border: 0;
    border-radius: 0;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
  }
  .mn-mega[data-open="true"] {
    max-height: 1200px;
    padding: 6px 6px 10px;
    margin-bottom: 6px;
  }
  .mn-header .mn-mega-grid { grid-template-columns: 1fr; gap: 4px; } /* > §3 auto-fill */
  .mn-seg {
    padding: 10px 12px;
    border: 1px solid var(--border);
    background: var(--bg-2);
  }
  .mn-seg-list { padding-left: 42px; }
  .mn-mega-footer {
    margin-top: 10px;
    padding: 12px 4px 2px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

/* 6.2b. Компактное desktop-меню mn 1200–1359 (иначе на 1200–1359 меню
   ~1168px не помещается в контент 1104px при контейнере 1200/48) */
@media (min-width: 1200px) and (max-width: 1359px) {
  .mn-bar-inner { gap: 16px; }
  .mn-brand { font-size: 17px; gap: 10px; }
  .mn-link { padding: 10px 9px; font-size: 14px; }
  .mn-cta { padding: 10px 16px; font-size: 14px; min-height: 44px; }
}

/* 6.3. Топ-бар <560: контакты уже скрыты ≤1020 (header-neon.css), остаётся
   только декоративный ротатор-слоган — прячем целиком, барам +34px воздуха */
@media (max-width: 559px) {
  .mn-strip { display: none; }
  .mn-header { --mn-strip-h: 0px; }
}

/* 6.4. Ландшафт мобилы (низкий viewport): компактная шапка, панель меню
   помещается, hero не съедает экран */
@media (max-height: 480px) and (orientation: landscape) {
  .mn-header { --mn-bar-h: 54px; }
  .mn-strip { display: none; }
  .mn-header { --mn-strip-h: 0px; }
  .mn-nav { max-height: calc(100dvh - 64px); }
  .v-nav { --nav-h: 54px; height: 54px; }
  .v-nav__inner { height: 54px; }
  .mp-hero { padding: 40px 0 36px; }
  .hero { padding-top: 48px; padding-bottom: 40px; }
}

/* ============================================================================
   §7. HERO / CTA / FAB
   ========================================================================== */

/* Hero <768: одна колонка, CTA друг под другом на всю ширину
   (главная V5-3 делала это только ≤640; лендинги — со скроллом строк) */
@media (max-width: 767px) {
  .hero__inner, .mp-hero__inner { grid-template-columns: 1fr; }
  .hero__actions,
  .mp-hero__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .hero__actions > .v-btn,
  .mp-hero__actions .mp-btn { width: 100%; }
}

/* FAB «Задать вопрос»: канон bottom/right 16px (+safe-area).
   ≤860 поднимается над мобильной плашкой .sticky-cta (высота ~72px),
   чтобы кнопки не перекрывались (логика show/hide — cro.js/conversion.js). */
.cro-fab {
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}
@media (max-width: 860px) {
  .cro-fab {
    right: 16px;
    bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  }
}

/* ============================================================================
   §8. RETINA / hairlines — 0.5px на @2x+, не тоньше 1px на @1x
   ============================================================================
   Живой CSS 0.5px-рамок не использует (проверено 19.09) — токен подготовлен
   для VD1: тонкие рамки писать border-width: var(--hairline-w).
   На @2x+ 0.5px = ровно 1 физический пиксель (без серого мыла);
   на @1x браузер бы округлял криво — потому явный fallback 1px.
   adaptive.css НЕ переписывает чужие border-width — расходимостей нет. */
:root { --hairline-w: 1px; }
@media (min-resolution: 2dppx) {
  :root { --hairline-w: 0.5px; }
}

/* ============================================================================
   §9. БРЕЙКПОИНТЫ ВОЛНЫ 1920+ / 1440 / 1200 / 1024 / 768 / 560 / 380 / 320
   (768/560 — уже выше в §2/§3/§6/§7; 1024+ — системные сетки mainpage.css)
   ========================================================================== */

/* --- 1200–1439: контейнер 1200 активен; ритм секций чуть плотнее 1440 --- */
@media (min-width: 1200px) and (max-width: 1439px) {
  .v-section { padding: 84px 0; }
}

/* --- 1440–1919: воздух (главная уже даёт 104px через --mp-section-pad) --- */
@media (min-width: 1440px) {
  .v-section { padding: 96px 0; }
  .v-section--tight { padding: 64px 0; }
}

/* --- 1920+: контейнер остаётся 1200 (строка чтения не растягивается),
       увеличивается только межсекционный воздух --- */
@media (min-width: 1920px) {
  .mp { --mp-section-pad: 112px; }
  .v-section { padding: 104px 0; }
  .v-section--tight { padding: 72px 0; }
}

/* --- ≤380: плотнее карточки, футер-низ колонкой, компактные микрокнопки --- */
@media (max-width: 380px) {
  .mp-card, .v-card, .price-card, .industry-card, .product-card { padding: 18px; }
  .v-footer__bottom { flex-direction: column; align-items: flex-start; gap: 8px; }
  .mp-hero__actions .mp-btn,
  .hero__actions .v-btn,
  .sticky-cta .v-btn { font-size: 14.5px; padding-inline: 14px; }
  .cro-fab__btn { padding: 12px 16px; font-size: 14px; }
  /* nowrap-кнопки с длинной подписью не обрезаются родителем с overflow
     (FACT: #mp-tech2027 .mp-cta__btn «Пройти тест готовности →» торчал
     на 320 — ID-селектор в body-инлайне) — разрешаем перенос на 2 строки.
     body-приставки — перебить инлайн-<style> по специфичности. */
  .mp-btn, .v-btn, .mn-cta,
  body .mp-cta__btn,
  body #mp-tech2027 .mp-cta__btn,
  body .mp-services__cta-btn {
    white-space: normal;
    text-align: center;
  }
}

/* --- ≤340 (страховка «маленьких 320»): капсулы не вылезают, кнопки влезают --- */
@media (max-width: 340px) {
  .v-kicker, .mp-kicker, .cro-kicker {
    font-size: 11px;
    letter-spacing: 0.1em;
    padding-inline: 10px;
  }
  .mp-hero__title { font-size: 29px; }   /* floor 30 → 29: «ИТ-безопасность» в 2 строки */
}

/* ============================================================================
   §10. ГЛОБАЛЬНЫЕ СТРАХОВКИ
   ========================================================================== */

/* Горизонтальный скролл: у base.css body{overflow-x:hidden} — hidden на body
   создаёт scroll-контейнер и угрожает position:sticky шапкам. Заменяем на
   clip: у viewport clip интерпретируется как hidden (гориз. скроллбар
   подавлен как раньше), а сам body НЕ становится scroll-контейнером →
   sticky-шапка/FAB работают. html НЕ трогаем (clip на html + hidden на body
   ломали бы sticky — проверено на паттерне). Старые браузеры без clip
   остаются на base.css hidden. */
@supports (overflow: clip) {
  body { overflow-x: clip; }
}

/* Медиа не рвут вёрстку */
img, video, iframe { max-width: 100%; }
img { height: auto; }

/* Якоря секций не прячутся под sticky-шапками (на главной делал V5-1 в
   mainpage.css — распространяем на все страницы; высоты: бар+полоса ≈110,
   без полосы <560 ≈78) */
section[id] { scroll-margin-top: 110px; }
@media (max-width: 559px) {
  section[id] { scroll-margin-top: 78px; }
}

/* Доступность: клавиатурный фокус всегда видим и после наших правок */
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--cyan, #1a56db);
  outline-offset: 2px;
  border-radius: 8px;
}

/* Печать: адаптив-декорации не нужны */
@media print {
  .cro-fab, .sticky-cta, .table-scroll::after, .v-table-wrap::after { display: none; }
  body { overflow-x: visible; }
}

/* VD10 tap-fix: logo link comfortable touch target */
@media (pointer:coarse){ .pt-logo{min-height:44px;padding:4px 0} .pt-burger__label{display:none} }

/* VD10: breadcrumbs comfortable touch target */
@media (pointer:coarse){ .v-crumbs a{display:inline-flex;align-items:center;min-height:44px} }
