/* ===== HERO ===== */
#hero {
  position: relative;
  width: 100%;
  height: 100dvh;
  overflow: hidden;
  background: var(--ink);
}

/* --- Слайды --- */
.hero-slides {
  position: absolute;
  inset: 0;
}

.hero-slide {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.hero-slide-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% center; /* дефолт — центр */
  display: block;
}

/* --- Позиция флакона per-slide (desktop) --- */
/* slide 1: ингредиенты — флакон по центру */
.hero-slide:nth-child(1) .hero-slide-img { object-position: 50% center; }
/* slide 2: спрей — флакон слева, спрей вправо */
.hero-slide:nth-child(2) .hero-slide-img { object-position: 22% center; }
/* slide 3: Дубай ночь — флакон слева, коробка справа */
.hero-slide:nth-child(3) .hero-slide-img { object-position: 42% center; }
/* slide 4: пустыня — флакон по центру */
.hero-slide:nth-child(4) .hero-slide-img { object-position: 50% center; }

/* --- Оверлей --- */
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(0, 0, 0, 0.3);
}

#hero .grain-overlay {
  z-index: 3;
}

/* --- Текст левый верхний --- */
.hero-text-left {
  position: absolute;
  top: clamp(110px, 14vh, 150px);
  left: var(--pad-x);
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.text-line {
  display: block;
  color: var(--on-dark);
  line-height: 1.2;
}

.text-line.main {
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 40px);
  font-weight: 300;
  font-style: italic;
  letter-spacing: 0.1em;
}

.text-line.sub {
  font-family: var(--font-display);
  font-size: clamp(11px, 1vw, 13px);
  font-weight: 400;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  opacity: 0.6;
}

/* --- Стрелки --- */
.hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 52px;
  height: 52px;
  background: rgba(255, 255, 255, 0.06);
  border: 0.5px solid rgba(255, 255, 255, 0.22);
  color: var(--on-dark);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s, border-color 0.3s, color 0.3s;
}

.hero-arrow:hover {
  background: rgba(201, 162, 84, 0.15);
  border-color: var(--maroon);
  color: var(--maroon);
}

.hero-arrow svg {
  width: 20px;
  height: 20px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hero-prev { left: var(--pad-x); }
.hero-next { right: var(--pad-x); }

/* --- Точки --- */
.hero-dots {
  position: absolute;
  bottom: clamp(28px, 4vw, 44px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  gap: 10px;
  align-items: center;
}

.hero-dot {
  width: 20px;
  height: 1px;
  background: rgba(255, 255, 255, 0.3);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: width 0.4s var(--ease-gold), background 0.4s;
  position: relative;
}

/* увеличенная зона клика */
.hero-dot::before {
  content: '';
  position: absolute;
  inset: -16px -6px;
}

.hero-dot.is-active {
  width: 36px;
  background: var(--maroon);
}

/* --- Мобиль --- */
@media (max-width: 767px) {
  /* Полноэкранный hero — заполняет весь viewport */
  #hero {
    height: 100svh;
    aspect-ratio: unset;
  }

  /* Убрать per-slide фоны — cover теперь заполняет кадр */
  .hero-slide:nth-child(1) { background: var(--ink); }
  .hero-slide:nth-child(2) { background: var(--ink); }
  .hero-slide:nth-child(3) { background: var(--ink); }
  .hero-slide:nth-child(4) { background: var(--ink); }

  /* Cover: заполнить кадр, per-slide позиция под портретный формат */
  .hero-slide-img {
    object-fit: cover;
  }
  /* слайд 1: hero-mobile.jpg — флакон слева, центрируем на бутылке */
  .hero-slide:nth-child(1) .hero-slide-img { object-position: 35% 50%; }
  .hero-slide:nth-child(2) .hero-slide-img { object-fit: contain; object-position: center bottom; }
  .hero-slide:nth-child(3) .hero-slide-img { object-position: 42% 20%; }
  .hero-slide:nth-child(4) .hero-slide-img { object-position: 50% 30%; }

  /* Слайды 3-4 скрыты — мобильные фото ещё не загружены */
  .hero-slide:nth-child(3),
  .hero-slide:nth-child(4) { display: none; }

  /* Текст — editorial: прибить к низу над точками */
  .hero-text-left {
    top: auto;
    bottom: clamp(88px, 18vh, 136px);
    left: clamp(24px, 6vw, 40px);
    right: clamp(24px, 6vw, 40px);
  }

  .text-line.main {
    font-size: clamp(28px, 8vw, 42px);
    line-height: 1.25; /* descender clearance для italic */
  }

  .hero-arrow {
    width: 36px;
    height: 36px;
  }

  .hero-arrow svg {
    width: 14px;
    height: 14px;
  }

  .hero-prev { left: clamp(12px, 3vw, 20px); }
  .hero-next { right: clamp(12px, 3vw, 20px); }

  /* Градиент снизу — текст читается, лицо/флакон не темнеет */
  .hero-overlay {
    background: linear-gradient(
      to top,
      rgba(13, 11, 9, 0.72) 0%,
      rgba(13, 11, 9, 0.18) 45%,
      transparent 100%
    );
  }

  /* Dots — выше от нижнего края (gesture zone на iPhone) */
  .hero-dots {
    bottom: clamp(32px, 5vw, 48px);
  }

  /* Sub-text — чуть меньше opacity, больше трекинг = иерархия */
  .text-line.sub {
    opacity: 0.55;
    letter-spacing: 0.4em;
  }
}

/* --- Планшет: hero-mobile.jpg тоже на планшете --- */
@media (min-width: 768px) and (max-width: 1023px) {
  .hero-slide:nth-child(1) .hero-slide-img { object-position: 35% 50%; }

  /* Слайды 3-4 скрыты — мобильные фото ещё не загружены */
  .hero-slide:nth-child(3),
  .hero-slide:nth-child(4) { display: none; }
}

/* --- Очень узкий (320px) --- */
@media (max-width: 374px) {
  .hero-text-left {
    top: 64px;
    bottom: auto; /* сброс bottom из 767px-правила — иначе блок сжат между двумя якорями */
  }
}