/* Шаблон медицинской статьи (/inc/article/). Дополняет styles.css: даты, авторы, короткий ответ,
   меню раздела, источники, истории пациентов, «Читайте далее». Цвета — как на сайте:
   акцент #7786B8, текст #232323, второстепенный #585858, карточки #FAFAFA, линии #BFC0C5. */

/* overflow: hidden у main (basic.css) не даёт меню раздела «прилипать»; clip обрезает так же, но sticky работает */
body .ds-main[data-v-16cf85cd] {
	overflow: clip;
}

/* Заголовки текста — по левому краю, как в макете */
.art_main .ab_block h2,
.art_main .ab_block h3 {
	margin-left: 0;
	margin-right: 0;
	text-align: left;
}

/* Даты под H1 */
.amb_dates {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px 0;
	color: rgba(255, 255, 255, .8);
	font-size: 16px;
	line-height: 24px;
}

	.amb_dates span + span::before {
		content: "";
		display: inline-block;
		width: 1px;
		height: 16px;
		margin: 0 12px;
		vertical-align: -2px;
		background: rgba(255, 255, 255, .5);
	}

	.amb_dates time {
		color: #fff;
		font-weight: 600;
	}

/* Вступление, автор и рецензент */
.ar_data_block_single .ar_block {
	width: 100%;
}

.arb_authors {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

	.arba_person {
		display: flex;
		align-items: center;
		gap: 16px;
	}

	.arba_photo {
		flex-shrink: 0;
	}

		.arba_photo img {
			display: block;
			width: 64px;
			height: 64px;
			border-radius: 50%;
			object-fit: cover;
		}

	.arba_data {
		display: flex;
		flex-direction: column;
		gap: 2px;
		min-width: 0;
	}

	.arba_role {
		color: #585858;
		font-size: 13px;
		font-weight: 500;
		letter-spacing: .06em;
		line-height: 18px;
		text-transform: uppercase;
	}

	.arba_name {
		color: #232323;
		font-size: 20px;
		font-weight: 500;
		line-height: 26px;
		text-decoration: underline;
		text-decoration-color: rgba(119, 134, 184, .5);
		text-underline-offset: 3px;
	}

		.arba_name:hover {
			color: #7786B8;
		}

	.arba_job {
		color: #585858;
		font-size: 16px;
		line-height: 22px;
	}

/* Короткий ответ */
.article_answer {
	margin-bottom: 64px;
}

	.aa_block {
		margin: 0;
		padding: 48px 56px;
		border-radius: 24px;
		background: #7786B8;
		color: #fff;
		font-size: 22px;
		line-height: 150%;
	}

		.aa_block b {
			font-weight: 600;
		}

/* Текст + меню раздела */
.art_grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: 48px;
	align-items: start;
}

	.art_grid_single {
		grid-template-columns: minmax(0, 1fr);
	}

	.art_main {
		display: flex;
		flex-direction: column;
		gap: 104px;
		min-width: 0;
	}

	.art_menu {
		position: sticky;
		top: 98px;
		display: flex;
		flex-direction: column;
		gap: 24px;
		max-height: calc(100vh - 120px);
		overflow-y: auto;
	}

		.artm_title {
			color: #232323;
			font-size: 30px;
			font-weight: 500;
			line-height: 120%;
		}

		.art_menu ul,
		.art_menu_mobile ul {
			display: flex;
			flex-direction: column;
			gap: 16px;
			margin: 0;
			padding: 0;
			list-style: none;
		}

		.art_menu li,
		.art_menu_mobile li {
			font-size: 20px;
			line-height: 130%;
		}

		.art_menu a,
		.art_menu_mobile a {
			color: #7786B8;
			text-decoration: underline;
			text-decoration-color: rgba(119, 134, 184, .5);
			text-underline-offset: 4px;
		}

			.art_menu a:hover,
			.art_menu_mobile a:hover {
				text-decoration-color: currentColor;
			}

		.art_menu [aria-current],
		.art_menu_mobile [aria-current] {
			color: #7786B8;
			font-weight: 600;
		}

	.art_menu_mobile {
		display: none;
		border-radius: 24px;
		background: #FAFAFA;
	}

		.art_menu_mobile summary {
			padding: 20px 24px;
			color: #232323;
			font-size: 18px;
			font-weight: 500;
			cursor: pointer;
		}

		.art_menu_mobile ul {
			padding: 0 24px 24px;
		}

/* Блоки после текста */
.art_after {
	display: flex;
	flex-direction: column;
	gap: 80px;
}

	.art_after h2 {
		margin: 0 0 32px;
		color: #232323;
		font-size: 36px;
		font-weight: 500;
		line-height: 122%;
	}

	.art_after .arn_block p {
		margin: 0;
		color: #585858;
		font-size: 17px;
		line-height: 150%;
	}

	.art_sources ol {
		display: flex;
		flex-direction: column;
		gap: 12px;
		margin: 0;
		padding-left: 24px;
		color: #232323;
		font-size: 17px;
		line-height: 150%;
		overflow-wrap: anywhere;
	}

		.art_sources a {
			color: #7786B8;
			text-decoration: underline;
			text-underline-offset: 3px;
		}

	.art_form_intro p {
		margin: 0;
		color: #232323;
		font-size: 20px;
		line-height: 150%;
	}

		.art_form_intro p + p {
			margin-top: 16px;
		}

/* Истории пациентов */
.art_cases {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
}

	.art_cases h2 {
		align-self: stretch;
		margin-bottom: 8px;
	}

	.art_cases .swiper-container {
		width: 100%;
		overflow: hidden;
	}

	.artc_card {
		display: flex;
		flex-direction: column;
		gap: 16px;
		height: 100%;
		padding: 48px;
		border-radius: 32px;
		background: #FAFAFA;
	}

		.artc_caption {
			margin: 0 0 8px;
			color: #232323;
			font-size: 28px;
			font-weight: 500;
			line-height: 130%;
		}

		.artc_img {
			width: 100%;
			aspect-ratio: 640 / 427;
			border-radius: 16px;
			object-fit: cover;
		}

		.artc_name {
			color: #232323;
			font-size: 18px;
			font-weight: 600;
		}

		.artc_diag {
			margin-top: -8px;
			color: #7786B8;
			font-size: 18px;
			line-height: 140%;
			text-decoration: underline;
			text-underline-offset: 3px;
		}

		.artc_cells {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 16px;
			margin-top: 8px;
		}

			.artc_cell {
				display: flex;
				flex-direction: column;
				gap: 12px;
				padding: 20px;
				border-radius: 24px;
				color: #fff;
				font-size: 17px;
				line-height: 140%;
			}

				.artc_cell b {
					font-size: 22px;
					font-weight: 500;
				}

			.artc_cell_term {
				background: linear-gradient(135deg, #8B73B6 0%, #B3A3D6 100%);
			}

			.artc_cell_tactic {
				background: linear-gradient(135deg, #4F8E8E 0%, #95C3C1 100%);
			}

			.artc_cell_home {
				grid-column: 1 / -1;
				background: linear-gradient(180deg, #96A3CD 0%, #5465A6 100%);
			}

	.art_cases .swiper-pagination {
		position: static;
		display: flex;
		justify-content: center;
		gap: 4px;
	}

		.art_cases .swiper-pagination-bullet {
			background: #7786B8;
		}

	.art_btn {
		display: inline-block;
		padding: 13px 18px;
		border-radius: 12px;
		background: #7786B8;
		color: #fff;
		font-size: 22px;
		line-height: 32px;
		text-decoration: none;
		transition: background-color .2s ease-in-out;
	}

		.art_btn:hover,
		.art_btn:focus {
			background: #6474A8;
			color: #fff;
		}

/* Читайте далее */
.artn_grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 32px 24px;
}

	.artn_card {
		display: flex;
		flex-direction: column;
		gap: 12px;
	}

		.artn_card img {
			width: 100%;
			aspect-ratio: 234 / 158;
			border-radius: 16px;
			object-fit: cover;
		}

		.artn_card a {
			color: #7786B8;
			font-size: 20px;
			line-height: 130%;
			text-decoration: underline;
			text-decoration-color: rgba(119, 134, 184, .5);
			text-underline-offset: 4px;
		}

			.artn_card a:hover {
				text-decoration-color: currentColor;
			}

		.artn_card p {
			margin: 0;
			color: #585858;
			font-size: 16px;
			line-height: 140%;
		}

/* Итоговая форма во всю ширину */
.art_form {
	margin-top: 104px;
	margin-bottom: 52px;
}

@media (max-width: 1199px) {
	.art_grid {
		grid-template-columns: minmax(0, 1fr) 280px;
		gap: 32px;
	}

	.artm_title {
		font-size: 24px;
	}

	.art_menu li {
		font-size: 18px;
	}
}

@media (max-width: 991px) {
	.ar_data_block {
		flex-direction: column;
	}

		.ar_data_block .ar_block,
		.ar_data_block .ac_block {
			width: auto;
		}

	.art_grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.art_menu {
		display: none;
	}

	.art_menu_mobile {
		display: block;
	}

	.art_main {
		gap: 64px;
	}

	.art_after {
		gap: 64px;
	}
}

@media (max-width: 767px) {
	.amb_dates {
		flex-direction: column;
		align-items: center;
		font-size: 14px;
		line-height: 20px;
	}

		.amb_dates span + span::before {
			display: none;
		}

	.article_answer {
		margin-bottom: 40px;
	}

	.aa_block {
		padding: 24px;
		font-size: 18px;
	}

	.arba_name {
		font-size: 18px;
	}

	.arba_job {
		font-size: 15px;
	}

	.art_main,
	.art_after {
		gap: 48px;
	}

	.art_after h2 {
		margin-bottom: 20px;
		font-size: 28px;
	}

	.artc_card {
		padding: 20px;
		border-radius: 24px;
	}

	.artc_caption {
		font-size: 20px;
	}

	.artc_cells {
		grid-template-columns: 1fr;
	}

	.artc_cell b {
		font-size: 18px;
	}

	.artn_grid {
		grid-template-columns: 1fr;
	}

	.art_btn {
		font-size: 18px;
		line-height: 24px;
	}

	.art_form {
		margin-top: 64px;
	}
}