/* Start:/local/templates/agency/css/article-custom-blocks.css?178955072513089*/
/*
 * Публичные стили кастомных блоков BlockNote-редактора статей (цитата,
 * промо-баннер, автор статьи) — see _docs/blocknote-article-editor-plan.md,
 * Этап 2. Рендерятся внутри DETAIL_TEXT, т.е. внутри .article-content
 * (см. notamedia/local/components/project/blog.detail/templates/agency/template.php).
 *
 * Значения — токены дизайн-системы Notamedia 3.0 (сверено с
 * notamedia_new_frontend/src/styles/tokens.css: --color-ink, --color-brand-green,
 * --radius-pill и т.д.). Не используем var(--...) напрямую: те же токены уже
 * скомпилированы в markup_astro/_astro/index.*.css и грузятся на каждой
 * agency-странице, но объявлены внутри `.nm{...}`, а не `:root` — `.nm`
 * оборачивает только хедер и футер по отдельности (см. комментарий в
 * templates/agency/header.php про `.nm.nm-chrome`), .article-content вне
 * этой обёртки, так что переменные там не резолвятся. Поэтому значения
 * захардкожены как копия реальных токенов, а не как их использование.
 */

/*
 * Блок кода (штатный codeBlock BlockNote) — подсветка синтаксиса теперь
 * через Prism.js (подключён в component_epilog.php blog.detail/agency,
 * тема prism-tomorrow), не своя доморощенная CSS: тема сама оформляет
 * фон/padding/цвета токенов у pre[class*="language-"]/code[class*="language-"].
 * Единственное, что переопределяем — вертикальный отступ: у темы
 * margin:.5em, заметно теснее, чем 32-48px у остальных блоков статьи
 * (цитата/промо/автор), выбивался бы из ритма. Специфичность
 * `.article-content pre[class*="language-"]` (класс+атрибут+тип) заведомо
 * выше, чем у правила темы (атрибут+тип) — переопределяется независимо от
 * порядка подключения стилей.
 */
.article-content pre[class*="language-"] {
    margin: 32px 0;
}

.article-content .article-divider {
    margin: 48px 0;
    border: none;
    border-top: 1px solid #e9e9e9; /* --color-border, как у .article-author */
}

/*
 * Блок колонок — официальный @blocknote/xl-multi-column (добавлен
 * 2026-09-16 по запросу пользователя). В отличие от остальных кастомных
 * блоков здесь НЕТ обёртки "article-*" — пакет сам не задаёт
 * data-content-type/класс на свой вкус, экспортирует голые
 * .bn-block-column-list/.bn-block-column с инлайновыми
 * style="display:flex"/"flex-grow:1" (проверено на офлайн-фикстуре,
 * структура полностью переживает blocksToHTMLLossy() — в отличие от
 * toggle-заголовков, колонки в списке "list-like" блоков самого BlockNote).
 * Публичная страница не грузит стили редактора BlockNote (только этот
 * файл), поэтому без этих правил колонки касались бы друг друга без
 * отступа и не бы не переносились на мобильных.
 */
.article-content .bn-block-column-list {
    margin: 48px 0;
    gap: 32px;
}

.article-content .bn-block-column > *:first-child {
    margin-top: 0;
}

.article-content .bn-block-column > *:last-child {
    margin-bottom: 0;
}

@media screen and (max-width: 767px) {
    .article-content .bn-block-column-list {
        flex-direction: column;
        gap: 24px;
        margin: 34px 0;
    }
}

/*
 * Чек-лист (checkListItem) экспортируется как обычный <ul><li> с настоящим
 * <input type="checkbox">, который на статической странице (без JS
 * BlockNote) остаётся кликабельным сам по себе — переключается визуально у
 * посетителя в браузере, но никуда не сохраняется и ни на что не влияет,
 * что вводит в заблуждение (выглядит как рабочий чек-лист, но это витрина
 * состояния на момент сохранения статьи). Отключаем интерактивность
 * оформлением, оставляя чекбокс как индикатор отметки автора.
 */
.article-content ul li input[type="checkbox"] {
    pointer-events: none;
    margin-right: 8px;
    vertical-align: middle;
}

.article-content .article-quote {
    position: relative;
    margin: 48px 0;
    padding: 8px 40px;
    border-left: 4px solid #38a14c; /* --color-brand-green */
}

.article-content .article-quote p {
    margin: 0;
    font-size: 28px;
    line-height: 1.3;
    font-weight: 500;
    color: #09101b; /* --color-ink-deep */
}

.article-content .article-quote footer {
    margin-top: 16px;
    font-size: 16px;
    line-height: 1.4;
    font-weight: 400;
    color: #636b70; /* --color-text-muted */
}

@media screen and (max-width: 1024px) {
    .article-content .article-quote {
        padding: 4px 24px;
    }

    .article-content .article-quote p {
        font-size: 20px;
    }
}

@media screen and (max-width: 767px) {
    .article-content .article-quote {
        margin: 34px 0;
        padding: 4px 16px;
    }

    .article-content .article-quote p {
        font-size: 16px;
    }

    .article-content .article-quote footer {
        font-size: 14px;
    }
}

/*
 * .article-promo намеренно копирует реальный существующий на сайте
 * промо-баннер `.promo-utp` (см. https://agency.nota.media/blog/cifrovaya-ehvolyuciya-2026/ —
 * на этой ОДНОЙ странице встречается три инстанса одного компонента с разным
 * смыслом: CTA "Обсудить проект", "Читать статью", "Смотреть кейсы", отсюда
 * и решение сделать блок универсальным промо-баннером, а не только CTA,
 * 2026-09-15) — тот же borderRadius 32px, зелёная pill-кнопка. Значения
 * (padding, font-size, border-radius) сняты через getComputedStyle с
 * реального элемента на проде, не подобраны на глаз. У реального компонента
 * картинка-иллюстрация задаётся отдельными свойствами инфоблока (UTP_*) —
 * здесь то же самое поле лежит прямо в блоке (article-promo-image).
 *
 * variant — три пресета фона (см. VARIANTS в promoBanner.tsx): mint (по
 * умолчанию, совпадает с реальным сайтом), blue, dark. Кнопка везде зелёная
 * (--color-brand-green) — на сайте она такая при любом контексте баннера.
 */
.article-content .article-promo {
    position: relative;
    margin: 48px 0;
    padding: 32px;
    border-radius: 32px;
    overflow: hidden;
}

.article-content .article-promo_mint {
    background: linear-gradient(90deg, #e4f7e8 0%, #d3ecfa 50%, #cfebff 100%);
}

.article-content .article-promo_blue {
    background: linear-gradient(90deg, #edf6fc 0%, #cfebff 100%);
}

.article-content .article-promo_dark {
    background: #232b37; /* --color-ink */
}

.article-content .article-promo-content {
    position: relative;
    z-index: 1;
    max-width: 60%; /* сверено с реальным .promo-utp__column: maxWidth 58% */
}

.article-content .article-promo h3 {
    margin: 0 0 8px;
    font-size: 20px;
    line-height: 24px;
    font-weight: 600;
    color: #09101b; /* --color-ink-deep */
}

.article-content .article-promo p {
    margin: 0 0 16px;
    font-size: 16px;
    line-height: 1.3;
    color: #09101b; /* --color-ink-deep */
}

.article-content .article-promo_dark h3,
.article-content .article-promo_dark p {
    color: #ffffff;
}

.article-content .article-promo_dark p {
    opacity: 0.72;
}

.article-content .article-promo-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 26px;
    border-radius: 50px;
    background: #38a14c; /* --color-brand-green */
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    border-bottom: none !important; /* сбрасывает подчёркивание ссылок .article-content */
    transition: background 0.22s cubic-bezier(0.33, 1, 0.68, 1); /* --dur-base / --ease-out */
}

@media screen and (min-width: 1025px) {
    .article-content .article-promo-button:hover {
        background: #0b65a4; /* --color-brand-blue */
    }
}

/*
 * Позиционируется абсолютно, с вылетом за нижний/правый край карточки —
 * так же, как у реального .promo-utp__img (position:absolute, картинка
 * заведомо больше своей видимой области). Иллюстрации с сайта (рупор,
 * папка, стрелка) сами обрезаны "впритык" под этот приём: если вписывать
 * их через object-fit:contain в маленький бокс, обрезка выглядит криво —
 * подгонять новую картинку каждый раз не пришлось бы, если бы это был
 * задизайненный компонент с фиксированными картинками, но здесь картинка
 * произвольная (imageUrl), поэтому просто не ограничиваем её высоту жёстко.
 */
.article-content .article-promo-image {
    position: absolute;
    z-index: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

.article-content .article-promo-image img {
    display: block;
    width: 220px;
    height: auto;
}

@media screen and (max-width: 1024px) {
    .article-content .article-promo {
        padding: 24px;
    }

    .article-content .article-promo-image img {
        width: 160px;
    }
}

@media screen and (max-width: 767px) {
    .article-content .article-promo {
        padding: 20px;
        padding-bottom: 128px; /* место под картинку, см. article-promo-image ниже */
        border-radius: 20px;
    }

    .article-content .article-promo-content {
        max-width: 100%;
    }

    .article-content .article-promo h3 {
        font-size: 18px;
    }

    .article-content .article-promo-button {
        width: 100%;
    }

    .article-content .article-promo-image {
        right: 50%;
        transform: translateX(50%);
    }

    .article-content .article-promo-image img {
        width: 130px;
    }
}

.article-content .article-author {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 48px 0;
    padding: 24px 0;
    border-top: 1px solid #e9e9e9; /* --color-border */
    border-bottom: 1px solid #e9e9e9;
}

.article-content .article-author-photo {
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
}

.article-content .article-author-id {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.article-content .article-author-name {
    font-size: 18px;
    line-height: 1.3;
    font-weight: 600;
    color: #09101b; /* --color-ink-deep */
}

.article-content .article-author-position {
    font-size: 14px;
    line-height: 1.4;
    color: #636b70; /* --color-text-muted */
}

.article-content .article-author-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    margin-left: auto;
    text-align: right;
    white-space: nowrap;
}

.article-content .article-author-meta time,
.article-content .article-author-meta .article-author-reading-time {
    font-size: 14px;
    line-height: 1.4;
    color: #9399a4; /* --color-text-subtle */
}

@media screen and (max-width: 767px) {
    .article-content .article-author {
        gap: 12px;
        padding: 16px 0;
    }

    .article-content .article-author-photo {
        flex: 0 0 48px;
        width: 48px;
        height: 48px;
    }

    .article-content .article-author-meta {
        white-space: normal;
    }
}

/* End */
/* /local/templates/agency/css/article-custom-blocks.css?178955072513089 */