/* ============================================================
   layout.css — 容器 / 区块节奏 / 栅格
   这里只放本文件自己定义的东西，组件级断点写回组件所在文件
   ============================================================ */
.container {
  width: min(100% - 40px, var(--w-container));
  margin-inline: auto;
}

/* 区块：上下留白 + 可选分隔线 */
.section {
  padding-block: var(--section);
}
.section--tight { padding-block: calc(var(--section) * 0.66); }
.section--line { border-top: 1px solid var(--line); }

/* 栅格：列数只有 2/3/4 三种，铺满容器 */
.grid {
  display: grid;
  gap: var(--sp-5);
}
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

/* 两栏（文案 + 图 / 文案 + 卡片） */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-8);
  align-items: start;
}
.split--wide-left { grid-template-columns: 1.15fr 0.85fr; }

/* 区块标题组：左对齐 */
.sec-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-3);
  margin-bottom: var(--sp-7);
}
.sec-head__sub {
  max-width: 640px;
  color: var(--text-2);
  font-size: var(--fs-base);
}
/* 标题与右侧注记同一行 */
.sec-head--row {
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-5);
  flex-wrap: wrap;
}

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

@media (max-width: 640px) {
  .grid--2,
  .grid--3 { grid-template-columns: 1fr; }
  .sec-head { margin-bottom: var(--sp-6); }
}