/* ═══ NIO Grid Cards — фото + заголовок + описание ═══
   Десктоп: сетка 2–4 колонки. ≤1024: горизонтальный слайдер со стрелками. */
.nio-grid{
    --gcard-w: 60%;
    --gside-pad: 16px;
    --garr-size: 44px;
    --garr-bg: #2b6ef2;
    --garr-color: #fff;
    --garr-off-op: .35;
    width: 100%;
    box-sizing: border-box;
}
.nio-grid *, .nio-grid *::before, .nio-grid *::after{ box-sizing: border-box; }

.nio-grid__track{
    display: grid;
    grid-template-columns: repeat(var(--gcols, 3), 1fr);
    gap: 24px;
}
.nio-grid__card{
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 0;
    min-width: 0;
}
.nio-grid__media{
    position: relative;
    width: 100%;
    aspect-ratio: 1.4;
    overflow: hidden;
    background: #111;
    flex: 0 0 auto;
}
.nio-grid__media picture{ position: absolute; inset: 0; display: block; }
.nio-grid__media img{
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    -webkit-user-drag: none; user-select: none;
}
.nio-grid__body{
    flex: 1 1 auto;              /* тянется — карточки одинаковой высоты */
    background: #000;
    padding: 28px 26px 36px;
}
.nio-grid__title{
    margin: 0 0 16px;
    color: #fff;
    font-size: 19px; font-weight: 600; line-height: 1.3;
}
.nio-grid__desc{
    margin: 0;
    color: #a9a9ad;
    font-size: 14px; line-height: 1.6;
}

/* ── Стрелки (только на слайдере ≤1024) ───────────────── */
.nio-grid__nav{
    display: none;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-top: 28px;
}
.nio-grid__arrow{
    -webkit-appearance: none; appearance: none;
    width: var(--garr-size); height: var(--garr-size);
    padding: 0; border: 0; margin: 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: opacity .2s ease;
}
.nio-grid__arrow.is-svg{ background: var(--garr-bg); color: var(--garr-color); }
.nio-grid__arrow.is-svg svg{ width: 45%; height: 45%; display: block; }
.nio-grid__arrow.is-img img{ width: 100%; height: 100%; object-fit: contain; display: block; }
.nio-grid__arrow.is-off{ opacity: var(--garr-off-op); cursor: default; pointer-events: none; }

/* ── Дисклеймер ───────────────────────────────────────── */
.nio-grid__disclaimer{ margin-top: 40px; }
.nio-grid__disclaimer p{
    margin: 0 0 8px;
    color: #7d7d82;
    font-size: 12px; line-height: 1.5;
}
.nio-grid__disclaimer p:last-child{ margin-bottom: 0; }

/* ── Планшет/моб (≤1024): слайдер ─────────────────────── */
@media (max-width: 1024px){
    .nio-grid__track{
        display: flex;
        grid-template-columns: none;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        /* активный слайд по ЦЕНТРУ: боковой отступ = половина свободного места
           (но не меньше заданного «бокового отступа слайдера») */
        padding-left: max(var(--gside-pad), calc((100% - var(--gcard-w, 84%)) / 2));
        padding-right: max(var(--gside-pad), calc((100% - var(--gcard-w, 84%)) / 2));
    }
    .nio-grid__track::-webkit-scrollbar{ display: none; }
    .nio-grid__card{
        flex: 0 0 var(--gcard-w, 84%);
        scroll-snap-align: center;
    }
    .nio-grid__nav{ display: flex; }
}