/* ========================================
   global.css — 全局布局 & 通用工具类
   作用：
   1. 页面背景色和文字色的基础设置
   2. .container 容器 — 限制内容最大宽度并居中
   3. section 区块的统一内边距
   4. .section-heading — 各区块共用的标题组件（居中的副标题 + 主标题）
   5. .grid 网格工具类 — 快速创建响应式多列布局
   ======================================== */

/* 页面基础背景色 */
body {
  background-color: var(--color-bg);
  color: var(--color-text);
}

/* 内容容器 — 所有区块的内容都包裹在 .container 中
   限制最大宽度 1200px，水平居中，两侧留有内边距 */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;        /* 逻辑属性：LTR 时左右居中，RTL 时自动适配 */
  padding-inline: var(--space-md);
}

/* 区块统一上下内边距 — 所有 <section> 默认有 96px 的上下间距 */
section {
  padding-block: var(--space-2xl);
}

/* 区块标题组件 — 居中布局，由副标题（小号大写绿色）+ 主标题组成
   每个区块开头都有这个结构，确保视觉节奏一致 */
.section-heading {
  text-align: center;
  margin-block-end: var(--space-xl);
}

/* 副标题 — 小号大写字母，主绿色，字母间距较宽，营造高端感 */
.section-heading__subtitle {
  color: var(--color-primary);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-block-end: var(--space-sm);
}

/* 主标题 — 响应式字号，使用衬线字体 */
.section-heading__title {
  font-size: clamp(1.75rem, 4vw, 3rem);
  margin-block-end: 0;
}

/* ===== 网格工具类 — 响应式多列布局 =====
   使用方式：在容器上加 .grid 和 .grid--2/3/4
   移动端默认单列，通过 @media 逐级递增列数
*/

.grid {
  display: grid;
  gap: var(--space-lg);
}

/* 默认单列（移动端优先） */
.grid--2 {
  grid-template-columns: 1fr;
}

.grid--3 {
  grid-template-columns: 1fr;
}

.grid--4,
.grid--6 {
  grid-template-columns: 1fr;
}

/* ≥576px：4列/6列网格先变为2列（大屏手机横屏） */
@media (min-width: 576px) {
  .grid--4,
  .grid--6 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ≥768px：2列/3列/6列网格响应式（平板竖屏） */
@media (min-width: 768px) {
  .grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid--6 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ≥992px：3列→3列，4列→4列，6列→6列（桌面） */
@media (min-width: 992px) {
  .grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .grid--4 {
    grid-template-columns: repeat(4, 1fr);
  }
  .grid--6 {
    grid-template-columns: repeat(6, 1fr);
  }
}