/*
 * Отдельный слой для Gutenberg-блоков.
 *
 * Этот файл отвечает только за читаемость и визуальный ритм контента статьи:
 * код, таблицы, цитаты, медиа, списки, заметки и служебные подписи.
 * Здесь нет логики хедера, карточек, поиска или сетки главной.
 */

/* Базовые токены вынесены отдельно, чтобы кодовые и контентные блоки выглядели одинаково на фронте и в редакторе. */
:root {
	--ioblog-content-block-radius: 22px;
	--ioblog-content-soft-border: rgba(148, 163, 184, 0.18);
	--ioblog-content-soft-shadow: 0 16px 40px rgba(15, 23, 42, 0.08);
	--ioblog-content-code-bg: #0f172a;
	--ioblog-content-code-bg-secondary: #111c33;
	--ioblog-content-code-text: #e2e8f0;
	--ioblog-content-code-muted: #94a3b8;
	--ioblog-content-note-bg: linear-gradient(135deg, rgba(240, 249, 255, 0.96), rgba(236, 253, 245, 0.96));
}

/*
 * Основной контент статьи получает более стабильную типографику,
 * чтобы Gutenberg-блоки не выглядели разрозненно рядом с обычными абзацами.
 */
.entry-content,
.editor-styles-wrapper .block-editor-block-list__layout {
	font-size: clamp(1.06rem, 0.98rem + 0.18vw, 1.14rem);
	line-height: 1.78;
}

/*
 * Вертикальный ритм блоков делаем чуть спокойнее, чем в родительской теме,
 * чтобы код, таблицы и медиа не слипались с соседними абзацами.
 */
.cs-main-content .entry-content > *,
.cs-main-content .entry-content .wp-block-column > *,
.cs-main-content .entry-content .wp-block-media-text__content > *,
.editor-styles-wrapper .block-editor-block-list__layout > * {
	margin-top: 1.15rem;
	margin-bottom: 1.15rem;
}

/*
 * Заголовки внутри Gutenberg должны визуально вести статью,
 * поэтому усиливаем их отступы после сложных блоков и немного выправляем line-height.
 */
.entry-content .wp-block-heading,
.editor-styles-wrapper .wp-block-heading {
	line-height: 1.18;
	letter-spacing: -0.025em;
	margin-top: 2.5rem !important;
	margin-bottom: 1rem !important;
}

/*
 * Inline code должен читаться как термин или команда,
 * а не сливаться с основным текстом.
 */
.entry-content :not(pre) > code,
.editor-styles-wrapper :not(pre) > code {
	display: inline-block;
	padding: 0.14rem 0.48rem;
	border: 1px solid rgba(15, 118, 110, 0.16);
	border-radius: 0.6rem;
	background: rgba(15, 118, 110, 0.08);
	color: #0f766e;
	font-family: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
	font-size: 0.92em;
	line-height: 1.45;
	word-break: break-word;
}

/*
 * Главная цель для code/pre блока:
 * сделать его похожим на современный IDE-панельный блок, а не на серую коробку из дефолтного Gutenberg.
 */
.entry-content .wp-block-code,
.entry-content pre.wp-block-code,
.entry-content .wp-block-preformatted,
.entry-content pre.wp-block-preformatted,
.entry-content pre,
.editor-styles-wrapper .wp-block-code,
.editor-styles-wrapper pre.wp-block-code,
.editor-styles-wrapper .wp-block-preformatted,
.editor-styles-wrapper pre.wp-block-preformatted,
.editor-styles-wrapper pre {
	position: relative;
	overflow-x: auto;
	padding: 1.25rem 1.35rem;
	border: 1px solid rgba(30, 41, 59, 0.65) !important;
	border-radius: var(--ioblog-content-block-radius);
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)) padding-box,
		linear-gradient(180deg, var(--ioblog-content-code-bg), var(--ioblog-content-code-bg-secondary)) border-box !important;
	box-shadow: 0 18px 36px rgba(2, 8, 23, 0.22);
	color: var(--ioblog-content-code-text) !important;
	font-family: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace !important;
	font-size: 0.94rem !important;
	line-height: 1.72 !important;
	white-space: pre !important;
	tab-size: 4;
	scrollbar-width: thin;
	scrollbar-color: rgba(148, 163, 184, 0.45) transparent;
}

/*
 * Псевдо-панель сверху делает кодовый блок визуально аккуратнее
 * и помогает ему выглядеть как полноценный технический модуль статьи.
 */
.entry-content .wp-block-code::before,
.entry-content .wp-block-preformatted::before,
.entry-content pre.wp-block-code::before,
.entry-content pre.wp-block-preformatted::before,
.editor-styles-wrapper .wp-block-code::before,
.editor-styles-wrapper .wp-block-preformatted::before,
.editor-styles-wrapper pre.wp-block-code::before,
.editor-styles-wrapper pre.wp-block-preformatted::before {
	content: "";
	display: block;
	height: 0.85rem;
	margin-bottom: 0.95rem;
	border-bottom: 1px solid rgba(148, 163, 184, 0.18);
	background:
		radial-gradient(circle at 0.45rem 0.42rem, #f87171 0 0.18rem, transparent 0.2rem),
		radial-gradient(circle at 1.25rem 0.42rem, #fbbf24 0 0.18rem, transparent 0.2rem),
		radial-gradient(circle at 2.05rem 0.42rem, #34d399 0 0.18rem, transparent 0.2rem);
}

/*
 * Внутренний code внутри wp-block-code не должен тащить собственный фон,
 * иначе появляется двойная рамка и эффект "блок в блоке".
 */
.entry-content .wp-block-code code,
.entry-content .wp-block-preformatted code,
.entry-content pre code,
.editor-styles-wrapper .wp-block-code code,
.editor-styles-wrapper .wp-block-preformatted code,
.editor-styles-wrapper pre code {
	display: block;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: inherit;
	font-size: inherit;
	line-height: inherit;
	white-space: inherit;
}

/*
 * Подписи кода и preformatted иногда попадают в слишком плотный ритм,
 * поэтому немного уменьшаем отступ снизу у завершающих строк.
 */
.entry-content .wp-block-code:last-child,
.entry-content .wp-block-preformatted:last-child,
.editor-styles-wrapper .wp-block-code:last-child,
.editor-styles-wrapper .wp-block-preformatted:last-child {
	margin-bottom: 0;
}

/*
 * Цитаты делаем менее тяжёлыми, чем в родителе, и чуть ближе к editorial-стилю:
 * мягкий фон, акцентная линия и нормальная читаемость длинных фрагментов.
 */
.entry-content > blockquote,
.entry-content .wp-block-quote:not(.is-style-plain),
.editor-styles-wrapper .wp-block-quote:not(.is-style-plain) {
	padding: 1.6rem 1.6rem 1.6rem 1.85rem !important;
	border: 1px solid var(--ioblog-content-soft-border);
	border-left: 4px solid var(--cs-accent-color, #0f766e);
	border-radius: var(--ioblog-content-block-radius);
	background: var(--ioblog-content-note-bg);
	box-shadow: var(--ioblog-content-soft-shadow);
	font-size: clamp(1.18rem, 1.08rem + 0.15vw, 1.3rem);
	line-height: 1.55;
}

/*
 * Стандартная огромная декоративная кавычка в родителе слишком агрессивна,
 * поэтому здесь убираем её ради более чистого современного вида.
 */
.entry-content > blockquote::before,
.entry-content .wp-block-quote:not(.is-style-plain)::before,
.editor-styles-wrapper .wp-block-quote:not(.is-style-plain)::before {
	content: none !important;
}

/*
 * Списки в длинных гайдах должны оставаться плотными, но не тесными.
 */
.entry-content ul:not(.blocks-gallery-grid):not(.wp-block-social-links),
.entry-content ol,
.editor-styles-wrapper ul:not(.blocks-gallery-grid):not(.wp-block-social-links),
.editor-styles-wrapper ol {
	padding-left: 1.35rem;
}

.entry-content li,
.editor-styles-wrapper li {
	margin-bottom: 0.45rem;
}

/*
 * Таблицы Gutenberg в технических статьях часто содержат параметры и сравнения,
 * поэтому добавляем аккуратную рамку, скролл и читаемый заголовок.
 */
.entry-content .wp-block-table,
.editor-styles-wrapper .wp-block-table {
	overflow-x: auto;
	margin: 1.6rem 0;
	border: 1px solid var(--ioblog-content-soft-border);
	border-radius: 1.1rem;
	box-shadow: var(--ioblog-content-soft-shadow);
	background: rgba(255, 255, 255, 0.96);
}

.entry-content .wp-block-table table,
.editor-styles-wrapper .wp-block-table table {
	margin: 0;
	border-collapse: separate;
	border-spacing: 0;
}

.entry-content .wp-block-table thead th,
.editor-styles-wrapper .wp-block-table thead th {
	background: rgba(15, 118, 110, 0.08);
	color: var(--cs-color-primary, #101828);
	font-weight: 700;
}

/*
 * Блоки картинок и подписи слегка выравниваем,
 * чтобы скриншоты, иллюстрации и схемы выглядели как часть единой статьи.
 */
.entry-content .wp-block-image,
.entry-content .wp-block-video,
.entry-content .wp-block-embed,
.editor-styles-wrapper .wp-block-image,
.editor-styles-wrapper .wp-block-video,
.editor-styles-wrapper .wp-block-embed {
	margin-top: 1.7rem;
	margin-bottom: 1.7rem;
}

.entry-content figcaption,
.editor-styles-wrapper figcaption {
	margin-top: 0.7rem;
	color: var(--cs-secondary-color, #667085);
	font-size: 0.92rem;
	line-height: 1.55;
	text-align: center;
}

/*
 * Separator и group делаем мягче, чтобы они выглядели editorial,
 * а не как дефолтные технические разрывы Gutenberg.
 */
.entry-content .wp-block-separator,
.editor-styles-wrapper .wp-block-separator {
	width: min(100%, 9rem);
	height: 1px;
	margin: 2.2rem auto;
	border: 0;
	background: linear-gradient(90deg, transparent, rgba(71, 84, 103, 0.45), transparent);
}

.entry-content .wp-block-group:not(.has-background),
.editor-styles-wrapper .wp-block-group:not(.has-background) {
	padding: 0;
}

/*
 * Группы и callout-блоки с фоном получают единый мягкий контейнер,
 * чтобы пользователь мог собирать заметки/подсказки прямо средствами Gutenberg.
 */
.entry-content .wp-block-group.has-background,
.entry-content .wp-block-cover,
.editor-styles-wrapper .wp-block-group.has-background,
.editor-styles-wrapper .wp-block-cover {
	border-radius: var(--ioblog-content-block-radius);
	overflow: hidden;
}

/*
 * В тёмной схеме фон светлых служебных блоков надо немного приглушить,
 * иначе они выбиваются по контрасту сильнее, чем сам текст статьи.
 */
body[data-scheme='dark'] .entry-content .wp-block-table,
body[data-scheme='dark'] .entry-content > blockquote,
body[data-scheme='dark'] .entry-content .wp-block-quote:not(.is-style-plain) {
	background: rgba(15, 23, 42, 0.82);
}

body[data-scheme='dark'] .entry-content figcaption,
body[data-scheme='dark'] .entry-content .wp-block-table figcaption {
	color: #94a3b8;
}

body[data-scheme='dark'] .entry-content :not(pre) > code {
	background: rgba(45, 212, 191, 0.12);
	border-color: rgba(45, 212, 191, 0.18);
	color: #99f6e4;
}

@media (prefers-color-scheme: dark) {
	:root body[data-scheme='auto'] .entry-content .wp-block-table,
	:root body[data-scheme='auto'] .entry-content > blockquote,
	:root body[data-scheme='auto'] .entry-content .wp-block-quote:not(.is-style-plain) {
		background: rgba(15, 23, 42, 0.82);
	}

	:root body[data-scheme='auto'] .entry-content figcaption,
	:root body[data-scheme='auto'] .entry-content .wp-block-table figcaption {
		color: #94a3b8;
	}

	:root body[data-scheme='auto'] .entry-content :not(pre) > code {
		background: rgba(45, 212, 191, 0.12);
		border-color: rgba(45, 212, 191, 0.18);
		color: #99f6e4;
	}
}

/*
 * На мобильных кодовые блоки должны оставаться удобными для скролла,
 * но без слишком тяжёлой внутренней панели и больших полей.
 */
@media (max-width: 767.98px) {
	.entry-content,
	.editor-styles-wrapper .block-editor-block-list__layout {
		font-size: 1rem;
		line-height: 1.72;
	}

	.entry-content .wp-block-code,
	.entry-content pre.wp-block-code,
	.entry-content .wp-block-preformatted,
	.entry-content pre.wp-block-preformatted,
	.entry-content pre,
	.editor-styles-wrapper .wp-block-code,
	.editor-styles-wrapper pre.wp-block-code,
	.editor-styles-wrapper .wp-block-preformatted,
	.editor-styles-wrapper pre.wp-block-preformatted,
	.editor-styles-wrapper pre {
		padding: 1rem 1rem 1.05rem;
		border-radius: 18px;
		font-size: 0.88rem !important;
	}

	.entry-content > blockquote,
	.entry-content .wp-block-quote:not(.is-style-plain),
	.editor-styles-wrapper .wp-block-quote:not(.is-style-plain) {
		padding: 1.2rem 1.1rem 1.2rem 1.2rem !important;
		font-size: 1.05rem;
	}
}