/**
 * Root /practice/ — studio mesh hero + paper sections.
 * Peer: /approach/ (rail hero, claims, cream bands). Not federal chrome.
 * Scoped to body.studio-page-embedded-practice so /work/practice/ is untouched.
 */

body.studio-page-embedded-practice {
	--wp--style--block-gap: 0;
}

body.studio-page-embedded-practice .studio-hero h1 em {
	font-style: italic;
	color: var(--studio-hero-stake);
}

body.studio-page-embedded-practice .studio-hero .studio-hero__eyebrow {
	margin-bottom: var(--wp--preset--spacing--30) !important;
}

body.studio-page-embedded-practice .studio-hero h1.alignwide {
	max-width: 24ch;
	font-weight: 300;
	letter-spacing: -0.02em;
}

/* Above-the-fold: engagement shape (supporting), then the purchase outcome (prominent) */
body.studio-page-embedded-practice .studio-hero__offer {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.9375rem;
	line-height: 1.5;
	color: rgba(250, 249, 247, 0.65);
	max-width: 46rem;
	margin: 0 0 var(--wp--preset--spacing--20);
}

body.studio-page-embedded-practice .studio-hero__result {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 1.125rem;
	font-weight: 500;
	line-height: 1.45;
	color: var(--wp--preset--color--base, #faf9f7);
	max-width: 46rem;
	margin: 0;
}

@media (max-width: 600px) {
	body.studio-page-embedded-practice .studio-hero__offer {
		font-size: 0.875rem;
	}

	body.studio-page-embedded-practice .studio-hero__result {
		font-size: 1rem;
	}
}

body.studio-page-embedded-practice .studio-section-label {
	margin-bottom: var(--wp--preset--spacing--30) !important;
}

body.studio-page-embedded-practice .approach-claim {
	margin-top: 0 !important;
	margin-bottom: var(--wp--preset--spacing--40) !important;
	max-width: 34rem;
}

/* Full-width copy rail inside bands — mirrors main > .about-section--full-width (style.css) */
body.studio-page-embedded-practice .about-section--full-width > p,
body.studio-page-embedded-practice .about-section--full-width > .approach-claim,
body.studio-page-embedded-practice .about-section--full-width > .studio-section-label {
	max-width: none;
}

.practice-section {
	box-sizing: border-box;
}

.practice-lede,
.practice-need {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 1.0625rem;
	line-height: 1.55;
	max-width: 42rem;
	margin: 0 0 var(--wp--preset--spacing--40);
}

.practice-lede:last-child,
.practice-need:last-child {
	margin-bottom: 0;
}

/* ── Cream band (wedges) ─────────────────────────────────── */

.practice-band {
	background: var(--wp--preset--color--cream, #f3efe8);
	border-top: 1px solid var(--wp--preset--color--subtle);
	border-bottom: 1px solid var(--wp--preset--color--subtle);
	padding: var(--wp--preset--spacing--55) 0;
	margin-inline: calc(var(--wp--style--root--padding-left, 1.5rem) * -1)
		calc(var(--wp--style--root--padding-right, 1.5rem) * -1);
	max-width: none;
	width: auto;
}

/* Full-bleed band → content on the 1200px rail via rail insets alone
   (max-width + inset padding double-constrains; heroes use the same pattern) */
.practice-band .practice-section {
	padding-inline: var(--studio-rail-inset-left, max(1.5rem, 5vw))
		var(--studio-rail-inset-right, max(1.5rem, 5vw));
	max-width: none;
	margin-inline: 0;
}

.practice-wedges {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--40);
	margin-top: var(--wp--preset--spacing--45);
	align-items: stretch;
}

@media (min-width: 900px) {
	.practice-wedges {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--35);
	}
}

.practice-wedge {
	display: flex;
	flex-direction: column;
	min-width: 0;
	height: auto;
}

.practice-wedge .studio-card__index {
	color: var(--wp--preset--color--accent);
}

/* Poster cap — same still the linked bridge page opens with (work-engagement-card cap pattern) */
.practice-wedge__cap {
	position: relative;
	aspect-ratio: 16 / 9;
	margin: calc(var(--wp--preset--spacing--40) * -1 + 3px)
		calc(var(--wp--preset--spacing--40) * -1)
		var(--wp--preset--spacing--40);
	background-color: var(--studio-ink, #0e1a1f);
	background-size: cover;
	background-position: center;
	overflow: hidden;
}

.practice-wedge__cap::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(10, 14, 16, 0.05) 0%,
		rgba(10, 14, 16, 0.3) 100%
	);
}

.practice-wedge__title {
	font-family: var(--wp--preset--font-family--serif);
	font-size: clamp(1.2rem, 1.6vw, 1.45rem);
	font-weight: 400;
	line-height: 1.2;
	margin: 0 0 var(--wp--preset--spacing--30);
}

.practice-wedge__title em {
	font-style: italic;
}

.practice-wedge__body {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.9375rem;
	line-height: 1.55;
	margin: 0 0 auto;
	padding-bottom: var(--wp--preset--spacing--40);
}

/* One-line proof under the claim — answers "has he solved this?" */
.practice-wedge__evidence {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.85rem;
	line-height: 1.45;
	color: var(--wp--preset--color--muted, #5c6b70);
	margin: 0;
	padding: var(--wp--preset--spacing--30) 0 0;
	border-top: 1px solid var(--wp--preset--color--subtle);
}

.practice-wedge__evidence + .practice-wedge__proof {
	border-top: 0;
	padding-top: 0.45rem;
}

.practice-wedge__proof {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 0.85rem;
	margin: 0;
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--wp--preset--color--subtle);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.practice-wedge__proof a {
	color: var(--wp--preset--color--accent);
	text-decoration: none;
}

.practice-wedge__proof a:hover {
	text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
	body.studio-page-embedded-practice .studio-card:hover {
		transform: none;
	}
}

/* ── How it runs ─────────────────────────────────────────── */

.practice-run {
	list-style: none;
	margin: var(--wp--preset--spacing--45) 0 0;
	padding: var(--wp--preset--spacing--45) var(--wp--preset--spacing--40)
		var(--wp--preset--spacing--50);
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--cream, #f3efe8);
	border: 1px solid var(--wp--preset--color--subtle);
	position: relative;
	overflow: hidden;
	box-sizing: border-box;
}

.practice-run::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(
		90deg,
		var(--studio-teal, #2c5f6e),
		var(--studio-teal-light, #3d7a8c)
	);
	opacity: 0.9;
}

@media (min-width: 900px) {
	.practice-run {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--35);
	}
}

.practice-run__step {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	min-width: 0;
	margin: 0;
}

.practice-run__num {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
}

.practice-run__name {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.15rem;
	font-weight: 400;
	line-height: 1.25;
	margin: 0 0 0.35rem;
}

.practice-run__body {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.9375rem;
	line-height: 1.5;
	margin: 0;
	color: var(--wp--preset--color--contrast);
}

.practice-need {
	margin-top: var(--wp--preset--spacing--45) !important;
	color: var(--wp--preset--color--muted);
}

/* ── What this is not ────────────────────────────────────── */

.practice-not {
	list-style: none;
	margin: var(--wp--preset--spacing--40) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	max-width: 42rem;
}

@media (min-width: 700px) {
	.practice-not {
		grid-template-columns: 1fr 1fr;
		column-gap: var(--wp--preset--spacing--50);
	}
}

.practice-not li {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 1rem;
	line-height: 1.45;
	margin: 0;
	padding: 0.85rem 0 0.85rem 1.15rem;
	border-bottom: 1px solid var(--wp--preset--color--subtle);
	position: relative;
}

.practice-not li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 1.2rem;
	width: 0.45rem;
	height: 1px;
	background: var(--wp--preset--color--accent);
}

/* ── CTA ─────────────────────────────────────────────────── */

.practice-cta {
	background: var(--wp--preset--color--cream, #f3efe8);
	border-top: 1px solid var(--wp--preset--color--subtle);
	padding: var(--wp--preset--spacing--55) 0 var(--wp--preset--spacing--60);
	margin-inline: calc(var(--wp--style--root--padding-left, 1.5rem) * -1)
		calc(var(--wp--style--root--padding-right, 1.5rem) * -1);
	max-width: none;
	width: auto;
}

.practice-cta .practice-section {
	padding-inline: var(--studio-rail-inset-left, max(1.5rem, 5vw))
		var(--studio-rail-inset-right, max(1.5rem, 5vw));
	max-width: none;
	margin-inline: 0;
}

.practice-cta .approach-claim {
	max-width: none;
}

.practice-cta__action {
	margin: var(--wp--preset--spacing--40) 0 0;
}

.practice-entity {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--wp--preset--color--muted);
	max-width: 42rem;
	margin: var(--wp--preset--spacing--40) 0 0;
}