/* ─────────────────────────────────────────────
   Цех, версия 2: пятнадцать ящиков-подуслуг в несколько рядов.
   Подключается после hall.css и переопределяет только склад и заголовок.
   Положение ящиков и помостов задаёт crane-v2.js.
   ───────────────────────────────────────────── */
.hall--v2 .hall__title { font-size: clamp(30px, min(3.7vw, 5.6svh), 66px); }
.hall--v2 .hall__lead { max-width: 560px; }

/* панорама: декорации, кран и склад едут вместе; на телефоне листаются вбок */
.hall--v2 .hall__track { position: absolute; inset: 0; overflow: hidden; }
.hall--v2 .hall__world { position: relative; width: 100%; height: 100%; }

/* полоса с балкой для телефона (на остальных экранах балка рисуется в общем SVG) */
.hall--v2 .hall__crane { display: none; }

/* без JS — обычная сетка */
.hall--v2 .yard { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px; row-gap: 40px; }

.hall--v2 .yard.is-laid {
  display: block; inset: 0; width: auto; margin: 0;
  pointer-events: none;
}
.hall--v2 .yard.is-laid .slot { position: absolute; pointer-events: auto; }
.hall--v2 .slot:not([data-depth="0"])::after { display: none; }
.hall--v2 .slot:not([data-depth="0"]) .crate__body { filter: brightness(.95); }
.hall--v2 .slot__mark { font-size: clamp(16px, 2.2vw, 30px); bottom: 6px; }

/* помост под задним рядом */
.dock {
  position: absolute; list-style: none; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.18), transparent 22px),
    repeating-linear-gradient(90deg, transparent 0 calc(12.5% - 1px), rgba(0,0,0,.08) calc(12.5% - 1px) 12.5%),
    linear-gradient(to bottom, #b9b3a8, #a69f93);
  box-shadow: 0 -1px 0 rgba(255,255,255,.4) inset;
}
.dock::before { /* кромка помоста с разметкой */
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 7px;
  background: repeating-linear-gradient(-45deg, #f2b400 0 9px, #15171a 9px 18px);
}
.dock::after { /* стойки */
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; top: 7px;
  background:
    linear-gradient(#5d636a, #5d636a) 0 0 / 6px 100% no-repeat,
    linear-gradient(#5d636a, #5d636a) 100% 0 / 6px 100% no-repeat;
}

/* ящик-подуслуга */
.hall--v2 .crate__body { aspect-ratio: var(--ar, 1.25); padding: 9% 9% 13%; }
.hall--v2 .crate__no { font: 600 clamp(12px, 12cqi, 26px)/1 var(--font-display); letter-spacing: .02em; }
.hall--v2 .crate__icon { width: clamp(14px, 12cqi, 28px); }
.hall--v2 .crate__cat {
  margin-top: auto;
  font: 700 clamp(7px, 6cqi, 10px)/1.1 var(--font-body); letter-spacing: .12em; text-transform: uppercase;
  opacity: .72;
}
.hall--v2 .crate__title {
  margin-top: 4%;
  font: 600 clamp(10px, 9.6cqi, 19px)/1.04 var(--font-display); text-transform: uppercase; letter-spacing: .01em;
  hyphens: manual; -webkit-hyphens: manual;
}
.hall--v2 .slot.is-aimed .crate__no::after { content: ''; }

/* узкие ящики — только код и значок, название на пульте */
@container (max-width: 88px) {
  .hall--v2 .crate__head { flex-direction: column; align-items: center; gap: 8%; margin: auto 0; }
  .hall--v2 .crate__no { font-size: clamp(13px, 21cqi, 20px); }
  .hall--v2 .crate__icon { width: clamp(16px, 26cqi, 24px); }
  .hall--v2 .crate__cat, .hall--v2 .crate__title { display: none; }
}

@media (max-width: 560px), (max-width: 760px) and (orientation: portrait) {
  /* телефон: ярусы ящиков уходят вниз (высоту цеха задаёт скрипт), пульт прилипает к низу экрана */
  .hall--v2 { --pult-h: 66px; display: flex; flex-direction: column; overflow: clip; }
  .hall--v2 .hall__copy { top: calc(var(--hoist-bottom) + var(--copy-gap, 96px)); }
  .hall--v2 .hall__copy .eyebrow { display: none; }
  .hall--v2 .hall__title { font-size: clamp(28px, 8.4vw, 40px); }
  .hall--v2 .hall__lead { display: none; }
  .hall--v2 .hall__gate { display: none; }
  .hall--v2 .crate__body { padding: 8% 8% 12%; }
  .hall--v2 .crate__head { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 0; }
  .hall--v2 .crate__title { text-align: left; font-size: clamp(11px, 10.4cqi, 16px); }
  .hall--v2 .crate__title::before { content: none; }
  .hall--v2 .crate__cat { font-size: clamp(8px, 7cqi, 10px); }
  .hall--v2 .crate__no { font-size: clamp(14px, 14cqi, 20px); }
  .hall--v2 .slot::after { display: none; }
  .hall--v2 .dock::after { display: none; }

  /* балка с тележкой прилипает к верху экрана под шапкой; высоту и отступ задаёт скрипт */
  .hall--v2 .hall__crane { display: block; position: relative; z-index: 7; flex: none; pointer-events: none; }
  .hall--v2 .hall__crane-band { position: sticky; top: calc(var(--header-h) + 4px); }
  .hall--v2 .rig-band { display: block; width: 100%; height: 100%; overflow: visible; }

  .hall--v2 .pult {
    position: sticky; bottom: 0; margin-top: auto;
    height: auto; min-height: var(--pult-h);
    grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "screen keys";
    row-gap: 0; padding-top: 8px; padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  }
  .hall--v2 .pult__telemetry, .hall--v2 .pult__hint, .hall--v2 .pult__btn[data-move] { display: none; }
  .hall--v2 .pult__keys { padding: 5px; border-radius: 12px; }
  .hall--v2 .pult__btn--lift span { display: inline; }
}
@media (min-width: 761px) and (max-height: 700px) {
  .hall--v2 .hall__lead { display: none; }
}

/* пока кран работает, остальные ящики гаснут без прозрачности — ряды перекрываются */
.hall--v2.is-busy .slot:not(.is-active) .crate__body { opacity: 1; filter: saturate(.55) brightness(.78); }