@layer components {

.kn-blog-content > * { max-width: var(--content-max); }
.kn-blog-content .wp-block-image { margin-bottom: 1em; max-width: min(100%, var(--content-max)) !important; width: auto !important; display: table !important; }
.kn-blog-content .wp-block-image img { max-width: 100% !important; width: auto !important; height: auto !important; display: block !important; }
.kn-blog-content .kn-blog__featured-image { max-width: min(100%, var(--content-max)) !important; width: auto !important; display: table !important; margin: 32px 0; overflow: hidden; }
.kn-blog-content .kn-blog__featured-image img { max-width: 100% !important; width: auto !important; height: auto !important; border-radius: var(--r-card); display: block !important; }
.kn-blog-content img { max-width: 100%; width: auto !important; height: auto !important; border-radius: var(--r-card); display: block; }
.kn-blog-content img.content-img { border-radius: 0; margin: 16px 0; border: 2px solid var(--border-strong); }
.kn-blog-content p { margin-bottom: 1em; color: var(--text-secondary); }
.kn-blog-content h2 { margin-top: 1.5em; margin-bottom: 0.5em; }
.kn-blog-content h3 { margin-top: 1.2em; margin-bottom: 0.5em; }
.kn-blog-content h4 { margin-top: 1.4em; margin-bottom: 0.5em; }
.kn-blog-content h5, .kn-blog-content h6 { margin-top: 1.2em; margin-bottom: 0.4em; }
.kn-blog-content ul, .kn-blog-content ol { margin-bottom: 1em; padding: 0; list-style: none; color: var(--text-secondary); }
.kn-blog-content ul li { padding: 6px 0 6px 24px; position: relative; }
.kn-blog-content ul li::before { content: ""; position: absolute; left: 0; top: 14px; width: 6px; height: 6px; border-radius: 1px; background: var(--accent); opacity: 0.6; }
.kn-blog-content ol li { padding: 6px 0 6px 32px; position: relative; counter-increment: list-counter; }
.kn-blog-content ol li::before { content: counter(list-counter) "."; position: absolute; left: 0; font-weight: 600; color: var(--accent-ink); }
.kn-blog-content ol { counter-reset: list-counter; }
.kn-blog-content strong { color: var(--text-primary); }
.kn-blog-content code { background: var(--bg-card2); padding: 2px 6px; border-radius: 4px; font-size: 0.875em; }
.kn-blog-content pre.wp-block-code { margin: 0 0 1em; padding: 12px 16px; background: var(--bg-card2); border: 0.5px solid var(--border); border-radius: var(--r-card); overflow-x: auto; font-size: 0.8125rem; line-height: 1.6; }
.kn-blog-content pre.wp-block-code code { display: block; background: none; padding: 0; border-radius: 0; font-size: 1em; font-family: ui-monospace, 'Cascadia Mono', Menlo, Consolas, monospace; color: var(--text-secondary); }
.kn-blog-content a { color: var(--accent-ink); }
.kn-blog-content .wp-block-quote { margin: 16px 0; padding: 12px 16px; border-left: 2px solid var(--accent); background: var(--accent-light); border-radius: 0 var(--r-card) var(--r-card) 0; }
.kn-blog-content .wp-block-quote p { font-size: 0.9375rem; line-height: 1.65; color: var(--text-primary); font-weight: 500; margin-bottom: 8px; }
.kn-blog-content .wp-block-quote cite { font-size: 0.8125rem; color: var(--accent-ink); font-style: normal; font-weight: 600; }
.kn-blog-content .wp-block-quote.is-style-large p { font-size: 1.125rem; }

/*
 * Демо-вставки в статьях, свёрстанные под тёмный фон (карточки #111, блоки #1c1c1c).
 * В светлой теме фон у них остаётся тёмным, поэтому текст принудительно
 * оставляем светлым - иначе он наследует тёмный цвет темы и пропадает.
 * Обёртке верхнего уровня задаётся светлый цвет, а вложенным элементам -
 * наследование, чтобы их не перебивали общие правила `.kn-blog-content p/strong/a`.
 * Авторские цвета самих вставок (стили в контенте лежат вне слоёв и потому
 * приоритетнее) при этом сохраняются.
 */
.kn-blog-content > :is(
    .kruglov-analytics-demo,
    .kruglov-data-flow,
    .kruglov-cookie-demo,
    .kruglov-data-process,
    .kruglov-balance,
    .kruglov-ia-structure,
    .kruglov-grouping-demo,
    .kruglov-depth-demo,
    .kruglov-menu-names,
    .kruglov-furniture-hero-demo,
    .kruglov-furniture-category-demo,
    .kruglov-portfolio-demo,
    .kruglov-process-demo,
    .kruglov-price-demo,
    .kruglov-project-card-demo,
    .kruglov-project-title-demo,
    .kruglov-task-demo,
    .kruglov-solution-demo,
    .kruglov-material-demo,
    .kruglov-portfolio-value-demo,
    .kruglov-portfolio-category-demo,
    .kruglov-projects-range-demo,
    .kruglov-portfolio-structure-demo,
    .kruglov-mvp-demo,
    .kruglov-mvp-quality-demo,
    .kruglov-mvp-priority-demo,
    .kruglov-mvp-choice-demo
) { color: var(--embed-ink); }

.kn-blog-content > :is(
    .kruglov-analytics-demo,
    .kruglov-data-flow,
    .kruglov-cookie-demo,
    .kruglov-data-process,
    .kruglov-balance,
    .kruglov-ia-structure,
    .kruglov-grouping-demo,
    .kruglov-depth-demo,
    .kruglov-menu-names,
    .kruglov-furniture-hero-demo,
    .kruglov-furniture-category-demo,
    .kruglov-portfolio-demo,
    .kruglov-process-demo,
    .kruglov-price-demo,
    .kruglov-project-card-demo,
    .kruglov-project-title-demo,
    .kruglov-task-demo,
    .kruglov-solution-demo,
    .kruglov-material-demo,
    .kruglov-portfolio-value-demo,
    .kruglov-portfolio-category-demo,
    .kruglov-projects-range-demo,
    .kruglov-portfolio-structure-demo,
    .kruglov-mvp-demo,
    .kruglov-mvp-quality-demo,
    .kruglov-mvp-priority-demo,
    .kruglov-mvp-choice-demo
) * { color: inherit; }

@media (max-width: 900px) {
  .kn-blog-content h2 { margin-top: 32px; margin-bottom: 12px; }
  .kn-blog-content h3 { margin-top: 24px; margin-bottom: 10px; }
  .kn-blog-content h4 { margin-top: 24px; margin-bottom: 10px; }
}

}