/* Component: breadcrumbs (WB-2026-10-26-05). Semantic --nt- tokens only; lint: scripts/lint-css-values.py --components. */
@layer components {
.nt-crumbs ol {
  display: flex; gap: var(--nt-space-xs); margin: 0; padding: 0; list-style: none;
  flex-wrap: wrap; /* wraps instead of a sideways scroll on phones (WB-2026-10-31-03); on phones it is one link anyway */
  font: 400 var(--nt-step--1) / var(--nt-leading-snug) var(--nt-font-ui);
  color: var(--nt-color-ink-3);
}
.nt-crumbs li + li::before { content: "/"; margin-inline-end: var(--nt-space-xs); color: var(--nt-color-ink-3); }
.nt-crumbs a { color: var(--nt-color-ink-2); text-decoration: underline; text-underline-offset: 0.2em; }
.nt-crumbs a:hover { color: var(--nt-color-ink); }
@media (max-width: 767px) {
  .nt-crumbs .nt-crumbs__home, .nt-crumbs .nt-crumbs__current { display: none; }
  .nt-crumbs .nt-crumbs__home + li::before { content: none; }
}
}