/* Формы: заявка автора на странице Creator Program, подписка на запуск
   Маркетплейса и обращение в поддержку. Все живут в белой карточке; поля
   и подписи — компоненты из components.css, здесь только раскладка карточки.
   Данные и обработку даёт плагин SD Forms, разметку - sd-forms/form.php. */

.form-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  background: var(--bg-surface);
  box-shadow: 0 8px 24px -4px rgba(156, 141, 128, 0.1);
}

.form-card__intro {
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--text-body);
}

.form-grid {
  display: grid;
  gap: var(--space-5) var(--space-6);
}

/* Поле занимает всю ширину сетки: ссылки, рассказ о себе, письмо. */
.form-field--wide { grid-column: 1 / -1; }

/* Согласие на обработку: чекбокс и подпись в одну строку. */
.consent {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--text-body);
}

.consent .checkbox { margin-top: 1px; }

.consent a { text-decoration: underline; }

.form-card__actions { display: flex; }

.form-card__actions .btn { width: 100%; }

@media (min-width: 768px) {
  .form-card {
    gap: var(--space-8);
    padding: var(--space-10);
  }

  .form-card__intro { font-size: var(--fs-lg); }

  .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .form-card__actions .btn { width: auto; }
}

/* ============================================================
   ПОДПИСКА НА ЗАПУСК
   Форма горизонтальная: имя, почта и кнопка стоят в одну линию по низу,
   подписи полей над ними, ошибка поля и согласие под ними. Поля делят
   свободную ширину поровну и не растягиваются, кнопка держит свой размер
   и закрывает правый край карточки. Компоненты те же, что во всех формах.
   Ниже 1024 карточка остаётся обычным столбиком и переносит ряд, а не
   выезжает за контейнер.
   ============================================================ */

/* front.css плагина задаёт .sdf-form--inline{display:flex; align-items:flex-end; gap:1rem}
   тем же весом селектора (0,1,0), что и .form-card, и грузится последним - без
   явного правила оно действует на любой ширине, включая мобильную, и
   align-items:flex-end не растягивает детей на всю ширину, а сжимает их до
   контента и прижимает к правому краю (ровно баг с рваной Waitlist-формой на
   375). .sdf-form--inline.waitlist__form - специфичность 0,2,0, побеждает
   .sdf-form--inline независимо от порядка подключения. Ниже 1024 карточка -
   обычный столбик, как .form-card; на 1024+ включается строчная сетка. */
.sdf-form--inline.waitlist__form {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-6);
}

@media (min-width: 768px) {
  .sdf-form--inline.waitlist__form { gap: var(--space-8); }
}

@media (min-width: 1024px) {
  .sdf-form--inline.waitlist__form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    column-gap: var(--space-6);
    row-gap: 0;
    align-items: end;
  }

  /* Сетка полей, ячейки полей и обёртка согласия становятся прозрачными:
     подписи, строки ввода и ошибки ложатся прямо в сетку карточки. Строки
     называем вручную - автоматическая раскладка ставит каждый элемент в свою. */
  .waitlist__form .form-grid,
  .waitlist__form .form-grid > div,
  .waitlist__form .form-consent { display: contents; }

  .waitlist__form .form-card__intro {
    grid-area: 1 / 1 / 2 / -1;
    max-width: 720px;
    margin-bottom: var(--space-8);
  }

  .waitlist__form .form-grid > div:nth-child(1) .field-label { grid-area: 2 / 1 / 3 / 2; }
  .waitlist__form .form-grid > div:nth-child(1) .field       { grid-area: 3 / 1 / 4 / 2; }
  .waitlist__form .form-grid > div:nth-child(1) .field-error { grid-area: 4 / 1 / 5 / 2; }

  .waitlist__form .form-grid > div:nth-child(2) .field-label { grid-area: 2 / 2 / 3 / 3; }
  .waitlist__form .form-grid > div:nth-child(2) .field       { grid-area: 3 / 2 / 4 / 3; }
  .waitlist__form .form-grid > div:nth-child(2) .field-error { grid-area: 4 / 2 / 5 / 3; }

  /* Кнопка - третья колонка той же строки, что и строки ввода. */
  .waitlist__form .form-card__actions { grid-area: 3 / 3 / 4 / 4; }

  .waitlist__form .consent {
    grid-area: 5 / 1 / 6 / -1;
    margin-top: var(--space-6);
  }

  .waitlist__form .form-consent .field-error { grid-area: 6 / 1 / 7 / -1; }

  .waitlist__form .form-card__status { grid-column: 1 / -1; }
}