/**
 * Секция «Що це?» #service-description — текст + схема сайта (2026-11-02).
 * Разметка: template-parts/service/description.php. Макет: reports/new-design-tasks/Svc desc task/svc-desc-mockup/SvcDescScheme.dc.html.
 * Схема: холст .wa-sd__canvas 62em × 56em, font-size = 1/62 ширины контейнера (cqw) → на десктопе 1em = 10px (620×560),
 * все размеры внутри в em — схема масштабируется целиком. Метки — не меньше 11px.
 * Раскладка: слева метка+H2+текст, справа (.wa-sd__aside) сверху схема/картинка, под ней пункты и кнопки; мобилка — текст, схема, пункты, кнопки.
 * Подсветка: .is-on на блоке [data-sd] и метке (assets/js/wa-sd.js).
 */

.wa-sd {
	--wa-sd-ink: #14233a;
	--wa-sd-text: #36404f;
	--wa-sd-blue: #1a72a8;
	--wa-sd-green: #7dc91b;
	--wa-sd-head: Montserrat, Arial, sans-serif;
	margin-top: var(--wa-page-gap, 24px);
	padding: 80px 0;
	background: #fff;
	font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	color: #1d2433;
}
.wa-sd *,
.wa-sd *::before,
.wa-sd *::after { box-sizing: border-box; }

.wa-sd__wrap {
	width: 1400px;
	max-width: 100%;
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 620px;
	gap: 72px;
	align-items: start;
}
/* справа сверху схема/картинка, под ней пункты и кнопки; без схемы и картинки — всё одной колонкой под текстом */
.wa-sd__aside { min-width: 0; }
.wa-sd .wa-sd__aside > .wa-sd__caption { margin-top: 28px; }
.wa-sd--none .wa-sd__wrap { grid-template-columns: minmax(0, 1fr); gap: 0; }
.wa-sd--none .wa-sd__content,
.wa-sd--none .wa-sd__aside { max-width: 960px; }
.wa-sd--none .wa-sd__aside > .wa-sd__caption { margin-top: 4px; }

/* ---------- текст ---------- */
.wa-sd__eyebrow {
	display: inline-flex;
	align-items: center;
	height: 30px;
	padding: 0 12px;
	border-radius: 999px;
	background: #eaf4fa;
	color: #1a5f8c;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
}
.wa-sd .wa-sd__title {
	margin: 14px 0 0;
	padding: 0;
	font-family: var(--wa-sd-head);
	font-weight: 700;
	font-size: 40px;
	line-height: 1.15;
	letter-spacing: -.01em;
	text-transform: none;
	text-align: left;
	color: var(--wa-sd-ink);
}
.wa-sd__text { margin-top: 22px; }
.wa-sd .wa-sd__text p {
	margin: 0 0 16px;
	padding: 0;
	font-size: 17px;
	line-height: 1.75;
	color: var(--wa-sd-text);
}
.wa-sd .wa-sd__text p.wa-sd__lead { font-size: 18px; color: #1d2433; }
.wa-sd .wa-sd__text strong,
.wa-sd .wa-sd__text b { font-weight: 600; color: var(--wa-sd-ink); }
.wa-sd .wa-sd__text h3 {
	margin: 24px 0 10px;
	padding: 0;
	font-family: var(--wa-sd-head);
	font-weight: 700;
	font-size: 20px;
	line-height: 1.3;
	text-transform: none;
	color: var(--wa-sd-ink);
}
.wa-sd .wa-sd__text ul,
.wa-sd .wa-sd__text ol { margin: 0 0 16px; padding: 0 0 0 22px; }
.wa-sd .wa-sd__text li {
	margin: 0 0 6px;
	padding: 0;
	font-size: 17px;
	line-height: 1.65;
	color: var(--wa-sd-text);
	list-style: inherit;
}
.wa-sd .wa-sd__text ul li { list-style: disc; }
.wa-sd .wa-sd__text ol li { list-style: decimal; }
.wa-sd .wa-sd__text a { color: var(--wa-sd-blue); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- пункты ---------- */
.wa-sd .wa-sd__caption {
	margin: 4px 0 0;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #5b6472;
}
.wa-sd .wa-sd__items {
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px 20px;
}
.wa-sd .wa-sd__item {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 15px;
	line-height: 1.5;
	color: var(--wa-sd-text);
	border-radius: 8px;
}
.wa-sd__item[data-sd] { cursor: default; }
.wa-sd__item[data-sd]:focus { outline: none; }
.wa-sd__item[data-sd]:focus-visible { outline: 2px solid var(--wa-sd-blue); outline-offset: 3px; }
.wa-sd__item b { font-weight: 700; color: var(--wa-sd-ink); }
.wa-sd__check {
	flex: none;
	width: 22px;
	height: 22px;
	margin-top: 1px;
	border-radius: 7px;
	background: #eef8e2;
	color: #3f7a0a;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .25s, color .25s;
}
.wa-sd__item.is-on .wa-sd__check { background: var(--wa-sd-green); color: #0e2a06; }

/* ---------- кнопки ---------- */
.wa-sd__actions {
	margin-top: 28px;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.wa-sd .wa-sd__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 50px;
	margin: 0;
	padding: 0 20px;
	border-radius: 14px;
	font-family: var(--wa-sd-head);
	font-size: 15px;
	line-height: 1;
	text-decoration: none;
	text-transform: none;
	cursor: pointer;
	transition: background .2s, border-color .2s, transform .2s;
}
.wa-sd .wa-sd__btn--green {
	border: 0;
	background: var(--wa-sd-green);
	color: #0e2a06;
	font-weight: 700;
}
.wa-sd .wa-sd__btn--outline {
	padding: 0 18px;
	border: 1px solid #b9cfdf;
	background: #fff;
	color: var(--wa-sd-ink);
	font-weight: 600;
}
.wa-sd__btn-ico { display: flex; color: var(--wa-sd-blue); }
.wa-sd__btn svg { flex: none; }
@media (hover: hover) {
	.wa-sd .wa-sd__btn--green:hover { background: #6fb817; }
	.wa-sd .wa-sd__btn--outline:hover { border-color: var(--wa-sd-blue); }
}
.wa-sd .wa-sd__btn:focus-visible { outline: 2px solid var(--wa-sd-blue); outline-offset: 3px; }

/* ---------- картинка вместо схемы ---------- */
.wa-sd__media { border-radius: 28px; overflow: hidden; }
.wa-sd__img { display: block; width: 100%; height: auto; }

/* ---------- схема ---------- */
.wa-sd__scheme {
	container-type: inline-size;
	width: 100%;
}
.wa-sd__canvas {
	position: relative;
	width: 100%;
	aspect-ratio: 620 / 560;
	font-size: 10px;
	font-size: calc(100cqw / 62);
	border-radius: 2.8em;
	background: radial-gradient(circle at 60% 40%, #e3f0f8 0, #f5f8fb 60%);
	overflow: hidden;
}
.wa-sd__orbits { position: absolute; inset: 0; width: 100%; height: 100%; }

.wa-sd__browser {
	position: absolute;
	left: 7em;
	top: 7em;
	width: 44em;
	background: #fff;
	border-radius: 1.6em;
	box-shadow: 0 3em 6em rgba(15, 23, 42, .14);
	overflow: hidden;
}
.wa-sd__bar {
	height: 3em;
	padding: 0 1.2em;
	background: #eef2f6;
	display: flex;
	align-items: center;
	gap: .6em;
}
.wa-sd__bar i { width: .9em; height: .9em; border-radius: 50%; background: #f28b82; }
.wa-sd__bar i:nth-child(2) { background: #fbd36b; }
.wa-sd__bar i:nth-child(3) { background: #9ad27a; }
.wa-sd__bar span { flex: 1; height: 1.4em; margin-left: 1em; border-radius: .7em; background: #fff; }
.wa-sd__page { padding: 1.6em; }

.wa-sd__blk { border-radius: .8em; transition: box-shadow .25s, background .25s; }
.wa-sd__blk.is-on { box-shadow: 0 0 0 2px var(--wa-sd-green); }

.wa-sd__hero {
	display: flex;
	align-items: center;
	gap: 1.4em;
	padding: 1.4em;
	background: linear-gradient(135deg, #1a72a8, #14233a);
}
.wa-sd__logo { flex: none; width: 4.4em; height: 4.4em; border-radius: 1.2em; background: rgba(255, 255, 255, .2); }
.wa-sd__hero-txt { flex: 1; }
.wa-sd__hero-txt span { display: block; width: 70%; height: 1em; border-radius: .5em; background: rgba(255, 255, 255, .85); }
.wa-sd__hero-txt span + span { width: 50%; height: .7em; margin-top: .8em; border-radius: .4em; background: rgba(255, 255, 255, .45); }

.wa-sd__cards {
	margin-top: 1.2em;
	padding: 1em;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: .8em;
}
.wa-sd__card {
	height: 6.4em;
	padding: .8em;
	border-radius: .8em;
	background: #f5f8fb;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: .5em;
}
.wa-sd__ln { display: block; width: 80%; height: .8em; border-radius: .4em; background: #e3e9ef; }
.wa-sd__ln--price { width: 50%; background: #cfe5c0; }

.wa-sd__row { margin-top: 1.2em; display: grid; grid-template-columns: 1fr 1fr; gap: 1.2em; }
.wa-sd__contacts,
.wa-sd__form { padding: 1em; background: #f5f8fb; }
.wa-sd__contacts .wa-sd__ln { width: 60%; }
.wa-sd__contacts .wa-sd__ln + .wa-sd__ln { width: 80%; margin-top: .7em; }
.wa-sd__contacts .wa-sd__ln:last-child { width: 40%; }
.wa-sd__input { display: block; height: 1.4em; border-radius: .5em; background: #fff; border: 1px solid #e3e9ef; }
.wa-sd__input + .wa-sd__input { margin-top: .6em; }
.wa-sd__submit { display: block; width: 50%; height: 1.4em; margin-top: .6em; border-radius: .5em; background: var(--wa-sd-green); }

.wa-sd__phone {
	position: absolute;
	right: 5em;
	bottom: 5em;
	width: 15em;
	height: 28em;
	padding: .8em;
	border-radius: 2.6em;
	background: var(--wa-sd-ink);
	box-shadow: 0 3em 6em rgba(15, 23, 42, .22);
}
.wa-sd__screen { height: 100%; padding: 1em; border-radius: 2em; background: #fff; overflow: hidden; }
.wa-sd__ph-hero { display: block; height: 7em; border-radius: 1em; background: linear-gradient(135deg, #1a72a8, #14233a); }
.wa-sd__screen .wa-sd__ln { margin-top: 1em; }
.wa-sd__screen .wa-sd__ln + .wa-sd__ln { width: 60%; margin-top: .7em; }
.wa-sd__ph-box { display: block; height: 4.6em; margin-top: 1em; border-radius: .8em; background: #f5f8fb; }
.wa-sd__ph-btn { display: block; height: 2.2em; margin-top: 1em; border-radius: .6em; background: var(--wa-sd-green); }

/* метки 1–4 (позиции как в макете) */
.wa-sd__label {
	position: absolute;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: .62em;
	padding: .62em .92em .62em .62em;
	border-radius: .92em;
	background: #fff;
	box-shadow: 0 .92em 2.15em rgba(15, 23, 42, .14);
	font-family: var(--wa-sd-head);
	font-weight: 600;
	font-size: max(11px, 1.3em);
	line-height: 1.2;
	color: var(--wa-sd-ink);
	white-space: nowrap;
	transform-origin: left center;
	transition: transform .25s, box-shadow .25s;
}
.wa-sd__label i {
	flex: none;
	width: 2em;
	height: 2em;
	border-radius: .62em;
	background: var(--wa-sd-blue);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-style: normal;
	font-weight: 700;
	font-size: .92em;
}
.wa-sd__label--4 i { background: var(--wa-sd-green); color: #0e2a06; }
.wa-sd__label--1 { left: 4.2%; top: 20%; }
.wa-sd__label--2 { left: 58%; top: 35%; }
.wa-sd__label--3 { left: 4.8%; top: 58.9%; }
.wa-sd__label--4 { left: 40.3%; top: 71.4%; }
.wa-sd__label.is-on { transform: scale(1.08); box-shadow: 0 16px 34px rgba(26, 114, 168, .28); }

/* ---------- адаптив ---------- */
@media (max-width: 1439px) {
	.wa-sd__wrap { width: calc(100% - 40px); }
}
@media (max-width: 1199px) {
	.wa-sd__wrap { grid-template-columns: minmax(0, 1fr) 480px; gap: 48px; }
	.wa-sd .wa-sd__title { font-size: 34px; }
}
@media (max-width: 1023px) {
	.wa-sd__wrap { grid-template-columns: minmax(0, 1fr); gap: 40px; }
	.wa-sd__scheme,
	.wa-sd__media { width: 100%; max-width: 620px; margin: 0 auto; }
	.wa-sd--none .wa-sd__wrap { gap: 0; }
}
@media (max-width: 767px) {
	.wa-sd { padding: 48px 0; }
	.wa-sd__wrap { width: calc(100% - 32px); gap: 32px; }
	.wa-sd .wa-sd__aside > .wa-sd__caption { margin-top: 24px; }
	.wa-sd .wa-sd__title { font-size: 27px; }
	.wa-sd .wa-sd__text p,
	.wa-sd .wa-sd__text li { font-size: 16px; }
	.wa-sd .wa-sd__text p.wa-sd__lead { font-size: 17px; }
	.wa-sd .wa-sd__text h3 { font-size: 18px; }
	.wa-sd .wa-sd__items { grid-template-columns: 1fr; }
	.wa-sd__actions { flex-direction: column; }
	.wa-sd .wa-sd__btn { width: 100%; }
	.wa-sd__media { border-radius: 20px; }
}
/* мобилка: свёрнутый текст (класс ставит wa-sd.js, только ≤767 и если текст заметно длиннее порога) */
.wa-sd__more { display: none; }
@media (max-width: 767px) {
	.wa-sd.is-clamped .wa-sd__text {
		position: relative;
		max-height: 360px;
		overflow: hidden;
	}
	.wa-sd.is-clamped .wa-sd__text::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: 96px;
		background: linear-gradient(rgba(255, 255, 255, 0), #fff);
		pointer-events: none;
	}
	.wa-sd .wa-sd__more:not([hidden]) {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		margin: 4px 0 0;
		padding: 8px 0;
		border: 0;
		background: none;
		font-family: var(--wa-sd-head);
		font-weight: 600;
		font-size: 15px;
		line-height: 1.2;
		color: var(--wa-sd-blue);
		cursor: pointer;
	}
	.wa-sd__more svg { transition: transform .2s; }
	.wa-sd__more[aria-expanded="true"] svg { transform: rotate(180deg); }
	.wa-sd .wa-sd__more:focus-visible { outline: 2px solid var(--wa-sd-blue); outline-offset: 3px; border-radius: 4px; }
}
@media (max-width: 400px) {
	.wa-sd__label { padding: .5em .7em .5em .5em; gap: .5em; }
	.wa-sd__label--2 { left: auto; right: 3%; }
}

@media (prefers-reduced-motion: reduce) {
	.wa-sd__label,
	.wa-sd__blk,
	.wa-sd__check { transition: none; }
	.wa-sd__label.is-on { transform: none; }
}