/* ==========================================================================
   «Что нас отличает»
   Левая колонка закреплена и не двигается, правые блоки плавно сменяются
   по мере скролла. Секция пиннится, прокрутка переключает слайды.
   ========================================================================== */

.features {
  position: relative;
  background: var(--c-spruce-deep);
  color: var(--c-lime);
}

.features__inner {
  display: grid;
  grid-template-columns: 38rem minmax(0, 52rem);
  align-items: center;
  /* При закреплении секция занимает весь экран — контент центрируем,
     иначе на высоких мониторах снизу остаётся пустая полоса. */
  min-height: 100svh;
  align-content: center;
  padding-block: 5.375rem 5.75rem;
}

/* --------------------------------------------------------------------------
   Левая колонка — статичная
   -------------------------------------------------------------------------- */

.features__aside {
  position: relative;
  min-height: 34.125rem;
  padding-right: 2.5rem;
}

.features__title { color: var(--c-lime); }

.features__intro {
  max-width: 25.4375rem;
  margin-top: 2.5rem;
  padding-left: 0.25rem;
  color: var(--c-lime);
}

/* Счётчик слайдов прижат к низу колонки */
.features__counter {
  position: absolute;
  left: 0;
  bottom: 5.375rem;
  display: flex;
  align-items: baseline;
  gap: 1.125rem;
  margin-left: -0.03em;
}

.features__index {
  font-size: clamp(5.5rem, 10.5vw, 10rem);
  line-height: 0.9;
  min-width: 2.1ch;
}

.features__total {
  font-family: var(--f-text);
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--c-white);
}

/* Стрелки рядом со счётчиком: клик прокручивает секцию к соседнему блоку.
   Те же круглые кнопки, что у листалок на телефоне (slider.css). */
.features__arrows {
  display: inline-flex;
  gap: 0.5rem;
  align-self: center;
  margin-left: 0.875rem;
}

.features__arrows[hidden] { display: none; }

.features__arrow {
  position: relative;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid currentColor;
  border-radius: 50%;
  color: var(--c-lime);
  opacity: 0.6;
  cursor: pointer;
  transition: opacity var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}

.features__arrow::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.5625rem;
  height: 0.5625rem;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
}

.features__arrow--next::before { transform: translate(-65%, -50%) rotate(45deg); }
.features__arrow--prev::before { transform: translate(-35%, -50%) rotate(-135deg); }

.features__arrow:hover:not(:disabled),
.features__arrow:focus-visible {
  opacity: 1;
  background: var(--c-mint);
  color: var(--c-spruce);
}

.features__arrow:disabled { opacity: 0.2; cursor: default; }

.features__caption {
  position: absolute;
  left: 0;
  bottom: 3.8125rem;
  font-size: 1rem;
  line-height: 1.2;
  color: var(--t-lime-60);
}

/* Полоски прогресса — по одной на слайд */
.features__progress {
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  gap: 0.375rem;
}

.features__bar {
  position: relative;
  width: 5rem;
  height: 2px;
  background: rgba(244, 255, 238, 0.2);
  overflow: hidden;
  cursor: pointer;
  border-radius: 1px;
}

.features__bar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--c-mint);
  transform: scaleX(var(--fill, 0));
  transform-origin: left;
}

/* --------------------------------------------------------------------------
   Правая колонка — стопка карточек
   -------------------------------------------------------------------------- */

.features__stack {
  position: relative;
  aspect-ratio: 832 / 546;
  border-radius: var(--r-card);
}

.features__slide {
  position: absolute;
  inset: 0;
  border-radius: var(--r-card);
  overflow: hidden;
  isolation: isolate;
}

/* Неактивные слайды спрятаны от ассистивных технологий через inert в разметке */
.features__slide[hidden] { display: none; }

/* Рамка иллюстрации и кадр внутри неё — по макету (узлы 1:320, 1:576, 1:579, 1:582).
   В Figma каждая фотография увеличена и смещена внутри своей рамки; если
   растянуть её целиком, получается другой кадр. */
.features__art {
  position: absolute;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.features__art img {
  position: absolute;
  max-width: none;
  object-fit: cover;
}

/* 001 — роботизированная рука */
.features__slide--robot .features__art { left: 36.06%; top: 16.85%; width: 66.71%; height: 83.15%; }
.features__slide--robot .features__art img { left: 0; top: -0.03%; width: 100%; height: 101.48%; }

/* 002 — сотрудники с планшетом */
.features__slide--tablet .features__art { left: 27.88%; top: 12.27%; width: 79.09%; height: 99.45%; }
.features__slide--tablet .features__art img { left: -21%; top: 0.02%; width: 112.45%; height: 88.41%; }

/* 003 — роботизированная платформа */
.features__slide--rover .features__art { left: 38.70%; top: 2.56%; width: 61.30%; height: 99.63%; }
.features__slide--rover .features__art img { left: -14.1%; top: 10.58%; width: 158.96%; height: 96.89%; }

/* 004 — команда. Рамка ровно как в макете: 11.66% слева и 88.34% ширины,
   то есть до правого края карточки. Сдвиг вправо обрезал третьего человека. */
.features__slide--team .features__art { left: 17%; top: 8.06%; width: 83%; height: 91.94%; opacity: 0.9; }
.features__slide--team .features__art img { left: -0.02%; top: -3.52%; width: 143.33%; height: 116.73%; }
/* Люди на этом кадре стоят левее, чем на остальных, поэтому мера текста уже */
.features__slide--team .features__text { max-width: 18.75rem; }

/* Мягкая подложка под текстом: сохраняет кадр фотографии и держит читаемость */
.features__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    rgba(1, 49, 59, 0.72) 0%,
    rgba(1, 49, 59, 0.45) 32%,
    rgba(1, 49, 59, 0) 58%
  );
}

.features__body {
  position: relative;
  z-index: 2;
  padding: 1.5rem 0 0 2.9375rem;
  max-width: 28.75rem;
}

.features__num {
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--c-mint);
}

.features__name {
  margin-top: 2.4375rem;
  color: var(--c-white);
}

.features__text {
  max-width: 24.75rem;
  margin-top: 1.8125rem;
  font-size: 1rem;
  line-height: 1.2;
  color: var(--t-white-60);
}

/* --------------------------------------------------------------------------
   Адаптив: на планшете и телефоне пиннинг отключается (см. gsap.matchMedia),
   слайды выстраиваются в обычную ленту.
   -------------------------------------------------------------------------- */

@media (max-width: 1180px) {
  .features__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 3rem;
    padding-block: 4.5rem;
  }

  .features__aside { min-height: 0; padding-right: 0; }

  .features__counter,
  .features__caption,
  .features__progress { position: static; }

  .features__counter { margin-top: 3rem; }
  .features__caption { margin-top: 0.5rem; }
  .features__progress { margin-top: 1.5rem; }

  .features__stack {
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }

  .features__slide {
    position: relative;
    inset: auto;
    aspect-ratio: 832 / 546;
    opacity: 1 !important;
    transform: none !important;
  }

  .features__slide[hidden] { display: block; }
}

/* Планшет (681–1180px): четыре блока сеткой 2×2 вместо ленты в три-четыре
   экрана. Карточка в половину ширины слишком узка для макетной схемы
   «текст слева, фото справа», поэтому сборка та же, что на телефоне:
   снимок полосой сверху, текст под ним. Диапазон закрыт с обеих сторон —
   десктоп и телефон этот блок не видят. */
@media (min-width: 681px) and (max-width: 1180px) {
  .features__inner { gap: 2.5rem; }

  /* Секция не закрепляется и не листается — номер, подпись и полоски
     ничего не показывают; номер и название есть на каждой карточке. */
  .features__progress,
  .features__counter,
  .features__caption { display: none; }

  .features__stack {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
  }

  .features__slide,
  .features__slide[hidden] {
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
  }

  .features__art,
  .features__slide--robot .features__art,
  .features__slide--tablet .features__art,
  .features__slide--rover .features__art,
  .features__slide--team .features__art {
    position: relative;
    left: auto;
    top: auto;
    order: 1;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    opacity: 1;
  }

  .features__art img,
  .features__slide--robot .features__art img,
  .features__slide--tablet .features__art img,
  .features__slide--rover .features__art img,
  .features__slide--team .features__art img {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }

  .features__slide--robot .features__art img  { object-position: 60% 50%; }
  .features__slide--tablet .features__art img { object-position: 50% 30%; }
  .features__slide--rover .features__art img  { object-position: 55% 55%; }
  .features__slide--team .features__art img   { object-position: 50% 30%; }

  .features__scrim { display: none; }

  .features__body { order: 2; max-width: none; padding: 1.5rem 1.75rem 2rem; }
  .features__name { margin-top: 0.875rem; }
  .features__text,
  .features__slide--team .features__text { max-width: none; margin-top: 0.875rem; }

  /* Переносы расставлены под широкую карточку макета */
  .features__name br,
  .features__text br { display: none; }
}

@media (max-width: 680px) {
  /* На телефоне макетная схема «фото справа, текст слева» не работает:
     карточка становится вертикальной, рамки иллюстраций заданы в процентах
     от неё и наползают на текст. Поэтому собираем карточку заново —
     снимок полосой сверху, текст под ним на фирменном градиенте. */
  .features__stack { flex-direction: row; }

  /* Полоски прогресса, крупный номер и подпись считали прокрутку закреплённой
     секции. На телефоне секция не закрепляется, положение показывают точки под
     листалкой, а номер и название и так есть на самой карточке («/ 001» и
     заголовок) — сверху они только дублировали. */
  .features__progress,
  .features__counter,
  .features__caption { display: none; }

  .features__slide {
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    height: auto;
  }

  .features__art,
  .features__slide--robot .features__art,
  .features__slide--tablet .features__art,
  .features__slide--rover .features__art,
  .features__slide--team .features__art {
    position: relative;
    left: auto;
    top: auto;
    order: 1;
    width: 100%;
    height: 11.875rem;
    opacity: 1;
  }

  .features__art img,
  .features__slide--robot .features__art img,
  .features__slide--tablet .features__art img,
  .features__slide--rover .features__art img,
  .features__slide--team .features__art img {
    position: absolute;
    inset: 0;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Точка фокуса кадра — у каждого снимка свой сюжет */
  .features__slide--robot .features__art img  { object-position: 60% 50%; }
  .features__slide--tablet .features__art img { object-position: 50% 30%; }
  .features__slide--rover .features__art img  { object-position: 55% 55%; }
  .features__slide--team .features__art img   { object-position: 50% 30%; }

  /* Подложка нужна была только под текстом поверх фото */
  .features__scrim { display: none; }

  .features__body { order: 2; padding: 1.25rem 1.25rem 1.5rem; }
  .features__name { margin-top: 0.75rem; }
  .features__text,
  .features__slide--team .features__text { margin-top: 0.75rem; font-size: 0.875rem; max-width: none; }

  /* Переносы расставлены под широкую карточку макета — на телефоне мешают */
  .features__name br,
  .features__text br { display: none; }
  .features__art { width: 92%; }
  .features__bar { width: 3rem; }
}