/* 云秀互动官网 · 面包屑组件 v1
   建立：2026-09-20（N3 批 1 首个交付物）
   ------------------------------------------------------------------
   为什么需要它：全站 41 页已声明 BreadcrumbList 结构化数据，但
   **没有任何一页在页面上渲染可见面包屑** —— 属「标记与可见内容不符」，
   是结构化数据违规。本组件把可见轨迹补齐，并与 schema 逐条对齐。

   落位约定：
     · hero 页 —— 作为 hero <section> 的**第一个子元素**（hero 顶部 padding
       已含 72px 固定头的补偿，无需额外顶距）
     · 内容页 —— 作为 <main> 的**第一个子元素**，并加 .crumbs--page 自带顶距
   一致性铁律：可见轨迹的层级与文字，必须与同页 BreadcrumbList schema
   的 itemListElement 的 position 与 name **逐条一致**；末项即当前页，
   不渲染为链接。
   ------------------------------------------------------------------ */

.crumbs{
  margin:0 0 18px;
  font-size:12px;
  line-height:1.6;
}
/* 内容页变体：自带顶距，避开 72px 固定头 */
.crumbs--page{
  padding:96px 0 0;
}
.crumbs > .wrap{
  width:min(var(--wrap),calc(100% - 64px));
  margin:0 auto;
}
.crumbs ol{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  margin:0;
  padding:0;
  list-style:none;
  color:var(--muted2);
}
.crumbs li{
  display:flex;
  align-items:center;
  min-width:0;
}
/* 分隔符：旋转 45° 的直角，跟站内发丝线语言一致 */
.crumbs li + li::before{
  content:"";
  flex:none;
  width:5px;
  height:5px;
  margin:0 9px;
  border-right:1.4px solid var(--line2);
  border-top:1.4px solid var(--line2);
  transform:rotate(45deg);
}
.crumbs a{
  color:var(--muted);
  text-decoration:none;
  white-space:nowrap;
  transition:color .2s var(--ease);
}
.crumbs a:hover,
.crumbs a:focus-visible{
  color:var(--blue);
}
.crumbs [aria-current="page"]{
  color:var(--ink2);
  font-weight:600;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
/* 中间层在窄屏可隐藏（末项与首项始终保留），避免挤压换行 */
.crumbs .crumb-mid{
  display:flex;
  align-items:center;
  min-width:0;
}

@media(max-width:720px){
  .crumbs{
    font-size:11px;
    margin-bottom:14px;
  }
  .crumbs li + li::before{
    margin:0 7px;
  }
  .crumbs--page{
    padding-top:88px;
  }
}

@media(prefers-reduced-motion:reduce){
  .crumbs a{
    transition:none;
  }
}