/* Layer 2 · 主页板（board）：浅色内容区接在深蓝首屏之后。 */
.board {
  display: flex;
  flex-direction: column;
  gap: var(--bp-space-8);
  min-width: 0;
  padding: var(--bp-space-7) var(--bp-layout-gutter) var(--bp-space-8);
  /* ⚠ 本板块**有意**铺自己的底色（横跨整屏）：它要盖住 Layer 1 的底纹，
     让“关于我”以下的内容区呈平色、与深蓝首屏形成上下两段。
     这是本板块的既定设计，勿按《组件开发指南》“背景归 Layer 1”的通用规则删除或改浅。 */
  background: var(--bp-canvas-default);
}

/* 内容列居中，超宽屏上控制阅读宽度。 */
.board__section {
  min-width: 0;
  width: 100%;
  max-width: var(--bp-layout-content-max);
  margin-inline: auto;
}

.board__title {
  display: flex;
  align-items: center;
  gap: var(--bp-space-3);
  margin: 0 0 var(--bp-space-5);
  color: var(--bp-content-primary);
  font-size: var(--bp-font-size-xl);
  font-weight: var(--bp-font-weight-bold);
  line-height: var(--bp-leading-tight);
}

.board__title::before {
  content: '';
  width: var(--bp-space-1);
  height: 1em;
  flex: none;
  border-radius: var(--bp-radius-round);
  background: var(--bp-accent);
}

.board__section[data-anchor="cooperation"]>.board__title {
  margin-bottom: var(--bp-space-7);
}

#stage[data-breakpoint="tablet"] .board {
  gap: var(--bp-space-7);
  padding-top: var(--bp-space-6);
  padding-bottom: var(--bp-space-7);
}

#stage[data-breakpoint="mobile"] .board {
  gap: var(--bp-space-7);
  padding-top: var(--bp-space-5);
  padding-bottom: var(--bp-space-7);
}

#stage[data-breakpoint="mobile"] .board__title {
  font-size: var(--bp-font-size-lg);
}

#stage[data-breakpoint="mobile"] .board__section[data-anchor="cooperation"]>.board__title {
  margin-bottom: var(--bp-space-6);
}