/* ==========================================================================
   Блок «Программы» (ACF) — карточки программ с ценой и подробностями
   Адаптив строится на clamp: 375px — мобильный, 1600px — десктоп.

   Все селекторы начинаются с .kp-programs — это повышает специфичность
   и защищает стили блока от глобальных правил темы
   (.various-content h3, .srv_single_page p, .srv_single_page p em и т.п.).
   ========================================================================== */

.kp-programs,
.kp-programs *,
.kp-programs *::before,
.kp-programs *::after {
	box-sizing: border-box;
}

.kp-programs {
	--kp-teal: #01989D;
	--kp-teal-dark: #017a7f;

	/* Радиусы и отступы */
	--kp-radius: clamp(18px, calc(18px + (35 - 18) * (100vw - 375px) / (1600 - 375)), 35px);
	--kp-label-radius: clamp(10px, calc(10px + (16 - 10) * (100vw - 375px) / (1600 - 375)), 16px);
	--kp-btn-radius: clamp(10px, calc(10px + (18 - 10) * (100vw - 375px) / (1600 - 375)), 18px);
	--kp-pad: clamp(20px, calc(20px + (40 - 20) * (100vw - 375px) / (1600 - 375)), 40px);
	--kp-gap: clamp(26px, calc(26px + (46 - 26) * (100vw - 375px) / (1600 - 375)), 46px);
	--kp-footer-gap: clamp(14px, calc(14px + (28 - 14) * (100vw - 375px) / (1600 - 375)), 28px);

	/* Размеры шрифтов */
	--kp-font-label: clamp(14px, calc(14px + (42 - 14) * (100vw - 375px) / (1600 - 375)), 42px);
	--kp-font-title: clamp(16px, calc(16px + (40 - 16) * (100vw - 375px) / (1600 - 375)), 40px);
	--kp-font-subtitle: clamp(14px, calc(14px + (28 - 14) * (100vw - 375px) / (1600 - 375)), 28px);
	--kp-font-lead: clamp(16px, calc(16px + (32 - 16) * (100vw - 375px) / (1600 - 375)), 32px);
	--kp-font-text: clamp(14px, calc(14px + (28 - 14) * (100vw - 375px) / (1600 - 375)), 28px);
	--kp-font-toggle: clamp(12px, calc(12px + (22 - 12) * (100vw - 375px) / (1600 - 375)), 22px);
	--kp-font-btn: clamp(13px, calc(13px + (28 - 13) * (100vw - 375px) / (1600 - 375)), 28px);
	--kp-font-price: clamp(13px, calc(13px + (28 - 13) * (100vw - 375px) / (1600 - 375)), 28px);
	--kp-font-benefit: clamp(15px, calc(15px + (24 - 15) * (100vw - 375px) / (1600 - 375)), 24px);
	--kp-font-note: clamp(11px, calc(11px + (12 - 11) * (100vw - 375px) / (1600 - 375)), 12px);

	margin: clamp(30px, calc(30px + (60 - 30) * (100vw - 375px) / (1600 - 375)), 60px) 0;
	font-family: 'Arial Nova', Arial, sans-serif;
	font-size: var(--kp-font-text);
	line-height: 1.3;
	color: #fff;
}

.kp-programs .kp-programs__container {
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 15px;
}

.kp-programs .kp-programs__title {
	margin: 0 0 clamp(20px, calc(20px + (30 - 20) * (100vw - 375px) / (1600 - 375)), 30px);
	font-size: clamp(20px, calc(20px + (30 - 20) * (100vw - 375px) / (1600 - 375)), 30px);
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	color: #333;
}

.kp-programs .kp-programs__list {
	display: flex;
	flex-direction: column;
	gap: var(--kp-gap);
}

/* ── Плашка «Программа №N» ─────────────────────────────────── */

.kp-programs .kp-program__label {
	display: block;
	width: fit-content;
	max-width: 100%;
	padding: .5em 1.1em;
	background: #fff;
	border: 2px solid var(--kp-teal);
	border-bottom: 0;
	border-radius: 0 var(--kp-label-radius) 0 0;
	font-size: var(--kp-font-label);
	font-style: italic;
	font-weight: 700;
	line-height: 1.15;
	text-transform: uppercase;
	letter-spacing: .01em;
	color: #3d3d3d;
}

/* ── Тело карточки ─────────────────────────────────────────── */

.kp-programs .kp-program__body {
	position: relative;
	padding: var(--kp-pad);
	background: var(--kp-teal);
	border-radius: 0 var(--kp-radius) 0 var(--kp-radius);
	color: #fff;
}

.kp-programs .kp-program__title {
	margin: 0;
	font-family: 'Arial Nova', Arial, sans-serif;
	font-size: var(--kp-font-title);
	font-weight: 700;
	line-height: 1.12;
	text-transform: uppercase;
	letter-spacing: .01em;
	color: #fff;
}

.kp-programs .kp-program__subtitle {
	margin-top: .15em;
	font-size: var(--kp-font-subtitle);
	font-style: italic;
	line-height: 1.2;
	color: rgba(255, 255, 255, .95);
}

.kp-programs .kp-program__lead {
	margin-top: clamp(10px, calc(10px + (18 - 10) * (100vw - 375px) / (1600 - 375)), 18px);
	font-size: var(--kp-font-lead);
	font-weight: 700;
	line-height: 1.35;
	color: #fff;
}

.kp-programs .kp-program__lead p {
	margin: 0;
	font-size: var(--kp-font-lead);
	font-weight: 700;
	line-height: 1.35;
	color: #fff;
}

.kp-programs .kp-program__lead p + p {
	margin-top: .5em;
}

/* ── Раскрывающиеся подробности ────────────────────────────── */

.kp-programs .kp-program__details {
	margin-top: clamp(12px, calc(12px + (18 - 12) * (100vw - 375px) / (1600 - 375)), 18px);
}

.kp-programs .kp-program__toggle {
	display: inline-block;
	margin: 0;
	font-size: var(--kp-font-toggle);
	font-weight: 700;
	line-height: 1.2;
	color: #fff;
	cursor: pointer;
	list-style: none;
	-webkit-user-select: none;
	user-select: none;
	transition: color .2s ease;
}

.kp-programs .kp-program__toggle::-webkit-details-marker {
	display: none;
}

.kp-programs .kp-program__toggle::marker {
	content: '';
}

.kp-programs .kp-program__toggle:hover,
.kp-programs .kp-program__toggle:focus {
	color: rgba(255, 255, 255, .85);
}

.kp-programs .kp-program__toggle-text {
	display: inline-block;
	padding-bottom: 2px;
	border-bottom: 1px solid currentColor;
}

/* В раскрытом состоянии ссылка «Показать меньше» уходит под содержимое.
   summary должен быть первым в разметке, поэтому меняем только
   визуальный порядок. */
.kp-programs .kp-program__details[open] {
	display: flex;
	flex-direction: column-reverse;
}

.kp-programs .kp-program__details[open] .kp-program__details-inner {
	margin-top: 0;
	margin-bottom: .7em;
}

.kp-programs .kp-program__toggle-less {
	display: none;
}

.kp-programs .kp-program__details[open] .kp-program__toggle-more {
	display: none;
}

.kp-programs .kp-program__details[open] .kp-program__toggle-less {
	display: inline;
}

.kp-programs .kp-program__details-inner {
	margin-top: .7em;
	font-size: var(--kp-font-text);
	line-height: 1.45;
	color: #fff;
}

.kp-programs .kp-program__details-inner > :first-child {
	margin-top: 0;
}

.kp-programs .kp-program__details-inner > :last-child {
	margin-bottom: 0;
}

.kp-programs .kp-program__details-inner p {
	margin: 0 0 .7em;
	font-size: var(--kp-font-text);
	line-height: 1.45;
	color: #fff;
}

/* Возвращаем маркеры списков: глобальные стили темы и списки, и отступы
   могут перебивать оформление блока. */
.kp-programs .kp-program__details-inner ul {
	margin: 0 0 .7em;
	padding-left: 1.25em;
	list-style: disc outside;
}

.kp-programs .kp-program__details-inner ol {
	margin: 0 0 .7em;
	padding-left: 1.25em;
	list-style: decimal outside;
}

.kp-programs .kp-program__details-inner li {
	margin-bottom: .55em;
	font-size: var(--kp-font-text);
	line-height: 1.45;
	color: #fff;
}

.kp-programs .kp-program__details-inner li::marker {
	color: #fff;
}

.kp-programs .kp-program__details-inner strong,
.kp-programs .kp-program__details-inner b {
	font-weight: 700;
	color: inherit;
}

.kp-programs .kp-program__details-inner em,
.kp-programs .kp-program__details-inner i {
	font-style: italic;
	color: inherit;
}

.kp-programs .kp-program__details-inner a {
	color: #fff;
	text-decoration: underline;
}

/* Акценты внутри карточки не должны перекрашиваться стилями темы
   (например, .srv_single_page p em задаёт цвет #01989D — на бирюзовом
   фоне это сделало бы текст невидимым). */
.kp-programs .kp-program em,
.kp-programs .kp-program i {
	color: inherit;
}

/* ── Кнопка и стоимость ────────────────────────────────────── */

.kp-programs .kp-program__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--kp-footer-gap);
	margin-top: clamp(18px, calc(18px + (28 - 18) * (100vw - 375px) / (1600 - 375)), 28px);
}

.kp-programs .kp-program__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: .6em 1.5em;
	background: #fff;
	border: 0;
	border-radius: 0 var(--kp-btn-radius);
	font-family: 'Arial Nova', Arial, sans-serif;
	font-size: var(--kp-font-btn);
	font-weight: 700;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: .02em;
	color: #333838;
	text-decoration: none;
	white-space: nowrap;
	transition: background .25s ease, color .25s ease;
}

.kp-programs .kp-program__btn:hover,
.kp-programs .kp-program__btn:focus {
	background: #E3FEFF;
	color: #333838;
	text-decoration: none;
}

.kp-programs .kp-program__price {
	display: inline-flex;
	align-items: baseline;
	gap: .45em;
	padding: .45em 1.2em;
	border: 1px solid rgba(255, 255, 255, .7);
	border-radius: 0 var(--kp-btn-radius);
	font-size: var(--kp-font-price);
	line-height: 1.3;
	color: #fff;
	white-space: nowrap;
	/* Прижимает ценник к правому краю даже когда кнопка переносится
	   на отдельную строку. */
	margin-left: auto;
}

.kp-programs .kp-program__price-label {
	font-size: var(--kp-font-price);
	font-style: italic;
}

.kp-programs .kp-program__price-value {
	font-size: var(--kp-font-price);
	font-weight: 700;
}

.kp-programs .kp-program__price-caption {
	margin-top: .4em;
	font-size: var(--kp-font-benefit);
	font-style: italic;
	font-weight: 700;
	line-height: 1.2;
	text-align: right;
	color: #fff;
}

.kp-programs .kp-program__note {
	margin-top: .5em;
	font-size: var(--kp-font-note);
	line-height: 1.3;
	text-align: right;
	color: rgba(255, 255, 255, .75);
}

/* ── Мобильные ─────────────────────────────────────────────── */

@media (max-width: 767px) {
	.kp-programs .kp-program__label {
		padding: .45em .9em;
	}

	.kp-programs .kp-program__footer {
		gap: 8px;
	}

	.kp-programs .kp-program__btn {
		padding: .5em .9em;
	}

	.kp-programs .kp-program__price {
		padding: .35em .8em;
	}
}