/* === 6. FACTORY — завод, а не гараж ===
   Заглушка: три крупные цифры + место под фото производства. */

.factory__stats {
  margin-top: var(--space-8);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}
.stat { display: flex; flex-direction: column; gap: var(--space-1); }
.stat__num {
  font-family: var(--mono);
  font-size: clamp(40px, 5vw, 72px);
  font-weight: 500;
  line-height: 1;
  color: var(--ink);
}
.stat__label {
  font-size: var(--body-s);
  color: var(--ink-muted);
  letter-spacing: 0.04em;
}
/* --- слайдер сравнения «гараж ↔ завод» --- */
.factory__compare { margin-top: var(--space-6); }

.compare-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-bottom: var(--space-3);
}
.compare-tab {
  font-family: var(--mono);
  font-size: var(--caption);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 8px 14px;
  transition: background var(--t-hover) var(--ease), color var(--t-hover) var(--ease), border-color var(--t-hover) var(--ease);
}
.compare-tab:hover { color: var(--ink); border-color: var(--border-strong); }
.compare-tab.is-active { color: #000; background: var(--accent); border-color: var(--accent); }

.compare {
  position: relative;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  user-select: none;
  touch-action: pan-y;
  cursor: ew-resize;
}
.compare:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.compare__side {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4);
}
.compare__side--good { background: var(--bg); align-items: flex-end; text-align: right; clip-path: inset(0 0 0 var(--pos)); }
.compare__side--bad  { background: #15171b; align-items: flex-start; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }

/* фото на стороне (если подложено) */
.compare__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; z-index: 0;
  pointer-events: none;            /* чтобы не перехватывала перетаскивание */
  user-select: none;
  -webkit-user-drag: none;
}
.compare__img[hidden] { display: none; }
/* тёмный градиент только сверху — под подписи, фото не затемняет */
.compare__side::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.25) 26%, rgba(0,0,0,0) 52%);
}
.compare__side > .compare__label,
.compare__side > .compare__cap,
.compare__side > .compare__ph { position: relative; z-index: 2; text-shadow: 0 1px 6px rgba(0,0,0,0.85); }

.compare__label { font-family: var(--mono); font-weight: 700; font-size: clamp(14px, 1.3vw, 18px); letter-spacing: 0.12em; text-transform: uppercase; }
.compare__side--good .compare__label { color: var(--accent); }
.compare__side--bad  .compare__label { color: var(--ink-muted); }
.compare__cap { font-size: var(--body-l); color: var(--ink); max-width: 72%; line-height: 1.3; }
.compare__ph { margin-top: auto; font-family: var(--mono); font-size: var(--body-s); color: var(--ink-dim); letter-spacing: 0.1em; }

.compare__divider {
  position: absolute; top: 0; bottom: 0; left: var(--pos);
  width: 2px; background: var(--accent);
  transform: translateX(-1px);
  pointer-events: none;
}
.compare__knob {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 40px; height: 40px;
  display: grid; place-items: center;
  background: var(--bg);
  border: 2px solid var(--accent);
  border-radius: 50%;
  color: var(--accent);
}
.compare__knob svg { width: 20px; height: 20px; }

.compare__hint {
  margin-top: var(--space-2);
  text-align: center;
  font-family: var(--mono); font-size: var(--caption); letter-spacing: 0.1em;
  color: var(--ink-dim);
}