/* ============================================================
   _usluga-content-rich.css — Phase 3.2.1 content-rich секции
   страниц услуг (CMB2 metabox usluga_content_rich):
   features-grid / use-cases / howto-steps.

   Вынесено из _usluga.css по ADR-023 (soft cap 800 строк).
   Префикс .mh__usluga-* — изоляция от _howto.css главной (ADR-026).

   Подключается в enqueue.php после _usluga.css.
   ============================================================ */

/* ─── Features Grid: 4 карточки 2×2 (или 4×1 на desktop) ─── */
.mh__usluga-features {
	background: var(--paper);
}
.mh__usluga-features-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	margin-top: 32px;
}
.mh__usluga-feature-card {
	padding: 28px 24px;
	background: var(--bg);
	border: 1px solid var(--line);
	display: flex;
	flex-direction: column;
	gap: 14px;
	transition: border-color 200ms ease, transform 200ms ease;
}
.mh__usluga-feature-card:hover {
	border-color: var(--accent);
	transform: translateY(var(--motion-lift-y-md));
}
.mh__usluga-feature-card-icon {
	width: 40px;
	height: 40px;
	color: var(--accent);
	display: block;
}
.mh__usluga-feature-card-icon svg {
	width: 100%;
	height: 100%;
	display: block;
}
.mh__usluga-feature-card-eyebrow {
	font-family: var(--font-mono);
	font-size: var(--text-eyebrow);
	letter-spacing: 0.1em;
	color: var(--fg-mute);
	text-transform: uppercase;
}
.mh__usluga-feature-card-title {
	font-size: var(--text-price);
	line-height: 1.2;
	font-weight: 700;
	color: var(--ink);
	margin: 0;
	font-family: var(--font-display);
}
.mh__usluga-feature-card-desc {
	font-size: var(--text-body-sm);
	line-height: 1.55;
	color: var(--fg);
	margin: 0;
}

/* ─── Use-cases: 4 карточки с media + body ─── */
.mh__usluga-cases {
	background: var(--bg-deep);
}
.mh__usluga-cases-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	margin-top: 32px;
}
.mh__usluga-case {
	background: var(--paper);
	border: 1px solid var(--line);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
.mh__usluga-case-media {
	aspect-ratio: 4 / 3;
	background: linear-gradient(135deg, var(--bg-deep), var(--accent-soft, var(--bg)));
	border-bottom: 1px solid var(--line);
	position: relative;
	overflow: hidden;
}
.mh__usluga-case-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.mh__usluga-case-media::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 60%, rgba(var(--rgb-graphite-900),0.04));
	pointer-events: none;
}
.mh__usluga-case-body {
	padding: 22px 20px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
}
.mh__usluga-case-eyebrow {
	font-family: var(--font-mono);
	font-size: var(--text-eyebrow);
	color: var(--accent);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.mh__usluga-case-title {
	font-size: var(--text-h3-sm);
	line-height: 1.25;
	font-weight: 700;
	color: var(--ink);
	margin: 0;
	font-family: var(--font-display);
}
.mh__usluga-case-desc {
	font-size: var(--text-body-sm);
	line-height: 1.5;
	color: var(--fg);
	margin: 0;
}

/* ─── How-to: numbered timeline ─── */
.mh__usluga-howto-steps {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
	margin: 32px 0 0;
	padding: 0;
	list-style: none;
	position: relative;
}
.mh__usluga-howto-step {
	padding: 26px 22px;
	background: var(--paper);
	border: 1px solid var(--line);
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.mh__usluga-howto-step-num {
	font-family: var(--font-mono);
	font-size: var(--text-h2-sm);
	color: var(--accent);
	font-weight: 700;
	line-height: 1;
}
.mh__usluga-howto-step-title {
	font-size: var(--text-h3-sm);
	font-weight: 700;
	color: var(--ink);
	margin: 0;
	font-family: var(--font-display);
}
.mh__usluga-howto-step-desc {
	font-size: var(--text-body-sm);
	line-height: 1.55;
	color: var(--fg);
	margin: 0;
}
@media (min-width: 901px) {
	.mh__usluga-howto-step:not(:last-child)::after {
		content: '→';
		position: absolute;
		right: -12px;
		top: 26px;
		font-family: var(--font-mono);
		color: var(--accent);
		font-size: var(--text-price);
		z-index: 1;
		background: var(--bg);
		padding: 0 4px;
		line-height: 1;
	}
}

/* ─── Mobile / Tablet adaptations ─── */
@media (max-width: 1080px) {
	.mh__usluga-features-grid,
	.mh__usluga-cases-grid,
	.mh__usluga-howto-steps {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 640px) {
	.mh__usluga-features-grid {
		grid-template-columns: 1fr;
		gap: 14px;
	}
	.mh__usluga-feature-card { padding: 22px 20px; }
	.mh__usluga-cases-grid {
		grid-template-columns: 280px;
		grid-auto-flow: column;
		grid-auto-columns: 280px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		padding-bottom: 14px;
		-webkit-overflow-scrolling: touch;
	}
	.mh__usluga-case { scroll-snap-align: start; }
	.mh__usluga-howto-steps {
		grid-template-columns: 1fr;
		gap: 12px;
	}
	.mh__usluga-howto-step { padding: 20px 18px; }
}

/* ════════════════════════════════════════════════════════════════════
   Pricing disclaimer (Phase 3.4) — глобальный текст под terms,
   читается из studio_print_global.pricing_disclaimer (CMB2).
   ════════════════════════════════════════════════════════════════════ */
.mh__usluga-disclaimer {
	margin-top: 32px;
	padding: 14px 18px;
	border-top: 1px solid var(--line);
	font-size: var(--text-mono-sm);
	line-height: 1.6;
	color: var(--fg-mute);
	letter-spacing: 0.01em;
}