/* ==========================================================================
   hero-slider.css — слайдер главного экрана (hero)
   Компонент: сниппет [[heroSlider]] + hero-slider.js

   Принцип: активный слайд остаётся обычным блоком в потоке, поэтому высота,
   отступы и позиционирование фоновой картинки (.hero-bg-image — absolute,
   height:100%, якорь .hero-content/.hero-container) полностью совпадают
   с исходной статичной вёрсткой. Остальные слайды — абсолютные слои
   для кроссфейда. Без JS показывается только первый слайд (is-active) —
   H1, лид и кнопки на месте.
   ========================================================================== */

/* --- Слои: контент поверх фоновой картинки.
   В исходной вёрстке .hero-content шёл в DOM после img и был positioned;
   здесь то же самое делается явно. --- */
.hero-slider .hero-content-inner { position: relative; z-index: 1; width: 50%;}
.hero-slider .hero-stats { position: relative; z-index: 1; }

/* Текстовый блок (заголовок + лид) — фиксированной высоты */
.hero-slider .hero-text { height: 310px; }
.hero-slider .hero-text .lead { margin-bottom: 0; }

/* Заголовок неэталонных слайдов (div.slider-title) — визуально
   идентичен .hero h1 из 7sky.css (SEO: h1 на странице один) */
.hero .slider-title {
  max-width: 500px;
  margin-bottom: 16px;
  font-size: 42px;
  font-weight: 400;
  line-height: 1.1;
}

@media (max-width: 600px) {
  .hero .slider-title { font-size: 24px; }
  .hero-slider .hero-text { height: 150px; }
}

/* --- База (работает и без JS): виден только активный слайд.
   touch-action: pan-y — вертикальный скролл страницы остаётся нативным,
   а горизонтальный жест доставляется слайдеру как свайп. --- */
.hero-slider { display: block; touch-action: pan-y; }
.hero-slider .hero-slide { display: none; }
.hero-slider .hero-slide.is-active { display: block; }

/* Фоновая картинка слайда: всегда занимает весь бокс .hero-content и
   заполняется по правилу cover — любой исходный размер вписывается
   одинаково. Якорь left center: левый край (зона текста) не обрезается. */
.hero-slider .hero-bg-image {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* object-position: 100%; */
  border-radius: 25px;
}

/* Неэталонные слои смещены на padding .hero-content (60px 0 0 36px),
   поэтому их фон компенсируется обратно — так картинка любого слайда
   стоит ровно в том же боксе, что и картинка эталонного слайда:
   от верхнего левого угла .hero-content, без «пропадания» паддинга
   между краем изображения и текстом. */
.hero-slider--js .hero-slide:not(.hero-slide--base) .hero-bg-image {
  left: -36px;
  top: -60px;
  width: calc(100% + 36px);
  max-width: none;
  height: calc(100% + 60px);
}

/* Статистика в неэталонных слоях прижата к нижнему краю слайда
   (низ слои совпадает с низом hero), независимо от высоты контента
   над ней. У эталонного слайда статистика остаётся в потоке и
   продолжает задавать высоту hero. */
@media (min-width: 601px) {
  .hero-slider--js .hero-slide:not(.hero-slide--base) .hero-stats {
    position: absolute;
    left: 0;
    bottom: 0;
    margin-top: 0;
  }
}

/* --- Режим с JS: кроссфейд слоёв.
   .hero-slider намеренно НЕ positioned: якорь для неактивных слоёв и
   навигации — .hero-content, как у активного слайда и его фона.
   top/left повторяют padding .hero-content из 7sky.css (60px 0 0 36px):
   абсолютный слой позиционируется от padding-box, без сдвига уходящий
   слайд прыгал бы в левый верхний угол при перелистывании. --- */
.hero-slider--js .hero-slide {
  display: block;
  position: absolute;
  top: 60px;
  left: 36px;
  right: 0;
  bottom: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.7s ease, visibility 0s linear 0.7s;
}

.hero-slider--js .hero-slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.7s ease;
}

/* --- Эталонный (первый) слайд: всегда остаётся в потоке и задаёт размеры
   .hero-slider и .hero-content. Высота hero не «прыгает» при перелистывании
   независимо от объёма текста и aspect ratio картинок остальных слайдов.
   Класс hero-slide--base ставится сниппетом на первый слайд. --- */
.hero-slider--js .hero-slide--base {
  position: static;
  top: auto;
  left: auto;
  right: auto;
  bottom: auto;
}

/* --- Навигация слайдера ---
   Десктоп: правый нижний угол (зона свободна — hero-stats слева, 505px).
   <=980: по центру над hero-stats (статистика в потоке, ~210px высотой).
   <=600: по центру над абсолютной hero-stats (~175px высотой). */
.hero-slider-nav {
  display: none;
  position: absolute;
  right: 24px;
  bottom: 40px;
  z-index: 2;
  align-items: center;
  gap: 18px;
}

.hero-slider--js .hero-slider-nav { display: flex; }

.hero-slider-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  padding: 0;
  border: 1.6px solid var(--white);
  border-radius: 12px;
  background: none;
  transition: border-color 0.2s;
}

.hero-slider-arrow:hover { border-color: var(--green); }
.hero-slider-arrow img { width: 50px; height: 50px; }

.hero-slider-dots { display: flex; align-items: center; gap: 8px; }

.hero-slider-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.55);
  transition: background-color 0.2s, transform 0.2s;
}

.hero-slider-dot:hover { background-color: rgba(255, 255, 255, 0.85); }

.hero-slider-dot.is-active {
  background-color: var(--green);
  transform: scale(1.25);
}

/* --- Адаптив --- */
@media (max-width: 1360px) {
.hero-slider .hero-bg-image {
    border-top-right-radius: 0;
    border-top-left-radius: 0;
  }
}

@media (max-width: 980px) {
  .hero-slider-nav {
    right: 50%;
    bottom: 250px;
    transform: translateX(50%);
  }
  .hero-slider .hero-bg-image {
    border-radius: 0;
  }
  
  .hero-slider .hero-content-inner {width: 100%;}
}

@media (max-width: 600px) {
  /* у .hero-content нет паддинга — слои от верхнего угла, компенсация фона не нужна */
  .hero-slider--js .hero-slide { top: 0; left: 0; }
  .hero-slider--js .hero-slide:not(.hero-slide--base) .hero-bg-image {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }
  
  /* 7sky.css делает .hero-stats абсолютным на мобильных — возвращаем это,
     иначе специфичность .hero-slider .hero-stats её перебивает */
  .hero-slider .hero-stats { position: absolute; }

  /* Мобильная картинка: фиксированный бокс (750px высоты hero минус top:250px),
     cover — одинаковое заполнение при любом исходном размере */
  .hero-slider .hero-image-mobile {
    height: 400px;
    object-fit: cover;
    object-position: 100%;
  }

  .hero-slider-nav {
    bottom: 220px;
  }

  .hero-slider-arrow {
    display: none;
  }
}

/* --- Доступность: уменьшенная анимация --- */
@media (prefers-reduced-motion: reduce) {
  .hero-slider--js .hero-slide,
  .hero-slider--js .hero-slide.is-active { transition: none; }
}