/* =================================================================
   Breadcrumb - 面包屑导航组件
   ================================================================= */

/* ==================== 文件说明 ====================
 * 文件名称: page-breadcrumbs.css
 * 所属层级: components（组件层）
 * 文件用途: 面包屑导航组件样式
 * 应用场景: 列表页、详情页等需要路径导航的页面
 * 依赖关系: 依赖 base/variables.css（颜色变量）
 * 维护说明: 可复用组件，修改会影响所有使用该组件的页面
 * ================================================== */

/* ==================== 目录结构 ====================
 * 1. 基础布局（容器、间距）
 * 2. 链接样式（默认、悬停、激活）
 * 3. 分隔符样式
 * 4. 当前页面标识
 * 5. 主题适配（暗色模式）
 * 6. 响应式适配（移动端）
 * ================================================== */

.breadcrumb {
    font-size: 16px;
    color: var(--text-tertiary);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 24px 0;
}

.breadcrumb a {
    color: var(--text-secondary);
    text-decoration: none;
    position: relative;
    padding: 4px 8px;
    border-radius: 6px;
    transition: color 0.3s ease, transform 0.3s ease;
}

.breadcrumb a:hover {
    color: var(--text-primary);
}

/* ==================== 响应式设计 ==================== */

/* 移动端: 0 - 767px */
@media (max-width: 767px) {
    .breadcrumb {
        font-size: 14px;
        gap: 6px;
        margin-bottom: 16px;
    }
}