/* ============================================================
   ПРОМО-СЛАЙД В ХИРОБЛОКЕ
   Шесть готовых карточек-квадратов из макета заказчика; показывается
   ровно одна — под кнопкой «Смотреть технику». Ширина карточки равна
   ширине этой кнопки (колонка .hero__intro), поэтому хироблок по
   высоте не растёт. Текст запечён в картинку — в разметке только фото
   и круглая кнопка в углу. Точек нет ни внутри, ни снаружи.
   ============================================================ */

.promo{
  --card:300px;
  width:var(--card);
  position:relative;
  container-type:inline-size;   /* размеры кнопки и радиуса — в cqw */
}

/* окно ровно в одну карточку */
.promo__viewport{
  width:var(--card);
  border-radius:7cqw;
  overflow:hidden;
  background:var(--ink-900);
}

.promo__track{
  display:flex;
  margin:0;
  padding:0;
  list-style:none;
  transition:transform .62s cubic-bezier(.22,.8,.24,1);
  will-change:transform;
}

.promo__item{flex:0 0 var(--card)}

/* ---------- карточка ---------- */
.promo__card{
  position:relative;
  display:block;
  width:var(--card);
  aspect-ratio:1 / 1;
  border-radius:7cqw;
  overflow:hidden;
  background:var(--ink-900);
  text-decoration:none;
  isolation:isolate;
  transition:box-shadow .4s ease;
}
.promo__card:hover,
.promo__card:focus-visible{
  box-shadow:0 18px 40px -18px rgba(23,25,28,.55);
}
.promo__card:focus-visible{outline:2px solid var(--red-600);outline-offset:3px}

.promo__img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
}

/* ---------- круглая кнопка в углу ---------- */
.promo__go{
  position:absolute;
  right:6cqw;
  bottom:6cqw;
  z-index:3;
  display:grid;
  place-items:center;
  width:clamp(30px,15cqw,44px);
  height:clamp(30px,15cqw,44px);
  border-radius:50%;
  background:#fff;
  color:var(--ink-900);
  box-shadow:0 6px 18px -6px rgba(0,0,0,.55);
  transition:background .2s ease, color .2s ease, transform .2s ease;
}
.promo__go svg{width:44%;height:44%}
.promo__card:hover .promo__go,
.promo__card:focus-visible .promo__go{
  background:var(--red-600);
  color:#fff;
  transform:translateX(2px);
}

/* ---------- место в хироблоке ----------
   Сцена НЕ растёт: карточка ровно в ширину кнопки «Смотреть технику»
   (19.5 % — та же колонка, что .hero__intro), высота = ширине.
   Машина и блок ТТХ остаются на своих прежних местах. */
@media (min-width:1101px){
  .hero__stage{
    min-height:648px;
    overflow-x:clip;          /* неактивные слайды торчат на 10 px правее */
  }
  .hero__intro{top:243px}     /* = 38% от прежних 640 px */
  .hero__machine-wrap{bottom:-5px}
  .hero-spec{bottom:8px}
  .promo{
    --card:100%;
    position:absolute;
    left:0;
    bottom:0;
    z-index:6;
    width:19.5%;
  }
}

@media (max-width:1100px){
  .promo{order:5;margin-top:22px}
}

/* 300 px держим до самого узкого экрана: 320 − 2×16 = 288 — только там ужимаем */
@media (max-width:340px){
  .promo{--card:288px}
}

@media (prefers-reduced-motion:reduce){
  .promo__track{transition:none}
}

/* ============================================================
   ПОДПИСЬ «НА ФОТО» У СЛАЙДЕРА ТЕХНИКИ
   Название машины — статичное, как было (никакой бегущей строки).
   Под ним полоса-таймер: серая заполняется красным и отсчитывает
   время слайда.
   ============================================================ */
.hero-spec__head{
  display:flex;
  flex-direction:column;
  gap:7px;
}

.hero-spec__cap{
  align-self:stretch;
  width:100%;
  min-width:0;
}

.hero-spec__run{
  flex:1 1 auto;
  min-width:0;
  overflow:hidden;
}
/* если название длиннее колонки — многоточие, а не вылезание за край */
.hero-spec__run > .hero-spec__model{
  display:block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.hero-spec__bar{
  display:block;
  height:2px;
  border-radius:2px;
  background:var(--line);
  overflow:hidden;
}
.hero-spec__bar i{
  display:block;
  width:0;
  height:100%;
  background:var(--red-600);
}
.hero-spec__bar.is-run i{
  animation:hero-spec-fill 13s linear forwards;
}
@keyframes hero-spec-fill{
  from{width:0}
  to{width:100%}
}

@media (prefers-reduced-motion:reduce){
  .hero-spec__bar i{animation:none;width:0}
}