/* ==========================================================================
   面包屑（非文章页专用：目前用于首页）
   --------------------------------------------------------------------------
   文章页（.dx-nr-main，含「首页 › 文章标题」两级）用的是 doingxx-newsroom.css
   里的 5.3.5 段，样式与这里是同一套；本文件只在 **没有** 加载 newsroom 样式表
   的页面（首页）加载，保证首页那一条「首页」面包屑外观完全一致。

   为什么不合并成一个文件：文章页的 5.3.5 段已被线上验证过，动它要连带调整
   加载顺序；抽出来单独给首页用，风险最小，也不让首页为了 100 行样式去拉
   整张 3000+ 行的新闻页样式表。

   两条线的归属：
     · 上：.dx-nr-breadcrumb 的 ::before（左右内缩，端点与 .dx-footer::before 一致）
     · 下：.dx-footer 的 ::before（不在这里画 border-bottom，否则叠成双线）

   线上的内距（与 doingxx.css 里 .dx-footer::before 严格同值）：
     桌面  left: 24px  right: 24px
     手机  left: 20px  right: 20px
   改这里的值时必须同步改 doingxx.css 的 .dx-footer::before，否则两条线对不齐。
   ========================================================================== */

/* 「两线之间」的高度 = 上 padding + 一行文字行高 + 下 padding */
.dx-page {
    --dx-nr-bc-h: calc(32px + 24px + 32px);
}

.dx-nr-breadcrumb {
    padding: 32px 24px;
    margin: var(--dx-nr-bc-h) 0 0;
    position: relative;
    /* 不再用 border-top：border 无法左右内缩，会顶到屏幕两边 */
    border-top: 0;
}

/* 上线：左右内缩，与页脚线同一口径 */
.dx-nr-breadcrumb::before {
    content: "";
    position: absolute;
    top: 0;
    left: 24px;
    right: 24px;
    height: 1px;
    background: #EBEBEB;
    pointer-events: none;
}

.dx-nr-breadcrumb-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    max-width: 1352px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    font-size: 16px;
    line-height: 1.5;
    color: #3A3A3A;
}

.dx-nr-breadcrumb-item {
    display: inline-flex;
    flex-wrap: nowrap;
    white-space: nowrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.dx-nr-breadcrumb-item::before {
    content: none;
}

.dx-nr-breadcrumb-item a {
    color: #3A3A3A;
    text-decoration: none;
    transition: color .2s;
}

.dx-nr-breadcrumb-item a:hover {
    color: #0052D9;
    text-decoration: underline;
}

/* 分隔图标：圆形描边 + 内嵌箭头，用品牌蓝作为整行点睛色 */
.dx-nr-breadcrumb-sep {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 18px;
    height: 18px;
    /* 圆形与 16px 中文的视觉重心：略微下移 1px，避免看着偏高 */
    position: relative;
    top: 1px;
    color: #0052D9;
    opacity: 1;
}

.dx-nr-breadcrumb-sep svg {
    display: block;
    width: 18px;
    height: 18px;
    overflow: visible;
}

.dx-nr-breadcrumb-current {
    display: block;
    color: #3A3A3A;
    min-width: 0;
    max-width: 62ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------- 手机端 ---------- */
/* 断点必须与 doingxx.css 里 .dx-footer::before 的内缩断点一致（都是 900px）。
   曾经这里写的是 767px，导致 768–900px（iPad 竖屏）区间：
   页脚线已切到 20/20，面包屑线还停在 24/24，两条线明显错位。 */
@media (max-width: 900px) {
    .dx-page {
        --dx-nr-bc-h: calc(20px + 21px + 20px);
    }

    /* 文字内距 20px，线由 ::before 画，左右同为 20px 与页脚线终点对齐。
       原右侧是 64px（避开悬浮工具条），按「不必预留」要求改为 20px。 */
    .dx-nr-breadcrumb {
        padding: 20px;
        position: relative;
        border-top: 0;
    }

    .dx-nr-breadcrumb::before {
        content: "";
        position: absolute;
        top: 0;
        left: 20px;
        right: 20px;
        height: 1px;
        background: #EBEBEB;
        pointer-events: none;
    }

    .dx-nr-breadcrumb-list {
        gap: 6px;
        font-size: 14px;
        flex-wrap: nowrap;
    }

    .dx-nr-breadcrumb-item {
        gap: 6px;
        flex: 0 1 auto;
        min-width: 0;
    }

    /* 标题项允许收缩，否则「> 标题」会被挤到第二行 */
    .dx-nr-breadcrumb-item:last-child {
        flex: 1 1 auto;
        flex-wrap: nowrap;
        white-space: nowrap;
    }

    .dx-nr-breadcrumb-sep,
    .dx-nr-breadcrumb-sep svg {
        width: 16px;
        height: 16px;
    }
}

/* ---------- 深色模式 ---------- */
/* 深色下的线色跟页脚保持一致，都用 --dx-border（深色主题里是 rgba(255,255,255,.12)）。
   早先这里写死成 .1，和页脚 .12 有细微色差，两条线摆在一起能看出不一样。 */
[data-theme="dark"] .dx-nr-breadcrumb::before {
    background: var(--dx-border);
}

[data-theme="dark"] .dx-nr-breadcrumb-list,
[data-theme="dark"] .dx-nr-breadcrumb-item a,
[data-theme="dark"] .dx-nr-breadcrumb-current {
    color: rgba(255, 255, 255, .65);
}

/* 深色下仍保持蓝，只提亮一档，保证深底上有足够对比 */
[data-theme="dark"] .dx-nr-breadcrumb-sep {
    color: #6FA8FF;
}

[data-theme="dark"] .dx-nr-breadcrumb-item a:hover {
    color: #6FA8FF;
}