/* 面包屑导航 - 全站统一组件 */

.breadcrumb {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--space-4) var(--space-6);
    list-style: none;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    font-size: var(--text-small, 0.875rem);
    color: var(--color-gray-400, #9ca3af);
    padding-inline-start: var(--space-6);  /* 覆盖 <ol> 默认缩进 */
}

.breadcrumb__item {
    display: inline-flex;
    align-items: center;
}

.breadcrumb__item a {
    color: var(--color-gray-500, #6b7280);
    text-decoration: none;
    transition: color var(--transition-fast, 150ms ease);
}

.breadcrumb__item a:hover {
    color: var(--color-brand, #18E299);
    text-decoration: underline;
}

.breadcrumb__separator {
    color: var(--color-gray-300, #d1d5db);
    user-select: none;
    margin: 0 var(--space-1);
}

.breadcrumb__current {
    color: var(--color-gray-700, #374151);
    font-weight: 500;
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 暗色主题 */
body.dark-theme .breadcrumb__item a {
    color: var(--color-gray-400, #9ca3af);
}
body.dark-theme .breadcrumb__item a:hover {
    color: var(--color-brand, #18E299);
}
body.dark-theme .breadcrumb__current {
    color: var(--color-gray-100, #f3f4f6);
}

/* 移动端适配 */
@media (max-width: 768px) {
    .breadcrumb {
        padding: var(--space-3) var(--space-4);
        font-size: var(--text-caption, 0.75rem);
        gap: var(--space-1);
        overflow-x: auto;
        flex-wrap: nowrap;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }
    .breadcrumb__current {
        max-width: 180px;
    }
    .breadcrumb__separator {
        margin: 0;
    }
}