/*
	The new public pages behind pe_new_public_pages(): /educators, /employers, /programs
	(templates/pages/*-next.php). Structure only; type and color come from the voices
	and the audience palettes (styles/themes/audiences.css).

	Reading text holds columns 1-8 (lines 3 / 11) at 1000px and up, like the homepage.
*/

.educators-next,
.employers-next,
.programs-next,
.dftw-public-next {
	page-module {
		@media (width >= 1000px) {
			grid-column: 3 / 11;
		}
	}

	/* Sections that only hold a planning note (.page-goals, .page-note) take no space of their own, so a hidden note leaves no gap. */
	.page-section:not(.page-goals, .page-note) > page-module:not(.page-header) {
		padding-block: clamp(48px, 9vh, 96px);
	}

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

/*
	How we see it, then Where we can help: the beliefs and the offers, each on the wide
	columns (lines 3 / -3) so they sit side by side - three opinions across, four offers
	two by two - each under a rule of its own.
*/
.educators-next :is(.how-we-see-it, .where-we-help) {
	> page-module {
		@media (width >= 1000px) {
			grid-column: 3 / -3;
		}
	}

	ul > li {
		padding-top: 1em;
		border-top: 1px solid var(--stroke-secondary);
	}
}

.educators-next ul.opinions {
	margin-top: 2em;
	display: grid;
	gap: 2em 2.5em;

	@media (width >= 1000px) {
		grid-template-columns: repeat(3, 1fr);
	}

	li > * + * {
		margin-top: 0.5em;
	}
}

/* Each offer's first line is its question ("Already have a course?") - in the heading's ink, so it leads. */
.educators-next .where-we-help .offer-list li > p:first-of-type {
	color: var(--ink-primary);
}

/* What we do instead: the diagram runs wider than the reading columns, like the course player. */
.educators-next .how-pe-works {
	> page-module {
		@media (width >= 1000px) {
			grid-column: 3 / -3;
		}
	}

	/* The house prose rhythm, a line of body type apart (typography.css, p + p) - 1.5em read loose next to the rest of the site's type. */
	> page-module > p {
		margin-top: 1em;
		max-width: 60ch;
	}
}

/*
	The how-PE-works drawing in three sizes (educators-next.php), one showing at a time:
	narrow on phones, the original between, wide on big screens.
*/
.educators-next .drawing-versions {
	margin-block: 2em;

	> svg {
		display: none;
	}

	.version-narrow {
		@media (width < 700px) {
			display: block;
		}
	}

	.version-original {
		@media (700px <= width < 1000px) {
			display: block;
		}
	}

	.version-wide {
		@media (width >= 1000px) {
			display: block;
		}
	}
}

/* The problem holds the course-player demo, which needs more room than the reading columns: lines 3 / -3. */
.educators-next .the-problem {
	> page-module {
		@media (width >= 1000px) {
			grid-column: 3 / -3;
		}
	}

	/* The house prose rhythm, a line of body type apart (typography.css, p + p) - 1.5em read loose next to the rest of the site's type. */
	> page-module > p {
		margin-top: 1em;
		max-width: 60ch;
	}

	.interactive-module {
		margin-top: 1.5em;
		padding: 0;
	}
}

.employers-next .roles {
	margin-top: 1.5em;
	display: grid;
	gap: 0.4em 2em;

	@media (width >= 700px) {
		grid-template-columns: repeat(2, 1fr);
	}
}

/*
	The programs, one rhythm (Derek, 2026-10-29: "normalize it and just keep it simple"):
	groups 4em apart, programs 2em apart within a group, and everything inside a program
	0.5em apart - name, description, price, the small print.
*/
.programs-next .program-groups {
	.program-group + .program-group {
		margin-top: 4em;
	}

	.program-group > * + * {
		margin-top: 0.75em;
	}

	.program-index {
		margin-top: 1.25em;
		display: grid;
		gap: 2em;

		li > * + * {
			margin-top: 0.5em;
		}
	}
}

/*
	The three topic sections take the old homepage's look (styles/welcome.css, .topics),
	with two changes: the header sits on the left, not centered, and the grid gets the
	wide columns, so the cards read as "so much stuff in here" (Derek, 2026-10-29).
*/
.dftw-public-next .topics {
	> page-module {
		@media (width >= 1000px) {
			grid-column: 3 / -3;
		}
	}

	.section-header {
		align-items: start;
		text-align: left;
		--font-heading-inset: inherit;

		.intro {
			margin-inline: 0;
			max-width: 60ch;
		}
	}
}

.dftw-public-next {
	.lede {
		margin-top: 1em;
		max-width: 60ch;
	}

	/* The overview video at featured width, the rails included. */
	.overview-video > page-module {
		@media (width >= 1000px) {
			grid-column: 2 / -2;
		}
	}

	/* A real list, bullets and all, as on the homepage (styles/welcome-next.css). */
	.outcomes {
		margin-top: 0.75em;
		padding-left: 1.25em;
		display: grid;
		gap: 0.75em;
		list-style: disc;
	}

	.offer {
		margin-top: 2.5em;
	}

	.triangles {
		margin-block: 1.5em;
		display: flex;
		gap: 30px;

		figure {
			margin: 0;
			max-width: 160px;
			filter: url(#chalk);
		}

		svg {
			width: 100%;
			height: auto;
			fill: var(--ink-secondary);
		}
	}

	ul.topic-names {
		margin-top: 1em;
		display: grid;
		gap: 0.4em 2em;

		@media (width >= 700px) {
			grid-template-columns: repeat(2, 1fr);
		}
	}

	ul.excluded-topics {
		margin-top: 2em;
		display: grid;
		gap: 1.5em 2.5em;

		@media (width >= 700px) {
			grid-template-columns: repeat(2, 1fr);
		}

		p {
			margin-top: 0.4em;
		}
	}

	.how-it-works h2 + p {
		margin-top: 0.75em;
	}

	.how-it-works h2:not(:first-child) {
		margin-top: 2em;
	}
}