/**
 * PRACTICES section — three full-viewport frames on the landing scroll (SKELETON, 2026-08-08).
 *
 * Layout skeleton only: structure, rhythm and the floating section tag. The visual pass
 * (backdrop, motion, reveal) comes later on Fabão's front-end brief — do not read the flat
 * look here as a design decision.
 *
 * Self-contained sheet like 10-about.css: declares the field-grid + palette + font custom
 * props it needs, scoped under .vz-practices so it never touches the rest of the theme.
 *
 * Mechanics:
 * - Each practice (.vz-practice) is one full-viewport frame (min-height 100svh) on the SAME
 *   page scroll — only the placement of the copy block (.frame) changes per practice:
 *   R&D top-left, Spatial Audio center-right, Visuals bottom-left.
 * - (The floating "02 Practices" tag/rail was removed 2026-08-12 — clarity pass; the
 *   .prax-intro h2 is the section's only head.)
 * - ≤781px (theme mobile convention): frames drop the viewport height and stack with normal
 *   padding.
 */

.vz-practices {
	/* field-grid atoms (values = base preview tokens, kept literal like 10-about.css) */
	--vz-mu: 80px;
	--vz-field-max: 1280px;
	--vz-gutter: clamp(1.5rem, 4vw, 2.5rem);

	--vz-ink: #F3F1FA;
	--vz-lilac: #C6B6F2;
	--vz-dim: rgba(243, 241, 250, .62);
	--vz-mark: rgba(243, 241, 250, .22);

	--vz-sans: "IBM Plex Sans", system-ui, sans-serif;
	--vz-mono: "IBM Plex Mono", ui-monospace, monospace;

	position: relative;
	color: var(--vz-ink);
}

/* (Floating "02 Practices" section tag + rail REMOVED — Fabão 2026-08-12 clarity pass:
   no numbering/wayfinder chrome in this section. The h2 in .prax-intro is the only head.) */

/* ─── Arrival intro — the section title greets you, lead centered below ───── */

.vz-practices .prax-intro {
	box-sizing: border-box;
	/* half a screen of space for the title (Fabão 2026-08-08) */
	min-height: 50svh;
	display: grid;
	align-content: center;
	justify-items: center;
	text-align: center;
	max-width: var(--vz-field-max);
	margin-inline: auto;
	/* 2mu (160px) clears the fixed transparent DESKTOP header, whose real height is
	   153px (13-journey-world.css: .light-line top). Only 7px of slack — if the header
	   grows, this is the value that breaks first. */
	padding: calc(var(--vz-mu) * 2) var(--vz-gutter) calc(var(--vz-mu) / 2);
	/* Sky gap (Fabão 2026-09-11): when the magnet centres this intro, the slack
	   below is up to ~(free−450)/2; without a gap the R&D black band pokes ~90px
	   into the viewport bottom. 24svh keeps the whole slack pure butterfly sky. */
	margin-block-end: 24svh;
}

.vz-practices .prax-intro h2 {
	margin: 0;
	font-family: var(--vz-sans);
	font-weight: 400;
	font-size: clamp(2rem, 1.2rem + 3.4vw, 3.5rem);
	line-height: 1;
	letter-spacing: -.025em;
}

.vz-practices .prax-lead {
	max-width: 38rem;
	margin: 1.5rem 0 0;
	font-family: var(--vz-sans);
	font-size: clamp(1.05rem, .95rem + .5vw, 1.35rem);
	line-height: 1.55;
	color: var(--vz-dim);
}

/* ─── Frames — one full viewport per practice ─────────────────────────────── */

.vz-practice {
	box-sizing: border-box;
	/* sized to the free area under the fixed header so the scroll magnet CENTERS
	   the frame instead of top-aligning it (2026-09-06 — same law as .vz-projects;
	   --vz-mc-head is stamped on :root by 14-projects-carousel.js, 119px shipped) */
	min-height: calc(100svh - var(--vz-mc-head, 119px));
	display: grid;
	max-width: var(--vz-field-max);
	margin-inline: auto;
	padding: calc(var(--vz-mu) / 2) var(--vz-gutter);
}

.vz-practice .frame {
	max-width: 34rem;
}

/* Per-practice framing — phase 2 (2026-09-06): all three frames CENTER their copy
   vertically ("padronizar essa centralização no meio"); only the horizontal side
   still alternates. */
.vz-practice--rnd {
	align-content: center;
	justify-items: start;
}
.vz-practice--audio {
	align-content: center;
	justify-items: end;
}
.vz-practice--visuals {
	align-content: center;
	justify-items: start;
}

/* ─── Band markers (2026-09-06 deep-refinement — replaces the 08-11 windows) ─ */
/* Layout markers for the full-width black bands (10-section-bg.js): only the VERTICAL
   extent matters — the runtime stretches the band to the section's full width. Empty
   divs — no visual of their own. */

.vz-practice {
	position: relative;
}

.vz-practice .prax-window {
	position: absolute;
	left: 0;
	right: 0;
	height: min(70svh, 640px);
}

/* all bands vertically centered on their frame (phase-2 centering law) */
.vz-practice .prax-window {
	top: 50%;
	transform: translateY(-50%);
}

/* ─── Hole marker (phase 2, 2026-09-06) ────────────────────────────────────
   The transparent square the band opens onto the butterfly sky. Positioned
   OPPOSITE each frame's copy (alternating with it); 10-section-bg.js reads its
   rect, tiles the band's paint around it as four strips, and centres the media
   INSIDE it inset by a gap — the galaxy shows through the ring. */
.vz-practice .prax-hole {
	position: absolute;
	width: min(56svh, 480px);
	height: min(56svh, 480px);
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
}
.vz-practice--rnd .prax-hole,
.vz-practice--visuals .prax-hole { right: calc(var(--vz-gutter) + 2vw); } /* text left → hole right */
.vz-practice--audio .prax-hole   { left: calc(var(--vz-gutter) + 2vw); }  /* text right → hole left */

/* ─── Copy atoms (preview §2 idiom, minus the numbered label — 2026-08-12) ── */

.vz-practice h3 {
	margin: 0 0 1rem;
	font-family: var(--vz-sans);
	font-weight: 400;
	font-size: clamp(1.8rem, 1.1rem + 2.8vw, 3rem);
	line-height: 1.05;
	letter-spacing: -.02em;
}

.vz-practice .dim {
	margin: 0;
	font-family: var(--vz-sans);
	font-size: clamp(1rem, .95rem + .3vw, 1.15rem);
	line-height: 1.6;
	color: var(--vz-dim);
}

/* ─── Mobile (theme convention: ≤781px stacks, no viewport theatrics) ─────── */

@media (max-width: 781px) {
	.vz-practices .prax-intro {
		/* no viewport theatrics on mobile (theme convention) — but the intro is now the
		   section's FIRST element, so IT carries the header clearance: the stacked mobile
		   header's second nav row bottoms out around ~135px (light-line top 118px + row
		   height, 13-journey-world.css) — 2mu = 160px clears it with real slack when the
		   nav anchor lands the section top at the viewport top (critic 2026-08-08) */
		min-height: 0;
		padding-block: calc(var(--vz-mu) * 2) calc(var(--vz-mu) / 2);
		margin-block-end: 0; /* magnet is off ≤781px — the sky gap would only waste screen */
	}
	.vz-practice,
	.vz-practice--rnd,
	.vz-practice--visuals {
		min-height: 0;
		align-content: start;
		justify-items: start;
		padding-block: calc(var(--vz-mu) / 2);
	}
	.vz-practice--audio {
		align-content: start;
		justify-items: start;
	}
	/* mobile: the hole marker hides — the runtime derives the hole from the band
	   box itself (inset ring), see 10-section-bg.js layoutWindow */
	.vz-practice .prax-hole { display: none; }

	/* mobile: the band stacks under the copy as a 16:9 strip instead of floating */
	.vz-practice .prax-window,
	.vz-practice--rnd .prax-window,
	.vz-practice--audio .prax-window,
	.vz-practice--visuals .prax-window {
		position: static;
		transform: none;
		width: 100%;
		height: auto;
		aspect-ratio: 16 / 9;
		margin-top: calc(var(--vz-mu) / 2);
	}
}