/* VISTLAN — слой заявки v4 (25.08.2026). Файл в /local/, обновлением ядра и темы не затирается.
   Палитра взята со страницы услуг (#0E2A6B / #142142 / #2563EB / #36C9F4), чтобы форма
   не выглядела чужеродной. Откат: убрать подключение в local/php_interface/init.php. */

.vlf{--vlf-navy:#0E2A6B;--vlf-ink:#142142;--vlf-blue:#2563EB;--vlf-cyan:#36C9F4;--vlf-line:#d8e0ee;
  border:1px solid #e6ecf5;border-radius:18px;background:#f8fafd;padding:22px 22px 18px;margin:26px 0;
  font-family:inherit;box-sizing:border-box}
.vlf--full{background:linear-gradient(180deg,#f4f8ff 0%,#eef4ff 100%);border-color:#dbe6ff}
.vlf__h{font-size:1.22rem;font-weight:800;color:var(--vlf-navy);margin:0 0 6px;line-height:1.25}
.vlf__sub{font-size:.94rem;color:#5b6b86;margin:0 0 16px;line-height:1.45}
.vlf__grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.vlf__grid--one{grid-template-columns:1fr}
.vlf__f{width:100%;border:1px solid var(--vlf-line);border-radius:11px;padding:12px 14px;font-size:15px;
  background:#fff;color:var(--vlf-ink);box-sizing:border-box;font-family:inherit}
.vlf__f::placeholder{color:#93a3ba}
.vlf__f:focus{outline:none;border-color:var(--vlf-blue);box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.vlf__f--bad{border-color:#e11d48;background:#fff7f9}
textarea.vlf__f{min-height:74px;resize:vertical;margin-top:10px;display:block}
.vlf__btn{width:100%;background:var(--vlf-blue);color:#fff;border:0;border-radius:11px;padding:14px 18px;
  font-size:16px;font-weight:700;cursor:pointer;margin-top:12px;font-family:inherit;line-height:1.2}
.vlf__btn:hover{background:#1d4fd8}
.vlf__btn:disabled{opacity:.6;cursor:default}
.vlf__cons{display:flex;gap:9px;align-items:flex-start;margin-top:12px;font-size:.82rem;color:#5b6b86;line-height:1.4}
.vlf__cons input{margin:2px 0 0;width:16px;height:16px;flex:0 0 16px;accent-color:var(--vlf-blue)}
.vlf__cons a{color:var(--vlf-blue)}
.vlf__cons--bad{color:#e11d48}
.vlf__err{margin-top:10px;font-size:.88rem;color:#e11d48;line-height:1.45}
.vlf__alt{margin-top:12px;font-size:.86rem;color:#5b6b86}
.vlf__alt a{color:var(--vlf-blue);white-space:nowrap}
.vlf__ok{padding:6px 0}
.vlf__ok b{display:block;font-size:1.12rem;color:var(--vlf-navy);margin-bottom:8px}
.vlf__ok ul{margin:8px 0 0;padding-left:18px;color:#3d4d68;font-size:.94rem;line-height:1.55}
.vlf__calcnote{margin-top:10px;font-size:.84rem;color:#3d4d68;background:#eaf1ff;border-radius:9px;padding:9px 12px}

/* полоса-кнопка в блоке про цену */
.vlf-strip{display:flex;flex-wrap:wrap;align-items:center;gap:14px;justify-content:space-between;
  border:1px solid #dbe6ff;background:#eef4ff;border-radius:16px;padding:18px 20px;margin:24px 0}
.vlf-strip__t{font-weight:700;color:#0E2A6B;font-size:1.02rem;line-height:1.35;flex:1 1 260px}
.vlf-strip__t span{display:block;font-weight:400;color:#5b6b86;font-size:.9rem;margin-top:4px}
.vlf-strip__b{background:#2563EB;color:#fff;border:0;border-radius:11px;padding:13px 24px;font-size:15px;
  font-weight:700;cursor:pointer;font-family:inherit;white-space:nowrap}
.vlf-strip__b:hover{background:#1d4fd8}

/* плавающая кнопка на телефоне */
.vlf-fab{position:fixed;left:12px;right:12px;bottom:12px;z-index:99950;display:none;gap:8px}
.vlf-fab__b{flex:1 1 auto;background:#2563EB;color:#fff;border:0;border-radius:12px;padding:15px 10px;
  font-size:15px;font-weight:700;font-family:inherit;box-shadow:0 8px 24px rgba(10,24,56,.28);cursor:pointer}
.vlf-fab__c{flex:0 0 54px;background:#fff;color:#0E2A6B;border:1px solid #dbe6ff;border-radius:12px;
  font-size:20px;line-height:1;display:flex;align-items:center;justify-content:center;text-decoration:none;
  box-shadow:0 8px 24px rgba(10,24,56,.18)}
@media (max-width:767px){.vlf-fab.on{display:flex}}
@media (max-width:600px){.vlf__grid{grid-template-columns:1fr}.vlf{padding:18px 16px 16px}}

@media (prefers-reduced-motion:reduce){.vlf__btn,.vlf-strip__b{transition:none}}

/* блок доказательств над формой (S-7): факты берём с самого сайта */
.vlf-trust{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:baseline;margin:0 0 16px;
  padding:12px 14px;background:#fff;border:1px solid #e6ecf5;border-radius:12px}
.vlf-trust__i{font-size:.82rem;color:#5b6b86;line-height:1.3}
.vlf-trust__i b{display:block;font-size:.95rem;color:#0E2A6B;font-weight:800}
.vlf-trust__when{flex:1 1 100%;font-size:.84rem;color:#1d6b3f;background:#eaf7ef;
  border-radius:8px;padding:7px 10px;margin-top:2px}
@media (max-width:600px){.vlf-trust{gap:8px 14px;padding:10px 12px}}

/* ===== B2, 29.08.2026: слой на всех типах страниц ===== */
/* Полоса нужной ширины. Прямой ребёнок секционного контейнера темы иначе
   растянулся бы во всю ширину экрана — ограничение живёт во вложенном .vl-container. */
.vlf-band{padding:26px 15px}
.vlf-band__in{max-width:1180px;margin:0 auto}
/* Внутри узкой колонки статьи блока-обёртки хватает без своих отступов. */
.content .vlf-band,.vl-article .vlf-band{padding:22px 0}
/* Видимая строка с почтой — обязана быть на каждой странице. */
.vlf-mailline{font-size:.92rem;color:#5b6b86;text-align:center;padding:2px 0 6px}
.vlf-mailline a{color:var(--vlf-blue);white-space:nowrap}
/* ===== V5, 03.09.2026 — строка «Или пришлите нам запрос на почту» =====
   Дописывается В КОНЕЦ /home/bitrix/www/local/vl/vl-lead.css.
   Ничего из темы Aspro и /bitrix/** не трогает: все селекторы ограничены
   нашими классами .vlf*, кроме двух !important, объяснённых в п.2.
   Откат — удалить этот блок и вернуть прежний номер версии ассета.        */

/* --- 1. ПОЧЕМУ ССЫЛКА БЫЛА СЕРОЙ (замер, а не догадка) -------------------
   Переменная --vlf-blue объявлена в этом файле ТОЛЬКО на .vlf (строка 5).
   Строка .vlf-mailline лежит вне .vlf (она в .vlf-band > .vlf-band__in),
   поэтому в правиле «.vlf-mailline a{color:var(--vlf-blue)}» переменная
   не разрешалась, объявление отбрасывалось, и ссылка наследовала серый
   цвет текста #5b6b86.
   Замер 03.09.2026, chromium 148, 36 адресов x 2 ширины:
     getComputedStyle('.vlf-mailline a').color = rgb(91,107,134) — 62 из 62;
     getPropertyValue('--vlf-blue') на .vlf-mailline = '' (пусто);
   положительный контроль в том же прогоне: '.vlf__alt a' внутри .vlf дал
   rgb(37,99,235) на 40 замерах — прибор синий видеть умеет.
   Лечение: у .vlf-mail цвет задан значением, без переменной.            */

/* --- 2. ПОЧЕМУ !important ------------------------------------------------
   На / и /contacts/ серой была и ссылка ВНУТРИ формы. Причина — правила
   лендингов «#vlan-home-v2 a{color:inherit}» и «#vlan-contacts a{color:inherit}»
   (найдены перебором document.styleSheets 03.09.2026). Селектор по ID имеет
   вес 1-0-1 и бьёт любой наш классовый селектор, сколько классов ни добавь.
   Эти файлы — не наши, править тему нельзя. Поэтому !important, и только
   на классе .vlf-mail, который встречается исключительно в vl-lead.js.    */

/* Ссылка на почту и телефон. #1d4fd8 на белом = 6,64:1 (AA для обычного
   текста требует 4,5:1); на фоне формы #f8fafd = 6,35:1; на #eef4ff = 6,01:1.
   Прежний #2563EB давал 5,17:1 — тоже проходил, но ссылка была неотличима
   от текста, потому что до неё цвет просто не доезжал (п.1).             */
.vlf-mail{color:#1d4fd8 !important;font-weight:600;text-decoration:underline;
  text-underline-offset:2px;text-decoration-thickness:1px;white-space:nowrap}
.vlf-mail:hover,.vlf-mail:focus{color:#0E2A6B !important;text-decoration-thickness:2px}

/* Пояснительная часть строки. #33415c на белом = 10,24:1 против прежних
   5,40:1 у #5b6b86 — это и есть жалоба «серый на белом».                 */
.vlf-mail__t{color:#33415c}
.vlf-mail__sep{color:#8fa0b8}

/* Строка под формой: была «Или сразу: …», стала «…пришлите запрос на почту». */
.vlf__alt{margin-top:14px;font-size:.9rem;color:#33415c;line-height:1.5}
.vlf__alt a{color:#1d4fd8}

/* Строка под CTA-полосой («Цена зависит от объекта», «Нужен похожий проект»).
   .vlf-strip — это flex с wrap; flex-basis 100% уводит строку на отдельный
   ряд под заголовок и кнопку, а не втискивает её между ними.             */
.vlf-strip__mail{flex:1 1 100%;order:3;margin:2px 0 0;font-size:.9rem;
  color:#33415c;line-height:1.5}

/* Нижняя строка страницы — остаётся только там, где формы нет вовсе
   (при мобильном user-agent тема Aspro отдаёт другую вёрстку, contentScope()
   возвращает null, и форма не ставится: 25 адресов из 36, замер 03.09.2026). */
.vlf-mailline{font-size:.95rem;color:#33415c;text-align:center;padding:4px 0 8px;line-height:1.5}
.vlf-mailline a{color:#1d4fd8}

/* На узком экране строка переносится сама: white-space:nowrap стоит только на
   самих ссылках, разделитель «·» — точка переноса.
   ПРОВЕРЕНО И ОТМЕНЕНО 03.09.2026: первая версия этого блока прятала «·»
   правилом display:block;visibility:hidden — и адрес слипался с телефоном
   («info@vistlan.ru+7 (495) 638-50-58», замер при мобильном user-agent).
   Разделитель убирать нельзя, он несёт пробелы. */
@media (max-width:600px){
  .vlf__alt,.vlf-strip__mail,.vlf-mailline{font-size:.92rem}
}


/* =====================================================================
   VL-FIX 03.09.2026 — вёрстка главной (первый экран, плитки, обрезка текста)
   и плавающая кнопка под куки-плашкой.
   Источник: аудит агента V1, перепроверен главной сессией замером
   на 1920/1600/1440/1280/1100/1024/900/820/768/414/390/360.
   Селекторы ограничены нашей разметкой (#vlan-home-v2, #vlan-sticky);
   тема Aspro и /bitrix/** не трогаются — правка переживает обновление.
   Откат: удалить блок до конца файла и сменить номер версии ассета.
   ===================================================================== */
/* -------------------------------------------------------------
   1. ПЕРВЫЙ ЭКРАН «УЕХАЛ ВПРАВО» (дефект V1-01, V1-02, V1-03)
   Замер: .hero-visual right = 1564.1 при vw 1440 → срез 124.1 px;
   при 1280 → 204.1; при 1024 → 321.9; при 1600 → 81.8.
   Причина: .hero-grid{grid-template-columns:1.15fr .85fr} —
   `1fr` = minmax(auto,1fr), т.е. колонка не может стать уже своего
   min-content. min-content правой колонки = 595.2 px (диктует
   .stat-strip = 541.2), левой = 798.6 px (слово «инфраструктура»
   в .vl-h1 при 84.8 px). 798.6 + 48 + 595.2 = 1441.8 при ширине
   контейнера 1120 → правая колонка вылезает за экран.
   ------------------------------------------------------------- */

/* 1a. Разрешаем колонкам ужиматься ниже min-content.
   Без 1b/1c одного этого мало: колонка 1 схлопнется до 616 px
   и заголовок порвётся посреди слова («IT-инфраструк / тура»). */
/* ВАЖНО: только шире 980px. Без медиа-обёртки это правило перебивает
   штатное @media(max-width:980px){.hero-grid{grid-template-columns:1fr}}
   (та же специфичность, но наш файл подключается позже) — и на 768 px
   герой снова становится двухколоночным, а H1 рвётся посреди слова.
   Поймано замером: h1fits=false при 768 в первой версии патча. */
@media (min-width: 981px){
  #vlan-home-v2 .hero-grid{
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  }
}

/* 1b. Потолок H1 опущен с 5.3rem до 4rem: при 4rem самое длинное
   неразрывное слово «инфраструктура» занимает 602.7 px и влезает
   в долю 1.15fr (616.4 px при 1440). При 5.3rem оно 798.6 px и
   не влезает ни при какой ширине до 1600. Нижняя граница и
   средний коэффициент подобраны так, чтобы на 1024 слово (51.4 px
   шрифта → 484 px) тоже влезало в долю 522.1 px. */
#vlan-home-v2 .vl-h1{
  font-size: clamp(2.1rem, 1.1rem + 3.3vw, 4rem);
}

/* 1c. Плитка «44-ФЗ/223-ФЗ» — она и раздувала правую колонку:
   <b> шириной 264.5 px при 32 px шрифта, без единой точки переноса
   (слэш точкой переноса в CSS не является), + паддинги 36 =
   302.5 px min-content на одну из трёх колонок .stat-strip. */
#vlan-home-v2 .stat-strip{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
#vlan-home-v2 .chip{ padding: 14px 15px; }
#vlan-home-v2 .chip b{
  font-size: clamp(1.1rem, .75rem + .9vw, 1.55rem);
  overflow-wrap: anywhere;          /* разрешаем перенос внутри «44-ФЗ/223-ФЗ» */
  line-height: 1.1;
}
#vlan-home-v2 .chip b .sl{ white-space: normal; }  /* было nowrap на слэше */

/* -------------------------------------------------------------
   2. ПЛИТКИ «ВРАЗНОБОЙ» (дефект V1-04, V1-05)
   .bento объявлена repeat(3,1fr)!important, а по факту колонки
   372.5 / 371.3 / 336.2 px — тот же min-content-пол у `1fr`.
   При 1024 сумма 1065.6 > 944 → третья карточка «Кибербезопасность
   и КИИ» уезжает за правый край на 121.6 px.
   ------------------------------------------------------------- */
#vlan-home-v2 .bento{
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
/* Три колонки по 360 px требуют заголовка мельче: при потолке 1.7rem
   «Импортозамещение» и «Кибербезопасность и КИИ» не влезают в 308 px
   свободной ширины карточки и рвутся посреди слова. Замерено:
   потолок 1.45rem → 0 разрывов на всех ширинах 768…1920. */
#vlan-home-v2 .cell .vl-h3{
  font-size: clamp(1.1rem, .9rem + .8vw, 1.45rem);
  overflow-wrap: break-word;
}
/* Ниже 1100 px три колонки по 301 px уже слишком узки для заголовков
   (замер: 5 карточек из 6 рвутся посреди слова) — переходим на две
   на 176 px раньше штатного брейкпойнта 980. Именно на 1024 px prod
   сейчас вылезает вправо на 121.6 px. Порядок медиа-правил от широкого
   к узкому — иначе более узкое не переопределит более широкое. */
@media (max-width: 1100px){
  #vlan-home-v2 .bento{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 560px){
  #vlan-home-v2 .bento{ grid-template-columns: minmax(0, 1fr) !important; }
}

/* 2b. Шаги импортозамещения: колонки неравные (при 1024:
   225.5 / 163.8 / 163.8 / 163.8 / 179.2) и align-items:start
   даёт рваный низ — высоты 97 / 116 / 135 / 97 / 116, разброс 38 px. */
/* Правим ТОЛЬКО рваный низ. Выравнивать колонки через minmax(0,1fr)
   здесь НЕЛЬЗЯ: первая колонка 225.5 px держится словом
   «импортозависимости» (min-content 191.5 px + паддинги). При равных
   колонках 214.4 px (1440) и 179.2 px (1024) слово рвётся посреди —
   замерено, 1 разрыв на обеих ширинах. Остаточная неравномерность
   колонок 14 px при 1440 и 62 px при 1024 — принятый компромисс.
   align-items объявлен в правиле #vlan-home-v2 #vl-import .imp-process
   (две id-специфичности) — перебиваем тем же селектором, иначе не берётся.
   Поймано замером: высоты остались 97/135/97/116 после первой версии патча. */
#vlan-home-v2 #vl-import .imp-process{ align-items: stretch; }

/* -------------------------------------------------------------
   3. ТЕКСТ НЕ УМЕЩАЕТСЯ / МНОГОТОЧИЕ ПОСЕРЕДИНЕ ФРАЗЫ (V1-06)
   Это НЕ текст из базы и НЕ JS: в DOM фразы целые, символа «…»
   в исходнике нет. Виноват CSS:
     #vlan-home-v2 .cell .cell-desc{display:-webkit-box;
        -webkit-box-orient:vertical; overflow:hidden;
        -webkit-line-clamp:3}
   но .cell — это flex-контейнер (display:flex;flex-direction:column),
   поэтому display:-webkit-box у потомка блокифицируется в flow-root.
   Старый механизм «-webkit-box + clamp» (он прятал строки после
   третьей) отключается, а многоточие Chromium всё равно рисует на
   3-й строке — при высоте бокса 119 px (4.8 строки). Получается
   «Монтаж под ключ собственной… / аттестованной бригадой — без
   субподряда.» — многоточие в середине абзаца, а текст идёт дальше.
   Лечение — снять clamp: карточки в .bento и так равной высоты
   (grid-auto-rows:1fr, align-items:stretch), текст помещается.
   ------------------------------------------------------------- */
#vlan-home-v2 .cell .cell-desc{
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: unset;
  overflow: visible;
}

/* -------------------------------------------------------------
   4. ПЛАВАЮЩАЯ КНОПКА «РАССЧИТАТЬ ПРОЕКТ» ПОД КУКИ-ПЛАШКОЙ (V1-07)
   Замер 03.09.2026, страница прокручена на 2500 px (выше кнопки нет):
   #vlan-sticky стоит bottom:24px, куки-плашка непрозрачна и накрывает его
   целиком. elementFromPoint в центре кнопки до согласия:
     1920/1600/1280/1100 -> DIV.vl-show или DIV.vl-cc-text
     900 -> DIV.vl-cc-text, 820 -> DIV.vl-cc-inner
   То есть главный призыв не нажимается у каждого нового посетителя.

   Вариант из патча V1 (жёсткие 108 px) проверен и ОТКЛОНЁН: плашка тем выше,
   чем уже экран (71 px при 1440, 150 при 820, 210 при 390), и на 768/390
   кнопка уезжала ВНУТРЬ плашки — «ПЕРЕКРЫТА BUTTON.vl-cc-btn».

   Взят готовый рантайм-замер из vl-ui.js: переменная --vl-cc-lift равна
   высоте плашки + высоте нижнего меню + 12 px и обновляется на resize.
   Ею уже подняты чат и кнопка Битрикс24 — кнопка встаёт в тот же ряд.

   Только шире 768 px: на 768 и уже кнопка и без правки нажимается
   (замер: 768, 414, 390, 360 — «КЛИКАЕТСЯ»), а подъём на 283 px увёл бы
   её под чат («ПЕРЕКРЫТА DIV.vlc-root»).
   Проверено после правки: 1920/1600/1280/1100/900/820 — «КЛИКАЕТСЯ»,
   768/414/390/360 — без изменений.
   ------------------------------------------------------------- */
@media (min-width: 769px){
  html.vl-cc-on #vlan-sticky{ bottom: var(--vl-cc-lift) !important; }
}


/* =====================================================================
   VL-FIX-MOBILE 03.09.2026 — узкие экраны 360/390/414/768.
   Источник: аудит агента V4 (iPhone-UA, is_mobile, dsf=2, chromium 148),
   перепроверен главной сессией на боевом.
   НЕ включены два правила из патча V4:
     V4-1 и V4-16 (/contacts/) — закрыты по-настоящему: таблица стилей
     страницы перенесена в /local/vl/pages/contacts.css и подключается
     абсолютным путём, поэтому грузится и в мобильном шаблоне Aspro.
     Пластыри больше не нужны.
   ===================================================================== */
/* ── V4-2 · плавающая кнопка «Запросить КП» лежит на нижнем меню темы ────────
   Замер 360/390/414: .vlf-fab занимает 54 px по высоте, из них 49 px
   приходятся ровно на .bottom-icons-panel (61 px). z-index 99950 против 992,
   поэтому подписи меню («Главная», «Каталог», …) закрыты наполовину.
   Причина: .vlf-fab{bottom:12px} игнорирует --vl-nav-h-always, которую
   публикует vl-ui.js и которой уже пользуется чат (.vlc-root).
   Это ИСПРАВЛЕНИЕ В НАШЕМ СЛОЕ — правильнее внести прямо в vl-lead.css.

   ПОЧЕМУ +78, а не +12. Первая версия правила ставила bottom = navH + 12 и
   убирала перекрытие с меню (49 -> 0), но проверка «после» показала, что она
   заводит НОВОЕ перекрытие — с кнопкой чата: 0 -> 46 px из 54. Кнопка чата
   живёт по правилу vl-chat.css @media(max-width:768px) на
   bottom = navH + 20 и имеет высоту 48. Значит нижняя кромка кнопки заявки
   должна начинаться выше: 20 + 48 + 10 = 78. Замерено на 360 и 390,
   на /services/… и на /contacts/: оба перекрытия 0. */
.vlf-fab { bottom: calc(var(--vl-nav-h-always, 0px) + 78px) !important; }


/* ── V4-3 · нижнее меню темы: 15 пунктов, 1149 px в окне 360–414 ─────────────
   .bottom-icons-panel__content — overflow-x:auto, scrollWidth 1149 при
   clientWidth 360/390/414. Пятый пункт «Спецпредложения» (x 300…399)
   обрезан посреди слова, полосы прокрутки на телефоне нет (scrollbar 0 px),
   подсказки о прокрутке нет вовсе — выглядит как сломанная вёрстка.
   Полосу не убираем (это меню темы) — даём видимый край и привязку прокрутки. */
@media (max-width: 767px) {
  /* ОТМЕНЕНО главной сессией 03.09.2026: в патче V4 здесь стояло
     `.bottom-icons-panel{position:relative}`. Тема держит это меню на
     `position:fixed`, и правило сбивало его в поток документа — замер:
     нижнее меню уезжало с экрана на y=14518 (390 px) и y=15608 (360 px),
     то есть панель просто исчезала у посетителя. Позиционирование меню
     не трогаем: `fixed` сам по себе задаёт систему координат для ::after. */
  body.theme-light .bottom-icons-panel::after {
    content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 26px;
    pointer-events: none; z-index: 1;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.96) 78%);
  }
  .bottom-icons-panel__content { scroll-snap-type: x proximity; }
  .bottom-icons-panel__content > * { scroll-snap-align: start; }
}


/* ── V4-4 · хлебные крошки на страницах услуг обрезаются ─────────────────────
   Замер 390: .breadcrumbs — white-space:nowrap, overflow-x:auto,
   scrollWidth 1069 при clientWidth 390. Второй элемент цепочки
   («IT-услуги для российского бизнеса — системная интеграция…») шириной
   588 px уходит правым краем на 676 px. Обрезается без многоточия.
   Лечение: длинному звену дать многоточие, цепочку не растягивать. */
@media (max-width: 767px) {
  .breadcrumbs [class*="breadcrumbs__link"],
  .breadcrumbs [class*="breadcrumbs__item"] > span {
    display: inline-block; vertical-align: bottom;
    max-width: 46vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
}


/* ── V4-5 · таблицы в статьях блога вылезают за экран и обрезаются ───────────
   Замер 360: /blog/sovety-pokupatelyam/kakoy-router-vybrat-dlya-ofisa/ —
   таблица 592 px, за экраном 248 px (42 % содержимого); вторая таблица 510 px,
   за экраном 166 px. /blog/…/kak-pravilno-podobrat-ibp/ — 385 px, за экраном 41 px.
   У родителя overflow-x:visible, у body — overflow-x:hidden, значит содержимое
   не прокручивается, а физически недоступно.
   ⚠ ТРЕБУЕТ ВИЗУАЛЬНОЙ ПРОВЕРКИ: display:block на <table> сохраняет расчёт
   колонок за счёт анонимного табличного бокса вокруг thead/tbody, но это
   поведение стоит подтвердить на трёх статьях после установки. */
@media (max-width: 900px) {
  .content table, .vl-article table, .detail_text table {
    display: block; width: max-content; max-width: 100%;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
}


/* ── V4-6 · плейсхолдеры не влезают в поля формы ─────────────────────────────
   Замер 360: в textarea .vlf__f доступно 264 px, а тексты подсказок
   477–671 px, то есть 2–3 строки при высоте бокса 74 px (нужно 96 px).
   На /contacts/ (см. V4-1) доступно 136 px, туда не влезает даже
   «Как к вам обращаться» (159 px). Плейсхолдер обрезается на середине слова.
   Лечение: на узком экране дать textarea высоту под три строки. Сокращение
   самих текстов подсказок — задача не CSS, вынесено в findings.md. */
@media (max-width: 600px) {
  textarea.vlf__f { min-height: 96px !important; }
}


/* ── V4-7 · чекбокс согласия виден как 16×16 ─────────────────────────────────
   Замер: input#vlf1-cons / #vlf2-cons — 16×16 px на всех ширинах.
   ВАЖНО, чтобы не завышать: сам чекбокс обёрнут в <label class="vlf__cons">
   шириной 324 px, поэтому РЕАЛЬНАЯ область нажатия большая — дефект не в
   досягаемости, а в видимости отметки. Поднимаем до 20 px и разводим
   ссылку «политикой конфиденциальности», чтобы палец не попадал в неё
   вместо переключателя. */
.vlf .vlf__cons input { width: 20px; height: 20px; flex: 0 0 20px; margin-top: 1px; }
.vlf .vlf__cons { padding: 4px 0; }


/* ── V4-8 · калькулятор услуг: цели меньше 40 px ─────────────────────────────
   Замер 390: кнопки .vlt-chip — высота 31,8 px (ширина от 32 до 81);
   ползунок .vlt-rangerow input[type=range] — высота бокса 6 px.
   Шесть пальцевых целей в 6 px высотой на странице расчёта — это
   неработающий калькулятор на телефоне.
   ⚠ ТРЕБУЕТ ВИЗУАЛЬНОЙ ПРОВЕРКИ: правило переопределяет оформление ползунка
   из темы (vlan-tools.css). Ставить вместе со снимком «до/после». */
@media (max-width: 767px) {
  .vlt-chips .vlt-chip { min-height: 40px; padding-top: 9px; padding-bottom: 9px; }
  .vlt-rangerow input[type="range"] {
    -webkit-appearance: none; appearance: none;
    height: 40px !important; background: transparent; margin: 0;
  }
  .vlt-rangerow input[type="range"]::-webkit-slider-runnable-track {
    height: 6px; border-radius: 3px; background: #dbe4f3;
  }
  .vlt-rangerow input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 26px; height: 26px; border-radius: 50%;
    background: #2563EB; border: 2px solid #fff; margin-top: -10px;
    box-shadow: 0 2px 6px rgba(10,24,56,.28);
  }
  .vlt-rangerow input[type="range"]::-moz-range-track { height: 6px; border-radius: 3px; background: #dbe4f3; }
  .vlt-rangerow input[type="range"]::-moz-range-thumb {
    width: 26px; height: 26px; border: 2px solid #fff; border-radius: 50%; background: #2563EB;
  }
}


/* ── V4-9 · строки с почтой и телефоном высотой 16 px ────────────────────────
   Замер 390: ссылки в .vlf__alt и .vlf-mailline («+7 (495) 638-50-58»,
   «info@vistlan.ru») — 94–132 px по ширине при высоте 16 px.
   Это ровно те строки «или пришлите нам запрос на почту», которые
   Сергей просил показывать везде: их надо не только показать, но и
   сделать нажимаемыми пальцем. */
@media (max-width: 767px) {
  .vlf__alt a, .vlf-mailline a, .vlf-form-fallback a, .vlc-form-fallback a {
    display: inline-block; padding: 8px 2px; line-height: 1.25;
  }
}


/* ── V4-10 · серый #8D8D8D по белому в карточках услуг и блога ───────────────
   Проверено по ПИКСЕЛЯМ снимка элемента, не по computed style:
   .blog-item__text (/services/) и .ui-card__text (/blog/) — краска
   rgb(141,141,141) на rgb(255,255,255), контраст 3,32 при норме 4,5 для
   13–14 px. Положительный контроль в том же прогоне: h1 — 15,82;
   отрицательный: текст плашки cookie на тёмном — 11,39.
   #5b6b86 уже используется в vl-lead.css как «приглушённый» — контраст 5,6. */
.blog-item__text, .ui-card__text { color: #5b6b86; }


/* ── V4-11 · первый экран нового посетителя занят на 39 % ────────────────────
   Замер 390×844 до согласия: плашка cookie 210 px (573…783), нижнее меню
   темы 61 px (783…844), кнопка чата 366×48 px посреди экрана (513…561).
   Свободного содержимого — 513 px из 844.
   Две кнопки плашки стоят одна под другой во всю ширину (362 px каждая),
   хотя обе помещаются в строку. Сведение их в одну строку убирает один
   ряд: 45 px кнопки + 10 px зазора = 55 px.
   ⚠ ОЦЕНКА: ожидаемая высота плашки ~155 px вместо 210; замерить после установки. */
@media (max-width: 600px) {
  #vl-cookie-bar .vl-cc-inner { gap: 8px 10px; }
  #vl-cookie-bar .vl-cc-inner .vl-cc-text { flex: 1 1 100%; font-size: 12.5px; line-height: 1.35; }
  /* width:auto обязательно: у страницы в инлайн-стиле стоит
     @media(max-width:600px){#vl-cookie-bar .vl-cc-btn{width:100%}} — одинаковой
     специфичности (1,1,0). Здесь селектор (1,2,0), поэтому выигрывает без !important.
     Проверено: без width:auto кнопки остаются во всю ширину и правило не даёт ничего. */
  #vl-cookie-bar .vl-cc-inner .vl-cc-btn {
    flex: 1 1 0; width: auto; min-width: 0; padding: 11px 8px; font-size: 14px;
  }
}


/* ── V4-13 · длинные слова без переноса (низкий приоритет) ───────────────────
   Замер 360: «линейно-интерактивного» (22 симв.) в колонке 328 px,
   «научно-исследовательский» (24 симв.) — overflow-wrap:normal.
   Обрезания в этом прогоне не зафиксировано, правило профилактическое. */
@media (max-width: 480px) {
  .content p, .content li, .vl-article p, .vl-article li { overflow-wrap: break-word; }
}


/* =====================================================================
   VL-CONTRAST 03.09.2026 — читаемость текста («серый на белом»).
   Источник: аудит агента V2 (22 страницы, 12 666 текстовых узлов,
   контраст WCAG по computed style + контрольный замер по пикселям),
   перепроверен главной сессией на боевом.
   Тема Aspro не правится — только переопределение из нашего файла.
   НЕ включено:
     - блок лендингов servers/nas — у них отдельный docroot, наш файл
       туда не подключается (проверено: на них грузится только
       local/vl/chat/vl-chat.css). Вынесено в вопросы Сергею.
     - блок b2b.vistlan.ru — отдельное приложение на Tailwind,
       чинится в его кодовой базе.
   ===================================================================== */
/* ─── 1. Серый #8D8D8D на белом — самый массовый дефект сайта ───────────────
   .secondary-color{color:var(--secondary)}, --secondary:#8D8D8D задан темой на
   body. Это описания карточек в списках услуг, блога, сотрудников, реквизитов.
   Замер: 112 узлов на 10 страницах, 13–14px, обычный вес. 3.32:1 → нужно 4.5.
   Скриншот: shots/01-secondary-color-services-d.png, 22-staff-secondary-m.png.
   Переменную --secondary НЕ трогаем: тема использует её ещё для фонов, рамок
   и заливок SVG (37 употреблений, из них background/border — 10).
   Тёмный подвал (footer.theme-dark) исключён: там .secondary-color задаёт
   светлый текст на тёмном, и затемнение сломало бы его.
   Карточки с картинкой (.ui-card--image-scale) исключены отдельно: там тема
   локально переопределяет --secondary в rgba(255,255,255,.72) — белый текст
   поверх снимка. Затемнять его нельзя, он лечится пунктом 10 (затемнение
   подложки), а не цветом.
   Пересечение с уже установленным V4-10 в vl-lead.css (там .blog-item__text и
   .ui-card__text уже переведены на #5b6b86): это правило добирает остальные
   места — карточки сотрудников, реквизиты, выпадашки телефона в шапке.
   Было 3.32:1 → станет 4.83:1 (#727272 на #fff).                            */
.secondary-color:not(footer *):not(.theme-dark *):not(.theme-dark):not(.ui-card--image-scale *) {
  color: #727272;
}


/* ─── 2. Хлебные крошки и слоган: 48 % непрозрачности ───────────────────────
   Тема: a,.link-opacity-color{color:color-mix(in oklab,var(--white_text_black)
   var(--text-opacity),transparent)}; на .breadcrumbs__item-name и
   .color_dark--opacity выставлено --text-opacity:48%.
   #222228 при 48 % на белом = #858589 → 2.99:1. 100 узлов на 17 страницах,
   обе ширины. Скриншот: shots/13-breadcrumbs-opacity-d.png.
   Лечим не цветом, а самой переменной — так правка остаётся в логике темы.
   Проверено после первой редакции правила: последняя (текущая) крошка брала
   48 % не со своего элемента, а с родителя .breadcrumbs__item, поэтому в
   селекторе обязателен и контейнер, и элемент списка, а не только __item-name.
   Было 2.99:1 → станет 5.86:1 (--text-opacity:70%, даёт #646469).           */
.breadcrumbs,
.breadcrumbs *,
.breadcrumbs__item,
.breadcrumbs__item-name,
.slogan .color_dark--opacity,
.color_dark.color_dark--opacity {
  --text-opacity: 70%;
}


/* ─── 3. Плашки рубрик поверх картинок (.sticker__item--blur) ───────────────
   .sticker__item{color:#fff} поверх --sticker_color:rgba(34,34,40,.32).
   На светлой картинке подложка вырождается в #B3B3B5 → белый текст 1.98:1.
   96 узлов на 7 страницах (списки услуг и блога), обе ширины.
   Скриншот: shots/06-sticker-blur-d.png.
   Было 1.98:1 → станет 6.08:1 (альфа .32 → .70, подложка #626266).          */
.sticker__item--blur {
  --sticker_color: rgba(20, 22, 32, .70);
}


/* ─── 4. Новая главная (#vlan-home-v2): --ink-3 #8190A8 на светлых секциях ──
   Инлайн-стиль <style id="vlan-v4-css"> задаёт #vlan-home-v2{--ink-3:#8190A8;
   --bg:#EEF2F8} — то есть главная светлая, а третичный текст взят из тёмной
   палитры. Пострадали подписи карточек «Госсектор/Ритейл/...», теги плиток,
   даты и «Читать» в блоке блога, единицы в калькуляторе, бегущая строка.
   Замер: 3.24:1 на белом, 2.88:1 на #EEF2F8; 13.1px и 10.9px.
   Скриншоты: shots/07-home-ind-p-d.png, 08-home-eq-tag-d.png,
   23-home-blogcard-date-d.png.
   Перечисляем классы поимённо, а не правим --ink-3: та же переменная
   используется на тёмных секциях главной, где светло-серый как раз уместен.
   Было 2.88–3.24:1 → станет 4.85:1 (#5B6B84).                               */
#vlan-home-v2 .ind p,
#vlan-home-v2 .eq .tag,
#vlan-home-v2 .blog-card-date,
#vlan-home-v2 .vpc-unit,
#vlan-home-v2 .vd6-marquee .vd6-mhint,
.vd6-marquee .vd6-mhint {
  color: #5B6B84;
}
/* «Читать» в карточке блога — это ссылка, и она окрашена не в #8190A8, а в
   фирменный циан #59C7DB (1.86:1 на #F5F8FC). Серый убил бы affordance,
   поэтому берём затемнённый тот же оттенок. Было 1.86:1 → станет 5.50:1. */
#vlan-home-v2 .blog-card-more { color: #0F6D80; }


/* ─── 5. Надзаголовки секций на главной (.vl-eyebrow) ───────────────────────
   #1B7A91 на #EEF2F8 = 4.41:1 — не дотягивает до 4.5 при 12.8px/700.
   16 узлов, обе ширины. Правка минимальная, оттенок сохраняем.
   Правило ограничено светлыми секциями: на тёмных (.import-block, hero)
   тот же класс красится в #59C7DB другим правилом, и его не трогаем.
   Было 4.41:1 → станет 5.50:1 (#166A7E). Запас взят намеренно: элементы
   секции появляются с анимацией прозрачности, и на полпути к ней контраст
   ниже расчётного — цвет должен проходить и там.                            */
#vlan-home-v2 .vl-section .vl-head .vl-eyebrow,
#vlan-home-v2 .usp .vl-eyebrow {
  color: #166A7E;
}


/* ─── 5а. Ссылки на b2b-портал с главной, циан #59C7DB на светлом ───────────
   Два голых <a> («b2b.vistlan.ru» и «b2b.vistlan.ru →») стоят на #EEF2F8 и
   #F5F8FC без всякой заливки: 1.76:1 и 1.86:1 при 15.2px. Это ссылки на
   оптовый портал — их не видно. Селектор по href, чтобы не задеть тот же
   циан на тёмных секциях, где он уместен.
   Цвет задан ИНЛАЙН в разметке: style="color:var(--cyan);font-weight:600".
   Правило без !important проверено и не сработало — инлайн сильнее любого
   селектора. Правильное лечение — убрать инлайн-стиль из index.php и красить
   классом; !important здесь временная мера, о ней сказано в findings.
   Было 1.76–1.86:1 → станет 5.31–5.50:1 (#0F6D80).                          */
#vlan-home-v2 a[href*="b2b.vistlan.ru"] { color: #0F6D80 !important; }


/* ─── 6. Кука-плашка: «Принять все» белым по фирменному циану ───────────────
   #vl-cookie-bar .vl-cc-btn{background:#23B9D6;color:#fff} — 2.34:1.
   Это первая кнопка, которую видит новый посетитель, и она есть на 18 из 18
   проверенных страниц, на обеих ширинах. Скриншот: shots/04-cookiebar-accept-d.png.
   Правило живёт в bitrix/templates/aspro-premier/footer.php (и в mobile-теме).
   Фон оставляем фирменным, темним текст — тот же приём уже применён в нашем
   vl-chat.css (.vlc-badge{background:var(--vlc-cyan);color:#08262e}).
   Было 2.34:1 → станет 6.77:1 (#08262E на #23B9D6).                         */
/* ИСПРАВЛЕНО главной сессией 03.09.2026. В патче V2 селектор был
   `#vl-cookie-bar .vl-cc-btn` — то есть ОБЕ кнопки. Но кнопок две и они
   разные: у «Принять все» (#vl-cookie-accept) фон циановый #23B9D6,
   а у «Только необходимые» (#vl-cookie-decline) фон прозрачный, и она
   стоит на тёмной плашке #1f1b4d. Тёмный текст #08262E делал её
   практически невидимой — тёмное по тёмному; видно на снимке
   shots/kontrast-cookie-posle.png первой редакции.
   Красим только кнопку с циановым фоном. */
#vl-cookie-bar #vl-cookie-accept {
  color: #08262E;
}


/* ─── 7. Реквизиты и контактные карточки: #8190A8 ───────────────────────────
   .vlan-req-list dt (страница «Компания», 16 узлов),
   #vlan-contacts .vlc-req-list dt / .vlc-card__label / .vlc-card__sub /
   .vlc-form-fallback / .vlc-lic-note (страница «Контакты», 28 узлов).
   Это подписи полей — «Организация», «ИНН», «Юридический адрес».
   Замер 3.10–3.24:1 при 12.8–13.8px. Скриншот: shots/10-contacts-req-dt-d.png.
   Источник: bitrix/templates/aspro-premier/css/custom.css и contacts.css.
   Было 3.10–3.24:1 → станет 4.82:1 (#62738E).                               */
.vlan-req-list dt,
#vlan-contacts .vlc-req-list dt,
#vlan-contacts .vlc-card__label,
#vlan-contacts .vlc-card__sub,
#vlan-contacts .vlc-form-fallback,
#vlan-contacts .vlc-lic-note {
  color: #62738E;
}


/* ─── 8. Наши собственные файлы local/vl/* ──────────────────────────────────
   Ниже — то немногое, что не дотягивает в НАШЕМ коде. Правки можно внести
   прямо в исходные файлы; продублированы здесь, чтобы patch применялся целиком.

   vl-lead.css:15  .vlf__f::placeholder #93A3BA на белом = 2.56:1
   vl-product.css:10 .vlp__noimg span    #8A92A6 на белом = 3.11:1
   vl-product.css:11 .vlp__brand         var(--vlp-cyan)=#23B9D6 = 2.34:1
   vl-chat.css:2    --vlc-mute           #6B7280 на белом = 4.83:1 — проходит,
                    но на .vlc-soft(#F4F5F8) даёт 4.53:1, впритык; оставляем.
   Замечание: плейсхолдер формально не обязан проходить 4.5, но именно он
   несёт подсказку формата телефона.                                          */
.vlf .vlf__f::placeholder { color: #5E7493; }        /* 2.56:1 → 4.81:1 */
.vlp .vlp__noimg span     { color: #69728A; }        /* 3.11:1 → 4.83:1 */
.vlp .vlp__brand          { color: #187D91; }        /* 2.34:1 → 4.80:1 */


/* ─── 9. Калькуляторы (наша надстройка vlan-tools.css) ──────────────────────
   .vlt-badge #0D7EA6 на #E7F8FE = 4.23:1 при 11.2px/700 — 12 узлов на шести
   страницах услуг. Было 4.23:1 → станет 4.80:1 (#0C759A).                    */
.vlt .vlt-badge { color: #0C759A; }

/* ─── 10. Карточки блога: белый текст поверх слабой заливки ─────────────────
   /blog/ — у статей не заданы картинки, вместо снимка рисуется светлая
   заглушка, а заголовок и дата на карточке белые (--secondary локально
   переопределён в rgba(255,255,255,.72)). Затемнение даёт только
   .ui-card__image::before: linear-gradient(0deg, rgba(0,0,0,.4) 0%,
   rgba(0,0,0,0) 50%) — на светлой заглушке это ≈ #8B8B8B, белый на нём 3.1:1,
   а дата стоит выше по градиенту, где заливки почти нет: 1.0–1.6:1.
   Скриншот: shots/34-blogindex-card.png — заголовок читается с трудом,
   дата не читается вовсе. 20 карточек на /blog/, обе ширины.
   Правильное лечение — поставить статьям картинки (это контент, не CSS).
   Правило ниже — страховка, которая работает и с картинкой, и без неё.
   Было 1.0–3.1:1 → станет ≥ 5.5:1 на светлой заглушке.                     */
.ui-card .ui-card__image::before {
  background: linear-gradient(0deg,
      rgba(6, 10, 24, .80) 0%,
      rgba(6, 10, 24, .58) 26%,
      rgba(6, 10, 24, .18) 48%,
      rgba(6, 10, 24, 0) 66%) !important;
}

/* UX-04 (15.09.2026, прогон autorun-cro): поля формы заявки были 15px — iOS Safari приближает страницу
   при фокусе на поле меньше 16px. Замер: getComputedStyle(#vlf1-name|phone|email|task) = 15px, мобильный шаблон. */
@media (max-width:767px){
  .vlf .vlf__f, .vlf input.vlf__f, .vlf textarea.vlf__f{font-size:16px}
}
/* UX-05 (15.09.2026, прогон autorun-cro): контраст ниже AA 4,5:1, замер в браузере —
   единицы в калькуляторах темы .vlt-unit #7b859c на белом 3,70:1; счётчики статей в боковом меню блога #8d8d8d 3,32:1. */
html body .vlt-field .vlt-unit{color:#5b6478!important}
html body .side-menu__link-count.color_999{color:#6b6b6b!important}
/* UX-06 (16.09.2026, прогон autorun-cro, повторный замер G2): поля ввода меньше 16px (iOS/iPadOS приближают страницу при фокусе)
   и тап-цели ниже 44px. Замер: .vlt-num 15,68px и 76×42; поле подписки и поиска 15px; форма на 768px — 15px;
   текстовые поля калькуляторов темы 160–190×40; главная кнопка первого экрана 332×38 на 360px. */
html body input.vlt-num, html body input.subscribe-input, html body #title-search-input{font-size:16px}
@media (max-width:1024px){ html body .vlf .vlf__f{font-size:16px} }
@media (max-width:767px){
  html body .vlt-rangerow input:not([type=range]), html body input.vlt-num{min-height:44px}
  html body .vl-hero .hero-cta .btn{min-height:44px}
}