/**
 * Meridian Sections — Breadcrumbs
 *
 * Figma 214:841. A tinted strip with a bottom rule: Home › Section › Current.
 */

.md-section.md-crumbs {
	padding-block: var(--md-section-pt, 0.75rem) var(--md-section-pb, 0.8125rem); /* 12 / 13 */
	background-color: var(--md-color-surface-tint, #f9fafb);
}

.md-crumbs--ruled {
	border-block-end: var(--md-border-width, 1px) solid
		var(--md-color-rule, #ebebeb);
}

/* --- Trail --------------------------------------------------------------- */
/*
 * Wraps rather than scrolls: a deep trail on a narrow screen is still readable
 * on two lines, where a horizontal scroller hides the current page — the one
 * crumb that matters most.
 */
.md-crumbs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 0.375rem; /* 6px between crumb and separator */
	margin: 0;
	padding: 0;
	list-style: none;
}

.md-crumbs__item {
	display: flex;
	align-items: center;
	gap: 0.375rem; /* 6px */
	/* 11px / 16.5px, semibold, 0.66px tracking — the comp's own values. */
	font-size: var(--md-text-micro, 0.6875rem);
	font-weight: var(--md-weight-semibold, 600);
	line-height: 1.5;
	letter-spacing: 0.06em; /* 0.66px on 11px */
	text-transform: uppercase;
}

/*
 * The separator is generated rather than marked up, which is the WAI-ARIA
 * breadcrumb pattern: it is punctuation between links, not content, so it stays
 * out of the accessibility tree and out of a copied selection.
 */
.md-crumbs__item + .md-crumbs__item::before {
	content: "\203A"; /* › */
	color: var(--md-grey-200, #d1d5dc);
}

.md-crumbs__link {
	/*
	 * The comp's #99a1af. See the contrast note in the README: on this tint it
	 * measures about 2.5:1, which is well short of AA for a link.
	 */
	color: var(--md-color-text-subtle, #99a1af);
	text-decoration: none;
	transition: color var(--md-transition, 200ms ease);
}

.md-crumbs__link:hover,
.md-crumbs__link:focus-visible {
	color: var(--md-blue, #006bb6);
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

/*
 * The current page, in brand blue as drawn. Capped at the comp's 320px so a long
 * project title cannot push the strip sideways; ellipsis rather than a hard clip,
 * which is invisible at the comp's own width and kinder past it.
 */
.md-crumbs__current {
	display: block;
	overflow: hidden;
	max-width: 20rem; /* 320px */
	color: var(--md-blue, #006bb6);
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* --- Narrow -------------------------------------------------------------- */
@media (max-width: 47.9375em) {
	/*
	 * The cap exists to stop one long crumb widening the strip. On a phone the
	 * viewport already does that, and 320px would truncate a title that had room
	 * to wrap onto its own line.
	 */
	.md-crumbs__current {
		overflow: visible;
		max-width: none;
		white-space: normal;
	}
}