/* Истории пациентов: /cases/ и страницы групп /cases/<группа>/ (макет Figma «Истории пациентов») */

/* Кнопки групп — обычные ссылки; активная выделена цветом */
.cases_switcher ul li {
	padding: 0;
	cursor: default;
}

	.cases_switcher ul li a,
	.cases_switcher ul li span {
		display: block;
		padding: 13px 18px;
		color: inherit;
		text-decoration: none;
	}

	.cases_switcher ul li a {
		cursor: pointer;
		border-radius: 12px;
		transition: background-color .2s ease-in-out, color .2s ease-in-out;
	}

		.cases_switcher ul li a:hover,
		.cases_switcher ul li a:focus {
			background: #e6e9f4;
			color: #232323;
		}

/* Вступление группы и эксперты */
.cases_intro {
	margin-bottom: 64px;
}

	.ci_text p {
		max-width: 1100px;
		margin: 0 0 16px;
		color: #232323;
		font-size: 24px;
		line-height: 133.333%;
	}

	.ci_experts {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 24px;
		margin-top: 56px;
	}

		.cie_card {
			display: flex;
			flex-direction: column;
			padding: 4px;
			border-radius: 24px;
			background: #f7f7f7;
		}

			.cie_img img {
				display: block;
				width: 100%;
				aspect-ratio: 1;
				object-fit: cover;
				object-position: top;
				border-radius: 20px;
			}

			.cie_data {
				padding: 24px 16px 28px;
			}

				.cie_name {
					display: inline-block;
					margin-bottom: 8px;
					color: #232323;
					font-size: 24px;
					line-height: 125%;
					text-decoration: none;
				}

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

				.cie_job,
				.cie_spec {
					color: #585858;
					font-size: 18px;
					line-height: 133.333%;
				}

				.cie_spec_title {
					margin-top: 12px;
					color: #7786B8;
					font-size: 18px;
					line-height: 133.333%;
					text-decoration: underline;
					text-decoration-color: rgba(119, 134, 184, .5);
					text-underline-offset: 4px;
				}

/* Якорь истории не прячется под шапкой */
.d2c_case,
.d2cchl_caption {
	scroll-margin-top: 24px;
}

/* Заголовок истории на странице группы — H2 в оформлении прежнего заголовка */
h2.d2cchl_caption {
	margin: 0;
}

/* Лечащий врач под строкой диагноза */
.d2cchld_doctor {
	color: #232323;
	font-size: 20px;
	line-height: 130%;
}

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

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

/* Каталог: сетка карточек-анонсов */
.cases_grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
}

	.cg_card {
		display: flex;
		flex-direction: column;
		padding: 4px;
		border-radius: 24px;
		background: #fafafa;
	}

		.cg_img img {
			display: block;
			width: 100%;
			aspect-ratio: 3 / 2;
			object-fit: cover;
			object-position: top;
			border-radius: 20px;
		}

		.cg_body {
			display: flex;
			flex: 1;
			flex-direction: column;
			align-items: flex-start;
			gap: 12px;
			padding: 20px 16px 24px;
		}

			.cg_label {
				padding: 4px 12px;
				border-radius: 8px;
				background: #e6e9f4;
				color: #5d6b9c;
				font-size: 14px;
				line-height: 20px;
			}

			.cg_title {
				margin: 0;
				font-size: 20px;
				font-weight: 500;
				line-height: 125%;
			}

				.cg_title a {
					color: #232323;
					text-decoration: none;
				}

					.cg_title a:hover {
						color: #7786B8;
					}

			.cg_teaser {
				flex: 1;
				margin: 0;
				color: #585858;
				font-size: 16px;
				line-height: 137.5%;
			}

			.cg_more {
				color: #7786B8;
				font-size: 18px;
				line-height: 133.333%;
				text-decoration: underline;
				text-decoration-style: dotted;
				text-decoration-thickness: 2px;
				text-underline-offset: 3px;
			}

				.cg_more:hover {
					text-decoration: none;
				}

/* Страницы каталога */
.cases_pager ul {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
	margin: 56px 0 0;
	padding: 0;
	list-style: none;
}

	.cases_pager a,
	.cases_pager span {
		display: block;
		min-width: 50px;
		padding: 13px 16px;
		border-radius: 12px;
		background: #f3f3f3;
		color: #585858;
		font-size: 18px;
		line-height: 24px;
		text-align: center;
		text-decoration: none;
		box-shadow: 0 1px 2px 0 rgba(43, 45, 51, 0.08), 0 4px 12px 0 rgba(43, 45, 51, 0.04);
	}

		.cases_pager a:hover {
			background: #e6e9f4;
			color: #232323;
		}

		.cases_pager span {
			background: #7786B8;
			color: #fff;
		}

/* Подробнее о заболевании и методах лечения */
.cases_more {
	margin: 104px 0;
}

	.cases_more h2 {
		margin: 0 0 56px;
		color: #232323;
		font-size: 40px;
		font-weight: 400;
		line-height: 120%;
		text-align: center;
	}

	.cm_diseases,
	.cm_methods {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 24px;
	}

	.cm_methods {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		margin-top: 48px;
	}

	/* первая статья (главная по заболеванию) — крупная карточка слева */
	.cm_diseases_big .cm_card:first-child {
		grid-column: span 2;
		grid-row: span 3;
	}

		.cm_diseases_big .cm_card:first-child img {
			flex: 1;
			aspect-ratio: auto;
			min-height: 0;
		}

		.cm_card {
			display: flex;
			flex-direction: column;
			gap: 16px;
		}

			.cm_card img {
				width: 100%;
				aspect-ratio: 364 / 248;
				object-fit: cover;
				border-radius: 16px;
			}

			.cm_methods .cm_card img {
				aspect-ratio: 266 / 182;
			}

			.cm_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;
			}

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

/* Дисклеймер под формой */
.cases_disclaimer {
	margin: 64px 0 0;
	padding-top: 32px;
	border-top: 1px solid #c9cbd3;
	color: #585858;
	font-size: 18px;
	line-height: 133.333%;
}

@media (max-width: 1199px) {
	.ci_experts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

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

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

@media (max-width: 991px) {
	.ci_text p {
		font-size: 20px;
	}

	.cases_more h2 {
		font-size: 32px;
	}

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

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

	.cm_diseases_big .cm_card:first-child {
		grid-row: auto;
	}

		.cm_diseases_big .cm_card:first-child img {
			aspect-ratio: 364 / 248;
		}
}

@media (max-width: 767px) {
	.cases_intro {
		margin-bottom: 40px;
	}

	.ci_text p {
		font-size: 18px;
	}

	.ci_experts {
		grid-template-columns: 1fr;
		gap: 16px;
		margin-top: 32px;
	}

	.cases_more {
		margin: 64px 0;
	}

		.cases_more h2 {
			margin-bottom: 32px;
			font-size: 26px;
		}

	.cm_diseases,
	.cm_methods {
		grid-template-columns: 1fr;
	}

	.cm_diseases_big .cm_card:first-child {
		grid-column: auto;
	}

	.cases_grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.d2cchld_doctor {
		font-size: 18px;
	}

	.cases_pager span,
	.cases_pager a {
		min-width: 44px;
		padding: 10px 12px;
		font-size: 16px;
	}

	.cases_disclaimer {
		margin-top: 40px;
		font-size: 16px;
	}
}