.section {
	max-inline-size: 100%;
	min-inline-size: 0;
	--section-space: var(--space-section-standard);
	--section-background: var(--color-white);
	--text-heading: var(--color-dark);
	--text-body: var(--color-dark);
	--text-muted: var(--color-dark);
	--text-accent: var(--color-dark);
	--link-color: var(--color-dark);
	--link-hover-color: var(--color-dark);
	--button-primary-background: var(--color-green);
	--button-primary-text: var(--color-dark);
	--button-auto-fill: var(--color-dark);
	--button-auto-text: var(--color-white);
	--button-auto-hover: color-mix(in srgb, white 10%, var(--color-dark));
	--button-auto-plain: var(--color-dark);
	--border-color: color-mix(in srgb, var(--color-dark) 14%, transparent);

	background-color: var(--section-background);
	color: var(--text-body);
	padding-block: var(--section-space);
}

/* Ink fallback if Design System CSS has not loaded yet.
   --section-background for light/dark is set by agency_ds_section_themes_css(). */
.section[data-theme="dark"] {
	--text-heading: var(--color-white);
	--text-body: var(--color-white);
	--text-muted: var(--color-white);
	--text-accent: var(--color-green);
	--link-color: var(--color-green);
	--link-hover-color: var(--color-white);
	--button-primary-background: var(--color-green);
	--button-primary-text: var(--color-dark);
	--button-auto-fill: var(--color-white);
	--button-auto-text: var(--color-dark);
	--button-auto-hover: color-mix(in srgb, black 10%, var(--color-white));
	--button-auto-plain: var(--color-white);
	--border-color: color-mix(in srgb, var(--color-white) 22%, transparent);
}

.section[data-theme-mode="dark"] {
	--button-auto-fill: var(--color-white);
	--button-auto-text: var(--color-dark);
	--button-auto-hover: color-mix(in srgb, black 10%, var(--color-white));
	--button-auto-plain: var(--color-white);
}

.section[data-spacing="compact"] {
	--section-space: var(--space-section-compact);
}

.section[data-spacing="spacious"] {
	--section-space: var(--space-section-spacious);
}

.section__inner {
	box-sizing: content-box;
	margin-inline: auto;
	/* Cap includes the side padding so the border box stays inside the viewport. */
	max-inline-size: min(var(--width-content-standard), calc(100% - clamp(2.5rem, 8vw, 4rem)));
	min-inline-size: 0;
	padding-inline: clamp(1.25rem, 4vw, 2rem);
}

/* Let cards and grid items shrink so a long word wraps instead of widening the page.
   :where() loses to any real min-inline-size already set on a component. */
.section :where(
	[class*="__item"],
	[class*="__card"],
	[class*="__grid"] > *,
	[class*="__layout"] > *
) {
	min-inline-size: 0;
}

/* Wide embeds and tables scroll inside the section instead of the page. */
.section :where(.wp-block-table, .wp-block-embed, pre) {
	max-inline-size: 100%;
	overflow-x: auto;
}

.section :where(iframe, video, embed, table) {
	max-inline-size: 100%;
}

.section[data-width="custom"] .section__inner {
	max-inline-size: min(var(--section-custom-width), calc(100% - clamp(2.5rem, 8vw, 4rem)));
}

.section[data-width="wide"] .section__inner {
	max-inline-size: min(var(--width-content-wide), calc(100% - clamp(2.5rem, 8vw, 4rem)));
}

.section[data-width="full"] .section__inner {
	box-sizing: border-box;
	max-inline-size: none;
}

/* Same-theme collapse: generated per theme slug in design-system.php.
   Fallback for the built-in light/dark pair before options load. */
.section[data-theme="light"]:not([data-background="media"])
+ .section[data-theme="light"]:not([data-background="media"]):not([data-spacing-before="full"]),
.section[data-theme="dark"]:not([data-background="media"])
+ .section[data-theme="dark"]:not([data-background="media"]):not([data-spacing-before="full"]) {
	padding-top: 0;
}