/* Хлебные крошки в стиле link-back */

.breadcrumbs {
    font-size: 1.4rem;
    margin-bottom: 20px;
}

.breadcrumbs__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 8px;
}

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

.breadcrumbs__item:not(:last-child)::after {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 4px 0 4px 6px;
    border-color: transparent transparent transparent #fff;
    margin-left: 8px;
    opacity: 0.6;
}

.breadcrumbs__link {
    color: #fff;
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
}

.breadcrumbs__link:hover {
    border-bottom: 1px solid #fff;
}

.breadcrumbs__text {
    color: #fff;
    opacity: 0.8;
}

.breadcrumbs__item--active .breadcrumbs__text {
    font-weight: 500;
}

/* Адаптивность как у link-back */
.breadcrumbs-mobile {
    display: none !important;
}

.breadcrumbs-desktop {
    display: flex !important;
}

@media (max-width: 769px) {
    .breadcrumbs {
        margin-left: 20px;
        margin-bottom: 15px;
        font-size: 1.3rem;
    }

    .breadcrumbs-mobile {
        display: flex !important;
    }

    .breadcrumbs-desktop {
        display: none !important;
    }

    /* На мобильных показываем только последние 2 элемента */
    .breadcrumbs-mobile .breadcrumbs__item:not(:nth-last-child(-n+2)) {
        display: none;
    }
    
    /* Отступ для мобильных */
    .card-child-wrapper {
        margin-top: 65px !important;
    }
}

/* Дополнительные стили для интеграции с hero-medium, hero-small, hero-large и hero-login */
.hero-medium .breadcrumbs,
.hero-small .breadcrumbs,
.hero-large .breadcrumbs,
.hero-login .breadcrumbs {
    position: relative;
    z-index: 1;
}

.hero-medium .breadcrumbs-desktop,
.hero-small .breadcrumbs-desktop,
.hero-large .breadcrumbs-desktop,
.hero-login .breadcrumbs-desktop {
    margin-top: 0;
    margin-bottom: 10px;
}

.hero-medium .breadcrumbs-mobile,
.hero-small .breadcrumbs-mobile,
.hero-large .breadcrumbs-mobile,
.hero-login .breadcrumbs-mobile {
    margin-top: 10px;
    margin-bottom: 10px;
}

/* Отступ для контейнера ребенка чтобы хлебные крошки были видны */
.card-child-wrapper {
    margin-top: 75px;
}

/* Для страниц детей и новостей */
.kid-page .breadcrumbs-desktop,
.news-page .breadcrumbs-desktop {
    order: -1; /* Показываем перед заголовком */
}

/* Темная тема для breadcrumbs (если фон не hero) */
.breadcrumbs--dark .breadcrumbs__link,
.breadcrumbs--dark .breadcrumbs__text {
    color: #333;
}

.breadcrumbs--dark .breadcrumbs__link:hover {
    border-bottom-color: #333;
}

.breadcrumbs--dark .breadcrumbs__item:not(:last-child)::after {
    border-left-color: #333;
}