/* ==========================================================================
   layout.css — 容器 / 区块节奏 / 通用栅格
   这里的断点只服务本文件自己定义的东西（.container / .grid--N）。
   组件级的 @media 一律写在定义该组件的文件里，否则会被后加载的同名规则盖掉。
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--w-container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.prose {
  max-width: var(--w-prose);
}

/* 区块节奏：竖向留白统一走 .band，局部只覆写差额 ------------------------- */
.band {
  padding-block: var(--sp-11);
}

.band--tint {
  background: var(--brand-tint);
}

.band--tight {
  padding-block: var(--sp-9);
}

/* 通用栅格 --------------------------------------------------------------- */
.grid {
  display: grid;
  gap: var(--sp-6);
}

.grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid--4 {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1100px) {
  .grid--4 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 860px) {
  .grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 760px) {
  .grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .grid--3 {
    grid-template-columns: 1fr;
  }
}

/* 区块节奏在窄屏收一档：92px 的上下留白在手机上会占掉近 1/4 屏，
   而小屏的「分组感」靠的是对齐和分隔，不靠大留白。 */
@media (max-width: 640px) {
  .band {
    padding-block: var(--sp-9);
  }
}