/**
 * Компонент: Breadcrumbs.
 *
 * Разметку выводит Yoast SEO (yoast_breadcrumb), если плагин активен, —
 * он же отдаёт BreadcrumbList JSON-LD. Тема не дублирует schema.org.
 *
 * reference (страница услуги):
 *   nav{display:inline-flex;gap:8px;font-size:13px;font-weight:700;
 *       color:#3A3F49;background:rgba(255,255,255,0.9);
 *       border:1px solid #DDE0E6;border-radius:6px;padding:8px 14px}
 *   разделитель — color:#6B7280; текущий — color:#16181D;font-weight:800
 */

.tri-breadcrumbs {
	/* Флекс, а не блок: у inline-flex-плашки внутри блока остаётся
	   лишний зазор снизу под базовую линию строки (~18px), и весь
	   первый экран уезжает вниз относительно макета. */
	display: flex;
	font-size: var(--tri-fs-13);
	font-weight: var(--tri-fw-700);
	color: var(--tri-color-ink-secondary);
}

.tri-breadcrumbs__inner {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--tri-space-8);
	padding: var(--tri-space-8) var(--tri-space-14);
	background-color: rgba(255, 255, 255, 0.9);
	border: var(--tri-border-width) solid var(--tri-color-border);
	border-radius: var(--tri-radius-6);
	max-width: 100%;
}

.tri-breadcrumbs a {
	color: var(--tri-color-ink-secondary);
	text-decoration: none;
}

/*
 * НА ТЕЛЕФОНЕ ССЫЛКА — ЭТО ЦЕЛЬ ПАЛЬЦА. Строка крошек набрана мелким
 * шрифтом, и по высоте ссылка занимала 13px: попасть в неё можно было
 * только ногтем. Поле по вертикали поднимает цель примерно до 40px,
 * не меняя ни размер шрифта, ни вид строки.
 */
@media (max-width: 1023px) {
	.tri-breadcrumbs a,
	.tri-breadcrumbs [aria-current] {
		display: inline-flex;
		align-items: center;
		min-block-size: 40px;
	}
}

.tri-breadcrumbs a:hover {
	color: var(--tri-color-ink);
}

.tri-breadcrumbs__separator {
	color: var(--tri-color-muted-soft);
}

.tri-breadcrumbs__current,
.tri-breadcrumbs .breadcrumb_last {
	color: var(--tri-color-ink);
	font-weight: var(--tri-fw-800);
}

/* Длинная цепочка не должна растягивать страницу: на узких экранах
   она скроллится внутри своей плашки. Это не «глобальный overflow»,
   а локальное решение конкретного компонента. */
@media (max-width: 767px) {
	.tri-breadcrumbs__inner {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		white-space: nowrap;
		scrollbar-width: none;
	}

	.tri-breadcrumbs__inner::-webkit-scrollbar {
		display: none;
	}

	/*
	 * ПУНКТЫ НЕ СЖИМАЮТСЯ. Иначе получается худшее из двух: элемент
	 * флекса ужимается до ширины плашки, текст из него вываливается, а
	 * прокручивать становится нечего — scrollWidth равен clientWidth.
	 * Именно так последний пункт (заголовок страницы) уходил за правый
	 * край и был недостижим. С `flex: none` пункт сохраняет ширину
	 * текста, полоска получает настоящую прокрутку, и текст доступен
	 * целиком — без обрезки и многоточия.
	 */
	.tri-breadcrumbs__inner > * {
		flex: none;
	}
}