/*
	The new homepage (templates/pages/welcome-next.php) - structure only: where things
	sit on the site grid. Type and color come from the voices and emphasis scopes.

	At 1000px and up the article is a subgrid of the page's tracks (structure.css),
	with one row per section so the placed layers can span rows:
	  row 1 welcome, row 2 students, row 3 educators, row 4 employers.
	Reading text holds columns 1-8 (lines 3 / 11) in every section.
*/

.welcome-next {
	@media (width >= 1000px) {
		position: relative; /* the containing block for the placed layers' grid areas */

		> .welcome-home {
			grid-row: 1;
		}

		> .home-students {
			grid-row: 2;
		}

		> .home-educators {
			grid-row: 3;
		}

		> .home-employers {
			grid-row: 4;
		}
	}

	.home-students,
	.home-educators,
	.home-employers {
		/* Spacing is the type's own flow rhythm (each block's margin-top), not a grid gap on top of it. */
		page-module {
			padding-block: clamp(64px, 12vh, 128px);

			@media (width >= 1000px) {
				grid-column: 3 / 11;
			}
		}
	}

	/* A real list, bullets and all (Derek, 2026-10-29: "should be a list"). */
	.outcomes {
		margin-top: 0.75em;
		padding-left: 1.25em;
		display: grid;
		gap: 0.75em;
		list-style: disc;
	}

	.other-programs {
		margin-top: 2.5em;
	}

	.actions {
		margin-top: 2em;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 1.5em;
	}

	/* Placed layer: columns 10 to the screen edge across students and educators.
	   Parked 2026-10-29 (the canvas is out of welcome-next.php; see the $planned note there).
	   Nothing crosses into employers, so the footer below it reads as one heavy block.
	   Absolutely positioned inside its grid area, so it fills the rows without sizing
	   them - in flow, the canvas's own pixel size (which follows the screen's pixel
	   density) would push the rows taller every time zoom changed it. */
	.placed-art {
		display: none;

		@media (width >= 1000px) {
			display: block;
			position: absolute;
			inset: 0;
			width: 100%;
			height: 100%;
			z-index: 1;
			pointer-events: none;
		}
	}

	.right-field {
		grid-column: 12 / -1;
		grid-row: 2 / 4;
	}
}