/* ═══ NIO Cards — горизонтальная карусель карточек (es9 interior) ═══ */

.nio-cards{
    --card-w: 31%;
    --anim: 600ms;
    --arr-size: 44px;
    --arr-bg: #ffffff;
    --arr-color: #111111;
    --arr-bg-off: rgba(255,255,255,0.12);
    --arr-color-off: rgba(255,255,255,0.35);
    --arr-off-op: 0.35;
    position: relative;
    width: 100%;
    box-sizing: border-box;
}
.nio-cards *, .nio-cards *::before, .nio-cards *::after{ box-sizing: border-box; }

/* ── Область прокрутки ─────────────────────────────────── */
.nio-cards__viewport{
    width: 100%;
    overflow: hidden;
}
/* во всю ширину экрана — крайние карточки уходят за край */
.nio-cards.is-bleed .nio-cards__viewport{
    width: 100vw;
    margin-left: calc(50% - 50vw);
}

.nio-cards__track{
    /* Боковой отступ масштабируется: выравнивание к центрированной колонке
       (--nio-cards-content) с пределом (--nio-cards-padmax) на широких экранах
       и минимумом 16px на узких → карточки не уезжают за правый край. */
    --nio-cards-pad: clamp(16px, calc((100vw - var(--nio-cards-content, 1060px)) / 2), var(--nio-cards-padmax, 40px));
    display: flex;
    align-items: flex-start;
    gap: 24px;
    padding-left: var(--nio-cards-pad);
    transform: translateX(0);
    transition: transform var(--anim, 600ms) cubic-bezier(.4,0,.2,1);
    will-change: transform;
    cursor: grab;
    -webkit-user-select: none; user-select: none;
}
.nio-cards__track.is-grabbing{ cursor: grabbing; transition: none; }
/* трейлинг-спейсер: отступ после последнего слайда = боковому отступу
   (padding-right у скролл-флекса браузеры не учитывают в scrollWidth) */
.nio-cards__track::after{ content: ""; flex: 0 0 var(--nio-cards-pad); align-self: stretch; }

/* ── Карточка ──────────────────────────────────────────── */
.nio-cards__card{
    flex: 0 0 var(--card-w);
    max-width: var(--card-w);
    min-width: 0;
}
.nio-cards__media{
    position: relative;
    width: 100%;
    aspect-ratio: 1.5;
    overflow: hidden;
    border-radius: 4px;
    background: #111;
}
.nio-cards__media picture{ position: absolute; inset: 0; display: block; }
.nio-cards__media img{
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    -webkit-user-drag: none; user-select: none;
}
/* Видео в карточке: на десктопе — видео, на ≤1024 — фото (picture--mob) */
.nio-cards__video{
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; display: block;
}
.nio-cards__media .nio-cards__pic--mob{ display: block; }
@media (min-width: 1024px){ .nio-cards__media .nio-cards__pic--mob{ display: none; } }
@media (max-width: 1023px){ .nio-cards__video{ display: none; } }

.nio-cards__body{ padding-top: 22px; }
.nio-cards__title{
    margin: 0 0 12px;
    color: #fff;
    font-size: 19px; font-weight: 600; line-height: 1.25;
}
.nio-cards__desc{
    margin: 0;
    color: #9a9a9a;
    font-size: 14px; line-height: 1.55;
}

/* ── Стрелки ───────────────────────────────────────────── */
.nio-cards__nav{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 26px;
    padding: 0 40px;
}
.nio-cards__arrow{
    -webkit-appearance: none; appearance: none;
    width: var(--arr-size); height: var(--arr-size);
    flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0; margin: 0; border: 0;
    background: transparent;
    cursor: pointer;
    transition: background .25s ease, color .25s ease, transform .15s ease, opacity .25s ease;
}
.nio-cards__arrow:hover:not(:disabled){ transform: scale(1.06); }
.nio-cards__arrow:active:not(:disabled){ transform: scale(.96); }

/* режим картинки (импортированный SVG/PNG) */
.nio-cards__arrow.is-img{ border-radius: 0; }
.nio-cards__arrow.is-img img{ width: 100%; height: 100%; object-fit: contain; display: block; -webkit-user-drag: none; }
.nio-cards__arrow.is-img:disabled{ opacity: var(--arr-off-op, .35); cursor: default; }

/* режим встроенного шеврона (если иконка не задана) */
.nio-cards__arrow.is-svg{
    border-radius: 50%;
    background: var(--arr-bg);
    color: var(--arr-color);
}
.nio-cards__arrow.is-svg svg{ width: 42%; height: 42%; display: block; }
.nio-cards__arrow.is-svg:disabled{
    background: var(--arr-bg-off);
    color: var(--arr-color-off);
    cursor: default;
}

/* ── Подсказка — как в nio_models/nio_album ────────────── */
.nio-cards__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-cards__tip.is-on{ opacity: 1; }

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