/**
 * layout-grid.css
 * ============================================================================
 * tctheme - 12 列 CSS Grid 布局系统
 * ----------------------------------------------------------------------------
 * 设计依据：需求文档第七章（响应式布局与网格系统）
 *
 * 响应式断点：
 *   - 桌面  ≥ 1024px    标准 12 列网格
 *   - 平板  768-1023px  2 列布局
 *   - 手机  ≤ 767px     单列布局 + 汉堡菜单
 *
 * Design Tokens 引用（定义于 style.css :root）：
 *   --tctheme-content-width      1280px  标准限宽
 *   --tctheme-content-narrow     1200px  窄限宽
 *   --tctheme-content-wide       1600px  全宽沉浸
 *   --tctheme-section-padding    100px   桌面纵向内边距
 *   --tctheme-section-padding-md 56px    平板纵向内边距
 *   --tctheme-section-padding-sm 44px    手机纵向内边距
 *   --tctheme-card-gap-x         28px    卡片横向间距
 *   --tctheme-card-gap-y         40px    卡片纵向间距
 *   --tctheme-card-padding       28px    卡片内边距
 *
 * 注：水平内边距 32px（桌面）/ 16px（手机）按需求文档第七章直接使用字面量，
 *     因 style.css 未定义对应的 --section-padding-x 令牌。
 * ============================================================================
 */

/* ==========================================================================
   SubTask 4.1 - 限宽容器（Content Width Containers）
   ========================================================================== */

.tctheme-container {
	max-width: var(--tctheme-content-width);
	margin-inline: auto;
	padding-inline: 32px;
	width: 100%;
}

.tctheme-container-narrow {
	max-width: var(--tctheme-content-narrow);
	margin-inline: auto;
	padding-inline: 32px;
	width: 100%;
}

.tctheme-container-wide {
	max-width: var(--tctheme-content-wide);
	margin-inline: auto;
	padding-inline: 32px;
	width: 100%;
}

.tctheme-container-full {
	width: 100%;
	padding-inline: 32px;
}

/* ==========================================================================
   SubTask 4.2 - 网格列组合（Grid Column Combinations）
   桌面默认布局，响应式覆盖见 SubTask 4.4
   ========================================================================== */

/* 12 列基础网格 */
.grid-12 {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: var(--tctheme-card-gap-x) var(--tctheme-card-gap-y);
}

/* 全宽单列（Hero、CTA 横幅、工厂全宽图、Footer 顶栏） */
.grid-full {
	display: grid;
	grid-template-columns: 1fr;
}

/* 非对称双栏 8+4（主内容区左宽，侧边栏右窄） */
.grid-8-4 {
	display: grid;
	grid-template-columns: 8fr 4fr;
	gap: var(--tctheme-card-gap-x) var(--tctheme-card-gap-y);
}

/* 非对称双栏 4+8 镜像（应用场景：左文字 + 右现场图） */
.grid-4-8 {
	display: grid;
	grid-template-columns: 4fr 8fr;
	gap: var(--tctheme-card-gap-x) var(--tctheme-card-gap-y);
}

/* 四等分 3+3+3+3（产品卡片网格、博客文章网格） */
.grid-4-col {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--tctheme-card-gap-x) var(--tctheme-card-gap-y);
}

/* 三等分 4+4+4（服务网格、团队卡片） */
.grid-3-col {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--tctheme-card-gap-x) var(--tctheme-card-gap-y);
}

/* 二等分 */
.grid-2-col {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--tctheme-card-gap-x) var(--tctheme-card-gap-y);
}

/* ==========================================================================
   SubTask 4.3 - Section Padding 工具类
   ========================================================================== */

.section-padding {
	padding-block: var(--tctheme-section-padding);
	padding-inline: 32px;
}

.section-padding-y {
	padding-block: var(--tctheme-section-padding);
}

.section-padding-x {
	padding-inline: 32px;
}

/* ==========================================================================
   额外 - 背景色工具类（第七章 7.5 背景色切换矩阵）
   ========================================================================== */

.bg-white {
	background-color: #ffffff;
}

.bg-light-gray {
	background-color: var(--tctheme-neutral-50);
}

.bg-cream {
	background-color: #ecebea;
}

.bg-dark-blue {
	background-color: var(--tctheme-neutral-900);
}

/* ==========================================================================
   SubTask 4.4 - 响应式断点覆盖
   ========================================================================== */

/* 平板 768px - 1023px：2 列布局 */
@media (max-width: 1023px) {
	.tctheme-container,
	.tctheme-container-narrow,
	.tctheme-container-wide {
		padding-inline: 24px;
	}
	.grid-12 {
		grid-template-columns: repeat(2, 1fr);
	}
	.grid-8-4,
	.grid-4-8 {
		grid-template-columns: 1fr;
	}
	.grid-4-col {
		grid-template-columns: repeat(2, 1fr);
	}
	.grid-3-col {
		grid-template-columns: repeat(2, 1fr);
	}
	.section-padding,
	.section-padding-y {
		padding-block: var(--tctheme-section-padding-md);
	}
}

/* 手机 ≤ 767px：单列布局 */
@media (max-width: 767px) {
	.tctheme-container,
	.tctheme-container-narrow,
	.tctheme-container-wide,
	.tctheme-container-full {
		padding-inline: 16px;
	}
	.grid-12,
	.grid-4-col,
	.grid-3-col,
	.grid-2-col {
		grid-template-columns: 1fr;
	}
	.section-padding,
	.section-padding-y {
		padding-block: var(--tctheme-section-padding-sm);
	}
	.grid-4-col,
	.grid-3-col,
	.grid-2-col {
		gap: 20px;
	}
}