/*
 * _usluga-hero.css - hero, breadcrumbs and jump tabs for service pages.
 *
 * Split by ADR-023 file-per-section guard.
 */

/* ─── Crumbs встроены первым child в hero-l (не отдельной полосой) ─── */
.mh__usluga-crumbs {
	display: flex;
	gap: 10px;
	align-items: center;
	padding: 0;
	margin: 0 0 4px;
	font-size: var(--text-mono-2xs);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--fg-quiet);
	background: transparent;
	border: none;
}
.mh__usluga-crumbs a {
	color: var(--fg-mute);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	padding-bottom: 1px;
	transition: color 160ms ease, border-color 160ms ease;
}
.mh__usluga-crumbs a:hover {
	color: var(--accent);
	border-bottom-color: var(--accent);
}
.mh__usluga-crumbs > span[aria-current] { color: var(--ink); }

/* ─── Hero услуги (2-колонник, без breadcrumbs внутри) ─── */
.mh__usluga-hero {
	display: grid;
	grid-template-columns: 1fr 1fr;
	/* clamp ограничивает рост hero по высоте — иначе square image (1:1)
	   в правой колонке тянет всю секцию на 80-90% viewport. */
	height: clamp(560px, 60vh, 680px);
	overflow: hidden;
	border-bottom: 1px solid var(--line);
}

/* ─── Scroll-margin-top на anchor-targets для jump-tabs ───
   Header sticky 84px + ROW2 services 44px = 128px (Magic 128). Без margin
   anchored section упирается под header → юзер видит сверху обрезанный
   заголовок. На mobile ROW2 hidden → margin = 84px.
   На mobile дополнительно нужен margin под jump-tabs если он sticky
   (сейчас не sticky — bar inline, не нужно). */
.uc-calc,
#terms,
#delivery {
	scroll-margin-top: 140px;
}
@media (max-width: 640px) {
	.uc-calc,
	#terms,
	#delivery {
		scroll-margin-top: 92px;
	}
}

/* ─── Jump-tabs nav — bar между hero и калькулятором ───
   Round 8 (2026-05-22): расширение бывшего mh__usluga-calc-indicator.
   3 якоря (Калькулятор + Условия + Доставка), Калькулятор primary со
   стрелкой. Крест-метки реза ✚ в 4 углах — печатный thematic decor.

   Структура:
     [✚ ─────────────────────────────────────────── ✚]
     [    ↓ КАЛЬКУЛЯТОР · УСЛОВИЯ · ДОСТАВКА        ]
     [✚ ─────────────────────────────────────────── ✚]
*/
.mh__usluga-jumps {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 12px 28px;
	padding: 18px 32px;
	background: var(--accent);
	color: var(--ink);
	border-bottom: 1.5px solid var(--ink);
}

/* ─── Crop marks ✚ в 4 углах — print-thematic decor ─── */
.mh__usluga-jumps-mark {
	position: absolute;
	font-family: var(--font-mh-mono);
	font-size: var(--text-body);
	font-weight: 400;
	line-height: 1;
	color: var(--ink);
	opacity: 0.5;
	user-select: none;
	pointer-events: none;
}
.mh__usluga-jumps-mark--tl { top: 8px; left: 12px; }
.mh__usluga-jumps-mark--tr { top: 8px; right: 12px; }
.mh__usluga-jumps-mark--bl { bottom: 8px; left: 12px; }
.mh__usluga-jumps-mark--br { bottom: 8px; right: 12px; }

/* ─── Items (links) ─── */
.mh__usluga-jumps-item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 4px 2px;
	color: var(--ink);
	text-decoration: none;
	font-family: var(--font-mh-mono);
	font-size: var(--text-mono-sm);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	border-bottom: 1px solid transparent;
	transition: border-color 160ms ease, opacity 160ms ease;
}
.mh__usluga-jumps-item:hover,
.mh__usluga-jumps-item:focus-visible {
	border-bottom-color: var(--ink);
	outline: none;
}

/* Primary (Калькулятор) — со стрелкой ↓ + чуть крупнее */
.mh__usluga-jumps-item--primary {
	font-size: var(--text-body-sm);
	letter-spacing: 0.08em;
}
.mh__usluga-jumps-arrow {
	display: inline-block;
	font-size: var(--text-h3-sm);
	line-height: 1;
	animation: usluga-jumps-bounce 1.6s ease-in-out infinite;
}

@keyframes usluga-jumps-bounce {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(3px); }
}
@media (prefers-reduced-motion: reduce) {
	.mh__usluga-jumps-arrow { animation: none; }
}

/* Mobile: компактнее, горизонтальный wrap allowed */
@media (max-width: 640px) {
	.mh__usluga-jumps {
		gap: 8px 18px;
		padding: 14px 24px;
	}
	.mh__usluga-jumps-item {
		font-size: var(--text-eyebrow);
		letter-spacing: 0.1em;
	}
	.mh__usluga-jumps-item--primary {
		font-size: var(--text-mono-sm);
	}
	.mh__usluga-jumps-arrow {
		font-size: var(--text-body);
	}
	.mh__usluga-jumps-mark { font-size: var(--text-mono-sm); }
	.mh__usluga-jumps-mark--tl,
	.mh__usluga-jumps-mark--tr { top: 5px; }
	.mh__usluga-jumps-mark--bl,
	.mh__usluga-jumps-mark--br { bottom: 5px; }
}
@media (min-width: 1600px) {
	.mh__usluga-hero { height: clamp(620px, 62vh, 720px); }
}
.mh__usluga-hero-l {
	display: flex;
	flex-direction: column;
	gap: 22px;
	min-width: 0;
	padding: 56px 56px;
	background: var(--bg);
	justify-content: center;
}
.mh__usluga-hero-l .mh__h1 {
	font-size: clamp(40px, 5vw, 72px);
	margin: 0;
}
.mh__usluga-hero-l .mh__hero-lead {
	font-size: var(--text-h3-sm);
	line-height: 1.5;
	color: var(--fg-mute);
	max-width: min(520px, 100%);
}
.mh__hero-cta {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 8px;
}