/*
 * Блог: текст статьи из редактора WordPress внутри типографики вёрстки (blog-detail.html).
 * Классы вёрстки (article_section, article_ttl, article_list, article_table, text-2…) ставит inc/blog.php,
 * здесь — только то, чего в вёрстке нет: промежутки внутри раздела, подзаголовки h3/h4, картинки, цитаты, видео.
 * Размеры как в вёрстке: выше 768 — в vw от макета 1920, ниже — в пикселях.
 */

/* разделы статьи — прямые потомки .article_card (его шаг 60/40/32 между блоками) */
.article_content { display: contents; }

.article_rich {
	display: flex;
	flex-direction: column;
	gap: 1.25vw; /* 24 */
	min-width: 0;
	color: #000;
}
.article_rich > * { margin: 0; }
.article_rich > .article_sub { margin-top: 1.0417vw; } /* 20 + 24 = 44 перед подзаголовком */
.article_rich > .article_sub:first-child { margin-top: 0; }
.article_sub { color: #000; }

.article_rich a:not([class]) { color: inherit; text-decoration: underline; text-underline-offset: .15em; }
.article_rich b, .article_rich strong { font-weight: 500; }

/* пункт списка: тело рядом с маркером, как <p> в вёрстке */
.article_li { flex: 1 1 auto; min-width: 0; color: #000; }
.article_li > p { margin: 0; }
.article_li > * + * { margin-top: .625vw; }
.article_li .article_list { margin-top: .8333vw; }

/* картинки */
.article_figure {
	margin: 0;
	border-radius: var(--radius-lg);
	overflow: hidden;
}
.article_figure img,
.article_rich img {
	display: block;
	max-width: 100%;
	height: auto;
}
.article_figure img { width: 100%; }
.article_rich > p img { border-radius: var(--radius-md); }
.article_figure figcaption,
.article_rich .wp-element-caption {
	padding-top: .625vw;
	font: 200 .7292vw/160% var(--font-mono); /* text-3: 14 */
	letter-spacing: -.01em;
	color: #737882;
}

/* цитата */
.article_quote,
.article_rich .wp-block-quote {
	margin: 0;
	padding: 1.25vw 1.6667vw;          /* 24 32 */
	background: #edeef3;
	border-radius: var(--radius-md);
	color: #000;
}
.article_quote > * + * { margin-top: .625vw; }
.article_quote cite { display: block; font-style: normal; color: #737882; }

/* таблица из редактора: вёрстка задаёт ширину, Гутенберг оборачивает в figure */
.article_rich .wp-block-table { margin: 0; }
.article_rich .article_table td:empty::after { content: '\00a0'; }

/* видео и встраивания */
.article_rich iframe,
.article_rich video,
.article_rich .wp-block-embed__wrapper > * {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border: 0;
	border-radius: var(--radius-lg);
}
.article_rich .wp-block-embed { margin: 0; }

/* галерея Гутенберга */
.article_rich .wp-block-gallery {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .8333vw;
	margin: 0;
}
.article_rich .wp-block-gallery figure { margin: 0; border-radius: var(--radius-md); overflow: hidden; }
.article_rich .wp-block-gallery img { width: 100%; height: 100%; object-fit: cover; }

.article_rich .aligncenter { margin-left: auto; margin-right: auto; }

@media (max-width: 768px) {
	.article_rich { gap: 16px; }
	.article_rich > .article_sub { margin-top: 8px; }
	.article_li > * + * { margin-top: 8px; }
	.article_li .article_list { margin-top: 12px; }
	.article_figure figcaption,
	.article_rich .wp-element-caption { padding-top: 8px; font-size: 12px; }
	.article_quote,
	.article_rich .wp-block-quote { padding: 16px; }
	.article_quote > * + * { margin-top: 8px; }
	.article_rich .wp-block-gallery { gap: 8px; }
}

/* оглавление: заголовки статей длиннее подписей вёрстки — на компьютере переносим строку
   внутри колонки (580), а не вылезаем на белую плашку; маркер остаётся у первой строки */
@media (min-width: 769px) {
	.article_toc .article_toc_list { max-width: 100%; }
	.article_toc .article_toc_list .article_toc_item { white-space: normal; align-items: baseline; flex-shrink: 1; }
	.article_toc .article_toc_list .article_toc_item::before { transform: translateY(-.1em); }
}

/* вертикальное видео (снято телефоном) — в свою пропорцию, не в чёрную полосу 16:9 */
.article_rich video.is-vertical {
	width: auto;
	max-width: 100%;
	height: min(70vh, 34vw);
	aspect-ratio: 9 / 16;
	background: #000;
}
@media (max-width: 768px) {
	.article_rich video.is-vertical { height: min(70vh, 560px); }
}