/* qx-layout-fix.css — правки вёрстки, часть 2 (2026-08-15).
   Подключается последним в <head>, поэтому при равной специфичности
   перебивает постраничные <style>. Ничего, кроме перечисленных дефектов,
   не трогает.

   1. Декоративное свечение за заголовком расширяло документ на узком экране.
   2. Подсказка «?» в модалке была шире модалки.
   3. Длинные слова в заголовках не переносились и вылезали за экран.
   4. Полоса статистики складывалась лесенкой 2+1.
   5. Сетки на about, вынесенные из инлайновых стилей.
   6. Блок «Авторитетный источник» под статьёй.
*/

/* ------------------------------------------------------------------ *
 * 1. Свечение (h1::before на статичных страницах, main::before на калькуляторе).
 *    На широком экране оставляем как было (-15% с обеих сторон),
 *    на узком прижимаем к краям контейнера: иначе документ становится
 *    шире вьюпорта, а фиксированные шапка и бургер уезжают за экран.
 * ------------------------------------------------------------------ */
@media (max-width: 900px) {
  main#main-content > h1:first-child::before,
  main::before {
    left: 0;
    right: 0;
  }
}
/* Шапка блога широкая, поэтому её свечение вылезало и на десктопе. */
.blog-hub-hero h1::before {
  left: 0;
  right: 0;
}

/*    2026-09-02. Порог 900px закрывал не весь дефект. Между 901 и 1150
 *    свечение всё так же расширяло документ, и страница ехала вбок:
 *    калькулятор (main::before) на 901-1149, terms и privacy
 *    (h1::before) на 901-1023. Замеры на 1000: документ 1072 при
 *    вьюпорте 1000, ровно на ширину вылета свечения.
 *
 *    Причина одна и та же: -15% с каждой стороны считаются от ширины
 *    элемента, а поля по краям растут медленнее. Пока поле уже 15%
 *    ширины содержимого, свечение торчит наружу и тянет документ.
 *
 *    Двигать порог бессмысленно: у калькулятора он один, у terms
 *    другой, и любая правка ширины колонки сдвинет оба. Поэтому режем
 *    горизонтальное переполнение на уровне документа. Свечение при
 *    этом рисуется как рисовалось, до края экрана, — обрезается только
 *    то, что за экраном, а маска и так гасит крайние 14% до прозрачного.
 *
 *    clip, а не hidden: hidden делает из элемента прокручиваемый
 *    контейнер и ломает position:sticky внутри. clip прокрутку не
 *    заводит и на sticky не влияет.
 *
 *    Правило нужно на ОБОИХ: на одном html не помогает. Замерено —
 *    на калькуляторе при html{overflow-x:clip} съезд остаётся 72px на
 *    ширине 1000. На terms и privacy он там же пропадал только потому,
 *    что у них в постраничных стилях свой body{overflow-x:hidden}:
 *    пока html был visible, overflow с body всплывал на вьюпорт и сам
 *    body вёл себя как visible; с непрозрачным html всплытия нет, и
 *    их собственное правило заработало. На калькуляторе такого
 *    правила нет, поэтому режем на body тоже.
 *
 *    Геометрия свечения не меняется: 1144px при -132px как было,
 *    обрезается только уходящее за экран. Проверено на 19 ширинах от
 *    320 до 1920 в четырёх локалях.
 *
 *    Safari до 16 clip не знает — там останется прежнее поведение,
 *    хуже не станет.
 */
html,
body {
  overflow-x: clip;
}

/* ------------------------------------------------------------------ *
 * 2. Подсказка «?» в лид-форме.
 *    Была: position:absolute от значка «?», ширина 260px — вылезала
 *    из модалки (350px на экране 390px) и тянула страницу вбок.
 *    Стало: привязана к полю формы, ширина равна ширине поля.
 * ------------------------------------------------------------------ */
.modal-field { position: relative; }
.modal-field .tooltip-wrap { position: static; }
.modal-field .tooltip-box {
  left: 0;
  right: 0;
  width: auto;
  max-width: none;
}
/* Страховка для подсказок вне модалки (поиск на калькуляторе и главной). */
.tooltip-box { max-width: calc(100vw - 32px); }

/* ------------------------------------------------------------------ *
 * 3. Длинные слова в заголовках («конфиденциальности» — 497px при
 *    контейнере 350px).
 *
 *    2026-09-02: у h1 перенос по слогам выключен. На главной колонка
 *    заголовка сужается быстрее, чем растёт кегль, и на 768 английский
 *    заголовок разваливался на восемь строк с «bank-» / «ruptcy?».
 *    Дефис в витринном заголовке читается как брак набора.
 *
 *    От переполнения по-прежнему страхует overflow-wrap: break-word —
 *    длинное слово всё так же перенесётся, просто без дефиса. Ради
 *    этого правило и заводили, и оно остаётся. У h2 и h3 кегль ниже,
 *    колонка шире, дефис там уместен — их не трогаем.
 * ------------------------------------------------------------------ */
h1, h2, h3 {
  overflow-wrap: break-word;
  hyphens: auto;
}
h1 { hyphens: none; }

/* ------------------------------------------------------------------ *
 * 4. Полоса статистики в статьях: на узком экране одна колонка
 *    вместо 2+1 «лесенкой».
 * ------------------------------------------------------------------ */
@media (max-width: 640px) {
  .stats-row { grid-template-columns: 1fr; }
  .stats-row .stat-item:last-child { grid-column: auto; }
}

/* ------------------------------------------------------------------ *
 * 5. Сетки на странице «О компании» — были инлайновыми, поэтому
 *    не поддавались медиазапросам.
 * ------------------------------------------------------------------ */
.qx-about-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  overflow: hidden;
}
.qx-about-two,
.qx-about-two-tight {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.qx-about-two { gap: 14px; }
.qx-about-two-tight { gap: 12px; }
.qx-about-step {
  display: grid;
  grid-template-columns: 72px 1fr;
  column-gap: 22px;
  align-items: center;
  padding: 24px 0;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.qx-about-step--last { border-bottom: 1px solid rgba(255,255,255,0.1); }

@media (max-width: 640px) {
  .qx-about-stats,
  .qx-about-two,
  .qx-about-two-tight { grid-template-columns: 1fr; }
  .qx-about-step {
    grid-template-columns: 56px 1fr;
    column-gap: 16px;
  }
}
@media (max-width: 420px) {
  .qx-about-step {
    grid-template-columns: 1fr;
    row-gap: 6px;
  }
}

/* ------------------------------------------------------------------ *
 * 6. Строка «Авторитетный источник» под статьёй: раньше стояла
 *    за пределами .container и растягивалась на всю ширину экрана.
 * ------------------------------------------------------------------ */
.article-source {
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  margin-top: 32px;
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 16px;
}
.article-source a { color: rgba(200,255,0,0.7); }

/* ------------------------------------------------------------------ *
 * 7. Стрелка на кнопках — снята 2026-09-02 по решению владельца.
 *
 *    История, чтобы её не вернули текстом. 2026-08-19 стрелка стояла
 *    двумя разными способами: в шапке (.qx-btn-nav) — <svg> с
 *    aria-hidden, то есть декоративная и молчаливая для скринридера,
 *    а в остальных 144 кнопках символ → стоял ПРЯМО В ПОДПИСИ и
 *    читался вслух: «Получить оценку стрелка вправо». Тогда символ
 *    убрали из текста и стали рисовать правилом
 *        .qx-arrow::after { content: "→" / ""; }
 *    — запись с пустым альтернативным текстом после дроби, чтобы
 *    стрелка не попадала в доступное имя кнопки.
 *
 *    Теперь стрелка не нужна вовсе, и правила больше нет. Класс
 *    qx-arrow остался на 407 элементах намеренно: без правила он
 *    ничего не делает, а снимать его со всех страниц — правка на
 *    четыре локали ради нулевого эффекта. Арабская пара правила
 *    (content: "←") снята из qx-rtl.css тем же решением.
 *
 *    🔴 Если стрелка когда-нибудь понадобится снова — возвращать
 *    правилом, а не символом в подписи. Символ в подписи читается
 *    вслух и ломает доступное имя кнопки.
 * ------------------------------------------------------------------ */

/* ------------------------------------------------------------------ *
 * 8. Значок «?» подсказки — 2026-08-19.
 *    line-height наследовался от окружения: на главной 16px × 1.1 =
 *    17.6px, на прочих страницах 11px × 1.65 = 18.15px. Разница 0.55px
 *    сдвигала символ внутри кружка. Задаём явно по образцу главной,
 *    чтобы значок выглядел одинаково везде.
 * ------------------------------------------------------------------ */
.tooltip-icon { line-height: 17.6px; }

/* ------------------------------------------------------------------ *
 * 9. Единая шкала заголовков h1 — 2026-08-20.
 *
 *    Было: у каждой страницы свой механизм и свой размер. На 1440px
 *    about 96px (инлайновый style на элементе), калькулятор 64px,
 *    главная 60px — и это при ОДИННАДЦАТИ конкурирующих правилах
 *    .hero h1, накопившихся от редизайнов; девять из них перекрыты
 *    и ни на что не влияли. На 390px разброс был ещё шире: 27px
 *    на главной против 48px на about.
 *
 *    Стало: два уровня — витрины и материалы. Значения вынесены
 *    в переменные, менять размер теперь нужно в одном месте.
 *    !important здесь вынужденный: на about размер задан атрибутом
 *    style, а на главной десять правил объявлены до подключения
 *    этого файла.
 *
 *    Верхняя граница витрин снижена с 84px до 72px — 2026-08-28.
 *    84px разрывали заголовок главной на семь строк и съедали почти
 *    весь первый экран. 72px складывают его в пять и возвращают
 *    239px высоты; на калькуляторе и about заголовки короткие,
 *    там разница только в кегле, 23-25px.
 *    Граница работает лишь там, где её перерастает наклон 6.4vw,
 *    то есть с 1125px. На 390, 768 и 1024 размер держат нижняя
 *    граница и наклон — эта правка их не касается вовсе.
 * ------------------------------------------------------------------ */
:root{
  --qx-h1-showcase: clamp(44px, 6.4vw, 72px);   /* главная, about, калькулятор */
  --qx-h1-hub:      clamp(35.2px, 4vw, 54.4px); /* хаб блога */
  --qx-h1-article:  clamp(30.4px, 5vw, 44.8px); /* статьи */
}

.hero h1,
main h1,
body.page-about h1 { font-size: var(--qx-h1-showcase) !important; }

/* Поле заголовка — только на калькуляторе. Там ограничение в 568px
   при родителе 880px было произвольным, а длинное русское слово
   «Калькулятор» при 84px занимает 724px и рвалось переносом посреди
   слова. Расширяем поле до 860px.
   На других страницах ширина заголовка не трогается: на about она
   задана вместе с остальной типографикой и является частью вёрстки. */
.qx-h1-wide { max-width: min(100%, 860px) !important; }

/* На телефоне то же слово упиралось в нижнюю границу 44px: «Калькулятор»
   при 44px - 367px при поле 350 (390) и 320 (360), «Calculadora» - 336px
   при поле 320 (360). Слово рвалось без дефиса - 2026-09-27. Ниже 480px
   кегль идёт от ширины экрана: 10.2vw даёт 39.8px на 390 и 36.7px на 360,
   самое длинное слово встаёт в строку с запасом. */
@media (max-width: 480px) {
  .qx-h1-wide { font-size: min(44px, 10.2vw) !important; }
}

.blog-hub-hero h1  { font-size: var(--qx-h1-hub) !important; }
.article-hero h1   { font-size: var(--qx-h1-article) !important; }

/* Юридические страницы сохраняют свой мелкий размер — он задан
   правилом main#main-content > h1:first-child и специфичнее нашего. */

/* ------------------------------------------------------------------ *
 * 10. Типографика формы заявки — 2026-08-20.
 *
 *    Форма не задавала свою типографику и наследовала её от страницы,
 *    на которой открыта. У главных body{line-height:1.6}, у остальных
 *    56 страниц 1.65, а на «О компании» вдобавок letter-spacing:-0.08px.
 *    Из-за этого одна и та же форма имела разную высоту карточки
 *    (806.36px против 809.30px), полей и подписей — при полностью
 *    совпадающей разметке и всех прочих стилях.
 *
 *    Закрепляем типографику на самой модалке: теперь форма выглядит
 *    одинаково независимо от страницы. Наследование внутрь работает
 *    как на эталоне — подпись поля получает 11px × 1.6 = 17.6px.
 * ------------------------------------------------------------------ */
#modal {
  line-height: 1.6;
  letter-spacing: normal;
  /* Дополнено 20.08. Эталон — форма на about. Там в body объявлены
     text-rendering:optimizeLegibility и p{text-wrap:pretty}; на главных
     тоже, а на калькуляторе и 26 статьях блога их нет вовсе. Форма
     наследовала это от страницы и различалась начертанием и переносами.
     Объявляем на самой модалке, чтобы она не зависела от страницы. */
  text-rendering: optimizeLegibility;
}

#modal p { text-wrap: pretty; }