/* ============================================================
   HERO (Главная, секция .main_form) — по макету Figma 8888-30759.
   Слева: заголовок, описание, «Оставьте заявку» + форма.
   Справа: грузчик на светлой скруглённой карточке.
   Промо «Скидка 15%» — плавающим бейджем на карточке.
   Только CSS — HTML / тексты / SEO не трогаем. Шрифт Geologica, токены DS.
   ============================================================ */

/* первый блок — умеренная высота (высоту задаёт .container), без пустого отрыва */
.main_form { background: transparent; padding: 8px 0 28px; box-sizing: border-box; }

/* контейнер как у хедера: max-width 1440, padding 60 → отступы совпадают */
.main_form .container {
  max-width: var(--ds-container, 1440px); margin: 0 auto; padding: 56px var(--ds-gutter) 48px;
  box-sizing: border-box; /* отступы 60px как у остальных блоков (контент 1320, а не 1440) */
  min-height: 560px; /* умеренная высота hero — без большого пустого отрыва до следующего блока */
  display: grid;
  /* левая колонка чуть шире правой — чтобы крупный заголовок «Профессиональные»
     влезал в одну строку на 68px; картинка справа остаётся крупной */
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  /* весь левый блок (заголовок+описание+«Оставьте заявку»+форма) идёт единой
     группой и центрируется по вертикали: пустые 1fr сверху и снизу равны.
     Картинка справа — на всю высоту. */
  grid-template-rows: 1fr auto auto auto auto 1fr;
  column-gap: var(--ds-gutter, 60px); row-gap: 0;
  align-items: start;
  position: relative;
}

/* всё содержимое — в левую колонку */
.main_form .container > * { grid-column: 1; min-width: 0; }
/* группа по центру: строки 2–5, сверху и снизу — гибкие пустые 1fr */
.main_form .container > .main_form__title { grid-row: 2; }
.main_form .container > .main_form__text { grid-row: 3; }
.main_form .container > .main_form__subtitle { grid-row: 4; }
.main_form .container > form.quote-form { grid-row: 5; }

/* ---------- Правая карточка с грузчиком ---------- */
.main_form .container::after {
  content: ""; grid-column: 2; grid-row: 1 / -1; align-self: stretch;
  border-radius: var(--ds-r-block, 28px); overflow: hidden;
  /* картинка заполняет карточку целиком (её светлый фон = фон карточки).
     webp для скорости, png — фоллбэк для старых браузеров */
  background: #eef0f3 url("/assets/template/newdesign/images/hero-mover.png") center bottom / auto 100% no-repeat;  /* фото 3/4 (без ног): заполняем по высоте — голова сверху, обрез бёдер у нижнего края (не висит), фигура уже = меньше */
  background-image: image-set(
    url("/assets/template/newdesign/images/hero-mover.webp") type("image/webp"),
    url("/assets/template/newdesign/images/hero-mover.png") type("image/png"));
  box-shadow: var(--ds-shadow-card, 0 8px 30px rgba(2, 6, 23, .06));
  /* высота картинки = высота левой колонки с формой (одинаковая высота, #8) */
  min-height: 0; pointer-events: none;
}

/* ---------- Заголовок (h1 68/76 — как на макете) ----------
   68px на широком экране; на узких десктопах плавно уменьшается,
   чтобы длинное «Профессиональные» всегда влезало в одну строку. */
.main_form .main_form__title {
  font-weight: var(--ds-fw-medium);
  /* до 68px (как на макете) там, где длинное «Профессиональные» влезает;
     на узких десктопах плавно уменьшается — слово всегда целиком в 1 строку */
  font-size: min(var(--ds-h1), calc((100vw - 180px) / 18));
  line-height: 1.12; white-space: nowrap;
  color: var(--ds-text); letter-spacing: -.01em; margin: 0 0 12px;
}

/* ---------- Описание ---------- */
.main_form .main_form__text {
  font: var(--ds-fw-regular) var(--ds-body-m) / var(--ds-body-m-lh) var(--ds-font);
  color: var(--ds-text-2); margin: 0 0 14px;
}
.main_form .main_form__text span { color: var(--ds-brand); }

/* ---------- Подзаголовок «Оставьте заявку» ---------- */
.main_form .main_form__subtitle {
  font: var(--ds-fw-medium) var(--ds-h5) / var(--ds-h5-lh) var(--ds-font);
  color: var(--ds-text); margin: 28px 0 12px;
}

/* ---------- Промо «Скидка 15%» — плавающий бейдж на карточке ---------- */
.main_form .main_form_promo {
  position: absolute; top: 40px; left: 58%; right: auto; z-index: 3;  /* на коробках грузчика (левый верх правой карточки), в границах контента */
  max-width: 236px; margin: 0; text-align: left; cursor: pointer;  /* вся плашка кликабельна */
  background: var(--ds-brand); color: var(--ds-on-brand);
  border-radius: 18px; padding: 14px 18px;
  box-shadow: 0 14px 34px rgba(var(--ds-brand-rgb), .35);
}
.main_form .main_form_promo p {
  margin: 0; color: inherit;
  font: var(--ds-fw-regular) var(--ds-body-s) / 1.35 var(--ds-font);
}
.main_form .main_form_promo strong {
  display: block; margin-bottom: 2px; font-size: 22px; font-weight: var(--ds-fw-medium); color: inherit;
}
.main_form .main_form_promo .button-magic {
  margin-top: 10px; background: #fff; color: var(--ds-brand);
  border: 0; border-radius: 10px; padding: 8px 16px; cursor: pointer;
  font: var(--ds-fw-medium) var(--ds-body-s) / 1 var(--ds-font);
}

/* ---------- Форма ----------
   Обёртку раскрываем (display:contents) → её поля становятся flex-элементами
   самой формы, и через order выстраиваем: поля → файл → согласие → кнопка. */
.main_form .quote-form { max-width: 640px; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px; }
.main_form .main_form_wrapper { display: contents; }

/* ---- Форма в ОДНО поле (по макету): только Телефон + кнопка в ряд.
   Имя, E-mail и файл убираем из вида (HTML не трогаем — прячем через CSS;
   значения Имя/E-mail подставляет JS, чтобы отправка проходила). ---- */
.main_form .input-group:has(#af_quote-name),
.main_form .input-group:has(#af_quote-email),
.main_form .main_form_wrapper > .input-group-file-upload { display: none !important; }

/* Телефон — на всю доступную ширину строки, рядом кнопка */
.main_form .input-group { min-width: 0; display: flex; flex-direction: column; }
.main_form .main_form_wrapper > .input-group:has(#af_quote-phone) { flex: 1 1 220px; order: 1; }

/* Поля и флаг РФ — компонент .ds-field (design-system.css). Своих правил нет. */
.main_form .input-group [class^="error_"] {
  font: var(--ds-fw-regular) var(--ds-body-s) / 1.3 var(--ds-font); color: var(--ds-danger); margin-top: 4px;
}

/* файл-аплоуд — «кнопка-чип» со скрепкой */
.main_form .main_form_wrapper > .input-group-file-upload { flex: 1 1 100%; order: 2; }
.main_form .input-group-file-upload input[type="file"] { display: none !important; }
/* .custom-file-upload — компонент; здесь только размер «чипа» */
.main_form .custom-file-upload { padding: 11px 18px; }
/* :hover — компонент .custom-file-upload:hover в design-system.css. */

.main_form .error_g-recaptcha-response { display: none; } /* пустая строка не должна отодвигать согласие от низа картинки */

/* согласие — НАД кнопкой */
.main_form .quote-form > .input-group { flex: 1 1 100%; order: 3; }
/* Строка согласия: inline layout (не flex) — чекбокс и текст всегда рядом
   в одной строке; ошибка — отдельным блоком снизу. Так гарантированно не
   разъезжается на 3+ строки при появлении error-span. */
.main_form .small-legal {
  display: block !important; margin: 2px 0 0; cursor: pointer;
  font: var(--ds-fw-regular) var(--ds-body-s)/var(--ds-checkbox-size, 18px) var(--ds-font);
  color: var(--ds-text-3);
}
.main_form .small-legal > input[type="checkbox"] {
  display: inline-block; vertical-align: middle; margin: 0 8px 0 0;
  width: 18px; height: 18px; accent-color: var(--ds-brand); cursor: pointer;
}
.main_form .small-legal a { color: var(--ds-brand); text-decoration: underline; }
.main_form .small-legal br { display: none; }
/* ошибка «Это поле обязательно…» — отдельным блоком под чекбоксом */
.main_form .small-legal [class^="error_"] {
  display: block; margin: 2px 0 0; padding: 0;
  color: var(--ds-danger);
  font: var(--ds-fw-regular) var(--ds-body-s)/1.3 var(--ds-font);
}
.main_form .small-legal [class^="error_"]:empty { display: none; }

/* кнопка отправки — компонент .ds-btn (класс в чанке tpl.AjaxForm.mainSliderUX).
   Здесь только размер: в один ряд с полем «Телефон», той же высоты. Цвет и все
   состояния (hover/active/focus) — из design-system.css. */
.main_form .text-center { flex: 0 0 auto; order: 2; text-align: left; align-self: stretch; display: flex; }
.main_form .btn_main_form {
  height: 56px; padding: 0 24px; white-space: nowrap;
  font-size: var(--ds-body-m);
}

/* низ формы (кнопка «Отправить») ровно на линии низа картинки (#8) —
   убираем нижний отступ формы, из-за которого колонка была на 16px выше */
.main_form .quote-form,
.main_form #ajaxForm-mainslider { margin-bottom: 0; }

/* скрытые служебные поля */
.main_form input[type="hidden"] { display: none; }

/* видео-превью ниже по странице: контейнер схлопнут → его absolute-кнопка play
   «улетала» на герой. Делаем контейнер relative — кнопка остаётся в своём блоке. */
.youtube_video, .video-placeholder { position: relative; }

/* Owl-карусели: возвращаем обрезку (легаси-CSS был снят) — убирает горизонтальный скролл.
   ВАЖНО: overflow-x:hidden на body НЕ ставим — это ломает sticky-шапку. */
.owl-carousel, .owl-stage-outer { overflow: hidden !important; }

/* ---------- Адаптив: планшет/мобилка ---------- */
@media (max-width: 900px) {
  .main_form { padding: 12px 0 20px; min-height: 0; }
  /* на мобилке — узкие отступы по краям (десктопные 60px убираем) */
  .main_form .container {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    padding: 12px 24px 16px; row-gap: 10px;
    min-height: 0 !important;
  }
  /* карточка с грузчиком — сверху, компактно, чтобы форма влезла на первый экран */
  .main_form .container::after {
    grid-column: 1; grid-row: 1; align-self: auto;
    min-height: 220px; margin-bottom: 4px; background-position: center top; background-size: cover;
  }
  .main_form .main_form__title { font-size: var(--ds-h3); line-height: 1.15; margin-bottom: 6px; white-space: normal; }
  /* body-m (не body-s) — иначе описание корп-геро «Более 900 компаний…» нечитаемо мелким. */
  .main_form .main_form__text { font-size: var(--ds-body-m); line-height: var(--ds-body-m-lh); margin-bottom: 8px; }
  .main_form .main_form__subtitle { font-size: var(--ds-body-m); line-height: 1.3; margin: 8px 0 6px; }
  /* Скидка 15% — плавающим бейджем ПОВЕРХ картинки грузчика (левый низ, чтобы
     не закрывать лицо/голову в правом верху). Container = position:relative. */
  .main_form .main_form_promo {
    position: absolute !important; top: auto !important; right: auto !important;
    bottom: auto; left: 12px; z-index: 3;
    max-width: 180px; margin: 0; padding: 10px 14px;
    display: block; text-align: left;
    /* положение по вертикали — под картинкой но всё ещё на ней */
  }
  .main_form .main_form_promo p { font-size: var(--ds-body-s); line-height: 1.3; }
  .main_form .main_form_promo strong { display: block; font-size: 18px; margin-bottom: 2px; }
  .main_form .main_form_promo .button-magic { margin-top: 8px; padding: 6px 12px; font-size: var(--ds-body-s); }
  /* Позиционирование по вертикали: полностью внутри картинки (высота ~220),
     плашка ~120px → top:88 = плашка в нижней трети картинки, не заходит на заголовок */
  .main_form .main_form_promo { top: 88px; }
  /* Отступ сверху заголовка — чтоб плашка гарантированно не касалась */
  .main_form .main_form__title { margin-top: 6px; }
  /* Отступ снизу формы — компактный как между другими блоками на мобилке */
  .main_form { padding-bottom: 16px; }
}

@media (max-width: 560px) {
  .main_form .container { padding: 8px 16px 12px; }
  .main_form .main_form__title { font-size: var(--ds-h5); line-height: 1.15; }
  .main_form .quote-form { gap: 8px; }
  /* все поля — в одну колонку */
  .main_form .main_form_wrapper > .input-group { flex-basis: 100%; }
  .main_form .btn_main_form { width: 100%; }
  .main_form .container::after { min-height: 200px; margin-bottom: 2px; }
  .main_form .main_form_promo { top: 78px !important; left: 12px; max-width: 160px; padding: 8px 12px; }
  .main_form .main_form_promo strong { font-size: 16px; }
  .main_form { padding-bottom: 16px; }
  /* Порядок в форме на мобилке: телефон → чекбокс → кнопка */
  .main_form .main_form_wrapper > .input-group:has(#af_quote-phone) { order: 1; }
  .main_form .quote-form > .input-group { order: 2; }
  .main_form .text-center { order: 3; }
}

@media (max-width: 760px) {
  html.gpm-embedded .main_form,
  .main_form .container { min-height: 0 !important; }
}

/* Встроенный режим (главная внутри iframe дизайн-системы): убираем 100vh у hero,
   иначе высота iframe и 100vh зацикливаются. Высота — по контенту. */
html.gpm-embedded .main_form { min-height: calc(var(--emb-vh, 820px) - 150px) !important; }
html.gpm-embedded .main_form .container { min-height: calc(var(--emb-vh, 820px) - 186px) !important; }

/* Первый блок (hero) — всегда во всю высоту экрана (десктоп).
   151px — высота топбара + шапки над hero. Пустое пространство
   поглощает grid-row 1fr, форма прижата к низу. */
@media (min-width: 761px) {
  .main_form .container { min-height: calc(100vh - 151px) !important; }
}

/* подпись SmartCaptcha — последней строкой формы первого экрана: у детей формы заданы order,
   а у подписи по умолчанию order 0, и на мобильном она вставала над полем телефона (kr, 2026-10-14) */
.main_form .quote-form > .smartcaptcha-notice { order: 99; }