/* Типографские правки только для русской версии.
   Подключается из BaseLayout при lang === 'ru', поэтому английская вёрстка
   не меняется ни на пиксель.

   Причина одна на все правила: русские слова длиннее английских, а макет
   местами построен на очень крупном декоративном шрифте с фиксированным
   размером. Одно слово вроде «Масштабируйтесь» шире своего контейнера —
   и вся страница получает горизонтальный скролл. */

/* 1. Общая страховка: длинное слово не распирает блок, а переносится.

   Переноса по слогам (hyphens: auto) здесь сознательно нет. Браузер рвёт
   слово не когда оно не влезает, а когда так «ровнее» строка, — отсюда
   «работа-ет», «клиен-тов», «Мультива-риантное». Ограничить это можно только
   свойством hyphenate-limit-chars, которое понимают не все браузеры, так что
   полагаться на него нельзя. Там, где слово действительно шире колонки,
   кегль подрезан ниже по файлу — переносить по слогам нечего. */
h1,
h2,
h3,
.h1,
[class$='__title'],
[class*='__title '] {
  overflow-wrap: break-word;
  hyphens: manual;
}

/* 2. Заголовки, где переносить нечего — слово одно и оно огромное.
      Здесь уменьшается кегль, привязанный к ширине окна. */

/* /ru/mvt/ — «Масштабируйтесь как никогда раньше» (в макете 171px) */
.section-scale .section-scale__title {
  font-size: min(120px, 8.4vw);
}

/* /ru/features/ — «Безопасность» (в макете 160px) */
.section-security .section-security__title {
  font-size: min(160px, 12.5vw);
}

/* /ru/career/ — «Сосредоточенная работа без лишней суеты» на узких экранах.
   9.3vw вместо 10vw: на 390px «Сосредоточенная» не влезала в строку и уходила
   в перенос по слогам. */
@media (max-width: 560px) {
  .section-freestyle .section-freestyle__title {
    font-size: min(56px, 9.3vw);
  }
}

/* /ru/features/ — «Мультивариантное тестирование» (в макете 120px).
   Английское «Multivariate» в колонку 696px влезает, русское слово из
   16 букв — нет: на десктопе оно заезжало под картинку справа, ниже 992px
   вылезало за край экрана. Кегль подрезан до влезающего на каждом брейке.
   Специфичность подогнана под исходное правило в features.css:
   :is(.section-testing .section-testing__main) .section-testing__title. */
@media (min-width: 993px) {
  .section-testing .section-testing__main .section-testing__title {
    font-size: min(72px, 5.8vw);
  }
}

@media (max-width: 992px) {
  /* здесь колонка ограничена max-width: 700px */
  .section-testing .section-testing__main .section-testing__title {
    font-size: min(73px, 10.1vw);
  }
}

@media (max-width: 650px) {
  /* макетные 67px влезают только у верхней границы диапазона */
  .section-testing .section-testing__main .section-testing__title {
    font-size: min(67px, 9.7vw);
  }
}

@media (max-width: 500px) {
  /* Колонка тут задана max-width: 430px и раздувается под слово: на 390px
     оно вылезало за экран вместе с ней. Привязываем кегль к ширине окна. */
  .section-testing .section-testing__main .section-testing__title {
    font-size: min(45px, 9.7vw);
  }

  /* /ru/features/ — «Отслеживание поведения лидов»: на экранах уже ~360px
     «Отслеживание» шире колонки. На 390px кегль остаётся макетным. */
  .section-monitoring .section-monitoring__main .section-monitoring__title {
    font-size: min(48px, 12.5vw);
  }
}

/* /ru/ — «Следите за цифрами, которые важны именно вам». Заголовку отведено
   820px, а фраза после запятой на крупном кегле в них не влезает, и «вам»
   висит одиноко третьей строкой.

   Кегль здесь clamp(32px, 4.4vw, 60px), и обе критичные ширины считаются от
   него: «которые важны именно вам» требует 14.65 кегля, «Следите за цифрами,
   которые» — 16 кеглей. Значит подходит любой max-width между ними: первого
   хватает второй строке целиком, второго не хватает слову «которые», чтобы
   подняться в первую, — разбивка остаётся по запятой.

   Проблема начинается там, где 14.65 кегля перерастает 820px, то есть с
   кегля ~56px (ширина окна ~1272px) и до упора clamp в 60px. Во всём этом
   диапазоне интервал допустимых значений — [879px, 895px), выше 1364px он
   расширяется до [879px, 960px). 888px попадает в оба. */
@media (min-width: 1265px) {
  .analytics-title {
    max-width: 888px;
  }
}

/* /ru/ — «+30% к ROI в первые месяцы — средний результат клиентов AIO».
   В отведённые 900px русская фраза не укладывалась и ломалась на три строки,
   причём тире уезжало в начало второй. Отдаём заголовку всю ширину блока
   (.reviews__head — 1000px): двухстрочная разбивка начинается с 988px, и
   тире остаётся в конце первой строки. Кегль не трогаем. */
.reviews__title {
  max-width: 1000px;
}

/* /ru/ — два заголовка блоков: «Перестаньте платить за рекламу, которая не
   окупается» и «Вы занимаетесь трафиком — техчасть просто работает». Оба
   ложились в три строки с одиноким словом на последней.

   Ширины одной ширины не хватает: контейнер отдаёт заголовку максимум 940px,
   а первому из них на кегле 60px нужно больше. Поэтому здесь два действия —
   отдаём заголовку весь контейнер и опускаем потолок кегля с 60px до 56px
   (при 940px две строки начинаются с 56.5px). Нижняя граница и наклон clamp
   те же, что в homepage.css, так что на узких экранах ничего не меняется. */
.sec-title {
  max-width: 940px;
  font-size: clamp(32px, 4.4vw, 56px);
}

/* Шапка. «Записаться на демо» длиннее английского «Book a Demo» — кнопка
   выросла до 216px и вылезала за правый край контейнера на 7px: обводка
   обрезалась. Ужимаем боковые падинги кнопки с 32px до 24px — ширина падает
   до 200px, кнопка встаёт в контейнер, между ней и последним пунктом меню
   остаётся зазор. Только для десктопного меню: ниже 1200px кнопка
   заменяется на «Меню». */
@media (min-width: 1201px) {
  header .header__link--desktop {
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* Кнопки в блоках «Партнёрам». Они узкие: одна приклеена к правому краю
   абсолютом и повёрнута, вторая стоит в шапке блока. Английские подписи
   помещались в одну строку, русские — нет, и правило переноса сверху рвало
   их посреди слова («Записать/ся», «Связать/ся»). Кнопке перенос не нужен
   вовсе — она растёт по содержимому. */
.section-affilliates .section-affilliates__link,
.for-affiliates .btn {
  white-space: nowrap;
}

/* Плашки «ПРОБЛЕМА» и «РЕШЕНИЕ» — /ru/analytics/, /ru/tracker/, /ru/tech/,
   /ru/team-features/. Английские Problem и Solution в плашку помещались,
   русские — нет: при 48px «ПРОБЛЕМА» требует 280px против 253px плашки,
   «РЕШЕНИЕ» — 243px против 217px. Текст упирался в края и съезжал с центра.
   Ниже 992px homepage.css сам роняет кегль до 32px, туда не лезем. */
@media (min-width: 993px) {
  .list-section__problems-title__text,
  .list-section__solutions-title__text {
    font-size: 42px;
  }
}

/* /ru/features/ — крупные декоративные заголовки блоков. У каждого своё
   ограничение по ширине колонки, и русское слово в него не влезало: строка
   рвалась посреди слова («Встроенны/й», «Инструмент/ы») или текст обрезался
   («Тепловые карты», «Библиотека креативов»). Кегли подрезаны ровно до
   значения, при котором самое длинное слово помещается в свою колонку.
   Селекторы повторяют исходные из features.css — иначе не хватает
   специфичности. Брейкпоинт 1201px: ниже features.css сам меняет кегли. */
@media (min-width: 1201px) {
  /* «Встроенный» 368px в колонку 358px */
  :is(:is(.section-tracker .section-tracker__generator) .text-content) .text-content__title {
    font-size: 56px;
  }

  /* «Тепловые» 468px в колонку 334px */
  :is(.section-monitoring .section-monitoring__heat) .section-monitoring__heat-title {
    font-size: 66px;
  }

  /* «Инструменты» 1411px в колонку 1200px */
  .section-meta .section-meta__title {
    font-size: 175px;
  }

  /* «Библиотека» 363px в колонку 336px */
  .section-libraries .section-libraries__block-title {
    font-size: 55px;
  }

  /* «Создание полей» 592px в колонку 570px */
  :is(.section-customization .section-customization__fields) .section-customization__fields-title {
    font-size: 114px;
  }

  /* «пользователями» 560px в колонку 553px */
  :is(.section-permissions .section-permissions__sharing) .section-permissions__sharing-title {
    font-size: 66px;
  }

  /* «Редактор лендингов» — кнопка «Записаться на демо» висит в этом блоке
     абсолютом поверх заголовка. Английское «Landing page editor» до неё не
     доставало, русское заезжало под кнопку двумя буквами. */
  :is(.section-editor .section-editor__main) .section-editor__main-title {
    font-size: 96px;
  }

  /* «Сравнение в аналитике». Кегль 134px и интерлиньяж 89% рассчитаны на
     короткое «Compare analytics» в две строки; русская фраза из трёх слов
     на нём вылезала за карточку и накрывала собой подзаголовок. Приводим
     блок к параметрам соседнего «Древовидные модели аналитики» (70px/111%),
     который устроен так же и выглядит правильно. Подзаголовку возвращаем
     обычный отступ: его −91px подтягивали текст под высокий заголовок. */
  :is(.section-analytics .section-analytics__compare) .section-analytics__compare-title {
    font-size: 70px;
    line-height: 111%;
    /* правее начинается карточка Payout — заголовок должен переноситься
       до неё, а не уезжать под неё одной строкой */
    max-width: 560px;
  }

  :is(.section-analytics .section-analytics__compare) .section-analytics__compare-text {
    margin-top: 16px;
  }
}

/* /ru/price/ — «Один трекер. Единая инфраструктура.» Вторая строка длиннее
   английской «Full infrastructure.» настолько, что в колонку 912px на
   макетных 94px не помещается и разваливается на три строки.

   Ужимать один кегль пришлось бы до 67px — заголовок потерял бы вес. Вместо
   этого даём строке больше места: заголовок выходит за колонку до 1100px
   (секция центрирует его, поля остаются симметричными), и тогда хватает
   80px. Карточки ниже по-прежнему держат макетные 912px — правило адресное.
   Ниже 1200px price.css сам роняет кегль до 56px, туда не вмешиваемся. */
@media (min-width: 1201px) {
  .price-hero__title {
    width: 1100px;
    max-width: calc(100vw - 64px);
    font-size: 80px;
    line-height: 82px;
    letter-spacing: -1.6px;
  }
}

/* /ru/partner-program/ — «Партнёрская программа». Разметка уже разбита на
   две строки тегом <br>, но при 120px каждое слово шире колонки 560px, и
   правило переноса сверху резало их пополам — выходило четыре строки
   («Партнёрс/кая», «программ/ма»). При 88px оба слова помещаются целиком.
   Английское «Partner Program» короче и в макетный кегль укладывалось. */
@media (min-width: 1201px) {
  .partner-hero .partner-hero__title {
    font-size: 88px;
  }
}

/* /ru/career/ — «Отдых и перезагрузка» вместо «Rest and reload»: на 64px
   строка шире колонки на 56px и обрезалась. */
@media (min-width: 1201px) {
  :is(.section-volume .section-volume__reload) .section-volume__reload-title {
    font-size: 54px;
  }
}

/* /ru/support/ — «Персональный менеджер» вместо «Personal manager»: на 88px
   требует 641px против колонки 485px. */
@media (min-width: 1201px) {
  :is(.section-assistant .section-assistant__manager) .section-assistant__manager-title {
    font-size: 64px;
  }
}

/* /ru/price/ — «Индивидуально» вместо «Custom». Общий для обеих карточек
   кегль 48px это слово не выдерживает: оно шире колонки на 20px и вылезает
   за край карточки. Уменьшаем только его и только в русской версии;
   интерлиньяж оставляем общий (56px), чтобы цена и «Индивидуально»
   по-прежнему стояли на одной линии. */
.price-card__value--text {
  font-size: 44px;
  line-height: 56px;
  letter-spacing: -0.88px;
}

@media (max-width: 600px) {
  /* Ниже 600px price.css роняет кегль до 36px, но и он «Индивидуально» не
     держит: на 360px слово шире колонки. Привязываем к ширине окна — на
     широких телефонах остаётся 36px, на узких ужимается ровно по месту. */
  .price-card__value--text {
    font-size: min(36px, 8.5vw);
    line-height: 44px;
    letter-spacing: -0.72px;
  }
}