/* ============================================================
   A.L.E.X. — модуль страниц мега-хаба, ВОЛНА 1 (задача 1094).
   Каркас: karkas-hub-alex.md (#1038, круг #1093/#1099).
   ------------------------------------------------------------
   Правило файла — то же, что у style2.css: ЦВЕТА ТОЛЬКО
   ТОКЕНАМИ. Значения живут ровно в трёх блоках ниже (светлая
   тема, тёмная тема, ветка «без JS»); дальше по файлу — только
   var(--*). Хардкод цвета вне блоков токенов — стоп-фактор
   приёмки.

   Почему отдельный файл, а не блок в style2.css (урок #894):
   style2.css правит соседний круг, а витрина держит ещё и
   старый слой style.css (страницы /uslugi/, /kontakty/ и
   документы). Самостоятельный модуль со своими токенами и
   запасными значениями var(--x, …) работает на обоих слоях и
   ни с кем не конфликтует.

   Подключается только на страницах волны 1 (extra_css реестра
   pages.json) — существующие страницы его не грузят.
   ============================================================ */

/* ---------- 1. Токены модуля ---------- */

:root {
  /* «Металл» хиро-секции: базовый тон, светлый край, тень кисти. */
  --hub-metal-1:    #F3F2ED;
  --hub-metal-2:    #FCFBF8;
  --hub-metal-3:    #E6E4DB;
  /* Блик — латунь витрины с низкой непрозрачностью (декор, не текст). */
  --hub-shine:      rgba(184, 134, 11, .12);
  /* Полоса кисти — тон основного текста с низкой непрозрачностью. */
  --hub-brush:      rgba(22, 24, 28, .045);
  /* Метка готовности услуги (кружок в панели хиро). */
  --hub-mark:       #8A8578;
}

[data-theme="dark"] {
  --hub-metal-1:    #171C24;
  --hub-metal-2:    #0B0D10;
  --hub-metal-3:    #202834;
  --hub-shine:      rgba(212, 175, 55, .16);
  --hub-brush:      rgba(236, 239, 243, .045);
  --hub-mark:       #6D7683;
}

/* Браузер без JS (инлайн-скрипт темы не отработал): тёмная — базовая. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --hub-metal-1:  #171C24;
    --hub-metal-2:  #0B0D10;
    --hub-metal-3:  #202834;
    --hub-shine:    rgba(212, 175, 55, .16);
    --hub-brush:    rgba(236, 239, 243, .045);
    --hub-mark:     #6D7683;
  }
}

/* ---------- 2. Металл — ТОЛЬКО в хиро ----------
   Канон владельца 24.08: металлический фон живёт в хиро-секции и
   больше нигде. Ни картинок, ни видео: три градиента и полоса
   кисти — нулевой вес по сети, весь эффект считает браузер.
   Специфичность .hero.hero--metal (0,2,0) выше, чем .hero в
   style2.css, поэтому порядок подключения файлов роли не играет. */

.hero.hero--metal {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-bottom: 1px solid var(--line, transparent);
}

.hero.hero--metal::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(120% 130% at 8% -10%, var(--hub-metal-2) 0%, transparent 58%),
    radial-gradient(90% 120% at 96% 8%, var(--hub-shine) 0%, transparent 48%),
    linear-gradient(168deg, var(--hub-metal-3) 0%, var(--hub-metal-1) 46%, var(--hub-metal-2) 100%);
}

/* Полоса кисти: тонкая шлифовка металла. Шаг крупный — на глаз
   читается как фактура, а не как рябь (и не мешает тексту). */
.hero.hero--metal::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: repeating-linear-gradient(
    100deg,
    var(--hub-brush) 0px,
    var(--hub-brush) 1px,
    transparent 1px,
    transparent 7px);
  opacity: .9;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .hero.hero--metal::after { opacity: .5; }
}

/* ---------- 3. Панель «что получаете» в хиро ---------- */

.hub-panel .panel-id {
  color: var(--hub-mark, currentColor);
  font-variant-numeric: tabular-nums;
}

/* ---------- 4. Страница отзывов ---------- */

.otz-empty {
  padding: 28px 22px;
  border: 1px solid var(--line, currentColor);
  border-radius: var(--r-card, 16px);
  background: var(--surface, transparent);
}
.otz-empty p:last-child { margin-bottom: 0; }

/* Звёзды формы — радиокнопки без картинок: доступно с клавиатуры,
   работает без JS, весит ноль.

   ПОЧЕМУ СЕЛЕКТОРЫ ЧЕРЕЗ .field. Этот файл подключается ДО style2.css
   (extra_css стоит в шапке выше основного слоя), а там живут правила
   `.field input{width:100%}` и `.field label{display:block}` — той же
   специфичности, но позже по каскаду, поэтому они выигрывают. Первый замер
   на 390 px это и поймал: радиокнопки растянулись на 348 px и вынесли
   страницу на 8 px за экран. Лишний класс в селекторе делает правило
   сильнее — и порядок подключения перестаёт что-либо решать. */
.otz-rate { display: flex; flex-wrap: wrap; gap: 8px; }
.field .otz-rate input {
  position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0;
  opacity: 0; pointer-events: none;
}
.field .otz-rate label {
  display: inline-grid;
  place-items: center;
  min-width: 48px;
  min-height: 48px;
  padding: 0 10px;
  border: 1px solid var(--line, currentColor);
  border-radius: var(--r-ctl, 12px);
  background: var(--bg, transparent);
  color: var(--text, inherit);
  font-size: 15px;
  cursor: pointer;
}
.field .otz-rate input:checked + label {
  border-color: var(--accent, currentColor);
  background: var(--surface, transparent);
}
.field .otz-rate input:focus-visible + label {
  outline: 2px solid var(--accent, currentColor); outline-offset: 2px;
}

/* Видео-контур страницы отзывов заложен, но ВЫКЛЮЧЕН до готовности
   пайплайна Г2 (#991/#1033) и формулировки согласия (развилка Д4).
   Скрываем правилом, а не только атрибутом: даже если атрибут снимут
   раньше времени, блок не покажется, пока не убрана эта строка. */
.otz-video[hidden] { display: none !important; }