/* ==========================================================================
   Блок «Главный экран» (hero). Слайдер Swiper на всю высоту экрана,
   overlay-шапка поверх, контент снизу-слева, тизер «ТКП» и точки — справа.
   ========================================================================== */

/* --- Overlay-шапка поверх hero (только на главной) -------------------------
   Выносим шапку из потока, чтобы hero занимал верх экрана, а шапка «плыла». */
.home .header--overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-header);
}

/* --- Hero-обёртка ---------------------------------------------------------*/
.hero {
  position: relative;
  min-height: 600px;
  overflow: hidden;
  color: var(--color-white);
  background-color: var(--color-black);
}

/* --- Слайдер и слайды -----------------------------------------------------*/
.hero__slider {
  position: absolute;
  inset: 0;
  height: 100%;
}

.hero__slider .swiper-wrapper,
.hero__slide {
  height: 100%;
}

.hero__slide {
  position: relative;
  display: flex;
  align-items: flex-end;
  background-color: #0f0f0f;
  background-image: var(--hero-img);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/* Затемнение под текстом (слева темнее, справа светлее + низ) */
.hero__slide::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(15, 15, 15, 0.8) 0%, rgba(15, 15, 15, 0.35) 45%, rgba(15, 15, 15, 0.1) 100%),
    linear-gradient(0deg, rgba(15, 15, 15, 0.65), rgba(15, 15, 15, 0) 42%);
}

.hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-block: 96px var(--space-40);
}

.hero__content {
  max-width: 620px;
}

.hero__title {
  text-transform: uppercase;
  font-size: 24px;
}

.hero__subtitle {
  margin-top: var(--space-20);
  max-width: 560px;
  color: rgba(255, 255, 255, 0.85);
}

.hero__cta {
  margin-top: var(--space-32);
}

/* --- Оверлеи: тизер + точки -----------------------------------------------*/
.hero__overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding-bottom: var(--space-24);
  pointer-events: none;
}

.hero__overlay-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-16);
}

/* Точки пагинации hero — светлые (тёмный фон), выравнивание вправо */
.hero__dots {
  pointer-events: auto;
  margin-top: 0;
  text-align: right;
  --swiper-pagination-bullet-width: 20px;
  --swiper-pagination-bullet-height: 6px;
  --swiper-pagination-bullet-border-radius: 999px;
  --swiper-pagination-color: var(--color-white);
  --swiper-pagination-bullet-inactive-color: rgba(255, 255, 255, 0.45);
  --swiper-pagination-bullet-inactive-opacity: 1;
}

/* Тизер «ТКП» — стеклянная карточка. На мобильном скрыт, чтобы не перекрывать текст. */
.hero__teaser {
  display: none;
  pointer-events: auto;
  gap: var(--space-20);
  width: min(460px, 100%);
  padding: var(--space-24);
  color: var(--color-white);
  background-color: rgba(15, 15, 15, 0.72);
  border-radius: var(--radius-md);
  backdrop-filter: blur(6px);
}

.hero__teaser-title {
  font-size: var(--fs-h3);
  font-weight: 700;
}

.hero__teaser-text {
  margin-top: var(--space-12);
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.85);
}

.hero__teaser-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  margin-top: var(--space-16);
  padding-bottom: 4px;
  font-size: var(--fs-xs);
  color: var(--color-orange);
  border-bottom: 1px solid currentColor;
}

.hero__teaser-icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
}

.hero__teaser-img {
  flex: 0 0 120px;
  align-self: stretch;
  min-height: 120px;
  background: #0a1526 url('/assets/img/hero-teaser.jpg') center / cover no-repeat;
  border-radius: var(--radius-sm);
}

/* ==========================================================================
   Планшет/десктоп ≥1024: выше hero, показываем тизер справа
   ========================================================================== */
@media (min-width: 1024px) {
  .hero { min-height: max(680px, 100vh); }
  .hero__inner { padding-block: 120px var(--space-64); }
  .hero__teaser { display: flex; }
  .hero__title { font-size: 32px; }
}

@media screen and (min-width: 1440px) {
  .hero__title { font-size: 40px; }
}

@media (min-width: 1920px) {
  .hero__subtitle { max-width: 640px; }
  .hero__teaser { width: 560px; }
  .hero__title { font-size: 56px; }
}