/* ОБЪЕКТ — блок «До и после наших работ» (objba-*): слайдер пар «до / после» с ползунком сравнения.
   Изолирован от main.css: селекторы из двух классов (.objba .objba-x). Раскладка — от ширины места вставки
   (container queries; пороги чуть ниже 768/1200 — ширина блока меньше экрана на полосу прокрутки):
     до 767px — фото 3:2 со скруглением, пункты столбиком, «Подробнее» кнопкой, навигация по центру;
     768–1199px — фото 16:9, «Подробнее» под описанием, пункты в строку с переносом, навигация отдельной строкой справа;
     от 1200px — фото 12:5, «Подробнее» справа от названия, пункты в одну строку, навигация справа от пунктов.
   Ползунок: «после» снизу, «до» сверху и обрезается clip-path по позиции --objba-pos (кадры совпадают пиксель в пиксель).
   Слайды и тексты лежат в одной ячейке grid — высота не прыгает при переключении.
   main.css гасит рамку фокуса у всего (* { outline: none !important }) — поэтому у :focus-visible здесь !important. */

.objba,
.objba *,
.objba *::before,
.objba *::after{box-sizing:border-box;}

.objba{
  container:objba / inline-size;
  background:var(--objekt-color-bg);
  color:var(--objekt-color-cream);
  font-family:var(--objekt-font-body);
  padding:var(--objekt-section-py-cq) 0;
  margin:0;
}
.objba .objba-wrap{padding:0 16px;}
.objba p{margin:0;padding:0;}
.objba ol,
.objba li{list-style:none;margin:0;padding:0;}
.objba li::before{content:none;}
.objba button{font-family:inherit;margin:0;box-shadow:none;-webkit-appearance:none;appearance:none;text-transform:none;letter-spacing:normal;}
.objba .objba-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* ---------- шапка ---------- */
.objba .objba-eyebrow{
  display:flex;align-items:center;gap:16px;
  font-size:var(--objekt-fs-caption);
  letter-spacing:0.24em;
  text-transform:uppercase;
  color:var(--objekt-color-accent);
  margin:0 0 16px;
}
.objba .objba-eyebrow span{flex-shrink:0;}
/* линия справа от эйдброу — как во всех obj*-блоках сайта, на телефоне тоже */
.objba .objba-eyebrow i{display:block;flex:1 1 auto;max-width:560px;height:1px;background:var(--objekt-color-line-strong);}
.objba .objba-title{
  font-family:var(--objekt-font-heading);
  font-weight:500;
  font-size:clamp(32px, 9cqw, 44px);
  line-height:1.08;
  letter-spacing:var(--objekt-tracking-heading);
  color:var(--objekt-color-cream);
  margin:0;
}
.objba .objba-hint{margin-top:12px;font-size:15px;line-height:1.5;color:rgba(245,242,237,0.75);}

/* ---------- фото со сравнением ---------- */
.objba .objba-stage{
  display:grid;
  margin-top:22px;
  border-radius:var(--objekt-radius-card);
  overflow:hidden;
  background:#151313;
}
.objba .objba-media{
  grid-area:1 / 1;
  position:relative;
  aspect-ratio:3 / 2;
  overflow:hidden;
  cursor:ew-resize;
  touch-action:pan-y;          /* вертикальный свайп — прокрутка страницы, горизонтальный — ползунок */
  -webkit-user-select:none;user-select:none;
  -webkit-tap-highlight-color:transparent;
  opacity:0;
  visibility:hidden;
  transition:opacity .4s ease, visibility 0s linear .4s;
}
.objba .objba-media.is-active{opacity:1;visibility:visible;transition:opacity .4s ease;z-index:1;}
.objba .objba-media picture{display:block;width:100%;height:100%;}
.objba .objba-img{
  position:absolute;inset:0;
  width:100%;height:100%;
  max-width:none;
  object-fit:cover;
  display:block;margin:0;border-radius:0;
  pointer-events:none;
  -webkit-user-drag:none;
}
.objba .objba-before{
  position:absolute;inset:0;
  clip-path:inset(0 calc(100% - var(--objba-pos, 50%)) 0 0);
}
.objba .objba-divider{
  position:absolute;top:0;bottom:0;z-index:2;
  left:var(--objba-pos, 50%);
  width:2px;margin-left:-1px;
  background:rgba(245,242,237,0.8);
  pointer-events:none;
}
.objba .objba-handle{
  position:absolute;top:50%;z-index:3;
  left:var(--objba-pos, 50%);
  display:flex;align-items:center;justify-content:center;gap:2px;
  width:48px;height:48px;
  border:1.5px solid rgba(245,242,237,0.6);
  border-radius:50%;
  background:rgba(169,150,125,0.88);
  color:var(--objekt-color-bg);
  transform:translate(-50%, -50%);
  cursor:ew-resize;
  box-shadow:0 4px 18px rgba(0,0,0,0.25);
}
.objba .objba-handle svg{width:16px;height:16px;flex-shrink:0;}
.objba .objba-handle:focus{outline:none;}
.objba .objba-handle:focus-visible{outline:2px solid var(--objekt-color-cream) !important;outline-offset:4px;}
/* клик/тап в точку фото — разделитель переезжает туда плавно */
.objba .objba-media.is-animating .objba-before{transition:clip-path .25s ease;}
.objba .objba-media.is-animating .objba-divider,
.objba .objba-media.is-animating .objba-handle{transition:left .25s ease;}
.objba.is-dragging,
.objba.is-dragging *{cursor:ew-resize !important;}

.objba .objba-label{
  position:absolute;top:12px;z-index:2;
  padding:6px 12px;
  border-radius:2px;
  background:rgba(20,18,18,0.8);
  color:#fff;
  font-size:13px;
  line-height:1.3;
  pointer-events:none;
  transition:opacity .25s ease;
}
.objba .objba-label--before{left:12px;}
.objba .objba-label--after{right:12px;}
.objba .objba-label__full{display:none;}
/* метка гаснет, когда её половина почти закрыта */
.objba .objba-media.is-before-hidden .objba-label--before,
.objba .objba-media.is-after-hidden .objba-label--after{opacity:0;}

/* ---------- текст слайда ---------- */
.objba .objba-body{position:relative;margin-top:24px;}
.objba .objba-texts{display:grid;}
.objba .objba-text{
  grid-area:1 / 1;
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  grid-template-areas:"title" "sub" "changes" "link";
  align-content:start;
  opacity:0;
  visibility:hidden;
  transition:opacity .4s ease, visibility 0s linear .4s;
}
.objba .objba-text.is-active{opacity:1;visibility:visible;transition:opacity .4s ease;}
.objba .objba-text__title{
  grid-area:title;
  font-family:var(--objekt-font-heading);
  font-weight:500;
  font-size:clamp(28px, 8cqw, 40px);
  line-height:1.12;
  color:var(--objekt-color-cream);
}
.objba .objba-text__sub{grid-area:sub;margin-top:10px;font-size:16px;line-height:1.5;color:rgba(245,242,237,0.85);}

.objba .objba-link{
  grid-area:link;
  display:flex;align-items:center;justify-content:center;gap:14px;
  min-height:52px;
  margin-top:24px;
  padding:0 20px;
  border:1px solid var(--objekt-color-accent);
  color:var(--objekt-color-cream);
  font-size:16px;
  text-decoration:none;
  transition:background-color .2s, color .2s;
}
.objba .objba-link:hover,
.objba .objba-link:focus,
.objba .objba-link:visited{color:var(--objekt-color-cream);text-decoration:none;}
.objba .objba-link:hover{background:rgba(169,150,125,0.12);}
.objba .objba-link:focus-visible{outline:2px solid var(--objekt-color-accent) !important;outline-offset:3px;}
.objba .objba-link svg{width:24px;height:14px;flex-shrink:0;transition:transform .25s ease;}
.objba .objba-link:hover svg{transform:translateX(4px);}

.objba .objba-changes{grid-area:changes;margin-top:22px;}
.objba .objba-changes__label{
  margin-bottom:6px;
  font-size:12px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--objekt-color-accent);
}
.objba .objba-changes__list{display:flex;flex-direction:column;}
.objba .objba-changes__list li{display:flex;align-items:baseline;gap:14px;padding:12px 0;font-size:16px;line-height:1.35;}
.objba .objba-changes__list li + li{border-top:1px solid rgba(245,242,237,0.15);}
.objba .objba-changes__num{color:var(--objekt-color-accent);font-variant-numeric:tabular-nums;}
.objba .objba-changes__dash{color:rgba(245,242,237,0.7);}
.objba .objba-changes__text{color:var(--objekt-color-cream);}

/* ---------- навигация ---------- */
.objba .objba-nav{display:flex;align-items:center;justify-content:center;gap:28px;margin:0 0 20px;}
.objba .objba-nav__btn{
  display:flex;align-items:center;justify-content:center;
  width:56px;height:56px;
  padding:0;
  border:1px solid var(--objekt-color-accent);
  border-radius:50%;
  background:transparent;
  color:var(--objekt-color-cream);
  cursor:pointer;
  transition:border-color .2s, color .2s, background-color .2s;
}
.objba .objba-nav__btn svg{width:20px;height:20px;}
.objba .objba-nav__btn:hover{border-color:var(--objekt-color-accent);color:var(--objekt-color-accent);}
.objba .objba-nav__btn:focus-visible{outline:2px solid var(--objekt-color-accent) !important;outline-offset:3px;}
.objba .objba-counter{min-width:64px;text-align:center;font-size:15px;color:rgba(245,242,237,0.85);font-variant-numeric:tabular-nums;}

.objba .objba-captions{display:grid;margin-top:14px;}
.objba .objba-caption{
  grid-area:1 / 1;
  text-align:center;
  font-size:12px;
  color:rgba(245,242,237,0.4);
  opacity:0;
  transition:opacity .4s ease;
}
.objba .objba-caption.is-active{opacity:1;}

@container objba (min-width: 390px){
  .objba .objba-wrap{padding:0 20px;}
}

/* ---------- 768+ ---------- */
@container objba (min-width: 750px){
  .objba .objba-wrap{padding:0 32px;}
  .objba .objba-eyebrow{font-size:var(--objekt-fs-meta);letter-spacing:0.3em;gap:24px;margin-bottom:20px;}
  .objba .objba-title{font-size:clamp(34px, 5.4cqw, 56px);}
  .objba .objba-hint{font-size:17px;}
  .objba .objba-stage{margin-top:clamp(24px, 2.2cqw, 36px);border-radius:var(--objekt-radius-media);}
  .objba .objba-media{aspect-ratio:16 / 9;}
  .objba .objba-handle{width:clamp(44px, 3.4cqw, 60px);height:clamp(44px, 3.4cqw, 60px);}
  .objba .objba-label{top:20px;padding:8px 16px;font-size:14px;}
  .objba .objba-label--before{left:20px;}
  .objba .objba-label--after{right:20px;}
  .objba .objba-label__full{display:inline;}
  .objba .objba-label__short{display:none;}

  .objba .objba-body{margin-top:clamp(24px, 2.2cqw, 36px);}
  .objba .objba-text{grid-template-areas:"title" "sub" "link" "changes";}
  .objba .objba-text__title{font-size:clamp(26px, 3.4cqw, 46px);}
  .objba .objba-text__sub{font-size:18px;}
  /* ссылка — текстовая, под описанием */
  .objba .objba-link{
    justify-self:start;
    min-height:0;
    margin-top:16px;
    padding:0 0 4px;
    border:0;
    border-bottom:1px solid rgba(169,150,125,0.6);
    color:var(--objekt-color-accent);
    font-size:15px;
  }
  .objba .objba-link:hover,
  .objba .objba-link:focus,
  .objba .objba-link:visited{color:var(--objekt-color-accent);}
  .objba .objba-link:hover{background:transparent;border-bottom-color:var(--objekt-color-accent);}
  .objba .objba-link svg{width:20px;height:12px;}

  .objba .objba-changes{margin-top:28px;}
  .objba .objba-changes__label{margin-bottom:14px;}
  /* пункты в строку; перенесённые на новую строку — без разделителя (класс ставит JS) */
  .objba .objba-changes__list{flex-direction:row;flex-wrap:wrap;row-gap:12px;}
  .objba .objba-changes__list li{padding:0 clamp(20px, 2.4cqw, 44px);font-size:17px;}
  .objba .objba-changes__list li:first-child{padding-left:0;}
  .objba .objba-changes__list li + li{border-top:0;border-left:1px solid rgba(245,242,237,0.15);}
  .objba .objba-changes__list li.is-wrapped{border-left:0;padding-left:0;}

  /* стрелки — справа на уровне названия этапа; названию и подписи оставляем место */
  .objba .objba-nav{position:absolute;top:0;right:0;z-index:2;justify-content:flex-end;gap:16px;margin:0;}
  .objba:not([data-count="1"]) .objba-text__title,
  .objba:not([data-count="1"]) .objba-text__sub{padding-right:230px;}
  .objba .objba-nav__btn{width:48px;height:48px;border-color:rgba(245,242,237,0.4);}
  .objba .objba-caption{text-align:right;}
}

/* ---------- 1200+: название и ссылка в строку, навигация справа от пунктов ---------- */
@container objba (min-width: 1180px){
  .objba .objba-title{font-size:clamp(34px, 3.8cqw, 68px);white-space:nowrap;}
  .objba .objba-media{aspect-ratio:12 / 5;}
  .objba .objba-text{
    grid-template-columns:minmax(0, 1fr) auto;
    grid-template-areas:"title link" "sub sub" "changes changes";
    padding-right:0;
    column-gap:32px;
  }
  .objba .objba-link{grid-area:link;align-self:center;margin-top:0;}
  .objba .objba-changes{margin-top:clamp(28px, 2.4cqw, 40px);}
  /* навигация справа вверху — ссылка «Смотреть объект» встаёт левее стрелок */
  .objba:not([data-count="1"]) .objba-text{padding-right:230px;}
  .objba:not([data-count="1"]) .objba-text__title,
  .objba:not([data-count="1"]) .objba-text__sub{padding-right:0;}
}
@container objba (min-width: 1200px){
  .objba .objba-wrap{width:min(81.77083cqw, 1600px);margin:0 auto;padding:0;}
}

/* кадры пары выше 16:9 (обычные фото 3:2) — целиком в их пропорции, по центру и не выше ~80% экрана;
   класс и переменные --objba-ar / --objba-arn ставит objba_render_block() по размеру кадра «после» */
.objba.objba--own-ar .objba-media{aspect-ratio:var(--objba-ar);}
.objba.objba--own-ar .objba-stage{width:min(100%, calc(80svh * var(--objba-arn)));margin-left:auto;margin-right:auto;}

@media (prefers-reduced-motion: reduce){
  .objba .objba-media,
  .objba .objba-text,
  .objba .objba-caption,
  .objba .objba-label,
  .objba .objba-link svg{transition:none;}
  .objba .objba-media.is-animating .objba-before,
  .objba .objba-media.is-animating .objba-divider,
  .objba .objba-media.is-animating .objba-handle{transition:none;}
}
.objba.objba--wide169 .objba-media{aspect-ratio:16 / 9;}
@container objba (min-width: 590px){ .objba.objba--wide169 .objba-stage{width:min(100%, calc(78svh * 16 / 9));margin-left:auto;margin-right:auto;} }