/* ═══ NIO Album — галерея с превью (es9 exterior content) ═══ */

.nio-ab{
    --nio-ab-fade: 450ms;
    position: relative;
    width: 100%;
    box-sizing: border-box;
}
.nio-ab *, .nio-ab *::before, .nio-ab *::after{ box-sizing: border-box; }

.nio-ab__stage{
    position: relative;
    width: 100%;
    height: 660px;
    overflow: hidden;
    border-radius: 0;
    background: #000;
    cursor: grab;
    -webkit-user-select: none; user-select: none;
}
.nio-ab__stage.is-grabbing{ cursor: grabbing; }

/* ── Фото (стопка, кросс-фейд) ─────────────────────────── */
/* Фон рисуется через background-image:cover — он покрывает сцену ЛЮБОЙ высоты
   (в т.ч. при height:100vh), без зависимости от резолва высоты у <img>. */
.nio-ab__images{ position: absolute; inset: 0; }
.nio-ab__img{
    position: absolute; inset: 0;
    opacity: 0;
    transition: opacity var(--nio-ab-fade) ease;
    background-size: cover;
    background-position: center center;   /* фокус кадра — контрол img_pos */
    background-repeat: no-repeat;
    background-image: var(--ab-d);
}
.nio-ab__img.is-shown{ opacity: 1; }
@media (max-width: 1023px){
    .nio-ab__img{ background-image: var(--ab-m); }   /* планшет/моб — вертикальное фото */
}

/* затемнение снизу для читаемости */
.nio-ab__scrim{
    position: absolute; inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: .55;
    background: linear-gradient(to top, #000 0%, rgba(0,0,0,0) 60%);
}

/* ── Сквозной заголовок (один для всех слайдов, сверху-слева) ── */
.nio-ab__header{
    position: absolute;
    left: 0; right: 0; top: 66px;
    margin: 0 auto;
    max-width: 1120px;
    padding: 0 20px;
    z-index: 3;
    text-align: left;            /* по левому краю на всех устройствах */
    pointer-events: none;
}
.nio-ab__h-title{
    margin: 0 0 16px;
    color: #fff;
    font-size: 30px; font-weight: 600; line-height: 1.2;
}
.nio-ab__h-desc{
    margin: 0;
    color: #fff;
    font-size: 15px; line-height: 1.55;
    max-width: 520px;
}

/* ── Контентная сетка ──────────────────────────────────── */
.nio-ab__grid{
    position: absolute;
    left: 0; right: 0; bottom: 44px;
    margin: 0 auto;
    max-width: 1200px;
    padding: 0 20px;
    z-index: 3;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    pointer-events: none;        /* перетаскивание проходит к фото */
}
.nio-ab__thumbs{ pointer-events: auto; }

/* текст (заголовок + описание), стопка для кросс-фейда */
.nio-ab__captions{ position: relative; flex: 1 1 auto; min-height: 1px; }
.nio-ab__cap{
    position: absolute;
    left: 0; right: 0; bottom: 0;
    opacity: 0;
    transition: opacity .35s ease;
    pointer-events: none;
}
.nio-ab__cap.is-active{ opacity: 1; }
.nio-ab__title{
    margin: 0 0 10px;
    color: #fff;
    font-size: 22px; font-weight: 600; line-height: 1.2;
}
.nio-ab__desc{
    margin: 0;
    color: #fff;
    font-size: 14px; line-height: 1.5;
    max-width: 380px;
}

/* превью */
.nio-ab__thumbs{ display: flex; align-items: flex-end; gap: 10px; flex: 0 0 auto; }
.nio-ab__thumb{
    -webkit-appearance: none; appearance: none;
    position: relative;
    width: 96px; height: 64px;
    padding: 0; border: 0; margin: 0;
    background: none;
    cursor: pointer;
    overflow: hidden;
    border-radius: 2px;
    outline: 0 solid #fff;
    outline-offset: 0;            /* рамка без отступа от изображения */
    flex: 0 0 auto;
}
.nio-ab__thumb img{ width: 100%; height: 100%; object-fit: cover; display: block; }
/* неактивные превью чуть темнее; при наведении затемнение плавно исчезает */
.nio-ab__thumb::after{
    content: "";
    position: absolute; inset: 0;
    background: #000;
    opacity: var(--nio-ab-thumb-dim, .35);
    border-radius: inherit;
    transition: opacity .3s ease;
    pointer-events: none;
}
.nio-ab__thumb.is-active::after,
.nio-ab__thumb:hover::after{ opacity: 0; }
.nio-ab__thumb.is-active{ outline-style: solid; outline-width: 2px; outline-color: #fff; }

/* подсказка — как в nio_models/nio_colors */
.nio-ab__tip{
    position: fixed;
    z-index: 1000;
    padding: 6px 11px;
    background: #1d1d1f;
    color: #fff;
    font-size: 10px; line-height: 1.4;
    white-space: nowrap;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0,0,0,.18);
    pointer-events: none;
    opacity: 0;
    transition: opacity .12s ease;
}
.nio-ab__tip.is-on{ opacity: 1; }

/* ── Планшет/моб: текст и превью по центру снизу ────────── */
@media (max-width: 1023px){
    .nio-ab__grid{
        flex-direction: column;
        align-items: center;
        bottom: 30px;
        max-width: 100%;
        gap: 18px;
    }
    /* шапка остаётся слева (низ центрируется, шапка — нет) */
    .nio-ab__header{ top: 30px; max-width: 100%; text-align: left; }
    .nio-ab__h-desc{ max-width: 100%; }
    .nio-ab__captions{ width: 100%; text-align: center; }
    .nio-ab__desc{ margin-left: auto; margin-right: auto; }
    .nio-ab__thumbs{ justify-content: center; }
    .nio-ab__thumb{ width: 72px; height: 48px; }
}

/* подсказка только на десктопе */
@media (max-width: 1024px){ .nio-ab__tip{ display: none !important; } }