/* =========================================================
   Blog article layout (catid=15) — ТЗ п.7.2–7.6
   ========================================================= */
html {
	overscroll-behavior-y: smooth;
}

section {
	overflow: clip !important;
}

.blog-article {
	margin-top: 20px;
}

/* ---------- 7.2 Header ---------- */

.blog-article__header {
	margin-bottom: 30px;
}

.blog-article__title {
	font-size: 32px !important;
	font-weight: 700;
	margin: 0 0 18px !important;
	text-transform: none !important;
	line-height: 1.25 !important;
	text-align: left;
}

.blog-article__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 20px;
	align-items: center;
	font-size: 14px;
	color: #666;
	margin-bottom: 14px;
}

.blog-article__meta-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
}

.blog-article__meta-item i {
	color: #005096;
	font-size: 15px;
	margin: 0;
	border: 0;
	padding: 0;
	display: inline-block;
}

.blog-article__rating {
	margin: 4px 0 0;
}

/* ---------- 7.3 TOC: mobile accordion (closed by default) ---------- */

.blog-toc-mobile {
	display: none; /* toggled visible by JS only when >= 2 headings exist */
	border: 1px solid #e0e4ea;
	border-radius: 12px;
	margin: 0 0 36px;
	overflow: hidden;
}

.blog-toc-mobile.is-ready {
	display: block;
}

@media (min-width: 993px) {
	.blog-toc-mobile.is-ready {
		display: none !important;
	}
}

.blog-toc-mobile__toggle {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: #f4f6fa;
	border: 0;
	padding: 14px 16px;
	font-size: 16px;
	font-weight: 700;
	color: #0A2753;
	cursor: pointer;
	text-align: left;
}

.blog-toc-mobile__arrow {
	width: 10px;
	height: 10px;
	border: solid #0A2753;
	border-width: 0 2px 2px 0;
	display: inline-block;
	transform: rotate(45deg);
	transition: transform .2s ease;
	flex-shrink: 0;
}

.blog-toc-mobile__toggle[aria-expanded="true"] .blog-toc-mobile__arrow {
	transform: rotate(-135deg);
}

.blog-toc-mobile__body {
	padding: 10px 16px 18px;
}

.blog-toc-mobile__body[hidden] {
	display: none;
}

.blog-toc-mobile__body ol,
.blog-toc__nav ol {
	list-style: none;
	margin: 0;
	padding: 0;
}

.blog-toc-mobile__body li,
.blog-toc__nav li {
	margin: 0 0 10px;
	line-height: 1.35;
}

.blog-toc-mobile__body li[data-level="3"],
.blog-toc__nav li[data-level="3"] {
	padding-left: 16px;
}

.blog-toc-mobile__body li[data-level="4"],
.blog-toc__nav li[data-level="4"],
.blog-toc-mobile__body li[data-level="5"],
.blog-toc__nav li[data-level="5"],
.blog-toc-mobile__body li[data-level="6"],
.blog-toc__nav li[data-level="6"] {
	padding-left: 30px;
}

.blog-toc-mobile__body a,
.blog-toc__nav a {
	color: #0353a0;
	text-decoration: none;
	font-size: 14px;
	display: block;
}

.blog-toc-mobile__body a:hover,
.blog-toc__nav a:hover {
	text-decoration: underline;
}

/* ---------- 7.3 TOC: desktop sidebar (sticky) ---------- */

.blog-article__layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
	align-items: start;
}

.wrapper__block-author {
	margin: 60px auto 0;
	padding: 30px;
	border-radius: 12px;
	border: 1px solid #e0e4ea;
}

@media (min-width: 993px) {
	.blog-article__layout {
		grid-template-columns: minmax(0, 1fr) 300px;
	}

	.blog-article__sidebar {
		display: none; /* toggled visible by JS only when >= 2 headings exist */
	}

	.blog-article__sidebar.is-ready {
		display: block;
		position: sticky;
		top: 0;
	}
}

.blog-article__content {
	min-width: 0;
}

/* extra breathing room between the stacked blocks inside the content column */
.blog-article__content > * + * {
	margin-top: 44px;
}

.blog-toc {
	border: 1px solid #e0e4ea;
	border-radius: 12px;
	padding: 24px;
}

.blog-toc__title {
	font-weight: 700;
	font-size: 18px;
	margin: 0 0 16px !important;
	color: #0A2753;
}

/* ---------- 7.4 Promo block instead of the old ФОС ---------- */

.blog-promo {
	display: flex;
	gap: 20px;
	align-items: flex-start;
	background: #f4f6fa;
	border-radius: 12px;
	padding: 28px;
	margin-block: 60px;
	box-shadow: 0 10px 20px -20px rgb(0 0 0 / .64);
}

.blog-promo__icon {
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: #005096;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	margin-top: 25px;
}

.blog-promo__text {
    margin: 0 0 30px;
    font-size: 18px;
    color: #393435;
    line-height: 1.5;
}

.blog-promo__btn {
    display: block;
    background: #db2925;
    border: 1px solid #db2925;
    color: #fff;
    border-radius: 3em;
    padding: 0 28px;
    height: 50px;
    align-content: center;
    font-size: 15px;
    cursor: pointer;
    transition: all .3s linear;
}

.blog-promo__btn:hover {
	background: #fff;
	color: #db2925;
}

@media (max-width: 576px) {
	.blog-promo {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ---------- 7.5 Sharing ---------- */

.blog-share {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-direction: column;
    margin: 30px 0 !important;
    border: 1px solid #e0e4ea;
    border-radius: 12px;
    padding: 24px;
    width: 100%;
}

.blog-share__label {
	font-size: 18px;
	font-weight: 700;
	color: #0A2753;
}

/* author module (mod_custom id=151) gets the same rhythm as the rest */
.blog-article__content > .moduletable {
	margin: 0 !important;
}

/* ---------- 7.6 "Читайте также" — full-bleed Swiper carousel ---------- */
/* New namespace (related-articles-swiper__*) on purpose: template.css already
   has unrelated legacy rules under the plain ".related-articles" selector
   (old Owl-carousel markup) — reusing that name would silently collide with
   them depending on stylesheet load order. */

.related-articles-swiper {
    margin-block: 60px -30px;
    padding: 50px 0 60px;
    background: #f4f6fa;
    box-shadow: 0 0 0 100vmax #f4f6fa;
    clip-path: inset(0 -100vmax);
}

.related-articles-swiper__swiper .swiper-wrapper {
	align-items: stretch;
}

.related-articles-swiper__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 40px;
}

.related-articles-swiper__heading {
	text-align: center;
	margin: 0 0 34px;
	font-size: 24px;
	font-weight: 700;
	color: #0A2753;
}

.related-articles-swiper .swiper {
	padding: 6px 6px 46px; /* room for the pagination dots */
}

.related-articles-swiper__slide {
	height: auto !important;
	background: #fff;
	border-radius: 12px;
	padding: 20px;
	box-shadow: 0 2px 10px rgba(10, 39, 83, .06);
}

.related-articles-swiper__slide-title {
	display: block;
	margin: 0 0 .84em;
	line-height: 1.25;
}

.related-articles-swiper__slide-title a {
	font-size: 20px;
	font-weight: 600;
	color: #005096;
	text-decoration: none;
}

.related-articles-swiper__slide-title a:hover {
	color: #db2925;
	text-decoration: none;
}

.related-articles-swiper__slide-text {
	font-size: 16px;
	color: #666;
	margin: 0;
	text-wrap: balance;
}

.related-articles-swiper .swiper-button-prev,
.related-articles-swiper .swiper-button-next {
	width: 40px;
	height: 40px;
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 2px 8px rgba(10, 39, 83, .15);
	color: #005096;
}

.related-articles-swiper .swiper-button-prev::after,
.related-articles-swiper .swiper-button-next::after {
	font-size: 16px;
	font-weight: 700;
}

.image--text {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
    margin-block: 40px;
    box-sizing: border-box;
    box-shadow: 0 10px 20px -20px rgb(0 0 0 / .64);
}

@media (max-width: 576px) {
	.related-articles-swiper__inner {
		padding: 0 20px;
	}

	.related-articles-swiper .swiper-button-prev,
	.related-articles-swiper .swiper-button-next,
	.blog-toc {
		display: none; /* rely on swipe/pagination on small screens */
	}
}