/* ==========================================================================
   layout.css —— 容器 / 区块节奏 / 栅格 / 两栏 split
   只放「这里自己定义的东西」的断点；组件级覆盖写在定义组件的文件里。
   ========================================================================== */

/* ---- 容器 -------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--w-container);
  margin-inline: auto;
  padding-inline: var(--pad-section);
}

.container--wide {
  max-width: none;
  padding-inline: 0;
}

/* 收敛宽度：下载 / CTA 这类聚焦区块 */
.container--narrow { max-width: var(--w-narrow); }

/* ---- 区块节奏 ---------------------------------------------------------- */
/* 🔴 横向留白**只由 .container 提供**（`--pad-section`）。
   这里曾经也写了一份 padding-inline，两处叠加 → 手机上 40+40=80px/侧，
   320px 屏幕内容只剩 160px 宽（表格、时间线、下载卡全被挤成一团）。
   所有 .section 的第一个子元素都是 .container（已核），去掉这层不会让内容碰边。 */
.section {
  padding-block: var(--pad-section-y);
  background: var(--bg);
}

.section--alt { background: var(--bg-alt); }
.section--foot { background: var(--bg-foot); }
.section--flush { padding-inline: 0; }

/* 区块内的标题组：kicker → h2 → 副题 */
.section__head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  margin-bottom: var(--head-gap, var(--sp-9));
}

.section__head--center {
  align-items: center;
  text-align: center;
}

/* ---- 栅格（只有 2 / 3 / 4 列三档，都用同一内容宽度） ------------------- */
.grid {
  display: grid;
  gap: var(--sp-6);
}

.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--6 { grid-template-columns: repeat(6, 1fr); }

/* ---- 两栏 split：左文右图 / 左图右文 ---------------------------------- */
.split {
  display: flex;
  align-items: stretch;
  background: var(--bg);
}

.split__media {
  flex: 1 1 52.8%;
  min-width: 0;
}

.split__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.split__body {
  flex: 1 1 47.2%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  justify-content: center;
  padding: 72px;
  background: var(--bg-panel);
}

.split--reverse { flex-direction: row-reverse; }

/* ---- 全局断点：只管本文件定义的东西 ----------------------------------- */
@media (max-width: 1080px) {
  .grid--6 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .grid { gap: var(--sp-5); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }

  .split,
  .split--reverse { flex-direction: column; }

  .split__media { flex: 0 0 auto; }
  .split__body { padding: var(--sp-8) var(--sp-6); }
}

@media (max-width: 560px) {
  .grid { gap: var(--sp-4); }
  .grid--2,
  .grid--3,
  .grid--4,
  .grid--6 { grid-template-columns: 1fr; }

  /* 图文块在手机上内边距也收一档，不然图片只剩一小条 */
  .split__body { padding: var(--sp-6) var(--pad-section); gap: var(--sp-4); }
}