/* components/layer-2/footer/footer.css
   页脚（footer）- 就近样式（.footer__ 前缀，令牌驱动）

   职责：内容层底部的收尾一条——左边身份信息、右边次要链接（参考稿的左右分栏版式）。
   跟随内容滚动，不悬浮、不遮客服按钮。颜色/字号/间距全走 var(--bp-*)。 */

.footer {
  border-top: var(--bp-stroke-hairline) solid var(--bp-border-on-brand-subtle);
  padding: var(--bp-space-4) 0 var(--bp-space-5);
  background: var(--bp-gradient-brand);
  color: var(--bp-content-on-brand);
}

.footer__inner {
  /* 与导航和各页内容共用同一条左右对齐线。 */
  max-width: calc(var(--bp-layout-content-max) + var(--bp-layout-gutter) + var(--bp-layout-gutter));
  margin: 0 auto;
  padding: 0 var(--bp-layout-gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--bp-space-3) var(--bp-space-5);
}

/* ─── 左：版权 + 业务描述（一行） ─── */
.footer__brand {
  margin: 0;
  font-size: var(--bp-font-size-xs);
  color: var(--bp-content-on-brand);
}

/* ─── 右：页面链接 + 备案号（一行） ─── */
.footer__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bp-space-2) var(--bp-space-3);
  font-size: var(--bp-font-size-xs);
  color: var(--bp-content-on-brand);
}

.footer__link {
  color: var(--bp-content-on-brand);
  text-decoration: none;
  transition: color var(--bp-dur-fast) var(--bp-ease);
}

/* 链接之间的竖线分隔（取自参考稿）。为何用 border 而非伪元素画线：
   border 高度跟着自己那一项走，不用调 vertical-align 去凑基线对齐。 */
.footer__link+.footer__link {
  border-left: var(--bp-stroke-hairline) solid var(--bp-border-on-brand-subtle);
  padding-left: var(--bp-space-3);
}

/* 站内页面入口用 <button>（路由切换不产生新地址，语义是动作不是链接，
   与导航栏各项同为 button）。下面把浏览器默认按钮外观抹平，
   让它与同排的 <a> 看上去完全一致——差异只该在语义，不在样子。 */
button.footer__link {
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
}

.footer__link:hover {
  color: var(--bp-content-on-brand);
}

/* ── 移动端：版权一行、链接一行，左侧仍与页面内容对齐。 ── */
#stage[data-breakpoint="mobile"] .footer__inner {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--bp-space-2);
  text-align: left;
}

#stage[data-breakpoint="mobile"] .footer__tagline {
  display: none;
}

#stage[data-breakpoint="mobile"] .footer__links {
  flex-wrap: nowrap;
  gap: var(--bp-space-2);
}

#stage[data-breakpoint="mobile"] .footer__link+.footer__link {
  padding-left: var(--bp-space-2);
}