/**
 * Breadcrumb pattern + component (DS 0.2.4 Draft).
 *
 * <768px: previous level only. ≥768px: full trail, horizontal scroll if needed.
 * No ellipsis, truncation, or scroll animation.
 */

.ya-breadcrumb-pattern {
	--ya-breadcrumb-desktop-height: 36px;
	--ya-breadcrumb-desktop-padding-block: 6px;
	--ya-breadcrumb-desktop-padding-inline: var(--ya-spacing-12);
	--ya-breadcrumb-mobile-padding-block: 6px;
	--ya-breadcrumb-mobile-padding-inline-start: 6px;
	--ya-breadcrumb-mobile-padding-inline-end: var(--ya-spacing-12);
	--ya-breadcrumb-gap: var(--ya-spacing-04);
	--ya-breadcrumb-radius: 4px;
	--ya-breadcrumb-separator-size: 16px;
	--ya-breadcrumb-focus-radius: 2px;

	box-sizing: border-box;
	width: 100%;
	margin-block: 0;
	padding: 0 var(--wp--custom--spacing--padding-inline, clamp(1rem, -1.486rem + 8.304vi, 2.5rem)) var(--ya-spacing-32);
	background-color: var(--wp--custom--color--background-base, var(--wp--preset--color--gray-300));
	color: var(--wp--custom--color--text-primary);
}

@media (min-width: 1280px) {
	.ya-breadcrumb-pattern {
		padding-bottom: var(--ya-spacing-72);
	}
}

.ya-breadcrumb-pattern__container {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--wp--style--global--wide-size, 1440px);
	margin-inline: auto;
}

/* —— Component —— */

.ya-breadcrumb {
	box-sizing: border-box;
	width: fit-content;
	max-width: 100%;
	overflow-x: auto;
	overscroll-behavior-inline: contain;
	scroll-behavior: auto;
	border-radius: var(--ya-breadcrumb-radius);
	background-color: var(--wp--preset--color--gray-white);
}

/* After .ya-breadcrumb so display wins over equal-specificity component rules. */
.ya-breadcrumb.ya-breadcrumb-pattern__desktop {
	display: none;
}

.ya-breadcrumb.ya-breadcrumb-pattern__mobile {
	display: block;
}

@media (min-width: 768px) {
	.ya-breadcrumb.ya-breadcrumb-pattern__desktop {
		display: block;
	}

	.ya-breadcrumb.ya-breadcrumb-pattern__mobile {
		display: none;
	}
}

.ya-breadcrumb--desktop {
	height: var(--ya-breadcrumb-desktop-height);
	padding: var(--ya-breadcrumb-desktop-padding-block) var(--ya-breadcrumb-desktop-padding-inline);
}

.ya-breadcrumb--mobile {
	padding: var(--ya-breadcrumb-mobile-padding-block) var(--ya-breadcrumb-mobile-padding-inline-end) var(--ya-breadcrumb-mobile-padding-block) var(--ya-breadcrumb-mobile-padding-inline-start);
}

.ya-breadcrumb__list,
.ya-breadcrumb__item {
	display: flex;
	align-items: center;
}

.ya-breadcrumb__list {
	width: max-content;
	gap: var(--ya-breadcrumb-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ya-breadcrumb__item {
	flex: 0 0 auto;
	gap: var(--ya-breadcrumb-gap);
}

.ya-breadcrumb__link,
.ya-breadcrumb__current {
	font-family: var(--wp--preset--font-family--figtree, inherit);
	font-size: var(--wp--preset--font-size--link-md, 1rem);
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.5;
	white-space: nowrap;
	overflow: visible;
	text-overflow: clip;
}

.ya-breadcrumb__link {
	display: inline-flex;
	align-items: center;
	gap: var(--ya-breadcrumb-gap);
	color: var(--wp--custom--color--link-primary, var(--wp--preset--color--brand-900));
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
}

.ya-breadcrumb__link:hover {
	color: var(--wp--custom--color--link-primary-hover, var(--wp--preset--color--brand-1000));
	text-decoration-thickness: 2px;
}

.ya-breadcrumb__link:focus-visible {
	outline: var(--wp--custom--focus--width, 3px) solid var(--wp--custom--color--focus-border);
	outline-offset: 2px;
	border-radius: var(--ya-breadcrumb-focus-radius);
}

.ya-breadcrumb__current {
	font-size: var(--wp--preset--font-size--body-md, 1rem);
	font-weight: 400;
	color: var(--wp--custom--color--text-secondary);
}

.ya-breadcrumb__separator {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: var(--ya-breadcrumb-separator-size);
	height: var(--ya-breadcrumb-separator-size);
	color: var(--wp--custom--color--icon-primary, currentColor);
}

.ya-breadcrumb__separator svg {
	display: block;
	width: 100%;
	height: 100%;
}

/*
 * Clear the absolute header.
 * - Singles: breadcrumb is a direct child of main.
 * - Regular pages: insert the YA – Breadcrumb pattern (ya-page-breadcrumb wrapper).
 */
.ya-single-aub > main > .ya-breadcrumb-pattern,
.ya-single-vux > main > .ya-breadcrumb-pattern,
.ya-single-intervju > main > .ya-breadcrumb-pattern,
.ya-single-artikel > main > .ya-breadcrumb-pattern,
.ya-archive-artikel > main > .ya-breadcrumb-pattern,
.ya-shop > main > .ya-breadcrumb-pattern,
.ya-page-breadcrumb > .ya-breadcrumb-pattern {
	padding-top: var(--wp--custom--header--height);
}

.ya-page-breadcrumb {
	box-sizing: border-box;
	width: 100%;
	margin-block: 0;
	background-color: var(--wp--custom--color--background-base, var(--wp--preset--color--gray-300));
}

.ya-single-aub > main > .ya-breadcrumb-pattern + .ya-hero-split,
.ya-single-vux > main > .ya-breadcrumb-pattern + .ya-hero-split {
	padding-top: 0;
}