/* === HERO SLIDER === */

.hero { position:relative; overflow:visible; }

/* Фон (без подмены активного изображения) */
.hero::before{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  width:100vw;
  top:0; bottom:0;
  z-index:0;
  background:#648192;   /* статичный фон */
  background-size:cover;
  background-position:center;
}

.hero .container{ position:relative; z-index:1; }

.hero__viewport{
  position:relative;
  overflow:hidden;
  border-radius:16px;
  outline:none;
  z-index:1;
}
.hero__track{ display:flex; transition:transform .5s ease; will-change:transform; }
.hero__slide{ flex:0 0 100%; min-width:100%; position:relative; aspect-ratio:16/7; background:#6c8791; }
.hero__img{ width:100%; height:100%; object-fit:cover; }

/* Контент */
.hero__content{
  position:absolute; left:24px; right:24px; bottom:24px;
  color:#fff; text-shadow:0 2px 10px rgba(0,0,0,.25);
}
.hero__title{ font-size:clamp(22px,3.6vw,44px); line-height:1.15; margin:0 0 10px; font-weight:800; letter-spacing:.2px; }
.hero__subtitle{ margin:0; font-size:clamp(14px,1.4vw,18px); opacity:.9; }

/* Кикер (кастомное поле) */
.hero__kicker{
  width: 70%;
  text-transform: uppercase;
  position:absolute; top:14px; left:18px; z-index:3;
  color:#fff; font-weight:800; letter-spacing:.2px;
  font-size:clamp(16px,2vw,50px);
  text-shadow:0 2px 8px rgba(0,0,0,.35);
}

/* Метки */
.hero__labels { position: absolute; inset: 0; pointer-events:none; }
.hero__label  {
  text-transform: uppercase;
  position: absolute;
  left: calc(var(--x, 0) * 1%); 
  top:  calc(var(--y, 0) * 1%);
  max-width: var(--w, none);   /* ← управляем шириной через W в ch */
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
  pointer-events:auto;         /* если нужно кликать по ссылкам внутри */
  /* анимация по задержке */
  opacity: 0; transform: translateY(6px);
  animation: heroLabelIn .4s ease forwards;
  animation-delay: var(--d, 0ms);
}

@keyframes heroLabelIn {
  to { opacity: 1; transform: none; }
}

.hero__slide[aria-current="true"] .hero__label{ opacity:1; translate:0 0; }

.accent-yellow { color: var(--brand-yellow); }

/* Специфичные стили для navmol в hero */
.hero .hero__arrows .navmol{
  position:relative; 
  width:112px; 
  height:59px; 
  right:-1px; 
  bottom:-5px;
}

/* Специфичные стили для navchip (стрелка вправо) в hero - выравниваем с navmol */
.hero .hero__arrows .navchip{
  position:absolute;
  right:-3px;
  bottom:2px;
}

@media (max-width:1024px){
.hero .hero__arrows {display:none;}
.hero .hero__dots {gap: 40px;position: relative;bottom: 40px;}
}

/* Мобильная версия hero секции */
@media (max-width: 768px) {
  .hero {
    margin: 0 -16px; /* выходим за границы контейнера */
    padding: 0 16px;
  }

  .hero::before {
    left: 0;
    transform: none;
    width: 100%;
  }

  .hero__viewport {
    border-radius: 12px;
  }

  .hero__slide {
    aspect-ratio: 16/10; /* более квадратное соотношение для мобильных */
    min-height: 300px;
  }

  .hero__content {
    left: 16px;
    right: 16px;
    bottom: 16px;
  }

  .hero__title {
    font-size: clamp(18px, 5vw, 28px);
    line-height: 1.2;
    margin-bottom: 8px;
  }

  .hero__subtitle {
    font-size: clamp(12px, 3.5vw, 16px);
    line-height: 1.4;
  }

  .hero__kicker {
    top: 12px;
    left: 12px;
    width: 85%;
    font-size: clamp(14px, 4vw, 24px);
    line-height: 1.2;
  }

  .hero__label {
    font-size: clamp(12px, 3vw, 16px);
    line-height: 1.3;
  }

  .hero__dots {
    gap: 20px;
    bottom: 20px;
  }
}

@media (max-width: 480px) {
  .hero {
    margin: 0 -12px;
    padding: 0 12px;
  }

  .hero__viewport {
    border-radius: 8px;
  }

  .hero__slide {
    aspect-ratio: 4/3;
    min-height: 250px;
  }

  .hero__content {
    left: 12px;
    right: 12px;
    bottom: 12px;
  }

  .hero__kicker {
    top: 8px;
    left: 8px;
    width: 90%;
    font-size: clamp(12px, 3.5vw, 18px);
  }

  .hero__label {
    font-size: clamp(10px, 2.5vw, 14px);
  }
}