/* Подложки, появление, иконки, цвета эксперта и рекламной плашки
   (docs/editorjs-podlozhki.md). Отдельным файлом: article.min.css собран
   вручную. Та же разметка в AMP — frontend/views/layouts/amp/style_nen_box.php
   (без появления: там нет скрипта). Правишь здесь — правь и там. */

/* --- карточка ---------------------------------------------------------- */
.article-page .article-content .nen-box{margin:32px 0;border-radius:8px;background:var(--nen-box-bg,#fff);color:var(--nen-box-text,inherit);overflow:hidden}
.article-page .article-content .nen-box--box{box-shadow:inset 0 0 0 1.5px var(--nen-box-border,transparent)}
.article-page .article-content .nen-box--stripe{border-left:4px solid var(--nen-box-border,transparent);border-radius:0 8px 8px 0}
.article-page .article-content .nen-box a{color:inherit}
.article-page .article-content .nen-box.margin_s{margin-bottom:16px}
.article-page .article-content .nen-box.margin_m{margin-bottom:32px}
.article-page .article-content .nen-box.margin_l{margin-bottom:48px}
.article-page .article-content .nen-box.margin_xl{margin-bottom:64px}
.article-page .article-content>ul.margin_s,.article-page .article-content>ol.margin_s,.article-page .article-content>figure.margin_s{margin-bottom:16px}
.article-page .article-content>ul.margin_m,.article-page .article-content>ol.margin_m,.article-page .article-content>figure.margin_m{margin-bottom:32px}
.article-page .article-content>ul.margin_l,.article-page .article-content>ol.margin_l,.article-page .article-content>figure.margin_l{margin-bottom:48px}
.article-page .article-content>ul.margin_xl,.article-page .article-content>ol.margin_xl,.article-page .article-content>figure.margin_xl{margin-bottom:64px}
.article-page .article-content .nen-box .nen-box__item{padding:0 20px}
.article-page .article-content .nen-box .nen-box__item:first-child{padding-top:20px}
.article-page .article-content .nen-box .nen-box__item:last-child{padding-bottom:20px}
.article-page .article-content .nen-box .nen-box__item+.nen-box__item{margin-top:14px}
.article-page .article-content .nen-box .nen-box__item.margin_s+.nen-box__item{margin-top:8px}
.article-page .article-content .nen-box .nen-box__item.margin_m+.nen-box__item{margin-top:20px}
.article-page .article-content .nen-box .nen-box__item.margin_l+.nen-box__item{margin-top:32px}
.article-page .article-content .nen-box .nen-box__item.margin_xl+.nen-box__item{margin-top:48px}
.article-page .article-content .nen-box .nen-box__item>*{margin-top:0;margin-bottom:0;color:inherit}
.article-page .article-content .nen-box .nen-box__item>.native-ad-button{margin-left:auto;margin-right:auto}
.article-page .article-content .nen-box a.native-ad-button--filled{color:var(--native-ad-text,#fff)}
.article-page .article-content .nen-box a.native-ad-button--outline{color:var(--native-ad-accent,#3327ad)}
.article-page .article-content .nen-box .nen-box__item>.image img{width:100%;height:auto}
/* блок со своим фоном внутри карточки — цветная шапка во всю ширину */
.article-page .article-content .nen-box .nen-box__item--band{padding:14px 20px;background:var(--nen-box-bg);color:var(--nen-box-text,inherit)}
.article-page .article-content .nen-box .nen-box__item--band+.nen-box__item{margin-top:14px}
.article-page .article-content .nen-box .nen-box__item--band:first-child{padding-top:14px}
.article-page .article-content .nen-box .nen-box__item--band:last-child{padding-bottom:14px}
@media (min-width:768px){
.article-page .article-content .nen-box .nen-box__item{padding:0 28px}
.article-page .article-content .nen-box .nen-box__item:first-child{padding-top:28px}
.article-page .article-content .nen-box .nen-box__item:last-child{padding-bottom:28px}
.article-page .article-content .nen-box .nen-box__item--band{padding:16px 28px}
.article-page .article-content .nen-box .nen-box__item--band:first-child{padding-top:16px}
.article-page .article-content .nen-box .nen-box__item--band:last-child{padding-bottom:16px}
}
/* старые пресеты на не-абзаце (список, заголовок, фото): как у абзаца */
.article-page .article-content .nen-box[class*="--preset-"]{padding:20px}
.article-page .article-content .nen-box[class*="--preset-"]>*{margin-top:0;margin-bottom:0}
.article-page .article-content .nen-box--preset-white{border-radius:15px;box-shadow:rgba(51,52,57,.4) 0 3px 8px}
.article-page .article-content .nen-box--preset-red{box-shadow:inset 0 0 0 1.3px #ef895d}
.article-page .article-content .nen-box--preset-black{box-shadow:inset 0 0 0 1.3px #33343a}
.article-page .article-content .nen-box--preset-gray{background:rgba(51,52,58,.1)}

/* --- появление при прокрутке (reveal.js вешает nen-reveal-js на html) ---- */
.nen-reveal-js .nen-reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.nen-reveal-js .nen-reveal.nen-reveal--in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.nen-reveal-js .nen-reveal{opacity:1;transform:none;transition:none}}

/* --- иконка заголовка --------------------------------------------------- */
.article-page .nen-icon{display:inline-block;width:1em;height:1em;vertical-align:-.12em;margin-right:.25em}

/* --- эксперт: цвет имени, фон и обводка карточки ----------------------- */
.article-page .article-content .expert.expert--box{padding:20px;border-radius:8px;background:var(--nen-x-bg,transparent);color:var(--nen-x-text,inherit);box-shadow:inset 0 0 0 1.5px var(--nen-x-border,transparent)}
.article-page .article-content .expert .text h3,.article-page .article-content .expert .text .title{color:var(--nen-x-name,inherit)}

/* --- рекламная плашка: свой фон и фото сверху --------------------------- */
.article-page .article-content .native-ad-product-card{background:var(--native-ad-card-bg,#f7effb);color:var(--native-ad-card-text,inherit)}
.article-page .article-content .native-ad-product-card--image-top .native-ad-product-card__image{order:-1}