/*
 * Первый экран раздела «Запросы»: две колонки — объяснение слева, заявка справа.
 * DGT-UX-06, docs/sdd/portal-one-viewport.md §3.
 *
 * Файл подключается только со страницы /requests/ (тег <link> в
 * layouts/requests/list.html), поэтому здесь можно уточнять общие классы
 * .support-* — на других страницах эти правила не появятся. Общий
 * support-requests.css и courses-v2.css не трогаются: их правят другие задачи.
 *
 * ЧТО ИМЕННО ОБЕЩАНО. «Один viewport» здесь означает то же неравенство, что и в
 * scripts/check-workbench-landing.mjs: первый блок целиком помещается над
 * сгибом, то есть нижняя граница .request-hero не ниже window.innerHeight.
 * Доска запросов и модалка остаются вторым экраном — SDD §3 прямо запрещает
 * притворяться, что доска, форма и модалка влезают в 640 px.
 */

/* ------------------------------------------------------------ сетка экрана */

.request-hero {
  display: grid;
  gap: 24px 40px;
  align-items: start;
  grid-template-areas:
    "head order"
    "text order";
  grid-template-columns: minmax(0, 1fr) minmax(340px, 430px);
  grid-template-rows: auto 1fr;
}

.request-hero__head { grid-area: head; }
.request-hero__order { grid-area: order; }
.request-hero__text { grid-area: text; }

/*
 * Первый блок резервирует высоту экрана: доска начинается ниже, а раскрытие
 * оплаты не сдвигает её вниз — карточка растёт внутри уже занятого места.
 * Вычитаем шапку (64 px), отступы .portal-main и 86 px, на которых видно
 * начало доски: читатель должен понимать, что страница на этом не кончилась.
 * svh, а не vh: vh считается по развёрнутой адресной строке и даёт обрезанный
 * блок. Верхняя граница 720 px — чтобы на высоких экранах не росла пустота.
 */
@media (min-width: 900px) {
  .request-hero {
    min-height: min(calc(100svh - var(--course-header-height) - 150px), 720px);
  }
}

.request-hero__head h1 {
  margin: 0;
  color: var(--course-text);
  font-family: var(--course-font);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.12;
}

.request-hero__lead {
  margin: 10px 0 0;
  max-width: 60ch;
  color: var(--course-muted);
  font-size: 15px;
  line-height: 1.55;
}

.request-hero__text .support-page__intro {
  max-width: 62ch;
  font-size: 14px;
  line-height: 1.65;
}

.request-hero__text .support-page__intro > :first-child { margin-top: 0; }
.request-hero__text .support-page__intro > :last-child { margin-bottom: 0; }

.request-hero__text .support-page__intro ol {
  margin: 0 0 12px;
  padding-left: 20px;
}

.request-hero__text .support-page__intro li { margin: 0 0 4px; }

/* Ссылка на доску — не строчная, а органом управления: её жмут пальцем. */
.request-hero__board-link {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  margin-top: 8px;
  color: var(--course-cyan);
}

/* ------------------------------------------------------- карточка заявки */

.request-card {
  padding: 18px 20px 20px;
  border: 1px solid var(--course-line);
  border-radius: var(--course-radius);
  background: var(--course-surface-raised);
}

.request-card__head h2 {
  margin: 0;
  color: var(--course-text);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
}

.request-card__head p {
  margin: 6px 0 14px;
  color: var(--course-muted);
  font-size: 13px;
  line-height: 1.5;
}

/* На шаге оплаты пояснение уже сделало свою работу и только занимает высоту:
   именно эти 45 px не дают карточке влезть в экран ноутбука 1366×768. */
.request-card[data-request-step="2"] .request-card__head p { display: none; }

/* Плотнее общего .support-form: карточка обязана уместиться в один экран. */
.request-card .support-form {
  gap: 14px;
  max-width: none;
}

.request-card .support-field { gap: 4px; }

.request-card .support-field > label { font-size: 13px; }

.request-card .support-field input[type="text"],
.request-card .support-field input[type="number"],
.request-card .support-field textarea {
  padding: 9px 11px;
}

.request-card .support-field textarea { min-height: 68px; }

.request-card .support-field__hint {
  font-size: 12px;
  line-height: 1.45;
}

.request-form__step {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Скрытый шаг не должен возвращаться через display выше. */
.request-form__step[hidden] { display: none; }

.request-form__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.request-form__next {
  min-height: 44px;
  padding: 10px 18px;
}

.request-form__next[hidden] { display: none; }

.request-form__hint {
  margin: 0;
  color: var(--course-subtle);
  font-size: 12px;
  line-height: 1.4;
}

.request-form__step--pay { gap: 10px; }

/* Строка-итог первого шага: занимает 40 px вместо 240 px полей, поэтому
   карточка остаётся в пределах экрана и с раскрытой оплатой. */
.request-form__summary {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  padding: 6px 10px;
  border: 1px solid var(--course-line);
  border-radius: var(--course-radius);
  background: var(--course-control);
  color: var(--course-muted);
  font-size: 12px;
  line-height: 1.4;
}

.request-form__summary[hidden] { display: none; }

.request-form__summary-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.request-form__back {
  flex: none;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--course-line-strong);
  border-radius: var(--course-radius);
  background: transparent;
  color: var(--course-text);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.request-form__back:hover { border-color: var(--course-cyan); }

/* Согласия и кнопка оплаты идут одним блоком: показать оплату без оферты и
   политики нельзя, поэтому они не разъезжаются по разным шагам. */
.request-card .checkout-legal {
  gap: 8px;
  padding: 10px;
}

.request-card .checkout-legal .support-consent { align-items: center; }

/* Подпись согласия — это нажимаемая область чекбокса, поэтому у неё свои 40 px.
   Именно block, а не flex: flex превратил бы ссылки внутри подписи в отдельные
   элементы и склеил бы слова («Принимаюофертуиусловия»). */
.request-card .checkout-legal .support-consent label {
  display: block;
  min-height: 40px;
  padding: 8px 0;
  font-size: 12px;
  line-height: 1.45;
}

.request-card .checkout-legal .support-consent input {
  width: 18px;
  height: 18px;
  margin-top: 0;
}

.request-card .checkout-trust {
  padding-top: 8px;
  gap: 6px;
}

.request-card .checkout-trust small { font-size: 10px; }

.request-card .support-form__actions { gap: 10px; }

.request-card [data-support-submit] {
  min-height: 44px;
  padding: 11px 18px;
}

/* Заглушка «скоро» занимает ту же ячейку, что и карточка: правая колонка не
   пустует, когда касса выключена (SDD §3). */
.support-soon.request-card {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--course-surface);
}

/* --------------------------------------------- палец, а не мышь: 40 px */

/*
 * Область нажатия любого органа управления раздела — не меньше 40 px по
 * высоте. Пресеты сумм и фильтры доски по умолчанию 30 px: это ровно тот
 * размер, в который на телефоне не попадают.
 */
.support-page .support-chip {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
}

.support-page .support-sort select {
  min-height: 40px;
  padding: 8px 10px;
}

.support-page .support-sort label {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
}

/* ----------------------------------------------------------- телефон */

/*
 * ЧЕСТНО ПРО 390×640.
 *
 * Две колонки на телефоне не помещаются, и растягивать их — обман. Считаем
 * бюджет так же, как раздел «Мобильный экран: 640 px честно» в SDD:
 *
 *   640 px экрана − 64 px липкой шапки − 24 px верхнего отступа .portal-main
 *   = 552 px над сгибом.
 *
 * Туда влезает: кикер (25) + h1 в две строки (58) + лид в три строки (71) +
 * первый шаг заявки с двумя полями и кнопкой (~330). Итого ~485 px — влезает
 * с запасом. Не влезает ничто из остального: пояснительный текст, доска,
 * модалка.
 *
 * Отсюда решение, а не «колонки просто складываются»:
 *
 *   1. Колонки складываются в одну, но порядок меняется по смыслу: заголовок и
 *      лид → карточка заявки → пояснительный текст. То есть форма НЕ уезжает
 *      вниз под простыню объяснения: над сгибом остаётся первый шаг заявки
 *      целиком, вместе с кнопкой «Перейти к оплате». В разметке этот порядок и
 *      записан, поэтому на телефоне не нужны никакие order-перестановки, а на
 *      десктопе тот же DOM раскладывается по grid-template-areas.
 *   2. Карточке заявки хватает первого шага: контакт, сумма и согласия
 *      раскрываются по кнопке. Это и есть причина, по которой шагов два, — на
 *      телефоне полная форма это два с половиной экрана.
 *   3. Ниже, когда читатель ушёл на доску, появляется закреплённая кнопка «К
 *      форме заявки»: наверх не надо мотать, обратный путь один тап. Кнопка
 *      исчезает, как только карточка снова на экране, — иначе она закрывала бы
 *      ту самую форму, к которой ведёт.
 *
 * Обещание «не надо скроллить» на телефоне не даётся и не изображается:
 * даётся проверяемое — первый шаг заявки виден без прокрутки, а обратный путь
 * к нему всегда в одном нажатии.
 */
@media (max-width: 899px) {
  .request-hero {
    display: flex;
    flex-direction: column;
    gap: 18px;
  }

  .request-hero__head h1 { font-size: 25px; }

  .request-hero__lead {
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.5;
  }

  /* Пояснение к карточке дублирует текст, который на телефоне идёт следом:
     над сгибом важнее поля, а не второе объяснение того же. */
  .request-card__head p { display: none; }

  .request-card__head h2 { font-size: 17px; }

  .request-card { padding: 16px; }

  /* Отбивка от подвала. Местом под закреплённую кнопку этот отступ быть не мог:
     подвал печатается ПОСЛЕ .support-page (layouts/_default/baseof.html), и
     кнопка ложилась не на раздел, а на ссылки подвала. Резерв переехал туда,
     где кончается документ, — см. .site-footer ниже. */
  .support-page { padding-bottom: 24px; }
}

@media (max-width: 420px) {
  .request-hero__head h1 { font-size: 23px; }
  .request-card .support-field textarea { min-height: 62px; }
}

/* ------------------------------------------- закреплённая кнопка возврата */

.request-jump {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: 80;
  display: none;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 16px;
  border: 1px solid var(--course-cyan);
  border-radius: var(--course-radius);
  background: var(--course-cyan);
  color: var(--course-bg);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}

.request-jump:hover { opacity: 0.9; }

@media (max-width: 899px) {
  /* Показывается, когда карточка ушла с экрана. Без JavaScript состояние никто
     не проставит, поэтому там кнопка видна всегда: якорь работает и так. */
  .request-jump[data-request-jump-state="on"] { display: flex; }
  html.no-js .request-jump { display: flex; }

  /* Кнопка закреплена у нижнего края экрана и потому в конце страницы ложилась
     ровно на подвал: замер на 390×640, 390×844 и 768×900 давал 48px перекрытия,
     а под кнопкой оказывались ссылки «Оферта / Возвраты / Политика ПДн» и
     строка с ИНН. Документ заканчивается подвалом, поэтому место кнопке
     отводится здесь: 60px занимает она сама (48px высоты плюс 12px отступа
     снизу), ещё 12px — воздух. Правило живёт в css/requests.css, который
     подключает только layouts/requests/list.html: кнопка есть лишь на этой
     странице, и подвалы остальных разделов резерв не касается. */
  .site-footer { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
}

/* --------------------------------------------------------------- печать */

@media print {
  .request-hero {
    display: block;
    min-height: 0;
  }

  .request-jump { display: none; }

  /* На бумаге скрытый шаг всё равно нужен: печатают форму целиком. */
  .request-form__step[hidden] { display: block; }
}