/*
 * Breadcrumb line under the hero of the traject and info article pages (new, docs/plans/2026-09-28-per-intent-pages.md).
 * Built from the existing tokens: 14/20, gray-500, links gray-600 → orange (the footer/link hover colour), white strip
 * with the gray-100 rule the Info filter bar uses under its hero.
 */
.breadcrumb { background-color: var(--color-white); border-bottom: 1px solid var(--color-gray-100); }
.breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: calc(var(--spacing) * 2);
	padding-block: calc(var(--spacing) * 4);
	font-size: var(--text-sm);
	line-height: var(--text-sm-lh);
	color: var(--color-gray-500);
}
.breadcrumb__item { display: inline-flex; align-items: center; gap: calc(var(--spacing) * 2); min-width: 0; }
.breadcrumb__link { color: var(--color-gray-600); transition: color var(--duration-fast) var(--ease-default); }
.breadcrumb__link:hover { color: var(--color-brand-orange); }
.breadcrumb__sep { color: var(--color-gray-400); }
.breadcrumb__current { color: var(--color-brand-dark); font-weight: var(--font-weight-medium); overflow-wrap: anywhere; }
[dir="rtl"] .breadcrumb__sep { display: inline-block; rotate: 180deg; }