/* ==========================================================================
   Блок «Главный экран» (hero). Секция на высоту экрана, фон-фото (в будущем
   видео) + градиент, контент прижат к низу. Overlay-шапка — поверх.

   Раскладка низа (grid, области): на мобильном колонка «точки → слайдер»,
   с 1024 — «слайдер | карточка ТКП, под ней точки».
   ========================================================================== */

/* Overlay-шапка выведена из потока в header.css (position: fixed) — hero
   занимает верх экрана целиком, шапка «плывёт» поверх и заливается при скролле. */

/* --- Hero-обёртка ---------------------------------------------------------*/
.hero {
  --hero-pad-x: 15px;
  --hero-pad-top: 20px;
  --hero-pad-bottom: 15px;

  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: calc(100vh - 10px);
  min-height: calc(100svh - 10px);
  margin: 5px 5px 0;
  overflow: hidden;
  color: var(--color-white);
  background-color: var(--color-black);
  border-radius: 10px;
}

/* --- Фоны слайдов: фото или видео (inc/media.php) -------------------------
   Каждому слайду свой слой; активный проявляется, остальные скрыты.
   На 375 кадр прижат к верху: низ перекрыт непрозрачным градиентом. */
.hero__bgs {
  position: absolute;
  inset: 0;
}

.hero__bg {
  position: absolute;
  inset: 0;
  background-color: #1f2126;
  opacity: 0;
  transition: opacity 600ms ease;
}

.hero__bg.is-active {
  opacity: 1;
}

.hero__bg-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

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

.hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(31, 33, 38, 0) 0%,
    rgba(31, 33, 38, 0) 54.76%,
    rgb(31, 33, 38) 70.87%,
    rgb(23, 24, 25) 100%);
}

/* --- Низ секции: слайдер, промо ТКП, точки --------------------------------*/
.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-areas:
    'dots'
    'slider';
  row-gap: var(--space-16);
  padding: var(--hero-pad-top) var(--hero-pad-x) var(--hero-pad-bottom);
}

.hero__slider {
  grid-area: slider;
  width: 100%;
  min-width: 0;
}

/* --- Слайд: только текст (фон общий для всей секции) ----------------------*/
.hero__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-12);
}

.hero__title {
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.15;
  text-transform: uppercase;
}

.hero__subtitle {
  font-size: var(--fs-s);
  font-weight: 400;
  line-height: 22px;
}

.hero__cta {
  margin-top: var(--space-8);   /* до кнопки 20 = gap 12 + 8 */
}

/* На мобильном второй слайд по макету занимает карточка ТКП — текст скрыт. */
.hero__slide--promo .hero__text {
  display: none;
}

/* --- Промо ТКП ------------------------------------------------------------
   Сама карточка — общий компонент .promo (ui-kit.css). Здесь только то, что
   есть лишь в hero: миниатюра-превью и ширины колонок под макет. */
.hero__teaser {
  grid-area: teaser;
  gap: 10px;
}

.hero__teaser .promo__content {
  flex: 1 1 auto;
  min-width: 0;
}

/* На 375 текст по макету идёт под миниатюрой (первые строки в неё не упираются).
   На широких «мобильных» ширинах строки длиннее — резервируем место под неё. */
@media (min-width: 420px) {
  .hero__teaser .promo__content { padding-right: 90px; }
}

.hero__teaser-img {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1;
  width: 78px;
  height: 78px;
  object-fit: cover;
  background-color: #0a1526;
  border: 1px solid rgba(254, 254, 254, 0.1);
  border-radius: var(--radius-sm);
}

/* --- Точки (в макете «Slider bar») ----------------------------------------
   Геометрия — общая (sections.css), здесь только тёмная тема и «прогресс»
   автопрокрутки: белая полоска заполняет активную точку за время показа. */
.hero__dots {
  grid-area: dots;
  justify-content: flex-start;
  margin-top: 0;
  --swiper-pagination-color: rgba(87, 95, 112, 0.8);
  --swiper-pagination-bullet-inactive-color: rgba(87, 95, 112, 0.8);
}

.hero__dots .swiper-pagination-bullet {
  position: relative;
  overflow: hidden;
}

.hero__dots .swiper-pagination-bullet::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0;
  background-color: var(--color-white);
  border-radius: inherit;
}

.hero__dots .swiper-pagination-bullet-active::after {
  width: 100%;
  animation: hero-dot-progress var(--hero-autoplay, 6000ms) linear forwards;
}

/* Автопрокрутка на паузе (наведение/взаимодействие) — стоит и прогресс. */
.hero.is-paused .hero__dots .swiper-pagination-bullet-active::after {
  animation-play-state: paused;
}

@keyframes hero-dot-progress {
  from { width: 0; }
  to   { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__dots .swiper-pagination-bullet-active::after { animation: none; }
}

/* ==========================================================================
   Планшет ≥1024: контент в строку — текст слева, карточка ТКП и точки справа.
   ========================================================================== */
@media (min-width: 768px) {
  .hero {
    --hero-pad-x: 20px;
    --hero-pad-bottom: 20px;
    min-height: max(calc(100vh - 20px), 550px);
    min-height: max(calc(100svh - 20px), 550px);
    margin: 10px 10px 0;
  }

  .hero__bg { background-position: center; }

  .hero__bg::after {
    background: linear-gradient(180deg,
      rgba(31, 33, 38, 0.48) 0%,
      rgba(31, 33, 38, 0.034) 38.94%,
      rgba(31, 33, 38, 0.48) 72.12%,
      rgba(31, 33, 38, 0.48) 100%);
  }

  .hero__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      'slider teaser'
      'slider dots';
    align-items: start;
    row-gap: 30px;
    column-gap: var(--space-40);
  }

  .hero__text {
    gap: var(--space-16);
    max-width: 429px;
  }

  .hero__slide--promo .hero__text { display: flex; }

  .hero__teaser { width: 453px; }

  /* Ширину колонки текста задаёт .promo__content (262 / 325 / 423 по макету),
     картинка занимает остаток и тянется на всю высоту карточки. */
  .hero__teaser .promo__content {
    flex: 0 0 auto;
    width: 100%;
    padding-right: 12px;
  }

  .hero__teaser-img {
    position: static;
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    height: auto;        /* auto + stretch → картинка тянется на высоту карточки */
    align-self: stretch;
    border: 0;
  }

  .hero__dots { justify-content: flex-end; }
}

/* ==========================================================================
   Ноутбук ≥1440
   ========================================================================== */
@media (min-width: 1025px) {
  .hero {
    --hero-pad-x: var(--space-40);
    --hero-pad-bottom: 50px;
  }

  .hero__text {
    gap: var(--space-20);
    max-width: 529px;
  }

  .hero__cta { margin-top: var(--space-20); }   /* до кнопки 40 = gap 20 + 20 */

  .hero__teaser { width: 509px; }
}

/* ==========================================================================
   Десктоп ≥1820
   ========================================================================== */
@media (min-width: 1441px) {
  .hero__subtitle { line-height: 30px; }
  .hero__text { max-width: 748px; }
  .hero__teaser { width: 707px; }
}

/* --- Промо-карточки слайдов ----------------------------------------------
   До 1024 промо — отдельный слайд карусели (.hero__slide--promo), с 1024
   карточка активного слайда стоит справа. Ленту пересобирает view.js. */
.hero__teasers {
  display: none;
}

@media (min-width: 768px) {
  /* Карточки всех слайдов лежат стопкой: высота колонки не скачет, когда
     у слайда промо выключено, и точки остаются на месте макета. */
  .hero__teasers {
    grid-area: teaser;
    display: grid;
  }

  .hero__teaser-slot {
    grid-area: 1 / 1;
    visibility: hidden;
  }

  .hero__teaser-slot.is-active {
    visibility: visible;
  }

  .hero__slide--promo {
    display: none;   /* запас на случай, если JS не отработал */
  }
}