/* ПЕРЕКЛЮЧАТЕЛЬ «ДО / ПОСЛЕ» — общий файл двух страниц.

🔴 ЗАЧЕМ ОТДЕЛЬНЫЙ ФАЙЛ. Эти правила везли страница проектов (`pages.css`), а 06.08.2026
тот же переключатель попросили на карточки главной. Копия в `home.css` была бы вторым
владельцем одного объекта: правку сделали бы в одном месте, а разъехались бы обе страницы.
Тем же приёмом живёт `card.css` — плитка товара стоит на трёх страницах и оформляется
из одного файла.

⚠️ ЧТО ЗДЕСЬ ЛЕЖИТ: слои, шов, ручка, подписи и полоса захвата. Размеры под конкретную
страницу — поля, тени, кегль подписей — остаются в файле своей страницы.
*/

/* 🔴 НАЧАЛЬНЫЕ ЗНАЧЕНИЯ СТОЯТ ЗДЕСЬ, А НЕ АТРИБУТОМ `style=` У БЛОКА. Политика содержимого
   сайта — `style-src 'self'` — запрещает и `<style>`, и встроенный атрибут (`core/security/
   csp.py`). Браузер отбросил бы его МОЛЧА: локально с открытым файлом всё выглядело бы
   исправным, а на бою половинки кадра разъехались бы по горизонтали. */
.compare {
  /* 🔴 `--split` — ЭТО И ПОЛОЖЕНИЕ РУКОЯТКИ, И ШИРИНА СЛОЯ «ДО»: слой прижат к ЛЕВОМУ краю
     и растёт слева направо вместе с рукояткой. Значение ползунка, кромка слоя, шов
     и рукоятка — одно и то же число, и палец ведёт их все в свою сторону.

     🔴 0 %, И ЭТО ПРАВКА КИРИЛЛА 06.08.2026: «мне не нравится, что ползунок стартует
     не с нуля; хочу, чтобы изначально всё фото было "после", а для "до" надо потянуть».
     Прежний довод за 10 % — «иначе подпись "до" повиснет над кадром "после"» — он снял
     своим решением: подпись остаётся, а слой «до» открывается только пальцем.

     ⛔ Здесь стояло 10 %, а до того 90 %. Рукоятка стоит СЛЕВА, и от неё вправо лежит «после» — правка
     Кирилла 05.08.2026: «ПОЧЕМУ ползунок стартует справа, если должен слева?». Ноль сюда
     не годится: слой «до» схлопнется, подпись «до» повиснет над кадром «после» и станет
     врать, а по неподвижному кадру не будет видно, что его можно тянуть. */
  --split: 0%;
  --photo-width: 100%;
  position: relative;
  overflow: hidden;
  border-radius: var(--skruglenie);
  border: 1px solid var(--frame);
  /* `line-height: 0` убирает щель под снимком, которую даёт строчное выравнивание. */
  line-height: 0;
  /* Палец по вертикали листает страницу, по горизонтали — тянет ползунок. Без этой строки
     браузер отдаёт жест прокрутке, и ползунок на телефоне не двигается вовсе. */
  touch-action: pan-y;
  margin: 0 0 var(--o-5);
}

.compare picture { display: block; }
.compare__photo { display: block; width: 100%; height: auto; }

/* Верхний слой — «до». Его ширину режет ползунок, справа от шва виден «после».

   ⚠️ СЛОЙ ПРИЖАТ К ЛЕВОМУ КРАЮ (`right: auto`), а не к правому. Отсюда и порядок подписей:
   «до» лежит слева, «после» остаётся справа. Прижми его вправо — обе подписи станут врать
   про свои половины, а рукоятка при движении вправо начнёт открывать не то. */
.compare__layer {
  position: absolute;
  inset: 0;
  right: auto;
  width: var(--split);
  overflow: hidden;
}

/* ⚠️ СНИМОК ВНУТРИ СЛОЯ ДЕРЖИТ ШИРИНУ ВСЕГО КАДРА И ПРИЖАТ К ПРАВОМУ КРАЮ. Две ловушки разом.

   Ширина: поставь `100%` — снимок сожмётся вместе со слоем, и правая половина окажется
   сплющенной по горизонтали. Значение в точках подставляет `compare.js` при загрузке
   и на изменении размера окна.

   Левый край: слой режется СПРАВА от своей левой кромки, поэтому снимок внутри отсчитывается
   от левой. Отсчитай от правой — он поедет влево на всю ширину отрезанного, и половинки
   разойдутся тем сильнее, чем левее ползунок. */
.compare__layer .compare__photo {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--photo-width);
  max-width: none;
}

/* Шов и рукоятка нажатие не ловят: иначе они перехватывали бы его у ползунка, который лежит
   поверх всего блока. */
.compare__seam {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--split);
  width: 2px;
  background: var(--tekst);
  transform: translateX(-1px);
  pointer-events: none;
  /* Тонкий тёмный контур: светлая линия шва иначе пропадает на светлом небе.
     Цвет — плашка `--fon-metki`, та же, что под подписями поверх снимка. */
  box-shadow: 0 0 0 1px var(--fon-metki);
}

.compare__handle {
  position: absolute;
  top: 50%;
  left: var(--split);
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border-radius: 50%;
  background: var(--tekst);
  display: grid;
  place-items: center;
  pointer-events: none;
  box-shadow: var(--ten-2);
}

/* Две стрелки нарисованы рамками и вырезом: своего файла значка не нужно, а шрифта
   значков на сайте нет вовсе. */
.compare__handle::before {
  content: "";
  width: 18px;
  height: 10px;
  border-left: 6px solid var(--fon);
  border-right: 6px solid var(--fon);
  clip-path: polygon(0 50%, 45% 0, 45% 100%, 55% 0, 100% 50%, 55% 100%);
}

/* Сам ползунок прозрачный и лежит во всю площадь снимка: видимого следа не оставляет,
   его роль играют шов и рукоятка выше.

   ⚠️ `::-webkit-slider-thumb` и `::-moz-range-thumb` — имена из спецификации CSS, а не наши.
   Сторож имён видит в них слово `thumb` и просит `thumbnail`; переименовать их нельзя,
   браузер знает только эти. Тот же класс, что `stroke` в карте климата. */
.compare__slider {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: ew-resize;
}

.compare__slider:focus-visible { outline: 3px solid var(--akcent); outline-offset: 3px; }

.compare__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: transparent;
  cursor: ew-resize;
}

.compare__slider::-moz-range-thumb {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: ew-resize;
}

/* Подписи по углам: какая сторона что показывает. Без них человек, не тронувший ползунок,
   видит просто снимок со странной полосой посередине. */
.compare__label {
  position: absolute;
  bottom: var(--o-3);
  padding: var(--o-1) var(--o-2);
  border-radius: 999px;
  background: var(--fon-metki);
  color: var(--tekst);
  font-size: var(--t-xs);
  line-height: 1.3;
  pointer-events: none;
}

/* 🔴 «После» слева, «до» справа. Прямое указание Кирилла 05.08.2026: «поменяй местами слова
   до и после и больше ничего не трогай». Устройство ползунка при этом не менялось. */
.compare__label--after { left: var(--o-3); }
.compare__label--before { right: var(--o-3); }

/* ── Полоса захвата: перетаскивание пальцем внутри ленты ────────────────────────
   🔴 ЗАЧЕМ ОНА СУЩЕСТВУЕТ. На главной карточки лежат в ленте, которую листают пальцем
   по горизонтали. Перетаскивание шва — тот же жест в том же месте, и браузер обязан решить,
   кому он достанется. Решение отрасли: жест отдаётся не всей карточке, а полосе вокруг ручки.

   🔴 72 ТОЧКИ, А НЕ 44 ПО ВИДИМОЙ РУЧКЕ. Нижний предел размера цели у Apple и Google — 44;
   если сделать полосу ровно по ручке, палец промахивается мимо неё на кадре шириной
   в полтелефона. Полоса невидима и едет вместе со швом.

   🔴 `touch-action: none` — ЭТО И ЕСТЬ РАЗВЕДЕНИЕ ЖЕСТОВ. Строка говорит браузеру «этот жест
   мой», и лента его не получает. Без неё палец на ручке листал бы ленту, а шов стоял бы
   на месте. Своего разбора касаний при этом не пишем — его пишут те, кто потом ловит
   отменённые касания и залипшие пальцы. */
.compare__zahvat {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--split);
  width: 72px;
  margin-left: -36px;
  touch-action: none;
  cursor: ew-resize;
  /* Полосы не видно: её роль играет ручка, нарисованная под ней. Показать полосу — значит
     объяснить человеку устройство, вместо того чтобы дать ему предмет. */
  background: transparent;
  border: 0;
  padding: 0;
}
.compare__zahvat:focus-visible { outline: 3px solid var(--akcent); outline-offset: 2px; }

/* Ползунок, спрятанный от глаз, но НЕ от клавиатуры и озвучки экрана. Он остаётся
   единственным местом, где живёт значение: полоса захвата пишет в него, а не рядом с ним. */
.compare__slider--skrytyy {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}