/*
 * Drobečková navigace.
 *
 * Layout:
 *   .breadcrumbs                — full-width wrapper, max-width 1200 px, padding-inline 24 px
 *     .breadcrumbs__list (<ol>) — flex row, gap 12 px, padding-block 8 px, žádné pozadí
 *       .breadcrumbs__item      — položka: separator (>) + link/current
 *
 * Margins se řídí přes CSS custom props nasazené inline z PHP
 * (rp_render_breadcrumbs() — viz inc/breadcrumbs.php). Klient si je
 * mění per-page přes ACF.
 *
 * Typografie odkazů: 12 px / semibold (600) / line-height 100 % / -2 % letter-spacing.
 */

.breadcrumbs {
	width: 100%;
	max-width: var(--rp-content-max);              /* 1200 px */
	margin-inline: auto;
	margin-top:    var(--rp-bc-mt, 64px);           /* default 64 px nahoře */
	margin-bottom: var(--rp-bc-mb, 48px);           /* default 48 px dole */
	padding-inline: var(--rp-space-5);              /* 24 px — lícuje se sekcemi */
}

@media (max-width: 767px) {
	.breadcrumbs {
		margin-top:    var(--rp-bc-mt-mobile, 32px);
		margin-bottom: var(--rp-bc-mb-mobile, 32px);
	}
}

.breadcrumbs__list {
	list-style: none;
	margin: 0;
	padding: 8px 0;                                 /* 8 px block, 0 inline */
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;                                       /* gap mezi prvky breadcrumbs */
	background: transparent;
}

.breadcrumbs__item {
	display: inline-flex;
	align-items: center;
	gap: 12px;                                       /* gap mezi separator (>) a obsahem položky */
	min-width: 0;
}

/* Separator — chevron arrow (4×7 SVG), zobrazíme malý 3×6 px */
.breadcrumbs__separator {
	display: inline-flex;
	align-items: center;
	line-height: 0;
	flex: 0 0 auto;
}
.breadcrumbs__separator svg {
	width: 3px;
	height: 6px;
	display: block;
}

/* ── Home (první položka) ────────────────────────────────── */
.breadcrumbs__link--home {
	display: inline-flex;
	align-items: center;
	line-height: 0;
	color: rgba(243, 244, 246, 0.5);
	transition: color 200ms ease;
}
@media (hover: hover) and (pointer: fine) {
	.breadcrumbs__link--home:hover {
		color: var(--rp-color-text);
	}
}

.breadcrumbs__home-icon {
	display: inline-flex;
	line-height: 0;
}
.breadcrumbs__home-icon svg {
	width: 12px;
	height: 12px;
	display: block;
}

.breadcrumbs__home-fallback {
	font-size: 12px;
	font-weight: var(--rp-fw-semibold);
	line-height: 1;
	letter-spacing: -0.02em;
}

/* ── Odkazy + current ────────────────────────────────────── */
.breadcrumbs__link,
.breadcrumbs__link:visited {
	color: rgba(243, 244, 246, 0.5);
	font-size: 12px;
	font-weight: var(--rp-fw-semibold);             /* 600 */
	line-height: 1;                                  /* 100 % */
	letter-spacing: -0.02em;                         /* -2 % */
	text-decoration: none;
	transition: color 200ms ease;
}
@media (hover: hover) and (pointer: fine) {
	.breadcrumbs__link:hover {
		color: var(--rp-color-text);
	}
}

.breadcrumbs__current {
	color: var(--rp-color-text);                    /* aktuální stránka víc viditelná než link */
	font-size: 12px;
	font-weight: var(--rp-fw-semibold);
	line-height: 1;
	letter-spacing: -0.02em;
}