/* ==========================================================================
   CTA + футер — node 743:3097 / Group 327, y 22651–23971
   Слева заголовок «лесенкой» 110px (шаг строк 84px), справа список «подберем:»
   и форма: три поля с нижней линией и кнопка-пилюля.
   Футер: строка контактов и логотип-аутлайн во всю ширину.
   ========================================================================== */

.cta {
  position: relative;
  /* 518px. Было 487, но поля формы выросли на 31px (отступы 27/26 вместо
     25 + зазор 26), и при фиксированной высоте секции на столько же
     сжимался просвет от кнопки до футера. */
  height: 32.375rem;
  margin-top: 21.875rem; /* 350px от низа аккордеона */
  padding-block: 0;
}

/* Слой, поставленный по вертикали из макета (как в 5 и 7 блоках).
   inset-inline: 0 у абсолютного слоя считается от PADDING-бокса секции,
   то есть залезал в поля .custom-container: колонки не совпадали с сеткой
   заголовка, а линия поля формы уходила в самый край экрана.
   Повторяем поля контейнера явно. */
.cta__at {
  position: absolute;
  inset-inline: var(--container-pad);
  top: var(--t);
}

.cta__title {
  display: block;
  line-height: 0.764; /* 84px при кегле 110 */
}

.cta__title [class*="col-"] { white-space: nowrap; }

/* --- Список «подберем» ---------------------------------------------------- */
.cta__num { padding-right: var(--in-text); } /* цифра прижата к линии колонки */

/* --- Форма ---------------------------------------------------------------- */
/* Поля идут сплошной лесенкой: нижняя линия каждого служит верхней для
   следующего, поэтому зазора между строками нет, а расстояние до линий
   задают сами отступы поля — 27px сверху, 26px снизу. */
.cta__field {
  /* Своя копия нижней линии, потому что на фокусе у неё меняется цвет:
     толщина и смещение те же, что у общей --rule-bottom (layout.css). */
  --line-c: var(--c-line);
  width: 100%;
  padding: 1.6875rem 0 1.625rem; /* 27px / 26px */
  border: 0;
  border-radius: 0;
  box-shadow: inset 0 calc(-1 * var(--line-w)) 0 var(--line-c);
  background: none;
  color: inherit;
  font: inherit;
  /* Страница набрана капителью, но в полях человек пишет своим регистром:
     имя и почта — это данные, а не типографика, и «ИВАН@MAIL.RU» вместо
     набранного выглядит как ошибка ввода. Плейсхолдеры при этом остаются
     прописными, как в макете (правило ниже). */
  text-transform: none;
}

/* верхнему полю линию сверху рисовать некому — рисует себе само */
.cta__row:first-child .cta__field {
  box-shadow:
    var(--rule-top),
    inset 0 calc(-1 * var(--line-w)) 0 var(--line-c);
}

.cta__field::placeholder {
  color: var(--c-ink);
  opacity: 0.45;
  text-transform: uppercase;
}

/* Цвет через переменную, а не переопределением box-shadow: иначе у первого
   поля на фокусе пропадала бы верхняя линия. */
.cta__field:focus {
  outline: none;
  --line-c: var(--c-accent);
}

.cta__submit { margin-top: 3.2625rem; } /* 52px от последней линии до кнопки */

/* --- Блок «Контакты» ------------------------------------------------------
   Идёт в потоке между формой и футером, поэтому вертикали заданы отступами,
   а не координатами: 346px от низа кнопки «Получить КП» (низ кнопки совпадает
   с низом секции .cta) до верха строки заголовка. */
#contact {
  margin-top: 21.625rem; /* 346px */
  padding-block: 0;      /* .section по умолчанию даёт 200px сверху и снизу */
}

/* Список: коробка 241px по макету, центр смещён на 21.5px влево от середины
   страницы — так в макете, поэтому не просто margin: auto. */
.contact__list {
  margin: 6.125rem auto 0; /* 96px от заголовка, снизу ноль — расстояние до
                          нижней строки держит margin-top футера */
  position: relative;
  padding: 0;
  font-size: 1.5rem;   /* 24px */
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-align: center;
  text-transform: uppercase;
}

.contact__list li + li { margin-top: 1.5625rem; } /* 25px между парами */

/* Подпись приглушена, значение — обычный тон текста: в макете это два разных
   тона (замер по экспорту: 162 против 16 при фоне 224), и по ним же читается,
   что кликабельно именно значение. */
.contact__label {
  display: block;
  color: rgba(16, 16, 16, 0.3);
}

.contact__value {
  display: block;
  color: var(--c-ink);
  transition: opacity 0.45s ease;
}

.contact__value:hover { opacity: 0.55; }

/* --- Футер ---------------------------------------------------------------- */
/* Строка контактов: «контакты» слева, телефон правым краем в край контейнера,
   остальные два прижаты к телефону фиксированными зазорами. Не
   justify-content: space-between на все четыре — тогда свободное место делится
   поровну между всеми зазорами и 187/96 не удержать. Зазоры в rem: в px они
   на широком экране схлопывались бы относительно текста. */
.footer__contacts {
  display: flex;
  align-items: baseline;
}

.footer__contacts p { margin-bottom: 0; }

/* Отступы второй строки футера. Стояли inline, перенесены сюда один в один. */
@media (min-width: 992px) {
  .footer__offer { margin-right: auto; margin-left: 160px; }
}

.footer__site {
  margin-left: auto;  /* прижимает тройку ссылок вправо */
  margin-right: 6rem; /* 96px до почты */
}

.footer__mail { margin-right: 11.6875rem; } /* 187px до телефона */

.footer {
  margin-top: 18rem; /* 288px от низа списка контактов до нижней строки */
  padding-bottom: 2.5rem; /* 40px до низа страницы */
}

.footer__wordmark {
  margin-top: 3rem;
  /*padding-inline: 1rem;  !* логотип 1840px в контейнере 1872 *!*/
}

.footer__wordmark img { width: 100%; }

/* --- Мобильный макет, 11 блок (952:847, y 15462…16028) --------------------
   Заголовок «лесенкой» кеглем 70 (а не 50, как даёт t-display-s), список
   «подберем» и форма из трёх полей с шагом 50 — тем же ритмом, что строки
   аккордеона в 10 блоке.

   Вертикаль по макету:
       15462…15674  заголовок, 4 строки 70/53
       15711        «подберем:» и список 1–4
       15808        первая линия формы, дальше шаг 50
       15998…16028  кнопка 438×30.3
------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .cta {
    height: 35.39375rem;   /* 566.3px: 15462…16028 */
    margin-top: 0;         /* 10 блок уже довёл страницу до 15462 */
  }

  .cta__at { top: var(--tm, var(--t)); margin-top: 0; }

  .cta__pick { --tm: 15.5625rem; }   /* 249px: 15711 */
  .cta__form { --tm: 21.625rem; }    /* 346px: 15808 */

  /* Заголовок кеглем 70/53 — класс t-display-s даёт 50/38 */
  .cta__title {
    font-size: var(--fs-display-m);
    line-height: 0.757;              /* 53px при кегле 70 */
  }

  .cta__title > span { display: block; position: relative; height: 3.3125rem; margin-inline: 0; }

  .cta__title > span > span,
  .cta__pick .row > p {
    position: absolute;
    left: calc(var(--mx, 0px) - var(--container-pad));
    top: 0;
    width: auto;
    margin-left: 0;
    padding: 0;
    white-space: nowrap;
  }

  /* Строки списка «подберем» — по одной строке моно (15) каждая; третья
     длиннее макетной (у нас «ассортимент ПРОДУКЦИИ снекового аппарата»)
     и заворачивается на две. */
  .cta__pick .row {
    position: relative;
    height: calc(var(--lines, 1) * 0.9375rem);
    margin-inline: 0;
  }

  /* Тексты пунктов переносятся по ширине до правой линии сетки, а не лезут
     за край экрана. Номера и «подберем:» остаются в одну строку. */
  .cta__pick .row > p.col-5 {
    width: 18.625rem;   /* 298px: от x=185 до x=483 */
    white-space: normal;
  }

  /* --- Форма: 18 + 15 + 17 = 50, как строки аккордеона --- */
  .cta__row { margin-inline: var(--grid-inset); }

  .cta__row > [class*="col-"] {
    width: 100%;
    margin-left: 0;
    padding: 0;
  }

  /* Высота задаётся явно: у <input> Chrome не даёт содержимому стать ниже
     естественной высоты шрифта (19px при кегле 15), и строка выходила 54
     вместо 50 — к кнопке накапливалось 12px. */
  .cta__field {
    height: 3.125rem;             /* 50px = 18 + 15 + 17 */
    padding: 1.125rem 0 1.0625rem;
    font-size: var(--fs-caption);
    line-height: 1;
  }

  .cta__submit {
    margin-top: 2.5rem;              /* 40px от последней линии до кнопки */
    margin-inline: var(--grid-inset);
  }

  .cta__submit > [class*="col-"] { width: 100%; margin-left: 0; padding: 0; }

  /* Кнопка в макете чуть ниже геройской: 30.3 против 32, радиус 22.72 */
  .cta__submit-m {
    width: 100%;
    height: 1.89375rem;
    border-radius: 1.42rem / 50%;
  }

  /* --- 12 блок: контакты и футер (952:869 / 952:872, y 16319…17135) ---
     Список контактов на мобилке кеглем 20 с интерлиньяжем 22: пара
     «подпись + значение» занимает 44, между парами ещё строка.

     Вертикаль по макету:
         16319…16427  «Контакты», кегль 150
         16484…16726  четыре пары контактов
         16980        строка «политика / оферта»
         17022…17135  вордмарк
         17165        низ страницы
  ------------------------------------------------------------------ */
  #contact {
    margin-top: 18.1875rem;   /* 291px: низ формы 16028 → заголовок 16319 */
    padding-block: 0;
  }

  /* «Контакты» — кегль 150, класс t-display-l даёт 100.
     margin-right компенсирует трекинг, который CSS ставит и после последней
     литеры: у выключенной по центру строки он сдвигает её вправо на полтрекинга
     (на кегле 150 это заметные 2px). */
  .contact__title {
    font-size: var(--fs-display-2xl);
    margin-left: var(--ls-display);
  }

  .contact__list {
    width: 100%;
    left: 0;
    margin: 3.5625rem 0 0;    /* 57px от заголовка до первой подписи */
    font-size: var(--fs-lead);/* 20px */
    line-height: 1.1;         /* 22px */
  }

  .contact__list li + li { margin-top: 1.375rem; }  /* 22px — строка через одну */

  .footer {
    margin-top: 15.875rem;    /* 254px от низа списка (16726) до строки 16980 */
    padding-bottom: 1.875rem; /* 30px до низа страницы (17165) */
  }

  /* В макете строка футера — только «политика» и «оферта», по краям контента.
     Копирайта там нет; прячем, а не выдумываем ему место. */
  .footer__contacts {
    justify-content: space-between;
    margin-inline: var(--grid-inset);
    font-size: var(--fs-caption);
  }

  .footer__offer { margin: 0; }
  .footer__copy { display: none; }

  .footer__wordmark {
    margin-top: 1.6875rem;    /* 27px от строки до вордмарка */
    padding-inline: var(--grid-inset);
  }
}

/* --- Отправка заявки ------------------------------------------------------
   Состояний в макете нет — ни «отправлено», ни ошибки, — поэтому строка
   статуса набрана тем же моно, что и поля, и просто встаёт под кнопкой. Свой
   блок вместо alert() по двум причинам: alert рвёт страницу с инерционной
   прокруткой (Lenis) и не читается скринридером как результат отправки, а
   role="status" в разметке читается.
-------------------------------------------------------------------------- */
.form-status {
  margin-top: 1.25rem;   /* 20px от кнопки */
  color: var(--c-ink);
  font-size: var(--fs-caption);
  line-height: 1.3;
}

.form-status--ok   { color: var(--c-accent); }
.form-status--fail { color: #B00020; }

/* Кнопка на время запроса: гасим клики и показываем, что заявка ушла. */
.cta__form.is-sending button,
.popup__form.is-sending button { opacity: 0.5; pointer-events: none; }

/* Ловушка для ботов. Не display: none и не hidden — примитивные боты такие
   поля пропускают; за краем экрана поле для них выглядит обычным. */
.lead-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* --- Экран «заявка отправлена» --------------------------------------------
   Живёт в попапе (координаты — popup.css); сюда вынесено только то, что
   касается самого блока и кнопки. Форма внизу страницы своего экрана не
   имеет: после отправки открывается тот же попап (js/main.js).
-------------------------------------------------------------------------- */
.form-done {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3.25rem;               /* 52px — тот же отступ до кнопки, что в форме */
}

.form-done[hidden] { display: none; }

.form-done__title span { display: block; }

/* Размер кнопки взят у «получить КП»: пилюля с живым текстом (.btn-pill)
   сама по себе высотой 32px — это мобильный вариант, на десктопе рядом с
   такой типографикой он выглядел бы обрезком. */
.form-done__btn {
  width: 17.6875rem;          /* 283px — как у .btn-kp */
  height: 2.4375rem;          /* 39px */
  font-size: var(--fs-body);
}

@media (max-width: 991.98px) {
  .form-done { gap: 1.875rem; }

  .form-done__btn {
    width: 100%;
    height: 1.89375rem;
    border-radius: 1.42rem / 50%;
    font-size: var(--fs-caption);
  }
}