/* 布局层：断点词汇与容器宽度。
 *
 * 断点在这里以变量形式给出，供 CSS、JavaScript 与测试共用同一套词汇；
 * 媒体查询本身仍必须写字面量，因为自定义属性不能用于媒体查询条件——
 * 改断点时两处都要动，测试会比对它们是否一致。 */

:root {
	--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);
	}
}