/* АКСИОМА · Ремонт — страница объекта (как «project» у ecoLINEAR): название, о работе, фото, «до → после», табличка, следующий объект.
   Подключается после style.css (полоса, меню, контакты, подвал, шторка — оттуда). Сначала телефон. */

.ob{padding:calc(88px + env(safe-area-inset-top)) 16px 24px}
/* одна ось, как у ecoLINEAR: колонка текста 740 px по центру, фото и схемы — по её центру */
.ob-head{max-width:740px;margin:0 auto 44px}
.ob-back{display:inline-flex;align-items:center;gap:8px;margin:0 0 26px;padding:6px 0;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  text-decoration:none;color:var(--ink2);transition:color .3s var(--e-soft)}
.ob-back:hover{color:var(--em)}
.ob-head .br{display:table;margin:0 0 18px}
.ob-h{margin:0 0 18px;font-size:clamp(34px,6.2vw,76px);font-weight:250;line-height:1.04;letter-spacing:-.025em;text-wrap:balance}
.ob-lead{margin:0 0 18px;font-size:clamp(19px,2.2vw,27px);font-weight:400;line-height:1.36;letter-spacing:-.005em;color:var(--em);text-wrap:pretty}
.ob-p,.of-t{margin:0;font-size:16px;line-height:1.72;color:var(--ink2);text-wrap:pretty}
.ob-p{max-width:660px}

.ob-body{display:flex;flex-direction:column;align-items:center;gap:52px}
.of-t{align-self:center;width:100%;max-width:740px}
/* фото не выше экрана (видимая высота минус полоса и подпись) и не шире своего исходника ×1,15 */
.of-f{margin:0;width:100%;max-width:min(var(--mw,100%),680px,max(260px,calc((100vh - 190px) * var(--ar))))}
.of-ph{position:relative;aspect-ratio:var(--ar);overflow:hidden;background:var(--stone)}
.of-ph img{width:100%;height:100%;object-fit:cover}
.of-f figcaption,.sx figcaption{margin-top:11px;font-size:11px;line-height:1.5;letter-spacing:.16em;text-transform:uppercase;color:var(--ink2)}
/* два фото рядом (в том числе «было / стало») */
.of-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;width:100%;max-width:740px;align-items:end}
.of-2 .of-f{max-width:none}
.of-bs .of-f figcaption{font-size:12px;color:var(--ink)}
.of-bs .of-stalo figcaption{color:var(--em)}

/* ── «до → после»: слева до ремонта (голые стены), справа после; линию можно тянуть (мышь, палец, стрелки) ── */
.sx{margin:0;width:100%;max-width:min(var(--mw,100%),620px,max(260px,calc((100vh - 200px) * var(--ar))))}
.sx-box{position:relative;aspect-ratio:var(--ar);overflow:hidden;background:var(--stone);touch-action:pan-y pinch-zoom;
  -webkit-user-select:none;user-select:none;cursor:ew-resize;--p:50%}
.sx-box img{-webkit-user-drag:none;pointer-events:none}
.sx-p,.sx-d img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sx-d{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--p)) 0 0)}
.sx-h{position:absolute;top:0;bottom:0;left:var(--p);width:48px;margin-left:-24px;display:grid;place-items:center;outline:none}
.sx-h::before{content:'';position:absolute;top:0;bottom:0;left:50%;width:1px;background:rgba(251,250,248,.96);box-shadow:0 0 0 .5px rgba(28,34,43,.22)}
.sx-k{position:relative;width:44px;height:44px;border-radius:50%;background:var(--paper);border:1px solid rgba(11,107,75,.55);display:grid;place-items:center;
  box-shadow:0 2px 14px rgba(28,34,43,.12);transition:transform .35s var(--e-out3)}
.sx-k svg{width:18px;height:18px;fill:none;stroke:var(--em);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.sx-box:hover .sx-k,.sx-box.drag .sx-k{transform:scale(1.08)}
.sx-h:focus-visible .sx-k{outline:1px solid var(--em);outline-offset:4px}
.sx-l{position:absolute;top:12px;padding:5px 9px;font-size:10px;line-height:1.2;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);
  background:rgba(251,250,248,.88);pointer-events:none;transition:opacity .3s var(--e-soft)}
.sx-l1{left:12px}
.sx-l2{right:12px}
.sx-box[data-p-lo] .sx-l1,.sx-box[data-p-hi] .sx-l2{opacity:0}

/* ── табличка об объекте и следующий объект ── */
.ob-tab{margin:72px auto 0;max-width:740px;border-top:1px solid var(--line)}
.ob-tab div{display:grid;grid-template-columns:110px 1fr;gap:14px;padding:13px 0;border-bottom:1px solid var(--line)}
.ob-tab dt{font-size:11px;line-height:1.4;letter-spacing:.18em;text-transform:uppercase;color:var(--ink2);padding-top:3px}
.ob-tab dd{margin:0;font-size:15px;line-height:1.5}
.ob-next{display:flex;flex-direction:column;gap:10px;max-width:740px;margin:56px auto 0;padding:0 0 24px;text-decoration:none;color:var(--ink);
  border-bottom:1px solid var(--line)}
.ob-next-n{font-size:clamp(30px,4.6vw,58px);font-weight:250;line-height:1.08;letter-spacing:-.02em;transition:color .3s var(--e-soft)}
.ob-next:hover .ob-next-n{color:var(--em)}
.ob-fix{display:none}
.ob-page .kont{padding-top:72px}
/* полоса меню на странице объекта — сплошная бумага (размытие делало из фото грязное пятно) */
.ob-page .bar::before{background:var(--paper);-webkit-backdrop-filter:none;backdrop-filter:none}

@media (min-width:769px){
  .ob{padding:132px 32px 40px}
  .ob-body{gap:72px}
  .of-2{gap:24px}
}
@media (min-width:1024px){
  .ob{padding:150px 48px 56px}
  .ob-head{margin-bottom:64px}
  .ob-body{gap:88px}
  .of-2{gap:32px}
  /* «Следующий объект» в правом нижнем углу (как NEXT PROJECT у ecoLINEAR) */
  .ob-fix{display:flex;position:fixed;right:48px;bottom:36px;z-index:900;align-items:center;gap:10px;padding:8px 12px;text-decoration:none;color:var(--ink);
    background:rgba(251,250,248,.82);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
    opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .5s var(--e-soft),transform .5s var(--e-soft)}
  .ob-fix.on{opacity:1;transform:none;pointer-events:auto}
  .ob-fix i{width:7px;height:7px;border-radius:50%;background:var(--em)}
  .ob-fix span{font-size:14px;font-weight:500;line-height:1.3}
  .ob-fix small{display:block;font-size:10px;font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:var(--ink2)}
  .ob-fix:hover span{color:var(--em)}
}