/* Б-40 Крошки и связанные страницы. Источник: новый макет (задача 6.3) */

.b-breadcrumbs {
  padding-block: var(--space-4) 0;
}

.b-breadcrumbs__list {
  display: flex;
  gap: var(--space-2);
  margin-inline: calc(-1 * var(--container-pad));
  padding-inline: var(--container-pad);
  overflow-x: auto;
  color: var(--color-text-subtle);
  font-size: var(--fs-small);
  list-style: none;
  white-space: nowrap;
  scrollbar-width: none;
}

.b-breadcrumbs__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.b-breadcrumbs__item + .b-breadcrumbs__item::before {
  content: "›";
  color: var(--color-brand-secondary);
}

.b-breadcrumbs__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  color: var(--color-text-muted);
  text-decoration: none;
}

.b-breadcrumbs__link:hover {
  color: var(--color-link);
  text-decoration: underline;
}

.b-breadcrumbs__current {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  color: var(--color-text);
  font-weight: var(--font-weight-semibold);
}

/* Связанные страницы */

.b-related {
  padding-block: var(--space-section-tight);
  background: var(--color-bg);
}

.b-related__list {
  list-style: none;
}

.b-related__title {
  font-size: var(--fs-h4);
  font-weight: var(--font-weight-bold);
  line-height: var(--lh-snug);
}

.b-related__text {
  color: var(--color-text-muted);
  font-size: var(--fs-small);
}

.b-related__arrow {
  margin-top: auto;
  color: var(--color-accent);
}

@media (min-width: 1024px) {
  .b-breadcrumbs__list {
    margin-inline: 0;
    padding-inline: 0;
    overflow: visible;
  }
}