/* ═══ NIO Highlights Stage — вариант NIO Highlights ═══════════
   Класс-модификатор .nio-hl--hstage. Отличия от базового:
   • соседние слайды видны (coverflow, как в базовом);
   • буллетов нет;
   • подпись НЕ на слайде, а ПОД медиа — отдельным блоком в потоке: едет вместе
     со слайдом и проявляется/растворяется (у центрального видна, у уезжающего
     гаснет, у приезжающего проявляется).

   ВАЖНО (архитектура высоты): контрол «Высота изображения» задаёт высоту МЕДИА
   (переменная --nio-hst-mh), а блок текста идёт ПОД ним и в эту высоту НЕ входит.
   Высота слайда = медиа + текст (auto). Раньше было наоборот: медиа считалось как
   calc(100% - зона_подписи), т.е. текст вырезал место из высоты слайда. */

.nio-hl--hstage .nio-hl__bullets{ display: none; }
.nio-hl--hstage .nio-hl__cap-viewport{ display: none; }   /* нижняя дорожка подписей не нужна */

/* слайд = медиа + текст в колонку, высота по контенту */
.nio-hl--hstage .nio-hl__slide{
    background: transparent;
    height: auto !important;
    display: flex;
    flex-direction: column;
}
.nio-hl--hstage .nio-hl__track{ align-items: flex-start; }

/* медиа — своя высота из контрола «Высота изображения» */
.nio-hl--hstage .nio-hl__media{
    position: relative;
    inset: auto;
    width: 100%;
    height: var(--nio-hst-mh, 540px);
    flex: 0 0 auto;
    border-radius: inherit;
    overflow: hidden;
}

/* затемнение соседних слайдов — только на медиа (не на подписи) */
.nio-hl--hstage .nio-hl__slide::after{ display: none; }
.nio-hl--hstage .nio-hl__media::after{
    content: ""; position: absolute; inset: 0;
    background: var(--nio-hl-dim-c, #000); opacity: .55;   /* цвет — контрол «Цвет затемнения» */
    transition: opacity .5s var(--nio-hl-ease);
    pointer-events: none; z-index: 2;
}
.nio-hl--hstage .nio-hl__slide.is-active .nio-hl__media::after{ opacity: 0; }

/* текст — ПОД медиа, в потоке; в высоту медиа не входит */
.nio-hl--hstage .nio-hl__cap-in{
    display: block;
    position: static;
    inset: auto;
    min-height: var(--nio-hst-cap, 132px);   /* чтобы слайды были одной высоты */
    max-width: 100%;
    text-align: center;
    padding: var(--nio-hst-cap-top, 20px) 24px 0;
    opacity: 0;
    transition: opacity .5s ease;
    pointer-events: none;
}
.nio-hl--hstage .nio-hl__slide.is-active .nio-hl__cap-in{
    opacity: 1;
    transition: opacity .65s ease var(--nio-hl-cap-delay, 200ms);
}
.nio-hl--hstage .nio-hl__cap-in .nio-hl__subtitle{ margin-left: auto; margin-right: auto; }

/* Оверлей со стрелками прижимаем к ВЕРХУ слайда (базовый центрирует его по слайду
   через top:50%). Нужно потому, что под медиа теперь лежит блок текста: если
   центрировать по «медиа + текст», стрелки уезжают ниже центра фото.
   Размеры оверлею проставляет JS инлайном (syncOverlay), причём высоту — по медиа,
   поэтому здесь height лишь запасной вариант на случай, если JS ещё не отработал. */
.nio-hl--hstage .nio-hl__overlay{
    top: 0;
    height: var(--nio-hst-mh, 540px);
    transform: translateX(-50%);
}
.nio-hl--hstage .nio-hl__arrow--over{ margin-top: 0; }

/* планшет/моб: подпись остаётся в слайде (перебиваем базовое display:none), буллетов нет */
@media (max-width: 1024px){
    .nio-hl--hstage .nio-hl__cap-in{ display: block; }
    .nio-hl--hstage .nio-hl__bullets--below{ display: none; }
}