/**
 * Layout: section padding and content width. Grids live in utilities.css.
 */
@layer layout {
	.section--xs {
		padding-block: var(--section-space-xs);
	}

	.section--s {
		padding-block: var(--section-space-s);
	}

	.section--m {
		padding-block: var(--section-space-m);
	}

	.section--l {
		padding-block: var(--section-space-l);
	}

	.section--xl {
		padding-block: var(--section-space-xl);
	}

	.section--xxl {
		padding-block: var(--section-space-xxl);
	}

	.section--none {
		padding-block: 0;
	}

	/* Page content gets room above and below unless it starts or ends with a
	   full-width section, which brings its own spacing. So a plain page (a
	   policy, a password-protected page, anything a client types straight
	   into the editor) never sits hard against the hero or the footer. */
	main > .wp-block-post-content:not(:has(> .alignfull:first-child)) {
		padding-block-start: var(--section-space-s);
	}

	main > .wp-block-post-content:not(:has(> .alignfull:last-child)) {
		padding-block-end: var(--section-space-m);
	}

	/* Full-width sections on a page sit flush against each other. Core puts
	   the root block gap between them outside any layer, which showed as a
	   strip of page colour between two coloured sections. */
	.wp-block-post-content > .alignfull {
		margin-block: 0 !important; /* core override: core's block gap between top-level blocks */
	}

	.content-width {
		width: 100%;
		max-width: var(--content-width);
		margin-inline: auto;
	}
}