/* Вид тела статьи (начало) */

.content {
	list-style-position: outside;
	font-size: 1em;
	line-height: 1.65;
}

.content p,
.content ul,
.content ol {
	margin-bottom: 1em;
}

.content ul,
.content ol,
.newsletter-text ul {
	margin:
		0.5em 0
		1em 1.6em;
}

.content ul > li,
.content ol > li,
.newsletter-text ul > li {
	margin-bottom: 0.3em;
}

.content a {
	color: var(--accent);
	text-decoration: underline;
	text-decoration-color: rgba(163, 107, 45, 0.35);
	text-decoration-thickness: 0.06em;
	text-underline-offset: 0.18em;
	border-bottom: 0;
}

.content a:hover {
	color: var(--accent-hover);
	text-decoration-color: currentColor;
}

/* Все изображения статьи остаются внутри центральной колонки. */
.content img {
	max-width: 100%;
	height: auto;
}

/*
	Первое изображение статьи считается обложкой.
	Оно остаётся первым, но не занимает всю ширину центральной колонки.
	Если изображения нет, эти правила ни на что не влияют.
*/
.page-content-wrapper > :nth-child(1 of :has(img)) {
	margin:
		0 auto
		0.7em;
	padding: 0;
	text-align: center;
}

.page-content-wrapper > :nth-child(1 of :has(img)) > a,
.page-content-wrapper > :nth-child(1 of :has(img)) > span > a {
	display: block;
	width: min(86%, 54em);
	max-width: 100%;
	margin: 0 auto;
	padding: 0;
}

.page-content-wrapper > :nth-child(1 of :has(img)) img {
	display: block;
	width: 100% !important;
	max-width: 100%;
	height: auto !important;
	margin: 0 auto !important;
	padding: 0 !important;
	border: 0;
	border-radius: 0.35em;
	box-shadow: 0 0.22em 0.7em rgba(58, 41, 24, 0.09);
}

/* Заголовок остаётся под обложкой и визуально связан с ней. */
.page-content-wrapper > :nth-child(1 of :has(img)) + h1 {
	width: min(86%, 36em);
	max-width: 100%;
	margin:
		0 auto
		1em;
	padding: 0;

	font-family: "Open Sans", Arial, sans-serif;
	font-size: clamp(1.55em, 2.2vw, 2.05em);
	font-style: normal;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.02em;
	text-align: center;
	text-wrap: balance;
}

.content a:has(img) {
	text-decoration: none;
	border-bottom: 0;
}

@media all and (max-width: 639px) {
	.page-content-wrapper > :nth-child(1 of :has(img)) {
		margin-bottom: 0.65em;
	}

	.page-content-wrapper > :nth-child(1 of :has(img)) > a,
	.page-content-wrapper > :nth-child(1 of :has(img)) > span > a {
		width: 100%;
	}

	.page-content-wrapper > :nth-child(1 of :has(img)) img {
		border-radius: 0.25em;
		box-shadow: 0 0.16em 0.5em rgba(58, 41, 24, 0.08);
	}

	.page-content-wrapper > :nth-child(1 of :has(img)) + h1 {
		width: 100%;
		margin-bottom: 0.85em;
		font-size: clamp(1.4em, 6vw, 1.75em);
		line-height: 1.18;
	}

	.content iframe {
		display: block;
		max-width: 100%;
		margin:
			1.4em auto;
		border: 0;
	}

	tr,
	td {
		display: block;
		width: 100% !important;
		text-align: center !important;
	}
}

@media all and (min-width: 640px) and (max-width: 1023px) {
	.page-content-wrapper > :nth-child(1 of :has(img)) > a,
	.page-content-wrapper > :nth-child(1 of :has(img)) > span > a {
		width: 92%;
	}

	.page-content-wrapper > :nth-child(1 of :has(img)) + h1 {
		width: 92%;
	}
}

@media all and (min-width: 640px) {
	.content iframe {
		display: block;
		width: min(100%, 50em);
		max-width: 100%;
		aspect-ratio: 16 / 9;
		height: auto;
		margin:
			1.5em auto;
		border: 0;
	}
}

@media all and (min-width: 1920px) {
	.page-content-wrapper > :nth-child(1 of :has(img)) > a,
	.page-content-wrapper > :nth-child(1 of :has(img)) > span > a {
		width: min(82%, 58em);
	}

	.page-content-wrapper > :nth-child(1 of :has(img)) + h1 {
		width: min(82%, 38em);
		font-size: clamp(1.7em, 1.5vw, 2.2em);
	}
}

@media (prefers-color-scheme: light) {
	.content {
		color: var(--font-color-light);
	}
}

@media (prefers-color-scheme: dark) {
	.content,
	.content p,
	.content span,
	.content ul,
	.content ol,
	.content table {
		color: var(--font-color-dark);
	}

	.content a {
		color: #d6ad77;
		text-decoration-color: rgba(214, 173, 119, 0.4);
	}

	.content a:hover {
		color: #e6c391;
		text-decoration-color: currentColor;
	}

	.page-content-wrapper > :nth-child(1 of :has(img)) img {
		box-shadow: 0 0.24em 0.75em rgba(0, 0, 0, 0.25);
	}
}

/* Вид тела статьи (конец) */