/* =========================================================
   Компонент: хлібні крихти

   У макетах їх немає, тому тримаємо максимально тихими: дрібний
   розмір, приглушений колір, без власного фону — крихти лежать
   на фоні сторінки й не сперечаються із заголовком.
   ========================================================= */

.phm-breadcrumbs {
	padding-block: 24px 0;
}

.phm-breadcrumbs__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 10px;
	font-size: 13px;
	line-height: 1.6;
	color: var(--phm-text);
}

.phm-breadcrumbs__item {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

/*
 * inline-flex + align-items тут не косметика: глобальне правило тач-таргетів
 * (@media pointer: coarse) дає посиланням min-height 44px. Усередині flex
 * посилання блокифікується, min-height починає діяти, і текст притискається
 * до верху — роздільник «/» опинявся помітно нижче за назви.
 */
.phm-breadcrumbs__link,
.phm-breadcrumbs__current {
	display: inline-flex;
	align-items: center;
}

.phm-breadcrumbs__link {
	color: var(--phm-text);
	opacity: 0.75;
	text-decoration: none;
}

.phm-breadcrumbs__link:hover,
.phm-breadcrumbs__link:focus-visible {
	color: var(--phm-primary-dark);
	opacity: 1;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.phm-breadcrumbs__sep {
	color: var(--phm-rose);
	align-self: center;
}

.phm-breadcrumbs__current {
	color: var(--phm-primary-dark);
	font-weight: 500;
}

/* ---- Секції під крихтами тиснуться ближче ---- */

.phm-has-breadcrumbs .phm-doctor__inner {
	padding-top: 64px;
}

.phm-has-breadcrumbs .phm-split-hero__inner {
	padding-top: 40px;
}

/* Той самий відступ, що й у заголовка «Unser Team»: обидві секції
   починаються з eyebrow, тож і повітря над ними має бути однакове. */
.phm-has-breadcrumbs .phm-page-intro {
	padding-top: 40px;
}

.phm-has-breadcrumbs .phm-hero__inner {
	padding-top: 72px;
}

.phm-has-breadcrumbs .phm-section:first-child {
	padding-top: 64px;
}

/* ---- Мобільні ----
   Ланцюжок навмисно не згортаємо: він максимум триланковий, а «…» замість
   середньої ланки лише плутає. Просто дрібніший шрифт і перенос рядка. */

@media (max-width: 767px) {
	.phm-breadcrumbs {
		padding-block: 16px 0;
	}

	.phm-breadcrumbs__list {
		font-size: 12px;
		gap: 0 8px;
	}

	.phm-has-breadcrumbs .phm-doctor__inner,
	.phm-has-breadcrumbs .phm-page-intro,
	.phm-has-breadcrumbs .phm-split-hero__inner {
		padding-top: 32px;
	}
}