/* ================================================================
   NIO Models — models.css  v1.0
   Секция «Explore all the NIO models» в стиле nio.com
   ================================================================ */

.nio-models {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    /* фон-фоллбек, если у модели не задан градиент */
    background: #e9ebee;
    -webkit-user-select: none;
    user-select: none;
    overflow: hidden;
}

/* контент над слоями фона */
.nio-models > *:not(.nio-models__bg):not(.nio-models__tip) { position: relative; z-index: 1; }

/* ── Фон: слои градиента на модель (кросс-фейд) ─────────────────── */
.nio-models__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}
.nio-models__bg-layer {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .6s ease;
    will-change: opacity;
}
.nio-models__bg-layer.is-active { opacity: 1; }

/* ── Заголовок ─────────────────────────────────────────────────── */
.nio-models__title {
    margin: 0 0 24px;
    text-align: center;
    color: #111;
    font-size: 28px;
    line-height: 1.25;
    font-weight: 500;
}
@media (max-width: 767px) {
    .nio-models__title { font-size: 21px; }
}

/* ================================================================
   ТАБЫ  (по образцу nio-ct)
   ================================================================ */
.nio-models__tabs-wrap { width: 100%; }

.nio-models__tabs-container {
    position: relative;
    overflow: hidden;
}

.nio-models__tabs {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 28px;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    scrollbar-width: none;
    -ms-overflow-style: none;
    box-sizing: border-box;
}
.nio-models__tabs::-webkit-scrollbar { display: none; }
.nio-models__tabs-container.has-overflow .nio-models__tabs { justify-content: flex-start; }

.nio-models__tab {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    flex-shrink: 0;
    box-sizing: border-box;
    padding: 0;
    white-space: nowrap;
    font-size: 15px;
    line-height: 20px;
    text-align: center;
    cursor: pointer;
}
@media (min-width: 1024px) { .nio-models__tab { font-size: 16px; } }
.nio-models__tab:first-child { padding-left: 0; }
.nio-models__tab:last-child  { padding-right: 0; }

/* Без полосок под табами — только цвет (как на nio.com) */
.nio-models__tab-label {
    display: block;
    position: relative;
    padding: 14px 0;
    margin: 0;
    color: rgba(0,0,0,.3);
    font: inherit;
    transition: color .25s ease;
}
.nio-models__tab.is-active .nio-models__tab-label { color: #111; }

/* SVG-вордмарк в табе (вместо текста), перекраска через fill: currentColor */
.nio-models__tab-svg {
    display: flex;
    align-items: center;
    padding: 14px 0;
    line-height: 0;
    color: rgba(0,0,0,.3);
    transition: color .25s ease;
}
.nio-models__tab.is-active .nio-models__tab-svg { color: #111; }
.nio-models__tab-svg svg,
.nio-models__tab-svg img { height: 24px; width: auto; display: block; }
.nio-models__tab-svg svg,
.nio-models__tab-svg svg * { fill: currentColor !important; }

/* ================================================================
   СЦЕНА (фото авто + стрелки)
   ================================================================ */
.nio-models__stage {
    position: relative;
    width: 100%;
    height: 520px;   /* дефолт; переопределяется Elementor (stage_height) */
    margin-top: 28px;
}

.nio-models__track {
    position: relative;
    width: 100%;
    height: 100%;
}

/* перетаскивание мышью — курсор «рука» */
.nio-models__track { cursor: grab; }
.nio-models__track.is-grabbing { cursor: grabbing; }

.nio-models__slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transform: translateX(0);
    will-change: transform;
    z-index: 1;
}
.nio-models__slide.is-active {
    opacity: 1;
    pointer-events: auto;
    z-index: 2;
}
/* движение авто: медленный старт → быстро → плавная остановка (без фейда) */
.nio-models__slide.nio-anim {
    transition: transform .72s cubic-bezier(.62, 0, .25, 1);
}

.nio-models__picture {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.nio-models__img {
    display: block;
    max-width: 80%;   /* переопределяется Elementor (image_max_width) */
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    -webkit-user-drag: none;
}

/* ── Стрелки (как на nio.com, 40×40) ──────────────────────────── */
.nio-models__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 8;
    width: 40px; height: 40px;
    padding: 0;
    border: none;
    background: transparent;
    color: #1f1f1f;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    outline: none;
    transition: color .2s ease, transform .2s ease;
}
.nio-models__arrow svg { width: 40px; height: 40px; display: block; }
.nio-models__arrow--next svg { transform: scaleX(-1); }
/* десктоп: стрелки рядом с авто (не у краёв экрана) */
.nio-models__arrow--side.nio-models__arrow--prev { left: 8%; }
.nio-models__arrow--side.nio-models__arrow--next { right: 8%; }
.nio-models__arrow--side.nio-models__arrow--prev:hover { transform: translateY(-50%) translateX(-3px); }
.nio-models__arrow--side.nio-models__arrow--next:hover { transform: translateY(-50%) translateX(3px); }
.nio-models__arrow[disabled] { opacity: .25; cursor: default; pointer-events: none; }
/* стрелки в футере (планшет/моб) скрыты на десктопе */
.nio-models__arrow--foot { position: static; transform: none; }
.nio-models__nav { display: none; }

/* ================================================================
   ФУТЕР: бейдж + кнопка | габариты
   (ширина = ширине авто, ограничивается image_max_width из Elementor)
   ================================================================ */
.nio-models__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin: 28px auto 0;
    max-width: 76%;
}

/* ── Левая часть: бейдж + кнопка ──────────────────────────────── */
.nio-models__info { position: relative; transition: opacity .28s ease; }
.nio-models__info.is-fading { opacity: 0; }

.nio-models__badge { display: none; }
.nio-models__badge.is-active {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 34px;
}
.nio-models__badge-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.nio-models__sub {
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #7a7a7a;
    margin-bottom: 6px;
}
.nio-models__name {
    font-size: 26px;
    line-height: 1.1;
    font-weight: 600;
    color: #111;
}
.nio-models__name-img {
    display: block;
    height: 56px;     /* переопределяется Elementor (name_image_height) */
    width: auto;
    -webkit-user-drag: none;
}
.nio-models__tagline {
    margin-top: 6px;
    font-size: 13px;
    color: #6a6a6a;
}
/* десктоп: если есть иконка-лого — показываем её, текст прячем */
.nio-models__badge.has-icon .nio-models__badge-text { display: none; }
.nio-models__badge:not(.has-icon) .nio-models__name-img { display: none; }

.nio-models__more {
    flex-shrink: 0;
    display: inline-block;
    padding: 13px 30px;
    border: 1px solid #111;
    border-radius: 0;        /* острые углы */
    color: #111;
    font-size: 14px;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    background: transparent;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.nio-models__more:hover { background: #111; color: #fff; }
.nio-models__more--shared { display: none; }  /* видна только на планшете/моб */

/* ── Всплывающая подсказка (слоган) ───────────────────────────── */
/* подсказка — единый стиль для всех слайдеров (без треугольника, справа-снизу от курсора) */
.nio-models__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-models__tip.is-on { opacity: 1; }

/* ── Правая часть: габариты ────────────────────────────────────── */
.nio-models__specs-wrap { position: relative; transition: opacity .28s ease; }
.nio-models__specs-wrap.is-fading { opacity: 0; }
.nio-models__specs { display: none; }
.nio-models__specs.is-active { display: flex; }

.nio-models__spec {
    display: flex;
    flex-direction: column;
    padding: 0 22px;
    border-left: 1px solid rgba(0,0,0,0.12);
}
.nio-models__spec:first-child { border-left: none; padding-left: 0; }
.nio-models__spec:last-child  { padding-right: 0; }
.nio-models__spec-val {
    font-size: 18px;
    font-weight: 600;
    color: #111;
    line-height: 1.2;
}
.nio-models__spec-label {
    margin-top: 4px;
    font-size: 12px;
    color: #8a8a8a;
}

/* разделитель (планшет/моб) */
.nio-models__divider { display: none; width: 72%; max-width: 360px; height: 1px; background: rgba(0,0,0,.13); margin: 2px auto; }

/* ── Адаптив: планшет и ниже — другое расположение ─────────────── */
@media (max-width: 1024px) {
    .nio-models__arrow--side { display: none; }          /* боковые стрелки убираем */
    .nio-models__img { max-width: 100%; }

    .nio-models__footer {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 18px;
        max-width: 100%;
        margin-top: 22px;
    }
    /* порядок: габариты → линия → слоган → кнопка со стрелками */
    .nio-models__specs-wrap { order: 1; width: 100%; }
    .nio-models__divider    { order: 2; display: block; }
    .nio-models__info       { order: 3; }
    .nio-models__nav        { order: 4; }

    /* габариты в 2 столбца */
    .nio-models__specs.is-active {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px 0;
        max-width: 360px;
        margin: 0 auto;
    }
    .nio-models__spec { border-left: none; padding: 0; align-items: center; }

    /* только слоган (иконка-лого и текст-название скрыты) */
    .nio-models__badge.is-active { flex-direction: column; align-items: center; gap: 0; }
    .nio-models__badge.has-icon .nio-models__name-img { display: none; }
    .nio-models__badge.has-icon .nio-models__badge-text { display: flex; }
    .nio-models__badge-text { align-items: center; }
    .nio-models__badge .nio-models__sub,
    .nio-models__badge.has-icon .nio-models__name { display: none; }
    .nio-models__tagline { margin: 0; font-size: 15px; color: #444; }
    .nio-models__more--inline { display: none; }

    /* кнопка по центру, стрелки ближе к краям экрана */
    .nio-models__nav {
        display: flex;
        position: relative;
        width: 100%;
        align-items: center;
        justify-content: center;
        min-height: 48px;
    }
    .nio-models__more--shared { display: inline-block; }
    .nio-models__nav .nio-models__arrow--foot { position: absolute; top: 50%; transform: translateY(-50%); }
    .nio-models__nav .nio-models__arrow--prev { left: 2%; }
    .nio-models__nav .nio-models__arrow--next { right: 2%; }
}
@media (max-width: 767px) {
    .nio-models__spec-val { font-size: 16px; }
    .nio-models__name { font-size: 21px; }
    .nio-models__nav .nio-models__arrow--prev { left: 0; }
    .nio-models__nav .nio-models__arrow--next { right: 0; }
}

/* ================================================================
   ПОЯВЛЕНИЕ ЭЛЕМЕНТОВ: fade-in-up (как на nio.com)
   ================================================================ */
.nio-anim-up {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .7s ease, transform .8s cubic-bezier(.2, .7, .2, 1);
}
.nio-models.is-in .nio-anim-up { opacity: 1; transform: none; }
.nio-models.is-in .nio-models__title     { transition-delay: .05s; }
.nio-models.is-in .nio-models__tabs-wrap { transition-delay: .14s; }
.nio-models.is-in .nio-models__stage     { transition-delay: .24s; }
.nio-models.is-in .nio-models__footer    { transition-delay: .34s; }
/* без анимации появления — если включён reduce motion */
@media (prefers-reduced-motion: reduce) {
    .nio-anim-up { opacity: 1; transform: none; transition: none; }
    .nio-models__slide.nio-anim { transition: opacity .2s ease; }
}

/* ================================================================
   ELEMENTOR EDITOR — превью (показываем всё без анимации появления)
   ================================================================ */
.elementor-editor-active .nio-models__slide { position: absolute; }
.elementor-editor-active .nio-models__slide.is-active { opacity: 1; }
.elementor-editor-active .nio-anim-up { opacity: 1 !important; transform: none !important; }

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