/* web/stage/layer_2.css
   Layer 2 内容层 - 页面骨架（主页宿主）

   职责：板块的"陈列馆"。这里只管页面的整体节奏——
   限宽 / 居中 / 纵向瀑布流间距 / 上下留白 / 断点降档。
   每个板块（components/<名>/）的根容器贴合本容器，只管内部布局。

   节奏约定（所有板块共用）：
   - 内容区限宽 1120px，居中
   - 板块之间纵向间距 --bp-space-7（48px）
   - 顶部让出导航栏（高度取令牌 --bp-navbar-h）+ 首屏呼吸空间
   - 底部留白 64px 收尾
   - 移动端缩窄边距、收紧间距
 */

.layer-2-content {
  max-width: 1120px;
  margin: 0 auto;
  /* 顶部 = 导航栏高度（令牌）+ 首屏留白 32px；左右 24px 保边距；底部 64px 收尾 */
  padding: calc(var(--bp-navbar-h) + var(--bp-space-6)) var(--bp-space-5) var(--bp-space-7);
  display: flex;
  flex-direction: column;
  /* 板块间节奏：大间距，板块各自成块，一眼可扫 */
  gap: var(--bp-space-7);
  min-height: 100vh;
}

/* 板块根容器统一规格：贴合宿主、贴合即通用于任何板块 */
.layer-2-content>* {
  min-width: 0;
}

/* 锚点让位：导航固定悬浮，滚到页内锚点时若不让位，板块顶部会被导航盖住。
   scroll-margin-top 本就是浏览器的原生解法（配合 scrollIntoView），
   故由 CSS 单一处声明——JS 不再写死像素，也不每次滚动重赋 style。
   取导航高 + 12px 呼吸空间。 */
[data-anchor] {
  scroll-margin-top: calc(var(--bp-navbar-h) + var(--bp-space-3));
}

/* ═══ 机械图纸装饰层（背景底纹的延伸） ═══
 * 设计原则：
 *  - 绝对定位在 .layer-2-inner 最底层 → 跟随整页滚动，且永远不盖内容
 *  - pointer-events: none → 不挡任何点击/滚动
 *  - 低透明度 + 细橙描边 → 只做质感，不抢主题（相当于 Layer 1 图纸纹理的扩展） */
.layer-2-inner {
  position: relative;
  min-height: 100vh;
}

.layer-2-decor {
  position: absolute;
  inset: auto 0 0 0;
  height: 300px;
  overflow: hidden;
  pointer-events: none;
  /* 内容永远盖在装饰层之上 */
  z-index: 0;
  /* 横向排开，两端贴边、互不重叠 */
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  /* 低透明度：只看得见形状，不抢视线 */
  opacity: 0.45;
  /* 与背景同源的极淡橙；rgba(194,91,18,0.5) 对应品牌基因 --bp-color-primary 淡档，改主色时同步更新 */
  color: rgba(194, 91, 18, 0.5);
}

.layer-2-decor__svg {
  height: 100%;
  max-height: 260px;
  flex: 0 0 auto;
}

/* 各元素略微错开摆放，避免整齐排成一排显得刻意 */
.layer-2-decor__svg[data-decor="gear"] {
  height: 72%;
  margin-left: 2%;
}

.layer-2-decor__svg[data-decor="centerline"] {
  height: 100%;
}

.layer-2-decor__svg[data-decor="frame"] {
  height: 62%;
}

.layer-2-decor__svg[data-decor="cross"] {
  height: 48%;
  margin-right: 4%;
}

/* ── 移动端降档：装饰层压扁，进一步淡出，不占手机屏 ── */
#stage[data-breakpoint="mobile"] .layer-2-decor {
  height: 160px;
  opacity: 0.3;
}

#stage[data-breakpoint="mobile"] .layer-2-decor__svg {
  max-height: 140px;
}

/* ── 移动端降档：边距缩窄、板块节奏收紧 ── */
#stage[data-breakpoint="mobile"] .layer-2-content {
  padding: calc(var(--bp-navbar-h) + var(--bp-space-4)) var(--bp-space-4) var(--bp-space-6);
  gap: var(--bp-space-6);
}