/* =====================================================================
   Бронирование (booking.html) — только то, чего нет в base.css.
   Страница-задача: короткое открытие → форма заявки слева, выбранный номер справа
   (фото 4:5, как в карточках номеров) → после отправки — «выписка» с крупным номером заявки.
   Модуль Контура (#kontur-widget) занимает всю ширину и заменяет форму.
   ===================================================================== */

/* ---------- Открытие: без фото главы, форма начинается на первом экране ---------- */
.book-opener .opener__lead { max-width: 31em; }
.book__grid { align-items: start; }

/* ---------- Модуль Контура ---------- */
.kontur-widget { grid-column: 1 / -1; min-width: 0; }
.kontur-widget:empty { display: none; }

/* ---------- Колонки: форма — слева, выбранный номер — справа ---------- */
.book__main { grid-column: 2 / span 6; grid-row: 1; min-width: 0; }
.book__main.is-loading { min-height: 32rem; }            /* место под форму, пока грузятся номера */
.book__aside { grid-column: 9 / span 4; grid-row: 1; min-width: 0; }
@media (min-width: 901px) and (min-height: 720px) {
  .book__aside { position: sticky; top: calc(var(--header-h) + var(--s-6)); }
}

/* ---------- Форма ---------- */
.form__grid + .book__step { margin-top: var(--s-6); padding-top: var(--s-7); border-top: 1px solid var(--rule); }
.book__form .choice { min-height: 46px; align-items: center; }
.choice label:has(input:disabled) { color: var(--ink-3); cursor: not-allowed; }
.choice input:disabled { border-color: var(--rule-strong); cursor: not-allowed; }
/* дата: при фокусе нижняя линия терракотовая 2 px, как у остальных полей */
.date.field__input:focus-within { border-bottom-color: var(--terracotta); }
.field.is-invalid .date.field__input:focus-within { border-bottom-color: var(--terracotta-deep); }
.book__form .form__actions { margin-top: var(--s-3); }
.book__form .form__note { max-width: 22em; }

/* ---------- Выбранный номер ---------- */
.summary__media { aspect-ratio: 4 / 5; max-height: min(56vh, 560px); }
.summary__media img { animation: summary-in .6s var(--ease-out) both; }
.summary__body { padding-top: var(--s-5); }
.summary__title { text-wrap: balance; }
.summary__meta { margin-top: var(--s-3); }
.summary__price { margin-top: var(--s-2); font-size: var(--fs-small); color: var(--ink); }
.summary__empty {
  padding-top: var(--s-4); border-top: 1px solid var(--rule);
  font-size: var(--fs-small); font-style: italic; line-height: 1.5; color: var(--ink-3); max-width: 20em;
}
@keyframes summary-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .summary__media img { animation: none; } }

/* ---------- Заявка принята: крупный номер заявки — главный момент страницы ---------- */
.confirm:focus { outline: none; }
.confirm__title:focus { outline: none; }
.confirm__id { margin-top: var(--s-6); }
.confirm__no {
  margin-top: var(--s-2);
  font-size: var(--fs-phone); line-height: 1; letter-spacing: .01em;
  font-variant-numeric: lining-nums tabular-nums;   /* номер диктуют по телефону: ноль не должен читаться как «о» */
  white-space: nowrap;
}
.confirm__stay { margin-top: var(--s-5); }
.confirm__dates {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5) var(--gutter);
  margin-top: var(--s-7); padding: var(--s-5) 0 var(--s-6);
  border-top: 1px solid var(--rule-strong); border-bottom: 1px solid var(--rule);
}
.confirm__dates dd { margin-top: var(--s-2); font-size: var(--fs-h3); line-height: 1.2; }
.confirm__wd { display: block; font-size: var(--fs-body); font-style: italic; color: var(--ink-2); }
.confirm__next { margin-top: var(--s-7); font-size: var(--fs-lead); line-height: 1.3; }
.confirm__prose { margin-top: var(--s-4); }
.confirm__prose a { color: var(--ink); }
.confirm__actions { margin-top: var(--s-7); }

/* ---------- Адаптив ---------- */
@media (max-width: 1100px) {
  .book__main { grid-column: 2 / span 7; }          /* левый край — на колонке заголовка страницы */
  .book__aside { grid-column: 9 / span 4; }
}
@media (max-width: 900px) {
  .book__main, .book__aside { grid-column: 1 / -1; }
  .book__main { grid-row: 2; }
  /* компактная строка над формой: миниатюра 4:5 + название, вместимость, цена */
  .book__aside {
    grid-row: 1;
    display: grid; grid-template-columns: minmax(84px, 26%) minmax(0, 1fr); column-gap: var(--s-4); align-items: center;
    margin-bottom: var(--s-7); padding-bottom: var(--s-5); border-bottom: 1px solid var(--rule);
  }
  .book__aside.is-empty { display: none; }
  .summary__media { max-height: none; }
  .summary__body { padding-top: 0; }
  .summary__title { font-size: 1.375rem; }
  .summary__meta { margin-top: var(--s-1); }
  .book__main.is-loading { min-height: 24rem; }
}
@media (max-width: 640px) {
  .book__form .form__actions { flex-direction: column; align-items: stretch; }
  .book__form .form__actions .btn { width: 100%; }
  .confirm__dates { grid-template-columns: minmax(0, 1fr); }
  .confirm__no { font-size: clamp(2.25rem, 11vw, 3rem); }
}