/* ============================================================
   layout.css — 容器 / 网格 / section / 响应式 / 工具类
   ============================================================ */

/* ============ 容器 ============ */
.container {
  width: 100%;
  max-width: var(--container-2xl);
  margin-inline: auto;
  padding-inline: var(--space-6);
}
.container--xl { max-width: var(--container-xl); }
.container--lg { max-width: var(--container-lg); }
.container--md { max-width: var(--container-md); }
.container--sm { max-width: var(--container-sm); }

/* ============ Section ============ */
.section {
  position: relative;
  padding-block: var(--space-24);
  overflow: hidden; /* 约束装饰 blob */
}
.section--tight { padding-block: var(--space-16); }
.section--loose { padding-block: var(--space-32); }

/* section 交替底色 */
.section--muted     { background-color: var(--color-muted); }
.section--sand      { background-color: var(--color-accent); }
.section--moss      { background-color: var(--color-primary); color: var(--color-primary-fg); }
.section--terracotta{ background-color: var(--color-secondary); color: var(--color-secondary-fg); }
.section--card      { background-color: var(--color-card); }

/* 深色 section 内文字/标题反色 */
.section--moss :is(h1,h2,h3,h4),
.section--terracotta :is(h1,h2,h3,h4) { color: var(--color-white); }
.section--moss .lead,
.section--terracotta .lead { color: rgba(255,255,255,0.85); }
.section--moss .eyebrow { color: var(--color-secondary-light); }
.section--terracotta .eyebrow { color: var(--color-accent); }

/* ============ Section 标题区 ============ */
.section-head {
  max-width: 46rem;
  margin-bottom: var(--space-16);
}
.section-head--center {
  margin-inline: auto;
  text-align: center;
}
.section-head__title {
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-5);
}
.section-head__text {
  font-size: var(--text-lg);
  color: var(--color-muted-fg);
  line-height: var(--leading-relaxed);
}
.section--moss .section-head__text,
.section--terracotta .section-head__text { color: rgba(255,255,255,0.85); }

/* ============ 网格系统 ============ */
.grid { display: grid; gap: var(--space-8); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--gap-lg { gap: var(--space-12); }
.grid--gap-sm { gap: var(--space-5); }

/* 双栏图文 */
.split {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-16);
  align-items: center;
}
.split--reverse > :first-child { order: 2; }

/* ============ Flex 工具 ============ */
.cluster { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }
.cluster--center { justify-content: center; }
.stack { display: flex; flex-direction: column; }
.stack--gap-2 { gap: var(--space-2); }
.stack--gap-4 { gap: var(--space-4); }
.stack--gap-6 { gap: var(--space-6); }

/* ============ 通用工具类 ============ */
.text-center { text-align: center; }
.mx-auto { margin-inline: auto; }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mt-12 { margin-top: var(--space-12); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.relative { position: relative; }
.z-1 { position: relative; z-index: 1; }
.full-width { width: 100%; }
.measure { max-width: 62ch; }
.measure-narrow { max-width: 46ch; }

/* 页面主区最小高度（保证 footer 沉底观感） */
.page-main { display: block; min-height: 40vh; }

/* ============ 响应式断点 ============ */
@media (max-width: 1024px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .split { gap: var(--space-10); }
  .section-head__title { font-size: var(--text-3xl); }
}

@media (max-width: 768px) {
  .container { padding-inline: var(--space-5); }
  .section { padding-block: var(--space-16); }
  .section--loose { padding-block: var(--space-20); }
  .grid--3 { grid-template-columns: 1fr; }
  .grid--2 { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; gap: var(--space-8); }
  .split--reverse > :first-child { order: 0; }
  .section-head { margin-bottom: var(--space-10); }
}

@media (max-width: 560px) {
  .grid--4 { grid-template-columns: 1fr; }
  .section-head__title { font-size: var(--text-2xl); }
}