/**
 * Херо страниц услуг «міні-атом» + меню разделов (2026-10-29).
 * Разметка: template-parts/service/hero.php, template-parts/service/section-nav.php; данные: inc/wa-service-hero.php; JS: assets/js/wa-service.js.
 * Макеты: reports/new-design-tasks/Service hero task/ (SvcHeroAtom 1440, SvcHeroMobile 390, SvcNavSticky).
 * Атом: десктоп коробка 480 (rx 200 / ry 74), мобилка < 1024 — своя геометрия 300 (rx 112 / ry 42), не scale десктопной.
 */

.wa-sh,
.wa-snav {
	--wa-sh-ink: #14233a;
	--wa-sh-text: #36404f;
	--wa-sh-muted: #4b5563;
	--wa-sh-blue: #1a72a8;
	--wa-sh-green: #7dc91b;
	--wa-sh-head: Montserrat, Arial, sans-serif;
	font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
.wa-sh *,
.wa-sh *::before,
.wa-sh *::after,
.wa-snav *,
.wa-snav *::before,
.wa-snav *::after { box-sizing: border-box; }

/* ---------- херо ---------- */
.wa-sh {
	width: 1400px;
	max-width: 100%;
	margin: var(--wa-page-gap, 24px) auto 0;
	color: #1d2433;
}

.wa-sh__card {
	position: relative;
	min-height: 560px;
	border-radius: 28px;
	overflow: hidden;
	background: linear-gradient(135deg, #eaf6fc 0%, #d3ecf7 52%, #c1e3f3 100%);
	display: flex;
	align-items: center;
	gap: 24px;
	padding: 40px 48px 40px 64px;
}

.wa-sh__dots {
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(26, 114, 168, .16) 1.2px, transparent 1.6px);
	background-size: 22px 22px;
	-webkit-mask-image: radial-gradient(ellipse 50% 80% at 78% 50%, #000 0%, transparent 75%);
	mask-image: radial-gradient(ellipse 50% 80% at 78% 50%, #000 0%, transparent 75%);
	pointer-events: none;
}

.wa-sh__content {
	position: relative;
	flex: 1;
	min-width: 0;
	max-width: 700px;
}

/* крошки */
.wa-sh__crumbs ol {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 13px;
	line-height: 1.4;
	color: #5b6472;
}
.wa-sh__crumbs li { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0; }
.wa-sh__crumbs li + li::before { content: "\203A"; color: #5b6472; } /* «›» кодом: в минифицированном CSS WPFC символ ломается */
.wa-sh__crumbs a { color: #1a5f8c; text-decoration: none; }
.wa-sh__crumbs a:hover { color: #125a85; text-decoration: underline; }

.wa-sh .wa-sh__title {
	margin: 18px 0 0;
	padding: 0;
	width: auto;
	font-family: var(--wa-sh-head);
	font-weight: 700;
	font-size: clamp(38px, 3.2vw, 46px);
	line-height: 1.12;
	letter-spacing: -.015em;
	color: var(--wa-sh-ink);
	text-align: left;
	text-transform: none;
	overflow-wrap: break-word;
	text-wrap: balance;
}
.wa-sh__accent { color: var(--wa-sh-blue); }

.wa-sh__lead {
	margin: 18px 0 0;
	max-width: 600px;
	font-size: 18px;
	line-height: 1.55;
	color: var(--wa-sh-text);
}

/* факты */
.wa-sh__facts {
	display: flex;
	align-items: stretch;
	gap: 22px;
	margin: 28px 0 0;
	padding: 0;
	list-style: none;
}
.wa-sh__fact {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 3px;
	margin: 0;
	padding: 0;
}
.wa-sh__fact + .wa-sh__fact { padding-left: 22px; }
.wa-sh__fact + .wa-sh__fact::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 1px;
	background: rgba(26, 114, 168, .2);
}
.wa-sh__fact-value {
	font-family: var(--wa-sh-head);
	font-weight: 700;
	font-size: 22px;
	line-height: 1.25;
	color: var(--wa-sh-ink);
	white-space: nowrap;
}
.wa-sh__fact-label { font-size: 13px; line-height: 1.35; color: var(--wa-sh-muted); }

/* кнопки */
.wa-sh__actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 32px;
}
.wa-sh .wa-sh__cta,
.wa-sh .wa-sh__works {
	height: 56px;
	border-radius: 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-family: var(--wa-sh-head);
	font-size: 16px;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: background .2s, transform .2s, border-color .2s;
}
.wa-sh .wa-sh__cta {
	padding: 0 26px;
	border: 0;
	background: var(--wa-sh-green);
	color: #0e2a06;
	font-weight: 700;
	box-shadow: 0 10px 24px rgba(125, 201, 27, .35);
}
.wa-sh .wa-sh__cta:hover { background: #6fb915; transform: translateY(-1px); }
.wa-sh .wa-sh__works {
	padding: 0 22px;
	border: 1px solid #b9cfdf;
	background: rgba(255, 255, 255, .6);
	color: #1d2433;
	font-weight: 600;
}
.wa-sh .wa-sh__works .wa-icon { color: var(--wa-sh-blue); }
.wa-sh .wa-sh__works:hover { color: #1d2433; background: #fff; border-color: #9fbcd2; }
.wa-sh .wa-sh__cta:focus-visible,
.wa-sh .wa-sh__works:focus-visible,
.wa-sh__crumbs a:focus-visible { outline: 3px solid var(--wa-sh-blue); outline-offset: 3px; }

/* ---------- мини-атом (десктоп 480 в коробке 520) ---------- */
.wa-sh__visual {
	position: relative;
	flex: none;
	width: 520px;
	height: 520px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.wa-sa {
	position: relative;
	flex: none;
	width: 480px;
	height: 480px;
	isolation: isolate;
}
.wa-sa__orbits { position: absolute; left: 0; top: 0; overflow: visible; }
.wa-sa__orbits--sm { display: none; }
.wa-sa__orbit {
	fill: none;
	stroke: var(--wa-sh-blue);
	stroke-width: 1.6;
	opacity: .55;
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	animation: waShDraw 1.3s cubic-bezier(.6, 0, .2, 1) forwards;
}
.wa-sa__orbit--2 { animation-delay: .15s; }
.wa-sa__orbit--3 { animation-delay: .3s; stroke: #5fae0e; opacity: .8; }
@keyframes waShDraw { to { stroke-dashoffset: 0; } }

.wa-sa__nuc {
	position: absolute;
	left: 198px;
	top: 198px;
	z-index: 2;
	width: 84px;
	height: 84px;
	animation: waShPop .8s cubic-bezier(.3, 1.6, .5, 1) .6s both;
}
@keyframes waShPop { from { transform: scale(0); } to { transform: scale(1); } }
.wa-sa__core {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: radial-gradient(circle at 34% 30%, #9be03c 0%, #7dc91b 50%, #4e9a10 100%);
	box-shadow: 0 0 0 12px rgba(125, 201, 27, .14), 0 0 52px rgba(125, 201, 27, .55);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
}
.wa-sa__ring {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 2px solid rgba(125, 201, 27, .55);
	opacity: 0;
	animation: waShRing 3.2s ease-out 1.4s infinite;
}
@keyframes waShRing {
	0% { transform: scale(.9); opacity: .8; }
	100% { transform: scale(2.4); opacity: 0; }
}

.wa-sa__sat {
	position: absolute;
	left: 0;
	top: 0;
	offset-rotate: 0deg;
	animation: waShOrbit linear infinite;
}
@keyframes waShOrbit {
	0% { offset-distance: 0%; scale: .88; z-index: 1; }
	25% { scale: .8; }
	49.9% { z-index: 1; }
	50% { scale: .9; z-index: 4; }
	75% { scale: 1.06; }
	100% { offset-distance: 100%; scale: .88; z-index: 4; }
}
.wa-sa__sat--s1 { offset-path: path('M 40 240 A 200 74 0 1 1 440 240 A 200 74 0 1 1 40 240'); animation-duration: 28s; animation-delay: -20s; }
.wa-sa__sat--s2 { offset-path: path('M 140 66.8 A 200 74 60 1 1 340 413.2 A 200 74 60 1 1 140 66.8'); animation-duration: 34s; animation-delay: -8s; }
.wa-sa__sat--s3 { offset-path: path('M 140 413.2 A 200 74 -60 1 1 340 66.8 A 200 74 -60 1 1 140 413.2'); animation-duration: 40s; animation-delay: -31s; }
.wa-sa:hover .wa-sa__sat { animation-play-state: paused; }

.wa-sa__chip {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 14px 6px 6px;
	background: #fff;
	border: 1px solid #dfe7ef;
	border-radius: 999px;
	box-shadow: 0 10px 26px rgba(15, 23, 42, .12);
	font-family: var(--wa-sh-head);
	font-weight: 600;
	font-size: 13px;
	line-height: 1.2;
	color: #1d2433;
	white-space: nowrap;
	opacity: 0;
	animation: waShIn .6s ease-out 1.4s forwards;
}
@keyframes waShIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.wa-sa__ic {
	flex: none;
	width: 26px;
	height: 26px;
	border-radius: 999px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #eaf4fa;
	color: var(--wa-sh-blue);
}
.wa-sa__ic--green { background: #eef8e2; color: #3f7a0a; }

/* пауза, когда херо вне экрана (JS) */
.wa-sh.is-offscreen * { animation-play-state: paused !important; }

/* ---------- меню разделов ---------- */
.wa-snav-sentinel { height: 0; }
.wa-snav {
	position: sticky;
	top: calc(var(--wa-adminbar, 0px) + var(--wa-hdr-h-sticky, 64px));
	z-index: 900;
	margin-top: 16px;
	transition: background .2s, box-shadow .2s;
}
.wa-snav__in {
	width: 1400px;
	max-width: 100%;
	height: 56px;
	margin: 0 auto;
	padding: 0 6px;
	display: flex;
	align-items: center;
	gap: 4px;
	background: #fff;
	border: 1px solid #e1e8ef;
	border-radius: 16px;
	box-shadow: 0 6px 18px rgba(15, 23, 42, .04);
}
.wa-snav__list {
	display: flex;
	align-items: center;
	gap: 4px;
	min-width: 0;
	overflow-x: auto;
	scrollbar-width: none;
}
.wa-snav__list::-webkit-scrollbar { display: none; }
.wa-snav .wa-snav__link {
	flex: none;
	height: 40px;
	padding: 0 16px;
	border-radius: 11px;
	display: flex;
	align-items: center;
	font-family: var(--wa-sh-head);
	font-weight: 600;
	font-size: 14px;
	line-height: 1;
	color: var(--wa-sh-text);
	white-space: nowrap;
	text-decoration: none;
	transition: background .2s, color .2s;
}
.wa-snav .wa-snav__link:hover { background: #f1f6fa; color: var(--wa-sh-ink); text-decoration: none; }
.wa-snav .wa-snav__link.is-active { background: #eaf4fa; color: var(--wa-sh-blue); }
.wa-snav .wa-snav__link:focus-visible,
.wa-snav .wa-snav__cta:focus-visible { outline: 2px solid var(--wa-sh-blue); outline-offset: 2px; }
.wa-snav__hours {
	margin-left: auto;
	padding: 0 10px 0 16px;
	font-size: 13px;
	color: #5b6472;
	white-space: nowrap;
}
.wa-snav__name,
.wa-snav__price,
.wa-snav .wa-snav__cta { display: none; }

/* прилипшее состояние (класс от JS): на всю ширину окна, внутри 1400 */
.wa-snav.is-stuck {
	background: rgba(255, 255, 255, .97);
	border-bottom: 1px solid #e3e9ef;
	box-shadow: 0 8px 24px rgba(15, 23, 42, .07);
}
.wa-snav.is-stuck .wa-snav__in {
	padding: 0;
	background: transparent;
	border-color: transparent;
	border-radius: 0;
	box-shadow: none;
}
.wa-snav.is-stuck .wa-snav__hours { display: none; }
.wa-snav.is-stuck .wa-snav__name {
	display: flex;
	align-items: center;
	flex: none;
	margin-right: 10px;
	font-family: var(--wa-sh-head);
	font-weight: 700;
	font-size: 14px;
	color: var(--wa-sh-ink);
	white-space: nowrap;
}
.wa-snav.is-stuck .wa-snav__name::after {
	content: "";
	width: 1px;
	height: 22px;
	margin-left: 14px;
	background: #e1e8ef;
}
.wa-snav.is-stuck .wa-snav__link { height: 38px; padding: 0 15px; }
.wa-snav.is-stuck .wa-snav__price {
	display: block;
	flex: none;
	margin-left: auto;
	padding-left: 12px;
	margin-right: 12px;
	font-family: var(--wa-sh-head);
	font-weight: 700;
	font-size: 15px;
	color: var(--wa-sh-ink);
	white-space: nowrap;
}
.wa-snav.is-stuck .wa-snav__cta {
	display: inline-flex;
	align-items: center;
	flex: none;
	height: 40px;
	padding: 0 16px;
	border: 0;
	border-radius: 12px;
	background: var(--wa-sh-green);
	color: #0e2a06;
	font-family: var(--wa-sh-head);
	font-weight: 700;
	font-size: 14px;
	white-space: nowrap;
	cursor: pointer;
	transition: background .2s;
}
.wa-snav.is-stuck .wa-snav__cta:hover { background: #6fb915; }
/* цены нет — кнопка сама прижимается вправо */
.wa-snav.is-stuck .wa-snav__hours + .wa-snav__cta { margin-left: auto; }

/* якоря не прячутся под шапкой и меню */
html:has(.wa-snav) { scroll-padding-top: calc(var(--wa-adminbar, 0px) + var(--wa-hdr-h-sticky, 64px) + 56px + 16px); }

/* ---------- ширина: 1400, поля 20px ниже 1440 ---------- */
@media (max-width: 1439px) {
	.wa-sh { width: calc(100% - 40px); }
	.wa-snav__in { width: calc(100% - 40px); }
}
@media (max-width: 1279px) {
	.wa-snav.is-stuck .wa-snav__name { display: none; }
}

/* ---------- 1024–1199: атом 0.82, H1 40 ---------- */
@media (max-width: 1199px) {
	.wa-sh__card { padding: 40px 32px 40px 40px; gap: 8px; }
	.wa-sh .wa-sh__title { font-size: 40px; }
	.wa-sh__lead { font-size: 17px; }
	.wa-sh__visual { width: 428px; height: 428px; }
	.wa-sa { transform: scale(.82); }
	.wa-sh__fact-value { font-size: 20px; }
	.wa-snav.is-stuck .wa-snav__price { display: none; }
	.wa-snav.is-stuck .wa-snav__cta { margin-left: auto; }
}

/* ---------- мобилка ≤1023: колонка, атом 300 со своей геометрией ---------- */
@media (max-width: 1023px) {
	.wa-sh { width: calc(100% - 32px); }
	.wa-sh__card {
		display: block;
		min-height: 0;
		padding: 24px 20px;
		border-radius: 24px;
		background: linear-gradient(160deg, #eaf6fc 0%, #d3ecf7 55%, #c1e3f3 100%);
	}
	.wa-sh__dots { -webkit-mask-image: radial-gradient(ellipse 80% 40% at 50% 85%, #000 0%, transparent 75%); mask-image: radial-gradient(ellipse 80% 40% at 50% 85%, #000 0%, transparent 75%); }
	.wa-sh__content { max-width: none; }

	.wa-sh__crumbs ol {
		flex-wrap: nowrap;
		gap: 6px;
		font-size: 12px;
		white-space: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
	}
	.wa-sh__crumbs ol::-webkit-scrollbar { display: none; }
	.wa-sh__crumbs li { gap: 6px; flex: none; }

	.wa-sh .wa-sh__title { margin-top: 14px; font-size: 28px; line-height: 1.16; letter-spacing: -.01em; }
	.wa-sh__lead { margin-top: 12px; font-size: 15px; line-height: 1.5; }

	.wa-sh__facts {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
		margin-top: 18px;
	}
	.wa-sh__fact,
	.wa-sh__fact + .wa-sh__fact {
		padding: 11px 13px;
		gap: 2px;
		border-radius: 14px;
		background: rgba(255, 255, 255, .72);
	}
	.wa-sh__fact + .wa-sh__fact::before { display: none; }
	.wa-sh__facts--n1 .wa-sh__fact,
	.wa-sh__facts--n3 .wa-sh__fact:nth-child(3) {
		grid-column: 1 / -1;
		flex-direction: row;
		align-items: baseline;
		flex-wrap: wrap;
		column-gap: 8px;
	}
	.wa-sh__fact-value { font-size: 17px; white-space: normal; }
	.wa-sh__fact-label { font-size: 12px; }

	.wa-sh__actions { flex-direction: column; align-items: stretch; gap: 10px; margin-top: 18px; }
	.wa-sh .wa-sh__cta { width: 100%; height: 54px; }
	.wa-sh .wa-sh__works { width: 100%; height: 50px; font-size: 15px; }
	.wa-sh .wa-sh__works .wa-icon { display: none; }

	.wa-sh__visual { width: 300px; height: 300px; margin: 22px auto 0; }
	.wa-sa { width: 300px; height: 300px; transform: none; }
	.wa-sa__orbits--lg { display: none; }
	.wa-sa__orbits--sm { display: block; }
	.wa-sa__orbit { stroke-width: 1.4; }
	.wa-sa__nuc { left: 124px; top: 124px; width: 52px; height: 52px; }
	.wa-sa__core { box-shadow: 0 0 0 8px rgba(125, 201, 27, .14), 0 0 34px rgba(125, 201, 27, .55); }
	.wa-sa__core .wa-icon { width: 24px; height: 24px; }
	.wa-sa__ring { display: none; }
	.wa-sa__sat--s1 { offset-path: path('M 38 150 A 112 42 0 1 1 262 150 A 112 42 0 1 1 38 150'); }
	.wa-sa__sat--s2 { offset-path: path('M 94 53 A 112 42 60 1 1 206 247 A 112 42 60 1 1 94 53'); }
	.wa-sa__sat--s3 { offset-path: path('M 94 247 A 112 42 -60 1 1 206 53 A 112 42 -60 1 1 94 247'); }
	.wa-sa__chip { gap: 6px; padding: 4px 11px 4px 4px; font-size: 12px; box-shadow: 0 8px 20px rgba(15, 23, 42, .12); }
	.wa-sa__ic { width: 22px; height: 22px; }
	.wa-sa__ic .wa-icon { width: 12px; height: 12px; }

	/* меню: лента чипсов под края экрана */
	.wa-snav { margin-top: 12px; }
	.wa-snav__in,
	.wa-snav.is-stuck .wa-snav__in {
		width: auto;
		height: auto;
		padding: 0;
		background: transparent;
		border: 0;
		border-radius: 0;
		box-shadow: none;
	}
	.wa-snav__list { gap: 6px; padding: 6px 16px; }
	.wa-snav .wa-snav__link,
	.wa-snav.is-stuck .wa-snav__link {
		height: 38px;
		padding: 0 14px;
		border: 1px solid #d9e3ec;
		border-radius: 999px;
		background: #fff;
		font-size: 13px;
	}
	.wa-snav .wa-snav__link.is-active { background: #eaf4fa; border-color: #b9d6ea; color: var(--wa-sh-blue); }
	.wa-snav__hours,
	.wa-snav.is-stuck .wa-snav__name,
	.wa-snav.is-stuck .wa-snav__price,
	.wa-snav.is-stuck .wa-snav__cta { display: none; }
	html:has(.wa-snav) { scroll-padding-top: calc(var(--wa-adminbar, 0px) + var(--wa-hdr-h-sticky, 60px) + 50px + 16px); }
}
@media (max-width: 374px) {
	.wa-sh .wa-sh__title { font-size: 26px; }
	.wa-sh__card { padding: 22px 16px; }
}

/* ---------- reduced motion: статичный атом ---------- */
@media (prefers-reduced-motion: reduce) {
	.wa-sa__sat,
	.wa-sa__ring { animation: none; }
	.wa-sa__orbit { animation: none; stroke-dashoffset: 0; }
	.wa-sa__chip { animation: none; opacity: 1; }
	.wa-sa__nuc { animation: none; }
	.wa-sa__sat--s1 { offset-distance: 72%; }
	.wa-sa__sat--s2 { offset-distance: 25%; }
	.wa-sa__sat--s3 { offset-distance: 78%; }
	.wa-sh .wa-sh__cta { transition: none; }
}

/* ---------- без offset-path: плашки статично вокруг ядра ---------- */
@supports not (offset-path: path('M 0 0')) {
	.wa-sa__sat { animation: none; }
	.wa-sa__sat--s1 { left: 16px; top: 120px; }
	.wa-sa__sat--s2 { left: 270px; top: 70px; }
	.wa-sa__sat--s3 { left: 230px; top: 360px; }
	@media (max-width: 1023px) {
		.wa-sa__sat--s1 { left: 0; top: 70px; }
		.wa-sa__sat--s2 { left: 160px; top: 40px; }
		.wa-sa__sat--s3 { left: 140px; top: 230px; }
	}
}