/* =========================================================================
   Страница аренды актового зала /zal и экран успеха /zal/otpravleno.
   Грузится ПОСЛЕ catalog.css и опирается на его токены, шрифты, .btn, шапку и
   футер — страница должна читаться как часть публичной зоны, дублировать базу
   незачем. Здесь только собственные блоки, префикс hl__.
   Регистр продуктовый (§2/§3 DESIGN.md), шкала — та же, что у соседней
   посадочной /prepodavatelyam (teachers.css): крупный герой, дальше спокойные
   блоки на surface. Витринная шкала лендинга сюда не переносится
   (The Brand-Register Rule).
   Инлайн-стилей нет и быть не может: CSP style_src 'self'.
   ========================================================================= */

/* Токены статуса «ошибка» в catalog.css не объявлены (витрине они не нужны), а
   форме нужны: ошибки валидации и провал капчи. Значения — те же, что в
   app/frontend/entrypoints/application.css, включая тёмную пару. */
:root{ --c-crit:#B23A32; --c-crit-soft:#F3DBD8; }
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){ --c-crit:#E37167; --c-crit-soft:#3A1F1C; }
}
:root[data-theme="dark"]{ --c-crit:#E37167; --c-crit-soft:#3A1F1C; }

/* Страница длиннее витрины и состоит из прозы — колонка уже 72rem каталога,
   иначе строки уезжают за комфортные 70ch. Оба класса на одном элементе,
   поэтому специфичность указываем явно. */
.catalog__main.hl{ max-width:60rem; }
.hl{ display:flex; flex-direction:column; gap:32px; padding-top:40px; }

/* ---- Герой: единственное место с крупной типографикой ---- */
.hl__hero{ display:flex; flex-direction:column; align-items:flex-start; gap:16px; }
/* Ширину заголовку не режем (правка владельца по живой странице): при max-width
   в 20ch фраза ломалась в три коротких строки и висела узкой колонкой. Меру
   держит сама колонка страницы, а ровные строки — text-wrap:balance. */
.hl__title{ margin:0; font-size:clamp(1.75rem,1.2rem + 2.4vw,2.75rem);
  font-weight:700; line-height:1.15; letter-spacing:-.02em; color:var(--c-text); text-wrap:balance; }
.hl__lead{ margin:0; max-width:60ch; color:var(--c-muted);
  font-size:1rem; line-height:1.6; text-wrap:pretty; }
/* Главное действие страницы — крупнее обычной кнопки витрины. */
.hl__cta{ padding:12px 24px; font-size:1rem; }

/* ---- Справка о зале: список определений, а не карточки-фичи ----
   Строки-факты читаются как спецификация: слева подпись, справа ответ.
   Ряд одинаковых плиток с иконками здесь был бы декорацией без содержания. */
.hl__facts{ margin:0; border:1px solid var(--c-border); border-radius:var(--r-xl);
  background:var(--c-surface); overflow:hidden; }
.hl__fact{ display:grid; gap:4px; padding:14px 20px; }
.hl__fact + .hl__fact{ border-top:1px solid var(--c-border); }
.hl__fact dt{ font-size:.75rem; font-weight:600; color:var(--c-muted); }
.hl__fact dd{ margin:0; max-width:60ch; font-size:.875rem; line-height:1.55;
  color:var(--c-text); text-wrap:pretty; }

/* ---- Обычный блок: карточка на surface, как .cblock витрины и .tl__block ---- */
.hl__block{ margin:0; padding:24px; border:1px solid var(--c-border);
  border-radius:var(--r-xl); background:var(--c-surface); }
.hl__h2{ margin:0 0 16px; font-size:1.125rem; font-weight:700; letter-spacing:-.01em;
  color:var(--c-text); }
.hl__text{ margin:0 0 16px; max-width:70ch; color:var(--c-muted);
  font-size:.875rem; line-height:1.55; text-wrap:pretty; }

/* Перечни — галочка вместо буллета: это списки того, что клуб берёт и что
   привозит, читаются как обязательства, а не как маркированный текст. */
.hl__list{ list-style:none; margin:0; padding:0; display:grid; gap:10px;
  max-width:70ch; font-size:.875rem; line-height:1.5; color:var(--c-text); }
.hl__list li{ position:relative; padding-left:24px; }
.hl__list li::before{ content:"\2713"; position:absolute; left:0; top:0;
  color:var(--c-accent-ink); font-weight:700; }

/* Плашка ограничения: тон поверхности, без цветной боковой полосы и без
   тревожного crit — это правило клуба, а не ошибка пользователя. */
.hl__note{ margin:20px 0 0; padding:14px 16px; border-radius:var(--r-md);
  background:var(--c-surface-2); max-width:70ch; color:var(--c-text);
  font-size:.8125rem; line-height:1.55; text-wrap:pretty; }

/* Шаги — настоящая последовательность, поэтому нумерованы; кружки рисуем сами,
   дефолтные маркеры <ol> выпадают за карточку (та же причина, что в catalog.css). */
.hl__steps{ list-style:none; counter-reset:step; margin:0; padding:0;
  display:flex; flex-direction:column; gap:16px;
  max-width:70ch; color:var(--c-muted); font-size:.875rem; line-height:1.55; }
.hl__steps li{ counter-increment:step; position:relative; padding-left:38px; }
.hl__steps li::before{ content:counter(step); position:absolute; left:0; top:0;
  display:grid; place-items:center; width:26px; height:26px; border-radius:var(--r-full);
  background:var(--c-accent-soft); color:var(--c-text); font-size:.75rem; font-weight:700; }
.hl__steps b{ display:block; color:var(--c-text); font-weight:600; }

/* ---- FAQ: та же механика, что у витрины и посадочной (details + свой «+») ---- */
.hl__block--faq{ padding-bottom:8px; }
.hl__faq + .hl__faq{ border-top:1px solid var(--c-border); }
.hl__faq-q{ list-style:none; cursor:pointer; display:flex; align-items:center;
  justify-content:space-between; gap:16px; padding:14px 0;
  font-size:.875rem; font-weight:600; color:var(--c-text); }
.hl__faq-q::-webkit-details-marker{ display:none; }
.hl__faq-q::after{ content:"+"; flex:none; font-size:1.125rem; font-weight:400; line-height:1;
  color:var(--c-accent-ink); transition:transform .2s ease; }
.hl__faq[open] .hl__faq-q::after{ transform:rotate(45deg); }
.hl__faq-q:hover{ color:var(--c-accent-ink); }
.hl__faq-a{ margin:0 0 16px; max-width:70ch; color:var(--c-muted);
  font-size:.875rem; line-height:1.55; text-wrap:pretty; }

/* ---- Фотографии зала ----
   Секция условная (show.html.erb рендерит её только когда @photos.any?):
   снимки даёт владелец, а пустая серая рамка-заглушка в вёрстке хуже, чем её
   отсутствие — страница обязана выглядеть законченной и без единого фото.
   Разметка плитки — кнопка, а не просто <img>: клик открывает лайтбокс,
   тот же контракт, что у галереи лендинга (data-lightbox).
     <ul class="hl__shots" id="hall-shots">
       <li>
         <button type="button" class="hl__shot-btn" data-lightbox data-full="…" data-alt="…">
           <img class="hl__shot" src="…" alt="…" width="…" height="…">
         </button>
       </li>
     </ul>
   Хвост сверх видимого порога сворачивается тем же механизмом, что на лендинге:
   класс is-collapsed на <ul> и атрибут data-gallery-extra на скрытых li/button
   (app/frontend/lib/gallery.ts). */
.hl__shots{ list-style:none; margin:0; padding:0; display:grid; gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.hl__shot{ width:100%; height:auto; aspect-ratio:4 / 3; object-fit:cover;
  border-radius:var(--r-lg); background:var(--c-surface-2); }

/* Плитка — кнопка (клик открывает лайтбокс), поэтому с неё снимается вся
   собственная отделка: рамка, паддинги и фон браузера. */
.hl__shot-btn{ display:block; width:100%; padding:0; border:0; background:none;
  cursor:zoom-in; border-radius:var(--r-lg); overflow:hidden; }

/* Свёрнутый хвост. display:none заодно удерживает loading="lazy" от загрузки
   скрытых кадров и убирает их из порядка обхода клавиатурой. */
.hl__shots.is-collapsed [data-gallery-extra]{ display:none; }
.hl__shots-more{ display:flex; width:max-content; justify-content:center; margin:18px auto 0; }
/* Без этой строки атрибут hidden, который ставит gallery.ts после раскрытия хвоста,
   проигрывает display:flex выше — кнопка остаётся висеть под уже полной галереей. */
.hl__shots-more[hidden]{ display:none; }

@media (max-width: 560px){
  .hl__shots{ grid-template-columns:repeat(2,1fr); gap:10px; }
}

/* ---- Форма заявки ---- */
.hl__form-block{ margin:0; padding:24px; border:1px solid var(--c-border);
  border-radius:var(--r-xl); background:var(--c-surface); scroll-margin-top:16px; }
/* Форма занимает всю ширину карточки: при узком max-width справа оставалась
   пустая колонка и блок читался как незакрытый. Меру держат сами поля —
   короткие идут парами, число человек ограничено отдельно. */
.hl__form{ display:grid; gap:20px; }
/* Число человек — поле на три-четыре знака, во всю строку оно выглядит ошибкой. */
.hl__field--narrow{ max-width:14rem; }
/* Короткие поля парами: имя+телефон, дата+время. Треки задаём явно — auto-fit
   при одном элементе в строке оставлял бы лишний зазор справа. */
.hl__row{ display:grid; gap:16px; grid-template-columns:1fr; }
.hl__field{ display:grid; gap:6px; }
.hl__label{ font-size:.75rem; font-weight:600; color:var(--c-muted); }
.hl__hint{ font-size:.75rem; font-weight:400; color:var(--c-muted); }

.hl__input{ width:100%; font:inherit; font-size:.875rem; line-height:1.4;
  color:var(--c-text); background:var(--c-surface);
  border:1px solid var(--c-border-strong); border-radius:var(--r-md);
  padding:10px 12px; transition:border-color .15s ease; }
.hl__input::placeholder{ color:var(--c-muted); opacity:1; }
.hl__input:hover{ border-color:var(--c-muted); }
.hl__input:focus-visible{ border-color:var(--c-accent); }
textarea.hl__input{ resize:vertical; min-height:6.5rem; }

/* Сетка часов вместо свободной строки времени. Чипы — обычные кнопки: своего
   контрола не рисуем, кликабельная область у каждой не меньше 44px по высоте. */
.hl__hours{ display:grid; gap:10px; }
/* Без правила ниже правило браузера [hidden]{display:none} проигрывает нашему
   display:grid — сетка часов лезла бы наружу без JS, пока initHallForm() не
   успел снять hidden. Тот же приём — app/assets/stylesheets/lightbox.css:9. */
.hl__hours[hidden]{ display:none; }
.hl__hours-grid{ display:flex; flex-wrap:wrap; gap:6px; }
.hl__hour{ min-height:44px; padding:8px 12px; font:inherit; font-size:.875rem;
  line-height:1.2; color:var(--c-text); background:var(--c-surface);
  border:1px solid var(--c-border-strong); border-radius:var(--r-md); cursor:pointer;
  transition:border-color .15s ease, background-color .15s ease; }
.hl__hour:hover{ background:var(--c-surface-2); }
.hl__hour:focus-visible{ outline:2px solid var(--c-accent); outline-offset:2px; }
/* Выбранный час и середина диапазона выглядят одинаково: посетителю важен сам
   отрезок, а не то, каким кликом он получен. */
.hl__hour--on{ border-color:var(--c-accent); background:var(--c-accent-soft);
  color:var(--c-accent-ink); font-weight:600; }
.hl__hours-summary{ margin:0; font-size:.875rem; font-weight:600; color:var(--c-text); }
.hl__hours-summary:empty{ display:none; }
.hl__hours-foot{ display:flex; flex-wrap:wrap; align-items:baseline;
  justify-content:space-between; gap:8px; }
.hl__hours-reset{ padding:0; font:inherit; font-size:.75rem; font-weight:600;
  color:var(--c-accent-ink); background:none; border:0; cursor:pointer; }
.hl__hours-reset:hover{ text-decoration:underline; }

/* Группы выбора: нативные radio/checkbox в кликабельной строке. Своих
   контролов не рисуем — переизобретать стандартный аффорданс здесь нечем. */
.hl__fieldset{ margin:0; padding:0; border:0; }
.hl__fieldset > .hl__label{ display:block; padding:0; margin-bottom:8px; }
.hl__choices{ display:grid; gap:8px; }
.hl__choice{ display:flex; align-items:center; gap:10px; min-height:44px;
  padding:9px 12px; border:1px solid var(--c-border); border-radius:var(--r-md);
  background:var(--c-surface); font-size:.875rem; line-height:1.35;
  color:var(--c-text); cursor:pointer;
  transition:border-color .15s ease, background-color .15s ease; }
.hl__choice:hover{ background:var(--c-surface-2); }
.hl__choice input{ flex:none; width:18px; height:18px; margin:0;
  accent-color:var(--c-accent); cursor:pointer; }
/* Выбранное состояние читается заливкой, а не только точкой в кружке:
   в списке из восьми строк это единственный способ увидеть выбор одним взглядом. */
.hl__choice:has(input:checked){ border-color:var(--c-accent); background:var(--c-accent-soft); }
/* Фокус живёт на скрытом внутри строки контроле — поднимаем кольцо на всю строку. */
.hl__choice:has(input:focus-visible){ outline:2px solid var(--c-accent); outline-offset:2px; }

/* Ошибки: crit-пара soft-фон + насыщенный ink (§2 DESIGN.md). */
.hl__alert,.hl__errors{ margin:0; padding:12px 16px; border-radius:var(--r-md);
  background:var(--c-crit-soft); color:var(--c-text);
  font-size:.875rem; line-height:1.5; }
.hl__errors{ list-style:none; display:grid; gap:6px; }
.hl__errors li{ position:relative; padding-left:18px; }
.hl__errors li::before{ content:"\2022"; position:absolute; left:4px; top:0;
  color:var(--c-crit); font-weight:700; }
.hl__error{ margin:0; color:var(--c-crit); font-size:.8125rem; font-weight:600; }

.hl__submit{ justify-self:start; padding:12px 24px; font-size:1rem; }
/* Нативный сабмит серверной формы своего JS не получает: состояние «в процессе»
   даёт сам браузер (индикатор загрузки страницы). Стиль disabled нужен, чтобы
   выключенная кнопка не выглядела активной. */
.hl__submit:disabled{ opacity:.45; cursor:not-allowed; }
/* Отметка согласия — в одном ряду с остальными полями формы, галочка сверху
   строки: текст двустрочный на узком экране, выравнивание по базовой линии
   съедало бы верх букв. */
.hl__consent{ display:flex; gap:.5rem; align-items:flex-start; max-width:60ch;
  color:var(--c-muted); font-size:.75rem; line-height:1.5; cursor:pointer; }
.hl__consent input{ flex:none; width:18px; height:18px; margin:2px 0 0;
  accent-color:var(--c-accent); cursor:pointer; }
/* Глобальное a{color:inherit} в catalog.css делает ссылку в приглушённом
   абзаце неотличимой от текста — тот же класс дефекта, что чинили в витрине. */
.hl__consent a{ color:var(--c-accent-ink); font-weight:600; }
.hl__consent a:hover{ text-decoration:underline; }

/* Виджет SmartCaptcha приходит от Яндекса со своей шириной. Ограничиваем её,
   иначе на 360px он выдавливает горизонтальный скролл. overflow:hidden тут
   намеренно НЕ ставим: им можно обрезать всплывающее окно проверки. */
.smart-captcha{ max-width:100%; }

/* ---- Экран успеха ---- */
.hl--sent{ padding-top:48px; }
.hl__sent{ display:flex; flex-direction:column; align-items:flex-start; gap:20px;
  padding:28px 24px; border:1px solid var(--c-border); border-radius:var(--r-xl);
  background:var(--c-surface); }
/* Код — то, ради чего человек задержится на экране: моноширинный, с разрядкой,
   на утопленной плоскости, чтобы его было легко прочитать и продиктовать. */
.hl__code{ display:flex; flex-direction:column; gap:6px; align-self:stretch;
  padding:16px 20px; border-radius:var(--r-lg); background:var(--c-surface-2); }
.hl__code-label{ font-size:.75rem; font-weight:600; color:var(--c-muted); }
.hl__sent-code{ margin:0; font-family:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace;
  font-size:1.625rem; font-weight:700; letter-spacing:.12em; line-height:1.2;
  color:var(--c-text); overflow-wrap:anywhere; }
/* Код и кнопка копирования в одной строке: кнопка стоит у правого края плашки,
   чтобы не разрывать разрядку самого кода. */
.hl__code-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.hl__code-copy{ flex:none; display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; padding:0; color:var(--c-muted); background:var(--c-surface);
  border:1px solid var(--c-border-strong); border-radius:var(--r-md); cursor:pointer;
  transition:color .15s ease, border-color .15s ease; }
.hl__code-copy:hover{ color:var(--c-accent-ink); border-color:var(--c-accent); }
.hl__code-copy:focus-visible{ outline:2px solid var(--c-accent); outline-offset:2px; }
.hl__code-copy svg{ width:20px; height:20px; }
.hl__code-status{ margin:0; font-size:.75rem; font-weight:600; color:var(--c-accent-ink); }
.hl__code-status:empty{ display:none; }
.hl__sent-back{ margin:0; font-size:.875rem; }
.hl__sent-back a{ color:var(--c-accent-ink); font-weight:600; }
.hl__sent-back a:hover{ text-decoration:underline; }

@media (min-width:640px){
  .hl{ gap:40px; padding-top:56px; }
  .hl__fact{ grid-template-columns:11rem 1fr; gap:20px; align-items:baseline;
    padding:16px 24px; }
  .hl__row{ grid-template-columns:1fr 1fr; }
  .hl__choices--two{ grid-template-columns:1fr 1fr; column-gap:16px; }
  /* Перечни из шести-восьми коротких строк в одну колонку выглядят простынёй. */
  .hl__list--two{ grid-template-columns:1fr 1fr; max-width:none; column-gap:24px; }
  /* Плашка под двухколоночным списком тянется по его ширине: при 70ch она читалась
     как обрезок, потому что у неё, в отличие от обычного абзаца, видно фон. */
  .hl__list--two + .hl__note{ max-width:none; }
  .hl__form-block,.hl__sent{ padding:32px; }
}

/* На узком экране главное действие занимает всю ширину: попасть пальцем важнее
   компактности. */
@media (max-width:479px){
  .hl__cta,.hl__submit,.hl__sent .btn{ justify-self:stretch; width:100%; }
  .hl__block,.hl__form-block,.hl__sent{ padding:20px 16px; }
  .hl__fact{ padding:14px 16px; }
}