/*
 * ==========================================
 * 模块定位：全局 - 面包屑导航样式 (Global Breadcrumb Styles)
 * 代码类型：CSS
 * ==========================================
 * 1. 业务功能：提供纯平极简工业风面包屑样式，适配多端。
 * 2. 修复与 SEO 优化：全面剥离低效 `*` 选择器提升 CSSOM 解析效率。严格写入 `min-height` 防御 CLS。移动端彻底隐藏，让权给核心海报视觉。统一行高杜绝字体截断。
 */

.mx-breadcrumb {
    width: 100%;
    background-color: #ffffff;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 0; 
}

/* 核心 CLS 防御节点：固定 min-height 防抖 */
.mx-breadcrumb__inner {
    max-width: 1600px; 
    margin: 0 auto;
    padding: 12px 20px; 
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    box-sizing: border-box;
    min-height: 48px; 
}

.mx-breadcrumb__title,
.mx-breadcrumb__trail {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.mx-breadcrumb__title {
    font-size: 16px;
    font-weight: 500; 
    color: #404040;
    flex-shrink: 0;
    letter-spacing: -0.2px;
    line-height: 1; 
    display: none; /* 桌面端隐藏左侧标题，让权给海报 */
}

.mx-breadcrumb__trail {
    font-size: 13px;
    color: #888888;
    display: flex;
    align-items: center;
    
    /* 关键修改：从 flex-end 改为 flex-start，让它靠左对齐 */
    justify-content: flex-start; 
    
    flex: 1;
    min-width: 0;
    line-height: 1.5; 
}

.mx-breadcrumb__link {
    color: #404040;
    text-decoration: none;
    transition: color 0.2s ease;
    flex-shrink: 0;
    /* 辅助点击热区 */
    padding: 4px 0;
}

.mx-breadcrumb__link:hover {
    color: #0056b3; 
}

.mx-breadcrumb__sep {
    color: #cccccc;
    font-family: Arial, sans-serif;
    font-size: 11px;
    margin: 0 8px;
    flex-shrink: 0;
}

.mx-breadcrumb__current {
    color: #666666;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* 修复截断：双重保险防止 g/y 字母底部被切 */
    line-height: 1.5;
    padding-bottom: 2px;
}

/* * 移动端断点处理：彻底隐藏面包屑模块
 * 释放首屏空间，让移动端用户直达海报与核心内容 
 */
@media (max-width: 768px) {
    .mx-breadcrumb {
        display: none !important; 
    }
}
/* ----------逻辑结束---------- */