/* Статья блога: фото слева (липкое), текст справа 560px, «Похожие статьи» */
body.single-post { background: var(--c-warm-50); }

.article__cols { display: flex; max-width: var(--page-max); margin-inline: auto; }
.article__media { flex: 0 0 50%; }
.article__img {
	position: sticky; top: var(--header-vis, var(--header-h));
	width: 100%; height: min(812px, calc(100vh - var(--header-vis, var(--header-h))));
	object-fit: cover;
}
.admin-bar .article__img { top: calc(var(--header-vis, var(--header-h)) + 32px); }
.article__main { flex: 0 0 50%; min-width: 0; }
.article__crumbs-m, .article__div-m { display: none; }

.article__intro {
	min-height: 812px;
	display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 40px;
	padding: 16px 80px;
	position: relative;
}
.article__titles { display: flex; flex-direction: column; align-items: center; gap: 16px; max-width: 390px; text-align: center; }
.article__date, .article__info { font-size: 14px; line-height: 1.4; color: rgba(0, 0, 0, .4); }
.article__info {
	position: absolute; left: 0; right: 0; bottom: 16px;
	display: flex; justify-content: space-between; gap: 40px; padding: 24px;
}
.article__info a:hover { color: var(--c-accent); }

.article__body { display: flex; flex-direction: column; gap: 80px; padding: 80px 80px 120px; }

/* Контент статьи из редактора */
.post-content { max-width: 560px; font-size: 14px; line-height: 1.4; letter-spacing: -.02em; }
.post-content > * + * { margin-top: 16px; }
.post-content h2, .post-content h3 {
	font-family: var(--f-head); font-weight: 500; font-size: 24px; line-height: 1.2; letter-spacing: -.03em; color: #000;
}
.post-content > h2, .post-content > h3, .post-content > figure, .post-content > .wp-block-image, .post-content > blockquote { margin-top: 80px; }
.post-content > :first-child { margin-top: 0; }
.post-content > figure + h2, .post-content > figure + h3 { margin-top: 80px; }
.post-content figure { margin-inline: 0; }
.post-content img { display: block; max-width: 100%; height: auto; }
.post-content figcaption { margin-top: 8px; font-size: 12px; color: rgba(0, 0, 0, .4); }
.post-content ul { list-style: none; padding: 0; }
.post-content ul li::before { content: '- '; }
.post-content ol { padding-left: 1.2em; list-style: decimal; }
.post-content a { color: var(--c-accent); text-decoration: underline; text-underline-position: from-font; }
.post-content blockquote {
	margin-inline: 0; padding-left: 20px; border-left: 1px solid var(--c-accent);
	font-family: var(--f-head); font-weight: 300; font-size: 24px; line-height: 1.2; color: var(--c-charcoal-500);
}
.post-content blockquote p { margin: 0; }
.post-content strong { font-weight: 500; }

.related {
	background: var(--c-white);
	border-radius: 32px 32px 0 0;
	padding: 80px var(--gutter);
	display: flex; flex-direction: column; gap: 40px;
}
.related__head { display: flex; align-items: center; justify-content: space-between; gap: 20px; max-width: calc(var(--page-max) - 40px); margin-inline: auto; width: 100%; }
.related__title { font-family: var(--f-head); font-weight: 400; font-size: 44px; line-height: 1.1; letter-spacing: -.03em; color: var(--c-charcoal-500); }
.related__all { font-size: 14px; line-height: 1.2; color: var(--c-accent); }
.related__all:hover { text-decoration: underline; }
.related > .divider { max-width: calc(var(--page-max) - 40px); margin-inline: auto; width: 100%; }
.related__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; max-width: calc(var(--page-max) - 40px); margin-inline: auto; width: 100%; }

@media (max-width: 1023px) {
	body.single-post { background: #fff; }
	.article__cols { flex-direction: column; }
	.article__media, .article__main { flex: none; }
	.article__img { position: static; height: 400px; }
	.article__crumbs-m { display: block; padding: 40px var(--gutter) 0; }
	.article__crumbs-d { display: none; }
	.article__intro { min-height: 0; padding: 60px var(--gutter) 0; gap: 0; }
	.article__titles { max-width: none; }
	.article__info { position: static; padding: 24px 0; width: 100%; }
	.article__div-m { display: block; width: 100%; }
	.article__body { padding: 40px var(--gutter) 80px; gap: 40px; }
	.post-content > h2, .post-content > h3, .post-content > figure, .post-content > .wp-block-image, .post-content > blockquote { margin-top: 40px; }
	.related { padding: 60px var(--gutter); border-radius: 24px 24px 0 0; }
	.related__title { font-size: 34px; }
	.related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.related__grid > :nth-child(3) { display: none; }
}
