/**
 * Workbench Layout Language — tier CSS
 * georgeaguiar-com child theme · W-15 (see docs/Workbench_Layout_Language_WP.md)
 *
 * Adopts the F-26 layout LANGUAGE, not the F-26 shell. The node apps' Panoramic
 * Workbench qualifies on viewport capability; here the SAME numbers drive a pure-CSS
 * grid — zero JS, nothing to persist (visitors are anonymous). Thresholds are the
 * canon values, verbatim, from Advanced_Sidebar_Workbench_PRD.md §Qualification.
 *
 * Region grammar → grid:
 *   .wb-region--main       Primary Canvas   (the reading measure, ~764px = theme contentSize)
 *   .wb-region--companion  Companion Canvas  (reference beside main; materializes at panoramic)
 *   .wb-region--secondary  Secondary Sidebar (standing context/metadata)
 *
 * Collapse order (secondary → companion → sidebar): expressed as SOURCE ORDER. Below
 * qualification every region stacks after main in one column — the collapse IS the
 * default. No layout shift, no bottom bar (content site, not an app shell).
 *
 * Tokens come from theme.json (settings.custom.wb.*) as --wp--custom--wb--*; the local
 * --_* vars seed from them so media queries can retune per tier without touching WP vars.
 */

.wb-canvas {
	--_measure: var(--wp--custom--wb--measure, 764px);
	--_companion: var(--wp--custom--wb--companion, 400px);
	--_aside: var(--wp--custom--wb--aside, 300px);
	--_wide: var(--wp--custom--wb--wide-max, 1280px);
	--_gap: var(--wp--custom--wb--gap, clamp(2rem, 3vw, 4rem));

	display: grid;
	grid-auto-flow: row;
	justify-content: center;
	column-gap: var(--_gap);
	row-gap: var(--_gap);
	/* Outer gutter so the measure never glues to the viewport edge on small screens.
	   At panoramic the fixed columns sit centered with whitespace to spare, so this
	   padding is inert there. */
	padding-inline: clamp(1rem, 4vw, 3rem);
}

/* Standard tier (default): one column at the reading measure. Every variant that CAN
   grow a companion/aside starts here — collapsed, stacked, centered. */
.wb-canvas--single,
.wb-canvas--two,
.wb-canvas--aside {
	grid-template-columns: minmax(0, var(--_measure));
}

/* Wide showcase: a single roomy column, off the reading measure (landing/visual work). */
.wb-canvas--wide {
	grid-template-columns: minmax(0, var(--_wide));
}

/* Regions never blow out their track (long code / wide media stay contained). */
.wb-region {
	min-width: 0;
}

/* The child theme owns the grid gutter; neutralize WP's root-padding injection on the
   template-part wrappers that are our grid items, so gutters aren't doubled. */
.wb-canvas > .wp-block-template-part {
	padding-inline: 0;
}

/* Companion / secondary read as supporting surfaces: a step down in size. */
.wb-region--companion,
.wb-region--secondary {
	font-size: var(--wp--preset--font-size--small, 1rem);
}

/* ── Panoramic tier ──────────────────────────────────────────────────────────────
   Canon: ≥ 2560 CSS px · aspect ratio ≥ 2.0:1 · fine pointer. The companion column
   materializes beside main; a 16:9 2560-wide window (1.78:1) is correctly excluded by
   the aspect gate, and a coarse pointer (TV/touch) never qualifies. */
@media (min-width: 2560px) and (min-aspect-ratio: 2 / 1) and (pointer: fine) {
	.wb-canvas--two {
		grid-template-columns: var(--_measure) minmax(0, var(--_companion));
	}
	.wb-canvas--aside {
		grid-template-columns: var(--_measure) minmax(0, var(--_aside));
	}

	/* Reference tracks the reader through a long main column. */
	.wb-region--companion,
	.wb-region--secondary {
		position: sticky;
		top: var(--_gap);
		align-self: start;
	}
}

/* ── Enhanced tier ───────────────────────────────────────────────────────────────
   Canon: ≥ 3200 CSS px · aspect ratio ≥ 2.5:1 · fine pointer. Genuinely dual-monitor
   width — give the companion more room and open the gap. (A three-region template
   would default both companion + secondary on here; the current vocabulary tops out at
   two regions, so this widens the companion.) */
@media (min-width: 3200px) and (min-aspect-ratio: 5 / 2) and (pointer: fine) {
	.wb-canvas {
		--_companion: 520px;
		--_gap: 5rem;
	}
}

/* Respect reduced-motion: sticky is layout, not motion, so nothing to disable here —
   there is no scroll animation, transition, or transform in this stylesheet by design. */