/* ============================================================
   Хлебные крошки v4 — desktop dropdown + mobile horizontal scroll
   ============================================================ */

/* Базовая раскладка .crumbs определена в css/design.css (max-width, padding,
 * font-size, цвета). Здесь — поведение flex/scroll и дропдаун.            */

.crumbs {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	white-space: nowrap;
	/* overflow только на мобильной — на десктопе overflow обрезал бы дропдаун */
}

.crumbs .crumbs-link {
	color: var(--ink-600);
	text-decoration: none;
	position: relative;
	display: inline-block;
	flex: 0 0 auto;
	padding: 4px 0;
}
.crumbs .crumbs-link:hover { color: var(--accent); }
.crumbs .sep { margin: 0 8px; color: var(--ink-400); flex: 0 0 auto; }
.crumbs .cur { color: var(--ink-900); font-weight: 500; flex: 0 0 auto; }

/* ------- Десктопный выпадающий список (≥1024px) ------- */
@media (min-width: 1024px) {
	.crumbs-link:hover > .crumbs-menu-lvl1 {
		display: block;
	}

	/* Невидимый «мост» через зазор между ссылкой и подменю.
	 * Раньше мост был на ::before самого <ul> — не работало:
	 * <ul> имеет display:none пока нет :hover на <a>, поэтому
	 * и ::before до hover не существует. При движении курсора
	 * вниз он выходит за inline-block <a> раньше, чем доходит
	 * до <ul>, :hover сбрасывается, меню закрывается.
	 * ::after на самой ссылке всегда часть <a>, поэтому :hover
	 * сохраняется на всём пути от текста ссылки до подменю. */
	.crumbs-link[data-menu]::after {
		content: '';
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		height: 12px;
	}

	.crumbs-menu-lvl1,
	.crumbs-menu-lvl2,
	.crumbs-menu-lvl3,
	.crumbs-menu-lvl4 {
		position: absolute;
		display: none;
		background: #fff;
		border: 1px solid var(--line);
		border-radius: 10px;
		box-shadow: 0 6px 24px rgba(15, 23, 42, .08);
		padding: 6px 0;
		margin: 0;
		list-style: none;
		min-width: 220px;
		max-height: 70vh;
		overflow-y: auto;
		z-index: 9999;
	}

	.crumbs-menu-lvl1 { top: 100%; left: 0; margin-top: 8px; }

	.crumbs-menu-lvl2,
	.crumbs-menu-lvl3,
	.crumbs-menu-lvl4 {
		top: -7px;
		left: calc(100% + 4px);
	}

	.crumbs-menu-lvl1 li,
	.crumbs-menu-lvl2 li,
	.crumbs-menu-lvl3 li,
	.crumbs-menu-lvl4 li {
		position: relative;
		list-style: none;
	}

	/* Горизонтальный мост для вложенных уровней: при наведении
	 * на пункт с детьми справа разворачивается следующий <ul>
	 * с зазором 4px. ::after на <li> сохраняет :hover при
	 * движении курсора вправо к этому подменю. */
	.crumbs-menu-lvl1 li.has-children::after,
	.crumbs-menu-lvl2 li.has-children::after,
	.crumbs-menu-lvl3 li.has-children::after {
		content: '';
		position: absolute;
		top: 0;
		left: 100%;
		width: 8px;
		height: 100%;
	}

	.crumbs-menu-lvl1 li > a,
	.crumbs-menu-lvl2 li > a,
	.crumbs-menu-lvl3 li > a,
	.crumbs-menu-lvl4 li > a {
		display: block;
		padding: 8px 16px;
		color: var(--ink-600);
		font-size: 13px;
		line-height: 1.35;
		text-decoration: none;
		white-space: nowrap;
		transition: background-color .12s, color .12s;
	}

	.crumbs-menu-lvl1 li > a:hover,
	.crumbs-menu-lvl2 li > a:hover,
	.crumbs-menu-lvl3 li > a:hover,
	.crumbs-menu-lvl4 li > a:hover {
		background: var(--accent-soft);
		color: var(--accent);
	}

	/* Раскрытие вложенных уровней по hover на родительском <li> */
	.crumbs-menu-lvl1 li:hover > .crumbs-menu-lvl2,
	.crumbs-menu-lvl2 li:hover > .crumbs-menu-lvl3,
	.crumbs-menu-lvl3 li:hover > .crumbs-menu-lvl4 {
		display: block;
	}

	/* Стрелка вправо у пункта с потомками */
	.crumbs-menu-lvl1 li.has-children > a::after,
	.crumbs-menu-lvl2 li.has-children > a::after,
	.crumbs-menu-lvl3 li.has-children > a::after {
		content: '›';
		float: right;
		margin-left: 12px;
		color: var(--ink-400);
	}
}

/* ------- Мобильная версия (<1024px) ------- */
@media (max-width: 1023.98px) {
	.crumbs {
		padding-left: 16px;
		padding-right: 16px;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch; /* инерционный тач-скролл на iOS */
		scroll-behavior: smooth;
		overscroll-behavior-x: contain;    /* свайп крошек не листает страницу */
		-ms-overflow-style: none;
		scrollbar-width: none;
	}
	.crumbs::-webkit-scrollbar { width: 0; height: 0; display: none; }
	.crumbs .sep { margin: 0 6px; }

	/* Аффорданс слайдера: мягкое затухание у края, за которым есть ещё контент.
	 * Классы --more-left / --more-right вешает js/breadcrumbs.js по позиции скролла.
	 * mask привязан к боксу элемента (не скроллится с контентом) — затемняет именно
	 * видимый край, подсказывая, что крошки можно сдвинуть. */
	.crumbs.crumbs--more-right {
		-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
		mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
	}
	.crumbs.crumbs--more-left:not(.crumbs--more-right) {
		-webkit-mask-image: linear-gradient(to right, transparent, #000 26px);
		mask-image: linear-gradient(to right, transparent, #000 26px);
	}
	.crumbs.crumbs--more-left.crumbs--more-right {
		-webkit-mask-image: linear-gradient(to right, transparent, #000 26px, #000 calc(100% - 26px), transparent);
		mask-image: linear-gradient(to right, transparent, #000 26px, #000 calc(100% - 26px), transparent);
	}

	/* Дропдаун на мобильной не нужен — даже если JS успел добавить,
	 * скрываем, чтобы не ломать скроллируемую строку.                 */
	.crumbs-menu-lvl1,
	.crumbs-menu-lvl2,
	.crumbs-menu-lvl3,
	.crumbs-menu-lvl4 { display: none !important; }
}