/**
 * /approach/ — full-process page (scoped via .studio-page-approach on body + main)
 */

/* Sticky deck needs ancestors without overflow:hidden (site root clips heroes only) */
main.studio-page-approach {
	overflow: visible;
}

/* ─── Claims & artifacts (shared with About; tuned here) ─── */

.studio-page-approach .approach-claim {
	font-family: var(--wp--preset--font-family--serif);
	font-style: italic;
	font-size: clamp(1.2rem, 2.2vw, 1.65rem);
	line-height: 1.22;
	color: var(--wp--preset--color--contrast);
	margin-top: var(--wp--preset--spacing--30) !important;
	margin-bottom: var(--wp--preset--spacing--40) !important;
	max-width: 28ch;
}

.studio-page-approach .approach-intro .approach-claim {
	margin-top: 0 !important;
}

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

.studio-page-approach .approach-artifacts {
	border-top: 1px solid var(--wp--preset--color--subtle);
	padding-top: var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	margin-top: var(--wp--preset--spacing--40) !important;
	margin-bottom: 0 !important;
	line-height: 1.5;
}

/* ─── Framework diagram ─────────────────────────────────── */

.studio-page-approach .approach-slide--framework {
	margin: var(--wp--preset--spacing--40) 0 var(--wp--preset--spacing--50) !important;
	max-width: 52rem !important;
}

.studio-page-approach .approach-slide--framework figure {
	margin: 0;
	border: 1px solid var(--wp--preset--color--subtle);
	border-radius: 8px;
	overflow: hidden;
	background: #fff;
	box-shadow:
		0 1px 0 rgba(14, 26, 31, 0.06),
		0 28px 72px -36px rgba(14, 26, 31, 0.3);
}

.studio-page-approach .approach-slide--framework img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: contain;
	object-position: center;
	background: #fff;
}

.studio-page-approach .approach-slide--framework figcaption {
	margin-top: var(--wp--preset--spacing--20);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
	line-height: 1.5;
	text-align: center;
}

/* ─── Deck band (full-bleed cream strip) ─────────────────── */

/* alignfull on scrolly div means WP constrained layout doesn't apply margin:auto to it */
main.studio-page-approach > .approach-deck-scrolly {
	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;
}

main.studio-page-approach > .approach-deck-scrolly > .approach-deck-pin > .approach-deck-band,
main.studio-page-approach > .approach-deck-band {
	margin-inline: 0 !important;
	max-width: none;
	width: 100%;
}

.studio-page-approach .approach-deck-scrolly {
	margin: 0 0 var(--wp--preset--spacing--50);
}

@media (min-width: 900px) {
	.studio-page-approach .approach-deck-scrolly {
		margin-bottom: var(--wp--preset--spacing--30);
	}
}

.studio-page-approach .approach-deck-band {
	position: relative;
	margin: 0 !important;
	padding: var(--wp--preset--spacing--50) var(--studio-rail-inset-right, max(1.5rem, 5vw))
		var(--wp--preset--spacing--55) var(--studio-rail-inset-left, max(1.5rem, 5vw));
	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);
}

/* Vertical scroll → horizontal deck travel (desktop) */
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
	.studio-page-approach .approach-deck-scrolly--active {
		/* ~50vh of scroll per slide (4 slides → 200vh travel range, 300vh total) */
		height: calc(var(--approach-deck-steps, 4) * 75vh);
	}

	.studio-page-approach .approach-deck-scrolly--active .approach-deck-pin {
		position: sticky;
		top: 0;
		width: 100%;
		min-height: 100vh;
		min-height: 100svh;
		height: auto;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding-top: clamp(1.25rem, 3vh, 2.5rem);
		padding-bottom: clamp(1.25rem, 3vh, 2.5rem);
		box-sizing: border-box;
		overflow: visible;
		z-index: 2;
		background: var(--wp--preset--color--cream, #f3efe8);
	}

	.studio-page-approach .approach-deck-scrolly--active .approach-deck-band {
		overflow: visible;
		flex-shrink: 0;
	}

	/* Fade reads as clipping when slides advance — hide during scroll-driven mode */
	.studio-page-approach .approach-deck-scrolly--active .approach-deck-band::after {
		display: none;
	}

	/* Clip horizontal travel only — vertical slide content must not crop */
	.studio-page-approach .approach-deck-scrolly--active .approach-deck-viewport {
		overflow-x: hidden;
		overflow-y: visible;
		width: 100%;
	}

	/* One slide per deck viewport; width tied to scrollport for scrollLeft advance */
	.studio-page-approach .approach-deck-scrolly--active .approach-deck-viewport {
		--approach-deck-slide-width: 100%;
	}

	.studio-page-approach .approach-deck-scrolly--active .approach-slide {
		flex: 0 0 var(--approach-deck-slide-width) !important;
		width: var(--approach-deck-slide-width);
		min-width: var(--approach-deck-slide-width);
		max-width: var(--approach-deck-slide-width);
		box-sizing: border-box;
	}

	.studio-page-approach .approach-deck-scrolly--active .approach-slide figure {
		max-height: none;
		overflow: visible;
	}

	.studio-page-approach .approach-deck-scrolly--active .approach-slide img {
		max-height: none;
		width: 100%;
		height: auto;
		aspect-ratio: auto;
		object-fit: contain;
	}

	.studio-page-approach .approach-deck--scroll-driven {
		overflow-x: hidden !important;
		overflow-y: visible !important;
		scroll-snap-type: none !important;
		scroll-behavior: auto !important;
	}
}

.studio-page-approach .approach-deck-viewport {
	width: 100%;
}

.studio-page-approach .approach-deck-band .studio-section-label {
	margin-bottom: var(--wp--preset--spacing--35) !important;
}

.studio-page-approach .approach-deck-band::after {
	content: '';
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	width: 5rem;
	background: linear-gradient(to right, transparent, var(--wp--preset--color--cream, #f3efe8));
	pointer-events: none;
}

.studio-page-approach .approach-deck {
	display: flex !important;
	flex-wrap: nowrap !important;
	gap: var(--wp--preset--spacing--40) !important;
	overflow-x: auto !important;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding-bottom: var(--wp--preset--spacing--20) !important;
	align-items: flex-start !important;
}

.studio-page-approach .approach-deck::-webkit-scrollbar {
	display: none;
}

.studio-page-approach .approach-slide {
	flex: 0 0 min(86vw, 40rem) !important;
	scroll-snap-align: start;
	margin: 0 !important;
}

.studio-page-approach .approach-slide__label {
	font-family: var(--wp--preset--font-family--mono, ui-monospace, monospace);
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
	margin: 0 0 var(--wp--preset--spacing--20) !important;
}

.studio-page-approach .approach-slide figure {
	margin: 0;
	border: 1px solid var(--wp--preset--color--subtle);
	border-radius: 8px;
	overflow: hidden;
	background: #fff;
	box-shadow:
		0 1px 0 rgba(14, 26, 31, 0.05),
		0 22px 52px -30px rgba(14, 26, 31, 0.24);
}

.studio-page-approach .approach-slide img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: contain;
	object-position: center;
	background: #fff;
}

@media (max-width: 899px), (prefers-reduced-motion: reduce) {
	.studio-page-approach .approach-deck-scrolly {
		height: auto !important;
	}

	.studio-page-approach .approach-deck-pin {
		position: static !important;
		min-height: 0 !important;
		height: auto !important;
	}
}

/* ─── Phase prose blocks ─────────────────────────────────── */

.studio-page-approach .approach-phases-wrap {
	margin-top: var(--wp--preset--spacing--10);
	padding-inline: var(--studio-rail-inset-left, max(1.5rem, 5vw))
		var(--studio-rail-inset-right, max(1.5rem, 5vw));
}

.studio-page-approach .approach-phase {
	border-top: 1px solid var(--wp--preset--color--subtle);
	padding-top: var(--wp--preset--spacing--50);
	padding-bottom: var(--wp--preset--spacing--50);
}

.studio-page-approach .approach-phases-wrap > .approach-phase:first-of-type {
	border-top: none;
	padding-top: 0;
}

.studio-page-approach .approach-phase .studio-section-label {
	color: var(--wp--preset--color--accent) !important;
	letter-spacing: 0.2em !important;
}

@media (min-width: 900px) {
	.studio-page-approach .approach-phase {
		display: grid;
		grid-template-columns: 1fr;
		padding-left: var(--wp--preset--spacing--45);
		border-top: none;
		border-left: 2px solid var(--wp--preset--color--accent);
	}

	.studio-page-approach .approach-phase + .approach-phase {
		margin-top: var(--wp--preset--spacing--45);
	}
}

/* ─── Stakes (dark band, content rail) ───────────────────── */

.studio-page-approach .studio-approach-stakes {
	background-color: var(--studio-ink, #0e1a1f) !important;
	padding-inline: 0 !important;
}

.studio-page-approach .studio-approach-stakes > .alignwide {
	padding-inline: var(--studio-rail-inset-left) var(--studio-rail-inset-right) !important;
	margin-inline: 0 !important;
	max-width: 100% !important;
	box-sizing: border-box;
}

.studio-page-approach .studio-approach-stakes h2 {
	font-size: clamp(1.65rem, 3.2vw, 2.35rem) !important;
	font-weight: 300 !important;
	line-height: 1.12 !important;
	max-width: 22ch;
	letter-spacing: -0.02em;
}

.studio-page-approach .studio-approach-stakes p.alignwide {
	max-width: 42rem;
}

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

.studio-page-approach .studio-approach-cta {
	border-top: 1px solid var(--wp--preset--color--subtle);
	padding-top: var(--wp--preset--spacing--55);
	padding-bottom: var(--wp--preset--spacing--60);
}

.studio-page-approach .studio-approach-cta .approach-claim {
	margin-top: 0 !important;
	margin-bottom: var(--wp--preset--spacing--30) !important;
}

.studio-page-approach .studio-approach-cta .studio-card__link {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.studio-page-approach .studio-approach-cta .studio-card__link a {
	text-decoration: none;
	color: var(--wp--preset--color--accent);
}

.studio-page-approach .studio-approach-cta .studio-card__link a:hover {
	text-decoration: underline;
}