/* ETL_POLISH_0907 — типографика, длина строки и ритм секций.

   ЧТО ИЗМЕРЕНО (десктоп 1440):
   • основной текст: 17 px на главной, 15 на «О компании», 14,6 в подзаголовке
     страниц, 14 в вопросах-ответах, 12 в примечаниях тарифов. Пять размеров
     для одной и той же роли — «текст, который читают».
   • длина строки: 82 знака на главной, 119 на «О компании», 158 в услугах,
     188 в тарифах. Читаемый предел — 75; после сотни глаз теряет начало
     следующей строки и возвращается не туда.
   • заголовки: h1 58 px на главной и 43 на услугах, h2 39 и 29. Один и тот же
     уровень выглядит по-разному в зависимости от страницы.
   • отступы секций: 72/72, 80/80, но и 44/84, и 72/44. Несимметричные пары
     читаются как «собрано», а не «сделано».

   ЧТО ДЕЛАЕМ
   Одна шкала на весь сайт. Размеры заданы через clamp: одно правило работает
   от телефона до широкого монитора, промежуточных брейкпоинтов не нужно.
   Мелкий шрифт остаётся мелким там, где он служебный, но не ниже 13 px.

   Файл подключается после остальных и до etl_labels.css, который обязан
   оставаться последним. */

body#top {
  --etl-measure: 72ch;        /* предел длины строки для сплошного текста */
  --etl-text: clamp(15.5px, 0.5vw + 14px, 17px);
  --etl-text-sm: 13.5px;
  --etl-lead: clamp(16.5px, 0.7vw + 14px, 19px);
}

/* ─── 1. Основной текст ──────────────────────────────────────────────────── */

body#top :is(.page-head, .page-head-main) > p,
body#top .svc-lead,
body#top .about2-text,
body#top .related-lead,
body#top .multi-choice p,
body#top .svc-panel p,
body#top .svc-faq-item p,
body#top .etl-faq-item > p,
body#top .ind-card p {
  font-size: var(--etl-text);
  line-height: 1.55;
}

/* Подзаголовок под h1 — это первое, что читают на странице; он крупнее
   обычного абзаца, но не спорит с заголовком. */
body#top :is(.page-head, .page-head-main) > p:first-of-type,
body#top .svc-lead {
  font-size: var(--etl-lead);
  line-height: 1.5;
}

/* Служебные строки: сноски, примечания к тарифам, подписи. 12 px на экране
   телефона — это уже не «мелко», а «нечитаемо». */
body#top :is(.mini, .svc-note, .footnote, .note) {
  font-size: var(--etl-text-sm);
  line-height: 1.5;
}

/* ─── 2. Длина строки ────────────────────────────────────────────────────── */

/* Ограничиваем только сплошной текст. Таблицы, карточки в сетках и элементы
   интерфейса не трогаем: там ширину задаёт сама сетка. */
body#top :is(.page-head, .page-head-main) > p,
body#top .svc-lead,
body#top .about2-text,
body#top .related-lead,
body#top .svc-faq-item p,
body#top .etl-faq-item > p,
body#top .mini {
  max-width: var(--etl-measure);
}

/* ─── 3. Шкала заголовков ────────────────────────────────────────────────── */

/* У сайта уже есть своя шкала заголовков внутренних страниц — переменные
   --etl-page-title-size и --etl-page-section-title-size, которые применяются
   с !important. Спорить с ними своими правилами бессмысленно и вредно:
   правильнее подвинуть сами переменные, тогда за ними пойдут все страницы
   разом. Верхняя граница поднята с 44 до 52 px: при ширине 1440 заголовок
   страницы получался 43 px против 58 на главной, и один и тот же уровень
   выглядел по-разному в зависимости от того, куда человек зашёл. */
body#top:not(.index-page) {
  --etl-page-title-size: clamp(32px, 2.6vw + 14px, 50px);
  --etl-page-section-title-size: clamp(24px, 1.2vw + 14px, 34px);
}

@media (max-width: 1099px) {
  body#top:not(.index-page) {
    --etl-page-title-size: clamp(30px, 6vw, 40px);
    --etl-page-section-title-size: clamp(22px, 4.4vw, 28px);
  }
}

body#top main h1,
body#top .page-head h1,
body#top .svc-title {
  line-height: 1.06;
  letter-spacing: -0.02em;
}

body#top main h2,
body#top .svc-h2 {
  line-height: 1.14;
  letter-spacing: -0.015em;
}

body#top main h3 {
  font-size: clamp(17px, 0.5vw + 15px, 20px);
  line-height: 1.25;
  letter-spacing: -0.01em;
}

/* ─── 4. Ритм секций ─────────────────────────────────────────────────────── */

body#top main :is(section.section-light, section.section-muted, section.svc-section) {
  padding-top: clamp(56px, 6vw, 96px);
  padding-bottom: clamp(56px, 6vw, 96px);
}

/* Первая секция под шапкой начинается ближе: сверху уже есть воздух от
   самой шапки и хлебных крошек. */
body#top main > :is(section, .svc-hero):first-of-type {
  padding-top: clamp(24px, 2.4vw, 40px);
}

/* ─── 5. Кнопка запуска видео в шапке ────────────────────────────────────── */

/* Появляется только когда ролик стоит. Стеклянная, поверх постера, у нижнего
   края первого экрана — там, где её ищут в плеерах, и где она не спорит с
   заголовком. */
body#top .hero-video__play {
  position: absolute;
  left: 50%;
  bottom: clamp(18px, 4vh, 40px);
  transform: translateX(-50%);
  z-index: 3;
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: var(--r-pill);
  background: rgba(18, 18, 20, .42);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,.18), 0 10px 30px rgba(0,0,0,.28);
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}

body#top .hero-video__play svg {
  /* треугольник оптически смещён вправо: у него центр масс не совпадает
     с геометрическим центром */
  margin-left: 3px;
}

body#top .hero-video__play:hover {
  background: rgba(18, 18, 20, .58);
  border-color: rgba(232, 236, 245, 0.62);
  transform: translateX(-50%) scale(1.06);
}

body#top .hero-video__play:active {
  transform: translateX(-50%) scale(.96);
}

@media (prefers-reduced-motion: reduce) {
  body#top .hero-video__play {
    transition: none;
  }
  body#top .hero-video__play:hover,
  body#top .hero-video__play:active {
    transform: translateX(-50%);
  }
}

/* ETL_HERO_PLAY_MOBILE_0908 — кнопка запуска видео на телефоне.

   Кнопка стоит по центру у нижнего края первого экрана. На десктопе там
   пусто, на телефоне — нет: первый экран узкий и высокий, и в его низ
   попадает блок цифр («26 лет», «6 офисов», «5 000 м²»). Кнопка ложилась
   ровно поверх них и читалась как элемент этого блока, а не как плеер.

   Видна она на телефоне гораздо чаще, чем на десктопе: автозапуск ролика
   мобильные браузеры разрешают не всегда — экономия трафика, режим
   энергосбережения, «уменьшение движения». Поэтому её место важно.

   Убираем в правый нижний угол — туда, где у плееров и живут органы
   управления, и где под ней ничего не написано. */
@media (max-width: 900px) {
  body#top .hero-video__play {
    left: auto;
    right: max(14px, env(safe-area-inset-right, 0px));
    bottom: max(14px, env(safe-area-inset-bottom, 0px));
    width: 48px;
    height: 48px;
    transform: none;
  }
  body#top .hero-video__play:hover { transform: none; }
  body#top .hero-video__play:active { transform: scale(.96); }
}