/* ==========================================
   ХЛЕБНЫЕ КРОШКИ (BREADCRUMBS STYLES)
   ========================================== */

.breadcrumbs-nav {
    padding-block: var(--space-4) 0; /* Отступ сверху, снизу прижимается к контенту */
    font-size: var(--fs-sm);        /* Берем уменьшенный базовый размер шрифта */
    font-family: var(--font-primary);
}

.breadcrumbs-nav .container {padding-block: 0 !important;}

.breadcrumbs-list {
    list-style: none !important;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2); /* Небольшой зазор между элементами */
    color: var(--color-text-muted); /* Приглушенный серый цвет */
}

/* Ссылки в крошках */
.breadcrumb-item a {
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color var(--transition-base);
}

.breadcrumb-item a:hover {
    color: var(--color-primary); /* Подсветка основным цветом при наведении */
}

/* Разделитель (слэш или стрелка) */
.breadcrumb-separator {
    user-select: none;
    opacity: 0.5;
    font-weight: 300;
}

/* Активный (последний) пункт — название текущей статьи */
.breadcrumb-item.active {
    color: var(--color-text); /* Обычный плотный цвет текста, без ссылки */
    font-weight: 400;
    /* Если название статьи слишком длинное, можно аккуратно ограничить */
    max-width: 300px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Адаптивность под мобилки */
@media (max-width: 600px) {
    .breadcrumbs-nav {
        padding-inline: 0;
    }
    /* Позволяем крошкам аккуратно переноситься на новую строку, если экран совсем узкий */
    .breadcrumbs-list {
        gap: var(--space-1) var(--space-2);
    }
}