/* ============================================================
   Баннер профиля — общий компонент для шапки профиля (.pf__cover) и
   для превью в примерочной (.ft-cover): одна и та же вёрстка, чтобы
   то, что человек настроил в превью, в профиле выглядело так же.

   Что настраивается (tpl/home/profile.tpl, inc/profile_banner.php):
   режим — «заполнить» (cover) или «вписать целиком» (.bn--contain),
   позиция и масштаб (инлайн-стиль картинки), затемнение (--bn-dim),
   плавный переход вниз в цвет карточки (--bn-fade) и подложка для режима
   «вписать» — размытая копия той же картинки (.bn__bg).

   Приставка bn.
   ============================================================ */

/* isolation: слои затемнения и перехода (z-index 2 и 3) остаются внутри обложки
   и не ложатся поверх аватара и ника.
   position не задаём: у профиля обложка absolute, у превью relative — каждый
   контейнер сам решает, как он размещён */
.bn { overflow: hidden; isolation: isolate; }

.bn__img,
.bn__bg {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
}

/* Подложка: та же картинка, затемнённая и размытая; запас по масштабу,
   чтобы размытые края не светились у границ */
.bn__bg {
    z-index: 0;
    filter: blur(24px) brightness(.65);
    transform: scale(1.2);
}

.bn__img { z-index: 1; }

.bn--contain .bn__img { object-fit: contain; }

/* Затемнение поверх картинки: по яркому баннеру ник и статус не прочитать */
.bn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: rgba(0, 0, 0, calc(var(--bn-dim, 0)));
}

/* Переход вниз в цвет карточки. В профиле тот же градиент уже задан в
   profile.css; здесь он общий с превью, а сила регулируется --bn-fade */
.bn::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(0deg,
        var(--card-color) 0%,
        rgba(13, 13, 17, .82) 22%,
        rgba(13, 13, 17, .25) 55%,
        rgba(13, 13, 17, 0) 100%);
    opacity: var(--bn-fade, 1);
}