/* ==========================================================================
   form.css — секция «Остались вопросы?»

   Раньше здесь жила пара «рассказ про комьюнити + узкая форма справа».
   Клиент свёл секцию к одному действию, поэтому осталась одна карточка
   по центру: шапка, три поля, кнопка.

   Вид самих полей лежит в layout.css рядом с .btn — их делит с этой формой
   попап подарочного сертификата. Здесь только раскладка.

   Карточка формы стоит на --main-bg, а не на --card-bg: в тёмной теме
   --card-bg и --input-bg это один и тот же #232325, и поля слились бы
   с подложкой.
   ========================================================================== */

/* Шапка секции по центру: у общего .section__head две равные колонки,
   а здесь заголовок и подводка идут столбиком над формой. */
.lead__head {
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
}

.lead__head .section__text {
  margin-top: 12px;
}

/* --------------------------------------------------------------------------
   Карточка формы
   -------------------------------------------------------------------------- */

.lead__form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  /* Форма стала единственным содержимым секции и шире прежних 480:
     три поля в узкой колонке посреди пустой страницы выглядели бы
     обрезком старой раскладки. */
  max-width: 720px;
  margin-inline: auto;
  padding: var(--pad-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-card);
  background-color: var(--main-bg);
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}

/* Обязательное правило, а не перестраховка: display: flex выше перебивает
   браузерное display: none у атрибута hidden, и спрятанная форма осталась бы
   на экране рядом с благодарностью. */
.lead__form[hidden] {
  display: none;
}

/* Имя и телефон делят строку: на ширине 720 каждое из них в одиночку
   растянулось бы на всю карточку и читалось бы как анкета. */
.lead__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.lead__submit {
  margin-top: 4px;
}

/* --------------------------------------------------------------------------
   Экран благодарности

   Заменяет форму целиком, а не приписывается снизу: строку статуса под
   кнопкой на длинной странице легко пропустить.
   -------------------------------------------------------------------------- */

.lead__thanks {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap);
  max-width: 720px;
  margin-inline: auto;
  padding: var(--pad-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-card);
  background-color: var(--main-bg);
  text-align: center;
}

.lead__thanks[hidden] {
  display: none;
}

.lead__thanks-icon {
  color: var(--success);
}

.lead__thanks-title {
  font-size: var(--fs-h4);
  line-height: 1.25;
}

.lead__thanks-text {
  color: var(--text-gray);
  font-size: var(--fs-lead);
  line-height: var(--lh-text);
}

/* --------------------------------------------------------------------------
   Ступени
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
  .lead__row {
    grid-template-columns: 1fr;
  }
}