/*
 * Хлебные крошки.
 *
 * Размеры заданы в rem по договорённости всего проекта: в теме стоит
 * html { font-size: calc(1vw / 19.5) }, поэтому 18rem — это 18 пикселей на
 * макетной ширине, а не 18 обычных rem.
 *
 * Цепочка выводится в трёх разных местах, и цвет в каждом свой, поэтому
 * базовый блок цвет не задаёт вовсе — только раскладку. Цвет приходит от
 * модификатора места вывода.
 */

.pm-breadcrumbs__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6rem 12rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pm-breadcrumbs__item {
    display: flex;
    align-items: center;
    gap: 6rem 12rem;
    min-width: 0;
}

/*
 * Разделитель — часть оформления, а не текста: в отдельном элементе его
 * скопировали бы вместе с названиями страниц, а скринридер прочитал бы
 * «слэш» между пунктами.
 */
.pm-breadcrumbs__item:not(:last-child)::after {
    content: "/";
    opacity: .6;
}

.pm-breadcrumbs__link {
    color: inherit;
    text-decoration: none;
}

.pm-breadcrumbs__link:hover,
.pm-breadcrumbs__link:focus-visible {
    text-decoration: underline;
}

/*
 * Название текущей страницы длиннее остальных и на узком экране легко уезжает
 * за край: обрезаем его, а не строку целиком — начало цепочки важнее хвоста.
 */
.pm-breadcrumbs__current {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: .82;
}

/* Hero внутренних страниц темы: тёмная подложка, текст белый. */
.pm-inner-hero__breadcrumbs.pm-breadcrumbs {
    display: block;
}

/*
 * В inner-page.css у hero стоит правило `span:last-child { color: … }`,
 * написанное под прежнюю плоскую разметку. Теперь в этот селектор попадает и
 * <span itemprop="name"> внутри ссылки, поэтому цвет ссылок возвращаем явно.
 */
.pm-inner-hero__breadcrumbs .pm-breadcrumbs__link span {
    color: #fff;
}

/* Hero страниц-конструкторов: цвет текста задаёт сам блок. */
.pmb-hero__breadcrumbs.pm-breadcrumbs {
    margin: 0;
    font-size: 18rem;
    line-height: 1.4;
    color: var(--pmb-hero-fg, #fff);
}

/* Блог и архивы: крошки идут по светлому фону. */
.pm-content__breadcrumbs.pm-breadcrumbs {
    margin: 0 0 24rem;
    font-size: 18rem;
    line-height: 1.4;
    color: #2f2f2f;
}

@media (max-width: 767px) {
    .pmb-hero__breadcrumbs.pm-breadcrumbs,
    .pm-content__breadcrumbs.pm-breadcrumbs {
        font-size: 14rem;
    }

    .pm-content__breadcrumbs.pm-breadcrumbs {
        margin-bottom: 18rem;
    }
}