:root {
	/* 媒体查询仍使用字面量；这些 Token 为 CSS、JavaScript 与测试提供同一断点词汇。 */
	--pattrix-breakpoint-wide: 1200px;
	--pattrix-breakpoint-desktop: 992px;
	--pattrix-breakpoint-tablet: 768px;
	--pattrix-breakpoint-mobile: 480px;
}

.pattrix-container {
	--pattrix-container-max: var(--pattrix-layout-home);
	width: min(calc(100% - (2 * var(--pattrix-layout-gutter))), var(--pattrix-container-max));
	margin-inline: auto;
}

.pattrix-container--narrow {
	--pattrix-container-max: var(--pattrix-layout-content);
}

.pattrix-container--wide {
	--pattrix-container-max: var(--pattrix-layout-wide);
}

.pattrix-container--full {
	width: 100%;
	max-width: none;
	margin-inline: 0;
}

.pattrix-section {
	--pattrix-section-space: var(--pattrix-space-9);
	padding: var(--pattrix-section-space) var(--pattrix-layout-gutter);
}

.pattrix-section--sm {
	--pattrix-section-space: var(--pattrix-space-8);
}

.pattrix-section--md {
	--pattrix-section-space: var(--pattrix-space-9);
}

.pattrix-section--lg {
	--pattrix-section-space: var(--pattrix-space-11);
}

/* 旧 Section inner 与新容器可共存；Section 已提供 gutter 时不得重复缩进。 */
.pattrix-section-inner,
.pattrix-section > .pattrix-container {
	width: min(100%, var(--pattrix-container-max, var(--pattrix-layout-wide)));
	margin-inline: auto;
}

@media (max-width: 1199px) {
	.pattrix-section--lg {
		--pattrix-section-space: var(--pattrix-space-10);
	}
}

@media (max-width: 991px) {
	.pattrix-section--lg {
		--pattrix-section-space: var(--pattrix-space-9);
	}
}

@media (max-width: 767px) {
	.pattrix-section {
		--pattrix-section-space: var(--pattrix-space-8);
	}
}

@media (max-width: 479px) {
	.pattrix-section--sm {
		--pattrix-section-space: var(--pattrix-space-7);
	}
}