/* Баннеры собственных продуктов НЭН.
   Отдельный файл: index.min.css и article.min.css правятся вручную, лезть в них
   ради новой подсистемы нельзя. Подключается бандлом BannerAsset.

   Визуальный язык взят не «по мотивам», а с живого сайта:
   - карточка повторяет врезку .note в статье (article.css:1072) —
     белый фон, обводка inset 0 0 0 1.3px #33343A, радиус 8px, padding 20px;
   - заголовок и текст — Montserrat 700 20/30 и 400 13/23, как .note .title/.message;
   - кнопка повторяет .nen-auth__btn (site/user/_styles.php:21) — ту самую,
     по которой на этом сайте платят за Клуб и курсы: сплошной #3327AD,
     радиус 999px, 16px/700, ховер #271E85.
   Радужный градиент .button сюда НЕ берётся: это стиль мелкой кнопки 153×38,
   на широком CTA он разворачивается в радугу и выбивается из полосы статьи. */

.nen-banner {
    --nb-ink: #33343a;
    --nb-muted: #5c5562;
    --nb-action: #3327ad;
    --nb-action-hover: #271e85;

    position: relative;
    box-sizing: border-box;
    display: block;
    margin: 32px 0;
    padding: 20px;
    border-radius: 8px;
    background: #fff;
    box-shadow: inset 0 0 0 1.3px var(--nb-ink);
    color: var(--nb-ink);
    font-family: "Montserrat", sans-serif, -apple-system;
    text-decoration: none;
}

.nen-banner * {
    box-sizing: border-box;
}

/* Врезка живёт внутри .article-content, а там своя ссылка:
   `.article-page .article-content a { color: black; text-decoration: underline }`
   со специфичностью (0,2,1) — она перебивает `.nen-banner` (0,1,0), и баннер
   выезжал подчёркнутым и чисто чёрным вместо фирменного #33343A.
   Видно только на собранной странице: в отрыве от статьи стиль правильный.
   Перебиваем прицельно, а не через !important — чужое правило остаётся
   работать для настоящих ссылок в тексте. */
.article-page .article-content a.nen-banner,
.article-page .article-content a.nen-banner:hover,
a.nen-banner {
    color: var(--nb-ink);
    text-decoration: none;
}

/* Разметка баннера — ссылка со span-ами внутри: <a> с блочными детьми ломает
   вставку в тело Setka-статей и в AMP. Поэтому блочность задаётся стилями,
   иначе в формате «боковой столбец» (где контейнер не flex) span остаётся
   строчным и высота картинки не применяется. */
.nen-banner__media,
.nen-banner__body,
.nen-banner__title,
.nen-banner__text,
.nen-banner__note {
    display: block;
}

.nen-banner__media {
    flex: 0 0 auto;
    overflow: hidden;
    border-radius: 4px;
    background: #f1eff2;
}

.nen-banner__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Два типа обложек, и обращаться с ними надо по-разному.
   Фотография (курсы «Первый год», «Школа») — плитка с кадрированием по центру.
   Line-иллюстрация на прозрачном фоне (Клуб, «Перестань немедленно») —
   кадрировать нельзя: обрежет героев. Кладём целиком на белый фон карточки,
   подложка убирается. Не флэттенить такую картинку в JPEG: прозрачность
   схлопнется в чёрный прямоугольник. */
.nen-banner__media--art {
    background: none;
}

.nen-banner__media--art img {
    object-fit: contain;
}

.nen-banner__body {
    min-width: 0;
}

/* Надзаголовок: говорит, что это продукт НЭН, а не редакционный материал.
   Пометки «реклама» и erid здесь нет и быть не должно — своя реклама на своём
   сайте не является рекламой в смысле 38-ФЗ. */
.nen-banner__eyebrow {
    display: block;
    margin: 0 0 8px;
    color: var(--nb-muted);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.nen-banner__title {
    margin: 0 0 12px;
    font-size: 20px;
    font-weight: 700;
    line-height: 30px;
}

.nen-banner__text {
    margin: 0 0 18px;
    font-size: 13px;
    font-weight: 400;
    line-height: 23px;
}

.nen-banner__cta {
    display: inline-block;
    padding: 15px 24px;
    border: none;
    border-radius: 999px;
    background: var(--nb-action);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.1;
    text-align: center;
    text-decoration: none;
    transition: background .15s;
}

.nen-banner__note {
    margin: 10px 0 0;
    font-size: 12px;
    line-height: 20px;
    color: var(--nb-muted);
}

@media (min-width: 1280px) {
    .nen-banner:hover .nen-banner__cta {
        background: var(--nb-action-hover);
    }
}

/* --- формат: врезка в теле статьи ------------------------------------- */

.nen-banner--inline {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.nen-banner--inline .nen-banner__media {
    width: 160px;
    height: 160px;
}

/* --- формат: после текста материала ----------------------------------- */

.nen-banner--end {
    display: flex;
    gap: 24px;
    align-items: center;
}

.nen-banner--end .nen-banner__media {
    order: 2;
    width: 220px;
    height: 165px;
}

.nen-banner--end .nen-banner__body {
    order: 1;
    flex: 1 1 auto;
}

/* --- формат: боковой столбец (десктоп) -------------------------------- */

.nen-banner--sidebar {
    display: block;
    width: 300px;
    margin: 0 0 24px;
}

.nen-banner--sidebar .nen-banner__media {
    width: 100%;
    height: 170px;
    margin-bottom: 16px;
}

.nen-banner--sidebar .nen-banner__cta {
    display: block;
    padding-right: 16px;
    padding-left: 16px;
}

/* --- формат: готовая картинка целиком --------------------------------- */
/* Тот же жанр, что существующие домашние баннеры сайта (partials/_school.php):
   всё нарисовано дизайнером, разметка не вмешивается. Для акций и промо,
   которые нельзя собрать из заголовка и текста. */

.nen-banner--image {
    padding: 0;
    background: none;
    box-shadow: none;
    border-radius: 8px;
    overflow: hidden;
    line-height: 0;
}

.nen-banner--image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
}

/* --- мобильные -------------------------------------------------------- */

@media (max-width: 767px) {
    .nen-banner {
        margin: 24px 0;
    }

    .nen-banner--inline,
    .nen-banner--end {
        display: block;
    }

    .nen-banner--inline .nen-banner__media,
    .nen-banner--end .nen-banner__media {
        width: 100%;
        height: 170px;
        margin-bottom: 16px;
    }

    .nen-banner__cta {
        display: block;
        padding-right: 16px;
        padding-left: 16px;
    }

    /* боковой столбец на мобильных не выводится вовсе — см. шаблон */
    .nen-banner--sidebar {
        display: none;
    }
}