/* ═══ NIO Hero BG — фон-медиа с опциональным блоком текста снизу-слева ═══
   Фон — background-image (cover) на абсолютном слое inset:0. Текст — в потоке снизу,
   растит контейнер (min-height) при переносе строк, а фон (cover) тянется за ним.
   Так текст НИКОГДА не вылазит за края изображения. */
.nio-bg{
    position: relative;
    width: 100%;
    min-height: 90vh;            /* min-height: контейнер растёт под длинный текст */
    overflow: hidden;
    background: #000;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;   /* блок текста — снизу */
}
.nio-bg *, .nio-bg *::before, .nio-bg *::after{ box-sizing: border-box; }

/* фон-слой: всегда покрывает контейнер любой высоты (cover не зависит от высоты) */
.nio-bg__bg{
    position: absolute;
    inset: 0;
    z-index: 0;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-image: var(--nio-bg-mob, none);   /* ≤1024 */
}
@media (min-width: 1025px){
    .nio-bg__bg{ background-image: var(--nio-bg-desk, none); }   /* >1024: постер/фото десктопа */
}

/* видео — только десктоп, поверх фон-постера (постер — страховка при любой высоте).
   object-fit:cover = по ширине упирается в края; если высоты не хватает — масштабируется.
   object-position:center center = вертикаль и горизонталь по центру (дефолт). */
.nio-bg__video{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: none;
}
@media (min-width: 1025px){ .nio-bg__video{ display: block; } }

/* ── Полоса «заголовок + текст» — снизу, на всю ширину медиа ───────────
   .nio-bg__overlay — полноширинная полоса (сюда вешается класс-подложка с градиентом):
   от низа медиа до 10px над верхней строкой текста.
   .nio-bg__inner — центрированная колонка (ширина — контрол), текст у левого края. */
.nio-bg__overlay{
    position: relative;          /* в потоке: растит контейнер, фон следует за ним */
    z-index: 3;
    width: 100%;
    padding: 10px 20px 66px;     /* верх 10px (над текстом); бок — контрол; низ — контрол */
    line-height: normal;
}
.nio-bg__inner{
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;              /* центрируем колонку; текст внутри — слева */
    text-align: left;
}
.nio-bg__title{
    margin: 0 0 16px;
    font-size: 36px; font-weight: 600; line-height: 1.15;
}
.nio-bg__text{
    display: inline-block;   /* «коробка» центрируется при text-align:center у .nio-bg__inner (десктоп) */
    margin: 0;
    font-size: 16px; line-height: 1.5;
    max-width: 520px;
}
/* альт-текст для ≤1024 — по умолчанию скрыт; на десктопе показываем основной */
.nio-bg__text--mob{ display: none; }
/* цвета — через переменные, правилом с повышенной специфичностью (0,2,0),
   чтобы перебить цвет тегов из темы и корректно переопределяться в стек-режиме */
.nio-bg .nio-bg__title{ color: var(--nio-bg-tc, #fff); }
.nio-bg .nio-bg__text{  color: var(--nio-bg-xc, #fff); }
@media (max-width: 1024px){
    .nio-bg__overlay{ padding-bottom: 30px; }
    .nio-bg__inner{ max-width: 100%; }
    .nio-bg__text{ max-width: 100%; }
    /* на ≤1024: если задан альт-текст — прячем основной, показываем альт */
    .nio-bg__text--desk{ display: none; }
    .nio-bg__text--mob{ display: inline-block; max-width: 100%; }
}

/* ── Режим «текст под/над медиа» (≤1024, класс .is-stack) ──────────────
   Медиа — блок в потоке (height — контрол), текст под ним (.is-below, по умолчанию)
   или над ним (.is-above, column-reverse). Чёрного фона нет, класс-подложка отключён.
   Отступ текста от медиа (--nio-bg-sg) зеркалируется: margin-top vs margin-bottom. */
@media (max-width: 1024px){
    .nio-bg.is-stack{
        min-height: 0 !important;
        background: transparent;       /* без чёрного фона за текстом */
        flex-direction: column;        /* по умолчанию: текст ПОД медиа */
        justify-content: flex-start;
    }
    .nio-bg.is-stack.is-above{ flex-direction: column-reverse; }   /* текст НАД медиа */
    .nio-bg.is-stack .nio-bg__bg{
        position: relative;            /* в потоке: занимает низ */
        height: 62vw;                  /* переопределяется контролом «Высота медиа» */
        inset: auto;
    }
    .nio-bg.is-stack .nio-bg__overlay{
        background: none !important;   /* подложку-градиент в стек-режиме отключаем */
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        text-align: var(--nio-bg-sa, left);
    }
    .nio-bg.is-stack.is-below .nio-bg__overlay{ margin-top: var(--nio-bg-sg, 16px); }     /* текст под фото — отступ сверху */
    .nio-bg.is-stack.is-above .nio-bg__overlay{ margin-bottom: var(--nio-bg-sg, 16px); }  /* текст над фото — отступ снизу */
    .nio-bg.is-stack .nio-bg__inner{
        display: inline-block;         /* центрируем колонку через text-align родителя */
        width: 100%;
        /* !important — перебить контрол «Ширина блока» (block_max), у него выше специфичность */
        max-width: var(--nio-bg-sw, 100%) !important;
        text-align: var(--nio-bg-sa, left);
    }
    .nio-bg.is-stack .nio-bg__title{ color: var(--nio-bg-stc, var(--nio-bg-tc, #1d1d1f)); }
    .nio-bg.is-stack .nio-bg__text{  color: var(--nio-bg-sc,  var(--nio-bg-xc, #6b6b6b)); max-width: 100%; }
}