/* ═══ NIO Hero Frame ═══
   Десктоп (>1024): фото — фон-div (background-size:cover + background-position),
     текст наложен поверх (по центру внизу).
   ≤1024: то же фото отдельным <img> в натуральной высоте, текст ПОД ним.
   Текст — один узел (без дублирования, SEO-friendly). */
.nio-frame{
    position: relative;
    width: 100%;
    box-sizing: border-box;
}
.nio-frame *, .nio-frame *::before, .nio-frame *::after{ box-sizing: border-box; }

/* десктоп: фото как фон (cover + позиционирование — надёжно на любой высоте) */
.nio-frame__pic{
    width: 100%;
    height: 460px;                  /* контрол «Высота фрейма» */
    background-size: cover;         /* контрол «Заполнение» */
    background-position: center center; /* контрол «Позиционирование» */
    background-repeat: no-repeat;
}
/* моб-картинка скрыта на десктопе */
.nio-frame__img{ display: none; }

/* полоса под текстом: на всю ширину фото, от низа картинки
   до 10px над верхней строкой текста (десктоп) */
.nio-frame__caption{
    position: absolute;
    left: 0; right: 0; bottom: 0;
    display: flex;
    justify-content: center;
    padding: 10px 24px 32px;        /* верх: 10px над текстом; низ: контрол «Отступ от низа» */
    margin: 0;
}
.nio-frame__text{
    width: auto;
    max-width: 600px;               /* контрол «Макс. ширина текста» */
    margin: 0;
    text-align: center;
}
/* цвет — отдельным правилом с повышенной специфичностью (0,2,0),
   чтобы перебить цвет p из темы; не трогает остальные свойства */
.nio-frame .nio-frame__text{ color: var(--nio-fr-cd, #fff); }

/* ── Планшет/моб (≤1024): фото в натуральной высоте, текст под ним ── */
@media (max-width: 1024px){
    .nio-frame{ display: flex; flex-direction: column; }
    .nio-frame__pic{ display: none; }          /* прячем десктоп-фон */
    .nio-frame__img{
        display: block;
        width: 100%;
        height: auto;            /* натуральная высота; переопределяется контролом «Высота фото (планшет/моб)» */
        object-fit: cover;       /* при заданной высоте обрезает (а не растягивает) */
        object-position: center center;
    }
    .nio-frame__caption{
        position: static;
        left: auto; right: auto; bottom: auto;
        padding: 0;
        margin-top: var(--nio-fr-gap, 16px);
        background: none !important;            /* подложку-градиент показываем только на десктопе */
    }
    .nio-frame__text{
        max-width: 100%;
        margin-left: auto;                      /* центрируем блок текста */
        margin-right: auto;
    }
    .nio-frame .nio-frame__text{ color: var(--nio-fr-cm, #6b6b6b); }
}