/**
 * Doc Breadcrumbs Styles
 * Стили для хлебных крошек документации согласно макету Figma
 */

/* === Doc Breadcrumbs === */
.doc-breadcrumbs {
    background: var(--green-200, #D8DFDF);
    width: 100%;
}

.doc-breadcrumbs__container {
    max-width: 1920px;
    margin: 0 auto;
    padding: var(--radius-xl) var(--radius-3xl);
}

/* Адаптивные отступы используют общий паттерн из style.css */

.doc-breadcrumbs__list {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
}

.doc-breadcrumbs__item {
    display: flex;
    align-items: center;
}

.doc-breadcrumbs__item--separator {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.doc-breadcrumbs__item--current .doc-breadcrumbs__text {
    color: var(--color-grey-500, #ACA8A8);
    cursor: default;
    pointer-events: none;
}

.doc-breadcrumbs__link {
    font-family: var(--font-golos-text);
    font-weight: 400;
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    color: var(--color-dark-gray);
    text-decoration: none;
    transition: color 0.2s ease;
    display: inline-block;
}

.doc-breadcrumbs__link:hover {
    color: var(--color-green-main);
    text-decoration: none;
}

.doc-breadcrumbs__text {
    font-family: var(--font-golos-text);
    font-weight: 400;
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    color: var(--color-grey-500);
    display: inline-block;
}

.doc-breadcrumbs__icon {
    width: var(--spacing-base);
    height: var(--spacing-base);
    flex-shrink: 0;
    color: var(--color-grey-500);
    display: block;
    pointer-events: none;
}

/* === Responsive === */
/* Адаптивные отступы контейнера используют общий паттерн из style.css */
/* Для breadcrumbs нужны специфичные отступы */
@media (max-width: 1000px) {
    .doc-breadcrumbs__container {
        padding: var(--spacing-base) var(--spacing-lg);
    }
    
    .doc-breadcrumbs__list {
        gap: var(--gap-sm);
    }
}

@media (max-width: 768px) {
    .doc-breadcrumbs__container {
        padding: var(--container-padding-xs);
    }
    
    .doc-breadcrumbs__list {
        gap: 10px;
    }
    
    .doc-breadcrumbs__link,
    .doc-breadcrumbs__text {
        font-size: var(--font-size-xs, 14px);
    }
    
    .doc-breadcrumbs__icon {
        width: 14px;
        height: 14px;
    }
}