/* Баннер. Figma: Banner main/pc 611:1683 (1398×493), Banner main/mb 611:1751 (362×424)
   На странице pc: left 261, top 129 → отступ от шапки 129 − 89 = 40. */

.hero {
  padding-top: 40px;
}

/* Фоновые эллипсы корневого фрейма 611:3788 (blur 200, #305684).
   SVG экспортированы с расширенными границами: 1374×102 → 2174×902 (inset −29.11% / −392.16%).
   Центры эллипсов на странице: Ellipse 10 (932, 48), Ellipse 9 (932, 677).
   Секция начинается на 89 (высота шапки), поэтому из top вычитаем 89. */
.hero__blob {
  left: 50%;
  width: 2174px;
  height: 902px;
  margin-left: -1115px;          /* −2174/2 − 28 (центр эллипса левее центра страницы на 28) */
}

.hero__blob--top {
  top: -492px;                   /* (48 − 89) − 451 */
}

.hero__blob--bottom {
  top: 137px;                    /* (677 − 89) − 451 */
}

.hero__banner {
  position: relative;
  height: 493px;
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--white);
}

/* Слайды лежат друг на друге и показываются по одному. Лентой сдвинуть нельзя:
   контейнер слайда на весь баннер, внутри заголовок и кнопка во flex-колонке. */
.hero__track {
  position: absolute;
  inset: 0;
}

.hero__slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 164px 96px 0;
  isolation: isolate;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.hero__slide.is-active {
  opacity: 1;
  visibility: visible;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}

/* Кадр заказчика (2026-09-16) снят в пропорции коробки баннера (2.8354 против
   2.8357), поэтому кроп из Figma снят: он был рассчитан на прежний снимок 4096×1738
   и растянул бы новый по вертикали. `cover` кладёт кадр целиком, без искажения. */
.hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Градиент баннера pc: 252.36deg, rgba(11,46,87,0.5) 5.0413% → rgba(102,102,102,0) 55.042% */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(252.36deg, rgba(11, 46, 87, 0.5) 5.0413%, rgba(102, 102, 102, 0) 55.042%);
}

.hero__title {
  width: 487px;
  margin: 0;
  font-weight: 700;
  font-size: 36px;
  line-height: normal;
  color: var(--white);
}

/* Подзаголовок первого экрана. В макете (611:1683) его нет: заказчик дал текст
   отдельно, поэтому он встаёт в поток между заголовком и кнопкой, а отступ кнопки
   отсчитывается от него. Ширина шире заголовка — строка длинная и в 487px рвётся
   на пять строк. */
.hero__lead {
  width: 560px;
  margin: 16px 0 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--white);
}

.hero__lead + .hero__cta {
  margin-top: 24px;
}

/* Кнопка: в потоке под заголовком, отступ 36px (Figma 611:1683: top 286 − (164 + 86)), фон #fff, текст #305684.
   Ширина макета — минимум, а не жёсткий размер: 179px мерялись под подпись «Смотреть
   каталог», а при `white-space: nowrap` из `.btn-basket` любая подпись длиннее выходила
   за фон — «Проверить документы» просит 221px. Короткая подпись держит кадр макета. */
.hero__cta {
  min-width: 179px;
  margin-top: 36px;
  background: var(--white);
}

/* Точки слайдера. В макете это SVG 74×10, повёрнутый вертикально у правого края
   (611:1910). Здесь точек столько, сколько слайдов, поэтому колонка собирается
   из элементов: 10px круг, 12px шаг — те же значения, что в SVG. */
.hero__dots {
  position: absolute;
  right: 40px;
  top: 50%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transform: translateY(-50%);
}

.hero__dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: var(--r-round);
  background: rgba(255, 255, 255, 0.15);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.hero__dot.is-active {
  background: var(--white);
}

/* Стрелки: круг 56 из кита, top 402. В макете обе прижаты к правому краю баннера
   (правая на 1340 при ширине 1398 — 2px зазор), поэтому отодвигаем их внутрь:
   правая на 40px от края, левая — на шаг 92px, как в макете. */
.hero__arrow {
  top: 402px;
}

.hero__arrow--prev {
  right: 132px;
  transform: rotate(180deg);
}

.hero__arrow--next {
  right: 40px;
}

@media (max-width: 1199px) {
  /* mb: top 100 при шапке 24+58=82 → отступ 18 */
  .hero {
    padding-top: 18px;
  }

  /* mb: Ellipse 9 (611:4516) 390×102, top 549 внутри фрейма 390×782 → центр (195, 600).
     SVG 1190×902, центр (595, 451). Секция начинается на 82 (шапка 24+58). */
  .hero__blob {
    left: 50%;
    width: 1190px;
    height: 902px;
    margin-left: -595px;
  }

  .hero__blob--top {
    display: none;               /* верхний эллипс есть только в pc-фрейме */
  }

  .hero__blob--bottom {
    top: 67px;                   /* (600 − 82) − 451 */
  }

  .hero__banner {
    height: 424px;
  }

  /* mb: кадр вертикальный (362×424), в него входит 472px ширины снимка из 1568.
     58% ставят в кадр флакон целиком, а заголовок оставляют на тёмно-синем поле —
     та же расстановка, что на pc: текст слева, товар справа. Дальше вправо (78–88%)
     товары уезжают под текст и роняют контраст. По высоте `cover` кладёт кадр
     целиком, поэтому вертикальная координата ни на что не влияет.
     Проценты из Figma сняты: они растягивали снимок под прежнюю пропорцию. */
  .hero__media img {
    object-position: 58% 50%;
  }

  /* Градиент mb: to top, rgba(11,46,87,0.45) 5.542% → rgba(102,102,102,0) */
  .hero__media::after {
    background: linear-gradient(to top, rgba(11, 46, 87, 0.45) 5.542%, rgba(102, 102, 102, 0) 100%);
  }

  .hero__slide {
    padding: 60px 24px 0;
  }

  .hero__title {
    width: 271px;
    font-size: 28px;
  }

  .hero__lead {
    width: 271px;
    margin-top: 12px;
    font-size: 14px;
  }

  .hero__lead + .hero__cta {
    margin-top: 20px;
  }

  /* Кнопка mb: в потоке под заголовком, отступ 28px (Figma 611:1751: top 187 − (60 + 99)) */
  .hero__cta {
    margin-top: 28px;
  }

  /* mb: точки ложатся в строку по центру низа баннера (74×10, left 144, top 390) */
  .hero__dots {
    left: 50%;
    right: auto;
    top: 390px;
    flex-direction: row;
    transform: translateX(-50%);
  }

  .hero__arrow {
    display: none;
  }
}