/* ==========================================================================
   Производство — /proizvodstvo

   Строится на общих кирпичах base.css (.page-hero, .hero-split, .head,
   .filter-chip, .btn). Здесь только то, чего нет больше нигде: ролик сборки,
   полоса цифр, этапы цеха, разрез модуля с точками, пределы производства
   и объекты.
   ========================================================================== */

/* ---------- Первый экран: шапка раздела + этапы цеха ----------

   Своей пропорции у шапки производства больше нет. Раньше здесь стояло
   1fr / 1fr ради крупного кадра, и ролик начинался на 744-м пикселе, тогда
   как правые колонки всех остальных разделов сайта — на 886-м. Теперь
   работает общая пропорция .hero-split (1.25fr / 0.75fr), и правый край
   стоит по одной линии на всех страницах.

   Шапка и этапы — один экран. Рецепт не свой: ровно так собраны первый
   экран аренды (шапка + сценарии) и каталога (шапка + калькулятор). Общая
   механика — обёртка .intro-screen, шапка раздела, растяжка второго блока
   (.intro-screen__fill) — лежит в base.css одной копией на три раздела.
   Здесь только то, чего нет у соседей: полоса цифр, ролик и сетка этапов.

   Единицы общие: --fit-space для воздуха, --fit-type для кегля,
   коэффициент — размер при окне 950px. */
@media (min-width: 1024px) {
  /* Полоса цифр стоит на месте карточки-факта аренды и каталога и сжимается
     по той же шкале. Кегль ниже, чем у .stock-card__num: там цифра одна на
     весь экран, здесь их четыре в ряд, и в шапке они идут отдельной строкой,
     а не в правой колонке — каждый лишний пиксель здесь стоит пикселя
     у карточек этапов. */
  .intro-screen .prod-facts {
    margin-top: calc(11 * var(--fit-space));
    padding-top: calc(10 * var(--fit-space));
    gap: calc(17 * var(--fit-space));
  }
  .intro-screen .prod-facts b { font-size: calc(24 * var(--fit-type)); line-height: 1.05; }
  .intro-screen .prod-facts span { margin-top: 2px; font-size: calc(13 * var(--fit-type)); }
  .intro-screen .prod-video figcaption { padding-block: calc(8.5 * var(--fit-space)); }

  /* Рамка кадра по-прежнему встаёт вровень с текстовой колонкой: верх —
     с надзаголовком, низ подписи — с нижним краем кнопок. Иначе правый край
     шапки выглядит съехавшим, а на низком окне кадр своей высоты ещё и
     выталкивает первый экран за сгиб на 80 пикселей.

     Но срезать кадр под эту рамку больше нельзя: раньше расхождение было
     2–13 пикселей и срез не читался, а на ноутбуке рамка ниже кадра уже
     на семьдесят — от ролика оставался горизонтальный ломоть. Поэтому
     кадр вписывается в рамку целиком (object-fit: contain ниже), а разницу
     добирает фон рамки. Он подобран под светлую подложку самого ролика,
     поэтому поля по бокам читаются как продолжение кадра, а не как поля.

     Правило живёт только здесь, при двух колонках со сжатой типографикой:
     ниже 1024px шапка идёт в один столбец. */
  .intro-screen .prod-video { align-self: stretch; display: flex; flex-direction: column; }
  .intro-screen .prod-video video { flex: 1 1 0; min-height: 0; height: auto; }

  /* Сетка этапов и карточка на первом экране сжимаются общими правилами
     из base.css — теми же, что у сценариев аренды и плиток услуг. Здесь
     оставалась их копия, пока рецепт карточки был свой у каждой страницы.

     Три в ряд, а не шесть: полоса из шести колонок с кеглем 12px в один
     экран влезала, но выпадала из общего вида — таких мелких карточек
     нет больше нигде. */
}


/* ---------- Что уходит раньше, чем на соседних разделах ----------
   Порядок исчезновения общий (он в base.css), а пороги у производства свои:
   в первом экране здесь на два блока больше, чем на аренде, — полоса цифр
   под кнопками и ролик справа. Те же 950px окна приходится делить на большее
   число блоков, поэтому повторяющийся текст уходит раньше.

   Пояснение справа от «Шести этапов» пересказывает подводку шапки страницы
   слово в слово, надзаголовок шапки — её же заголовок. Сами этапы, цифры
   и ролик не режутся никогда: они и есть содержание экрана. */
@media (min-width: 1024px) and (max-height: 1150px) {
  .intro-screen__fill .head__aside { display: none; }
}

@media (min-width: 1024px) and (max-height: 910px) {
  .intro-screen .page-hero .eyebrow { display: none; }
}

.prod-video {
  margin: 0;
  position: relative;
  border: 1px solid var(--card-bd);
  border-top: 2px solid var(--accent);
  border-radius: var(--radius);
  overflow: hidden;
  /* Фон — точно под цвет подложки самого ролика: заставка по краям даёт
     #e2–#e6 (проверено пипеткой по assembly-poster.webp). Это важно вдвойне.
     Во-первых, пока ролик грузится, кадр и рамка не мигают тёмным.
     Во-вторых, на низком окне рамка ниже кадра — кадр вписывается в неё
     целиком и по бокам остаётся фон; при прежнем #f2f2f2 он был светлее
     кадра и читался как поля, теперь шва не видно. */
  background: #e3e3e3;
}

.prod-video video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  /* contain, а не cover: если рамка почему-то окажется не 16:9, кадр
     впишется целиком, а не будет срезан по краям. Пустоту заполнит фон
     .prod-video — он подобран под светлую подложку самого ролика, поэтому
     поля не читаются как поля. */
  object-fit: contain;
}

.prod-video figcaption {
  padding: 10px 14px;
  background: var(--card-bg);
  border-top: 1px solid var(--card-bd);
  font-size: 0.8125rem;
  color: var(--text-note);
}

/* Кнопка запуска поверх кадра. Показывается только там, где ролик не
   стартует сам (телефон, «меньше движения») — класс ставит скрипт. */
.prod-video__play {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  background: rgba(29, 29, 29, 0.42);
  border: none;
  color: var(--gold);
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}
.prod-video.is-manual .prod-video__play { display: flex; }
.prod-video.is-playing .prod-video__play { display: none; }

/* ---------- Полоса цифр ---------- */
.prod-facts {
  list-style: none;
  margin: clamp(28px, 4vh, 44px) 0 0;
  padding: 20px 0 0;
  border-top: 1px solid var(--c-600);
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 900px) { .prod-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; } }

.prod-facts b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 700;
  line-height: 1;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.prod-facts span {
  display: block;
  margin-top: 6px;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--text-mute);
}

/* ---------- Этапы цеха ----------
   Сетка и карточка — общий рецепт .tile из base.css, он же под именем .step:
   те же отступы, рамка и кегль, что у сценариев аренды и плиток услуг.
   Своего у этапа не осталось ничего, кроме правил первого экрана выше.

   Два блока текста в карточке — сверху что делаем, снизу через линейку чем
   именно — различаются видом, а не подписями: «этап»/«подробности» съели бы
   по две строки в каждой из шести карточек. */

/* ---------- Разрез модуля ----------

   Раздел переделан. Было: безымянные точки на картинке, пояснение про
   компоновку отдельной строкой у правого края и список узлов в три колонки,
   в котором последний ряд стоял с двумя пустыми клетками.

   Стало: узлы пронумерованы, номер повторяется в списке — связь видна без
   наведения; подсказка всплывает у самой точки; пояснение ушло в правую
   колонку шапки раздела, на общую для всей страницы линию; число колонок
   списка считает PHP из числа узлов, поэтому дырок в сетке не остаётся. */
.module { display: grid; gap: 16px; }

.module__tabs { display: flex; flex-wrap: wrap; gap: 8px; }

.module__stage {
  position: relative;
  background: #e7e7e7;
  border: 1px solid var(--card-bd);
  border-radius: var(--radius);
  overflow: hidden;
}

.module__img { display: block; width: 100%; height: auto; }

/* Точка узла. Держится за картинку в процентах, поэтому не уезжает
   при любом размере экрана. */
.module__dot {
  position: absolute;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  background: var(--gold);
  border: 2px solid var(--c-900);
  border-radius: 50%;
  color: var(--c-900);
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: box-shadow 0.16s var(--ease);
}
.module__dot-n { line-height: 1; }

/* Пульс — только чтобы точки заметили. Уважает системную настройку:
   при «меньше движения» остаётся статичной. */
.module__dot::after {
  content: "";
  position: absolute;
  inset: -6px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  opacity: 0;
  animation: dotPulse 2.4s ease-out infinite;
}
@keyframes dotPulse {
  0%   { opacity: 0.7; transform: scale(0.7); }
  70%  { opacity: 0;   transform: scale(1.15); }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .module__dot::after { animation: none; }
}

/* Активная точка поднимается над соседями: иначе её подсказку перекрывает
   соседняя точка, стоящая по разметке ниже. */
.module__dot:hover,
.module__dot:focus-visible,
.module__dot.is-active {
  z-index: 3;
  box-shadow: 0 0 0 6px var(--gold-dim);
}

/* ---------- Подсказка у точки ----------
   Читать про узел, уводя глаза под картинку, неудобно: пока найдёшь строку
   в списке, забываешь, куда смотрел. Подсказка встаёт над самой точкой.

   Сторону выбирает PHP по координате узла (is-left / is-right / is-below):
   у краёв кадра подсказку прижимаем к своему краю, у верхней кромки уводим
   вниз — рамка разреза обрезает всё, что вылезло за неё. */
.module__tip {
  --tip-x: -50%;
  position: absolute;
  left: 50%;
  bottom: calc(100% + 12px);
  z-index: 2;
  display: grid;
  gap: 4px;
  width: max-content;
  max-width: 250px;
  padding: 10px 12px;
  background: var(--c-900);
  border: 1px solid var(--accent-line);
  border-top: 2px solid var(--accent);
  border-radius: var(--radius);
  /* Тень нужна по делу: подсказка висит над светлым рендером, и без неё
     тёмный прямоугольник читается как дырка в картинке. */
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.45);
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transform: translate(var(--tip-x), 5px);
  transition: opacity 0.16s var(--ease), transform 0.16s var(--ease), visibility 0.16s;
}
.module__tip b { font-family: var(--font-display); font-size: 0.875rem; letter-spacing: 0.02em; color: var(--gold); }
.module__tip span { font-size: 0.8125rem; line-height: 1.45; color: var(--text-dim); white-space: normal; }

.module__dot.is-left  .module__tip { --tip-x: 0; left: -14px; }
.module__dot.is-right .module__tip { --tip-x: 0; left: auto; right: -14px; }
.module__dot.is-below .module__tip { bottom: auto; top: calc(100% + 12px); transform: translate(var(--tip-x), -5px); }

.module__dot:hover .module__tip,
.module__dot:focus-visible .module__tip,
.module__dot.is-active .module__tip {
  opacity: 1;
  visibility: visible;
  transform: translate(var(--tip-x), 0);
}
@media (prefers-reduced-motion: reduce) {
  .module__tip { transition: none; }
}

/* На узком экране подсказки нет. Разрез там высотой в полторы сотни
   пикселей, и любая карточка с текстом либо вылезает за рамку кадра, либо
   закрывает половину модуля. Работает то, что и работало: нажатие на точку
   подсвечивает строку состава и подводит её в поле зрения (proizvodstvo.js). */
@media (max-width: 900px) {
  .module__tip { display: none; }
}

/* ---------- Читалка узла ----------
   Полоса под кадром вместо списка на десять строк. Список повторял
   подсказки слово в слово и добавлял разделу 492 пикселя; на широком
   экране всё это говорит сама подсказка. Полоса остаётся там, где
   подсказки выключены, — на узком экране. */
.module__readout {
  margin: 0;
  padding: 14px 16px;
  background: var(--card-bg);
  border: 1px solid var(--card-bd);
  border-top: 2px solid var(--accent);
  border-radius: var(--radius);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-note);
}
.module__readout b {
  display: block;
  margin-bottom: 4px;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  color: var(--gold);
}

/* Широкий экран: работает подсказка, полоса не нужна. */
@media (min-width: 901px) {
  .module__readout { display: none; }
}

/* ---------- Возможности цеха ---------- */
.limits {
  display: grid;
  gap: 1px;
  background: var(--card-bd);
  border: 1px solid var(--card-bd);
  border-radius: var(--radius);
  grid-template-columns: 1fr;
  overflow: hidden;
}
@media (min-width: 620px)  { .limits { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .limits { grid-template-columns: repeat(4, 1fr); } }

.limit { padding: 24px 22px; background: var(--card-bg); display: grid; gap: 6px; align-content: start; }

.limit__val {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.limit__key {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.limit p { margin: 6px 0 0; font-size: 0.875rem; line-height: 1.5; color: var(--text-dim); }

/* Хроника собрана из общего кирпича .news-card (base.css) — своих стилей
   ей не нужно: это та же лента, что на главной, только раскрывающаяся. */

/* ---------- Документы ---------- */
.docs {
  display: grid;
  gap: 24px;
  align-items: start;
}
@media (min-width: 900px) { .docs { grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr); gap: 56px; } }

.docs h2 { margin-bottom: 14px; }
.docs__note {
  margin: 18px 0 0;
  padding-left: 16px;
  border-left: 2px solid var(--accent);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--text-note);
}

.docs__action {
  display: grid;
  gap: 12px;
  justify-items: start;
  padding: 24px;
  background: var(--card-bg);
  border: 1px solid var(--card-bd);
  border-radius: var(--radius);
}
.docs__action p { margin: 0; font-size: 0.875rem; line-height: 1.5; color: var(--text-mute); }

/* ---------- Страница события хроники (/hronika/<slug>) ----------
   Файл общий с производством: хроника — часть той же страницы, и заводить
   ради шести адресов третий CSS незачем.

   Колонки те же 1.25fr / 0.75fr, что у шапки раздела и у документов, —
   правый край текста на всех страницах сайта стоит на одной линии. */
.chron__grid { display: grid; gap: 28px; align-items: start; }
@media (min-width: 900px) {
  .chron__grid { grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr); gap: 56px; }
}

.chron__media {
  margin: 0 0 24px;
  background: #e7e7e7;
  border: 1px solid var(--card-bd);
  border-top: 2px solid var(--accent);
  border-radius: var(--radius);
  overflow: hidden;
}
.chron__media img { display: block; width: 100%; height: auto; }

/* Фотография вместо рендера: заполняет кадр и не оставляет полей.
   Флаг приходит из данных события — 'photo' => true. */
.chron__media--photo {
  background: var(--c-900);
}

.chron__media--photo img {
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

/* Логотип вместо снимка. Подложка страницы события светло-серая (#e7e7e7),
   а слово в знаке белое — на ней оно исчезло бы целиком, поэтому кадр
   затемняется и знак центруется с полями. Правило парное к
   .news-card__media--logo в base.css: карточка и страница одного события
   показывают знак одинаково. Флаг из данных: 'logo' => true. */
.chron__media--logo {
  background: var(--c-900);
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
}

.chron__media--logo img {
  width: 52%;
  max-width: 300px;
  height: auto;
}

.chron__text p { font-size: 1rem; line-height: 1.65; color: var(--text-dim); }

.chron__aside {
  display: grid;
  gap: 16px;
  justify-items: start;
  padding: 24px;
  background: var(--card-bg);
  border: 1px solid var(--card-bd);
  border-radius: var(--radius);
}

.chron__facts { margin: 0; display: grid; gap: 8px; width: 100%; }
.chron__facts > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-top: 8px;
  border-top: 1px solid var(--card-bd);
}
.chron__facts > div:first-child { padding-top: 0; border-top: none; }
.chron__facts dt { font-size: 0.8125rem; color: var(--text-mute); }
.chron__facts dd { margin: 0; font-size: 0.9375rem; font-variant-numeric: tabular-nums; }

.chron__cta-note { margin: 0; font-size: 0.875rem; line-height: 1.55; color: var(--text-note); }

/* Соседние события. Без них выход из материала только назад в браузере. */
.chron__nav {
  display: grid;
  gap: 12px;
  margin-top: clamp(32px, 4vw, 56px);
  padding-top: 24px;
  border-top: 1px solid var(--c-600);
  align-items: center;
}
@media (min-width: 760px) {
  .chron__nav { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 24px; }
  /* Колонки заданы явно: у первого события нет «раньше», у последнего —
     «позже», и без этого соседняя ссылка съезжала на чужое место. */
  .chron__nav-link--prev { grid-column: 1; }
  .chron__nav-all { grid-column: 2; }
  .chron__nav-link--next { grid-column: 3; text-align: right; }
}

.chron__nav-link {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  background: var(--card-bg);
  border: 1px solid var(--card-bd);
  border-radius: var(--radius);
  transition: border-color 0.18s var(--ease);
}
.chron__nav-link:hover { border-color: var(--gold); }
.chron__nav-key { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-mute); }
.chron__nav-title { font-family: var(--font-display); font-size: 0.9375rem; letter-spacing: 0.02em; }
.chron__nav-link:hover .chron__nav-title { color: var(--gold); }
.chron__nav-all { justify-self: center; white-space: nowrap; }

/* Ссылка на карточку объекта в боковой колонке события. Отбивается от
   таблички фактов линией: это переход в другой раздел, а не ещё один факт. */
.chron__case {
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--card-bd);
}