/* ==========================================================================
   Процесс работы (Услуга) — uslugSteps
   Один блок с фоном: этапы переключаются вкладками и стрелками на картинке.
   Стиль Honda Club: тёмный фон, красный акцент, тонкие линии.
   ========================================================================== */
.usl-steps{position:relative;padding:64px 0;color:#fff;overflow:hidden;
  background:#0d0d0d url('/assets/images/uslugi/shared/steps-bg.webp') center/cover no-repeat}
/* Слой фотографии. grayscale(1) — гарантия ч/б независимо от исходника;
   background-image:inherit — чтобы работал и background, заданный инлайн в блоке. */
.usl-steps::before{content:"";position:absolute;inset:0;z-index:0;
  background-image:inherit;background-size:cover;background-position:center;
  filter:grayscale(1) contrast(1.04)}
/* Затемнение поверх фото — по образцу avtoservice-vip.ru, где лежит
   rgba(0,0,0,.1) и фото почти не гасится. Здесь .18/.34: замеренная
   средняя яркость фона 29 против 38 у эталона, контраст белого текста
   ~6.9:1 при норме AA 4.5:1. Прежние .88/.94 давали глухой чёрный. */
.usl-steps::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,8,8,.18) 0%,rgba(8,8,8,.34) 100%)}
.usl-steps .w{position:relative;z-index:1}

.usl-steps .label{font-size:12px;font-weight:900;letter-spacing:.11em;
  text-transform:uppercase;color:var(--red)}
.usl-steps h2{font-size:34px;margin:5px 0 10px;letter-spacing:-.03em;color:#fff}
.usl-steps-desc{font-size:17px;color:rgba(255,255,255,.66);max-width:720px;margin:0 0 26px}

/* ---------- вкладки этапов ---------- */
.usl-steps-nav{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 24px}
.usl-step-tab{display:inline-flex;align-items:center;gap:10px;padding:11px 16px;
  font:inherit;font-size:14px;font-weight:800;line-height:1.2;cursor:pointer;
  color:#fff;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);
  border-radius:10px;transition:background .2s,border-color .2s,color .2s}
.usl-step-tab:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3)}
.usl-step-tab:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.usl-step-tab.is-active{background:var(--red);border-color:var(--red);color:#fff}
.usl-step-tab-num{display:inline-flex;align-items:center;justify-content:center;
  min-width:26px;height:26px;padding:0 6px;border-radius:7px;font-size:12px;
  background:rgba(0,0,0,.28);color:#fff}
.usl-step-tab.is-active .usl-step-tab-num{background:rgba(0,0,0,.22)}

/* ---------- сцена ---------- */
.usl-steps-stage{position:relative}
.usl-step-slide{display:none}
.usl-step-slide.is-active{display:grid;grid-template-columns:1.25fr .75fr;
  gap:32px;align-items:center}
/* страховка: пока JS не отметил сцену, показываем первый этап.
   Без этого при отключённом JS блок был бы пустым */
.usl-steps-stage:not([data-ready]) .usl-step-slide:first-child{
  display:grid;grid-template-columns:1.25fr .75fr;gap:32px;align-items:center}
@media(max-width:1099px){
  .usl-steps-stage:not([data-ready]) .usl-step-slide:first-child{grid-template-columns:1fr}
}

.usl-step-img{position:relative;border-radius:14px;overflow:hidden;
  background:#000;box-shadow:0 24px 60px rgba(0,0,0,.55)}
.usl-step-img img{display:block;width:100%;height:auto}

/* стрелки поверх картинки */
.usl-step-arrow{position:absolute;top:50%;transform:translateY(-50%);
  width:46px;height:46px;display:grid;place-items:center;padding:0;
  border:0;border-radius:50%;cursor:pointer;color:#fff;
  background:rgba(8,8,8,.62);backdrop-filter:blur(4px);
  transition:background .2s,transform .2s}
.usl-step-arrow:hover{background:var(--red)}
.usl-step-arrow:active{transform:translateY(-50%) scale(.94)}
.usl-step-arrow:focus-visible{outline:2px solid #fff;outline-offset:2px}
.usl-step-arrow::before{content:"";display:block;width:9px;height:9px;
  border-top:2px solid currentColor;border-right:2px solid currentColor}
.usl-step-arrow--prev{left:14px}
.usl-step-arrow--prev::before{transform:rotate(-135deg);margin-left:3px}
.usl-step-arrow--next{right:14px}
.usl-step-arrow--next::before{transform:rotate(45deg);margin-right:3px}

.usl-step-body h3{font-size:26px;line-height:1.15;letter-spacing:-.02em;
  margin:0 0 12px;color:#fff}
.usl-step-body p{font-size:15px;line-height:1.55;color:rgba(255,255,255,.72);margin:0}

/* ---------- планшет и мобильный ---------- */
@media(max-width:1099px){
  .usl-step-slide.is-active{grid-template-columns:1fr;gap:22px}
  .usl-step-body h3{font-size:23px}
}
@media(max-width:899px){
  .usl-steps{padding:42px 0}
  .usl-steps h2{font-size:26px}
  .usl-steps-desc{font-size:15px}
  .usl-steps-nav{gap:6px;margin-bottom:18px}
  .usl-step-tab{padding:9px 12px;font-size:13px;gap:8px}
  .usl-step-tab-num{min-width:22px;height:22px;font-size:11px}
  .usl-step-arrow{width:38px;height:38px}
  .usl-step-arrow--prev{left:8px}
  .usl-step-arrow--next{right:8px}
  .usl-step-body h3{font-size:19px;margin-bottom:8px}
  .usl-step-body p{font-size:14px}
}
@media(prefers-reduced-motion:reduce){
  .usl-step-tab,.usl-step-arrow{transition:none}
}

/* преимущества: иконка уезжает вправо + тень (как на avtoservice-vip) */
.advantages .adv-icon{transition:transform .4s cubic-bezier(.22,1,.36,1),filter .4s ease-out}
.advantages .adv:hover .adv-icon,
.advantages .adv:focus-visible .adv-icon{
  transform:translateX(14px);
  filter:drop-shadow(-6px 10px 10px rgba(0,0,0,.45)) drop-shadow(0 4px 6px rgba(0,0,0,.3))
}
@media(prefers-reduced-motion:reduce){.advantages .adv-icon{transition:none}}

/* ==========================================================================
   Затемнение фото шагов (вариант 2: на стороне CSS, не запечено в файл).
   Новые фото лежат в папках страниц и названы {slug}-{работа}.webp.
   Старые step1.webp..step4.webp уже затемнены внутри файла — их НЕ трогаем,
   иначе получат двойное затемнение (43 -> 17, почти чёрный).
   Яркость меняется одной цифрой здесь, файлы перегенерировать не нужно.
   ========================================================================== */
.usl-step-img img:not([src*="step1.webp"]):not([src*="step2.webp"]):not([src*="step3.webp"]):not([src*="step4.webp"]){
  filter:brightness(.40)
}