/* =====================================================================
   Сравнение «до/после» со шторкой (владелец, 21.08.2026).
   Пара к assets/js/um-ba-v1.js. Один файл на MB / BMW / HY.
   Размеры в px и %, никаких vw: блок живёт и в колонке кейса 50%,
   и во всю ширину аккордеона, и на весь экран в просмотрщике.
   ===================================================================== */

.umba {
  /* Положение шторки: доля 0..1. 0 — виден только кадр «после», 1 — только «до».
     --umba-d — половина горизонтального сноса косой линии, px;
     --umba-sk — её наклон. Оба считает um-ba-v1.js по высоте кадра, поэтому
     без JS линия остаётся вертикальной, а не ложится криво.
     --umba-x — x верхней точки линии. Диапазон растянут на снос: при 0 и 1
     косая уходит за край и «до» скрывается или закрывает кадр целиком. */
  --umba-v: .5;
  --umba-d: 0px;
  --umba-sk: 0deg;
  --umba-x: calc(var(--umba-v) * (100% + 2 * var(--umba-d)));
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  background: #000;
  border-radius: 4px;
}

/* Кадр задаёт нижняя картинка «после». */
.umba > .umba-a {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  position: relative;
  z-index: 1;
}

/* «До» лежит поверх и обрезается шторкой: левый край кадра прямой,
   правый — косой, той же линией, что рисует ручка. */
.umba > .umba-b {
  position: absolute;
  inset: 0;
  z-index: 2;
  clip-path: polygon(
    0 0,
    var(--umba-x) 0,
    calc(var(--umba-x) - 2 * var(--umba-d)) 100%,
    0 100%);
}
.umba > .umba-b > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  border-radius: 0;
}

.umba img {
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* Ручка: полоса во всю высоту + круг со стрелками. Ширина 44px — палец. */
.umba-h {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--umba-x) - var(--umba-d));
  width: 44px;
  margin: 0;
  padding: 0;
  transform: translateX(-50%) skewX(calc(-1 * var(--umba-sk)));
  background: none;
  border: 0;
  cursor: ew-resize;
  touch-action: none;
  z-index: 3;
}
.umba-h::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: #fff;
  box-shadow: 0 0 6px rgba(0, 0, 0, .45);
}
.umba-h:focus-visible { outline: none; }
.umba-h:focus-visible .umba-k { outline: 3px solid #fff; outline-offset: 3px; }

/* --umba-ky: круг едет вдоль линии, когда она подошла к краю кадра или к
   стрелке листания (её считает um-ba-v1.js). По умолчанию — середина. */
.umba-k {
  position: absolute;
  left: calc(50% + var(--umba-kx, 0px));
  top: var(--umba-ky, 50%);
  width: 36px;
  height: 36px;
  margin: -18px 0 0 -18px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .45);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .35);
  /* Ручку наклоняет вся полоса, круг выпрямляем обратно. */
  transform: skewX(var(--umba-sk));
  transition: background .18s ease;
}
.umba-h:hover .umba-k,
.umba--drag .umba-k { background: rgba(0, 0, 0, .62); }

/* Стрелки — та же геометрия, что у стрелок слайдера кейса (.cs-arrow). */
.umba-k::before,
.umba-k::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -4px;
  border: solid #fff;
  border-width: 2.4px 2.4px 0 0;
}
.umba-k::before { left: 9px; transform: rotate(-135deg); }
.umba-k::after { right: 9px; transform: rotate(45deg); }

/* ── Слайд кейса ──
   На ПК кадр держит .cs-main (aspect-ratio 16/9) — обе фотографии
   обрезаются по нему, как обычные слайды. На телефоне .cs-main имеет
   высоту по содержимому, поэтому кадр задаёт сама фотография. */
@media (min-width: 601px) {
  .cs-slide--ba .umba { height: 100%; }
  .cs-slide--ba .umba > .umba-a { height: 100%; object-fit: cover; }
}
.cs-slide--ba .umba { border-radius: 0; }

/* ── Аккордеон: обложка темы или пункта (16:9, обтекается текстом) ── */
.uta-cover--ba { padding: 0; border: 0; }
.uta-cover--ba .umba { height: 100%; border-radius: 0; }
.uta-cover--ba .umba > .umba-a { height: 100%; object-fit: cover; }

/* ── Аккордеон: кадр во всю ширину в конце (.uta-fig) ── */
.uta-fig .umba { border-radius: 10px; }

/* ── Просмотрщик на весь экран ── */
.cslb .umba {
  width: auto;
  max-width: 100%;
  max-height: calc(100vh - 132px);
  border-radius: 4px;
  background: #111;
}
.cslb .umba > .umba-a {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100vh - 132px);
}
@media (max-width: 768px) {
  .cslb .umba,
  .cslb .umba > .umba-a { max-height: calc(100vh - 112px); }
}

/* ── Отдельный блок в тексте страницы (макрос #BA(код)#) ── */
.umba-block { margin: 18px 0; }
.umba-block figcaption {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.4;
  color: #6b7280;
}