/*
  Лендинг и онбординг /prototype/landing (M1-4, п. 1) и настоящая форма данных рождения
  (Views/Home/Index.cshtml, Views/Chart/Edit.cshtml — задание M2-2/M2-3) — форма, автодополнение
  места (ARIA combobox) и FAQ на <details>. Токены — см. css/tokens.css; интерактив — js/landing.js.

  .landing-intro ниже — только витрина /prototype/landing (Views/Prototype/Landing.cshtml, не
  переделываем в M8-4). Настоящий лендинг (Views/Home/Index.cshtml) с M8-4 — блок .landing и
  .landing__* следом: одна колонка до 768 px (DOM-порядок = порядок на экране — вступление →
  форма → «что получите» → FAQ), сетка с именованными областями от 768 px, форма занимает обе
  строки правой колонки (mvp.md «Дизайн: поправки», п. 10; решение 20).
*/

.landing-intro {
  max-width: 38rem;
}

.landing-card {
  padding: var(--space-5);
}

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

.landing__intro {
  max-width: 38rem;
}

@media (min-width: 48rem) {
  .landing {
    grid-template-columns: minmax(0, 7fr) minmax(19rem, 5fr);
    grid-template-areas:
      "intro    form"
      "benefits form"
      "faq      faq";
    /* Форма занимает две строки и делит свою высоту между ними; без 1fr у второй строки лишнее
       поровну уходит и в первую — между вступлением и «Что вы получите» зияет разрыв. */
    grid-template-rows: auto 1fr auto;
    align-items: start;
    column-gap: var(--space-7);
  }

  .landing__intro {
    grid-area: intro;
  }

  .landing__form {
    grid-area: form;
  }

  .landing__benefits {
    grid-area: benefits;
  }

  .landing__faq {
    grid-area: faq;
  }
}

/* «Что вы получите» — три коротких пункта (задание M8-4). Маркер — не текстовый ::marker (его
   нет в списке без list-style), а точка --accent-2: это именно токен для «Луна, метки, глифы»
   (mvp.md, таблица токенов), декоративная точка — не текст и не несёт смысла сама по себе,
   поэтому её контраст к фону не нормируется (в отличие от индикатора активной подсказки ниже). */
.landing-benefits {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-4);
}

.landing-benefits__item {
  position: relative;
  padding-left: var(--space-5);
}

.landing-benefits__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--accent-2);
}

.landing-form .field {
  margin-bottom: var(--space-4);
}

/* Дата и время — одной строкой от 768 px (задание M8-4: «поля не растягиваются на 560 px»); до
   768 px — друг под другом, как раньше (просто общий контейнер вокруг тех же двух .field). */
.landing-form__row {
  margin-bottom: var(--space-4);
}

.landing-form__row .field {
  margin-bottom: var(--space-4);
}

.landing-form__row .field:last-child {
  margin-bottom: 0;
}

@media (min-width: 48rem) {
  .landing-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: var(--space-3);
  }

  .landing-form__row .field {
    margin-bottom: 0;
  }
}

.landing-form__time-unknown {
  margin-bottom: var(--space-2);
}

.field-hint {
  margin: 0 0 var(--space-4);
}

/* Ошибки формы (задание M2-2: «Ошибки calc → понятные русские сообщения у полей») — тот же
   цвет, что у замечаний экспертного режима (css/expert.css .expert-error): в токенах бренда
   нет отдельного «опасного» цвета, --accent используется для любого текста, требующего внимания. */
.field-error {
  margin: var(--space-1) 0 0;
  color: var(--accent);
  font-size: var(--text-small);
}

.form-error-summary {
  margin: 0 0 var(--space-4);
  padding: var(--space-3);
  border: var(--line-width) solid var(--accent);
  border-radius: var(--radius-md);
  color: var(--accent);
}

.form-error-summary__title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-text);
  font-size: var(--text-body);
  font-weight: var(--font-weight-semibold);
  color: var(--accent);
}

.form-error-summary__list {
  margin: 0;
  padding-left: 1.25rem;
}

.form-error-summary__list a {
  color: var(--accent);
}

.landing-form__consent {
  align-items: flex-start;
  margin: var(--space-5) 0 var(--space-5);
}

.landing-form__consent input {
  margin-top: 0.2em;
}

.landing-form__submit {
  width: 100%;
}

@media (min-width: 30rem) {
  .landing-form__submit {
    width: auto;
  }
}

/* Автодополнение места — паттерн ARIA combobox */

.combobox {
  position: relative;
}

.combobox__listbox {
  position: absolute;
  z-index: 20;
  top: calc(100% + var(--space-1));
  left: 0;
  right: 0;
  max-height: 16rem;
  overflow-y: auto;
  background: var(--bg);
  border: var(--line-width) solid var(--line);
  border-radius: var(--radius-md);
}

/* Открывается вверх, если поле в нижней части экрана — подсказки не должны прятаться под
   экранной клавиатурой на мобильных устройствах (js/landing.js вычисляет направление). */
.combobox__listbox--above {
  top: auto;
  bottom: calc(100% + var(--space-1));
}

.combobox__option {
  min-height: 44px;
  /* border-left всегда 4px (прозрачный/--accent) — переключение .is-active меняет только цвет,
     текст не сдвигается. */
  padding: var(--space-3);
  border-left: 4px solid transparent;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.combobox__option:hover {
  background: var(--surface);
}

/* Активная подсказка с клавиатуры (задание M8-4) — раньше единственным отличием был фон
   --surface, а он у --bg (фон списка) почти не отличается по светлоте (контраст ≈ 1,1:1 в обеих
   темах) — activedescendant было не видно. Полоса --accent слева — сама индикатор: контраст
   к --bg ⩾ 5:1 в обеих темах (только текст на заливке --accent — это --on-accent, тут другой
   случай, текст остаётся на --surface); текст того же цвета и полужирный — доп. усиление, не
   единственный сигнал. */
.combobox__option.is-active {
  background: var(--surface);
  border-left-color: var(--accent);
  color: var(--accent);
  font-weight: var(--font-weight-semibold);
}

/* Статус «Ничего не нашли» (задание M8-4) — отдельный элемент вне role=listbox, под полем
   (см. Views/Shared/_ChartForm.cshtml, js/landing.js). Пуст по умолчанию и коллапсирует без
   текста (:empty) — не оставляет пустого отступа, пока сообщения нет. Не путать с .combobox__empty
   ниже — старым классом того же текста внутри listbox на витрине /prototype/landing, который
   эта задача не трогает. */
.combobox__status {
  margin: var(--space-2) 0 0;
  color: var(--ink-soft);
  font-size: var(--text-small);
}

.combobox__status:empty {
  margin: 0;
}

/* Только витрина /prototype/landing (Views/Prototype/_GeoResults.cshtml) — там «Ничего не
   нашли» по-прежнему рисуется внутри role=listbox, эту разметку M8-4 не переделывает. */
.combobox__empty {
  padding: var(--space-3);
  margin: 0;
}

/* FAQ */

.faq__item {
  padding: var(--space-4) 0;
  border-bottom: var(--line-width) solid var(--line);
}

.faq__item:first-child {
  border-top: var(--line-width) solid var(--line);
}

/* Две колонки на широком экране (задание M8-4, «можно») — 4 вопроса, значит ровно 2 ряда;
   :first-child выше рисует верхнюю границу только у первого пункта (верно для одной колонки),
   здесь её нужно ещё и второму — иначе у правого пункта верхнего ряда её не будет. */
@media (min-width: 64rem) {
  .faq {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-6);
  }

  .faq__item:nth-child(-n + 2) {
    border-top: var(--line-width) solid var(--line);
  }
}

.faq__item summary {
  cursor: pointer;
  font-weight: var(--font-weight-medium);
  min-height: 44px;
  display: flex;
  align-items: center;
}

/* Маркер раскрытия — общее правило details > summary::before в site.css (M8-1). Здесь раньше
   был ::marker, но display: flex выше гасит его — правило было мёртвым, поэтому убрано, а не
   перенесено. */

.faq__item p {
  margin-top: var(--space-3);
  color: var(--ink-soft);
}