/* ============================================================
   breadcrumbs — minimalist text trail + chevron separator.

   Pattern: WAI-ARIA Breadcrumb (apg.org).
     - <nav aria-label="Ścieżka nawigacji">
     - <ol> semantic (ordered)
     - Ostatni item bez linku, aria-current="page"
     - Separator " › " jako CSS pseudo (decoration, NIE w semantic markup)

   SEO: BreadcrumbList JSON-LD schema generowany w helpers.php
   (agf_render_breadcrumbs — inline <script type="application/ld+json">).

   Place: top podstron (NIE home), pod sticky header — `template-parts/components/breadcrumbs.php`.
   Tokens: --graphite, --blue-dark, --space-*, --transition-fast.
   ============================================================ */

.breadcrumbs {
	padding-block: var(--space-16);
	font-size: var(--text-label);            /* 14px — subtle, secondary nav */
}

.breadcrumbs__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-8);
	align-items: center;
}

.breadcrumbs__item {
	display: flex;
	align-items: center;
	gap: var(--space-8);
	color: var(--graphite);
	opacity: 0.85;
}

/* Separator " › " (chevron right) wstawiany przed każdym itemem prócz pierwszego.
   Decoration (NIE w semantic markup), aria-hidden via CSS content. */
.breadcrumbs__item + .breadcrumbs__item::before {
	content: "›";
	color: var(--graphite);
	opacity: 0.5;
	font-size: var(--text-body);
	line-height: 1;
	padding-inline-end: 0;
	transform: translateY(-1px);   /* glif › siedzi nisko w boxie — optyczne zrównanie z tekstem (user 2026-07-24) */
}

/* Link — clickable ancestors */
.breadcrumbs__link {
	color: var(--blue);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color var(--transition-fast), color var(--transition-fast);
}
.breadcrumbs__link:hover,
.breadcrumbs__link:focus-visible {
	color: var(--blue);
	border-bottom-color: currentColor;
}

/* Current page — bez linku, semantic emphasis via aria-current="page" */
.breadcrumbs__current {
	color: var(--graphite);
	font-weight: 600;
	opacity: 1;
}

/* Wariant: wciągnięte w ciemny hero — jasny tekst na ciemnym tle (styl agru.at).
   Markup renderowany WEWNĄTRZ .container hero (bez własnego wrappera).
   Wyrównanie dziedziczone z .container; oddech do eyebrow przez margin-bottom. */
.breadcrumbs--hero {
	padding-block: 0;
}
.breadcrumbs--hero .breadcrumbs__item {
	color: color-mix(in srgb, var(--white) 85%, transparent);
}
.breadcrumbs--hero .breadcrumbs__item + .breadcrumbs__item::before {
	color: var(--white);
	opacity: 0.55;
}
.breadcrumbs--hero .breadcrumbs__link {
	color: var(--white);
}
.breadcrumbs--hero .breadcrumbs__link:hover,
.breadcrumbs--hero .breadcrumbs__link:focus-visible {
	color: var(--blue-light);
	border-bottom-color: currentColor;
}
.breadcrumbs--hero .breadcrumbs__current {
	color: var(--white);
}

/* Mobile: kompaktnijsze padding + smaller separator */
@media (max-width: 767px) {
	.breadcrumbs {
		padding-block: var(--space-8);
		font-size: var(--text-label);       /* 13px */
	}
	/* Parent-only (Baymard, decyzja 2026-07-22): mobile pokazuje TYLKO poziom nadrzędny
	   jako „‹ Kategoria" — skok w górę to jedyna realna rola okruszków na telefonie;
	   pełna ścieżka (i JSON-LD BreadcrumbList) bez zmian na desktop/SEO. */
	.breadcrumbs__item { display: none; }
	.breadcrumbs__item:nth-last-child(2) { display: flex; align-items: center; }   /* chevron (16px) i tekst (14px) na wspólnej osi — user 2026-07-24 */
	.breadcrumbs__link { font-weight: 500; }   /* mobile: okruszek w roli eyebrow — mocniejszy (user 2026-07-24) */
	.breadcrumbs__item:nth-last-child(2)::before {
		content: "\2039";                   /* ‹ — konwencja „w górę", nie separator */
		opacity: 0.5;
		font-size: var(--text-body);
		line-height: 1;
		transform: translateY(-1px);        /* optyczne zrównanie glifu z tekstem */
	}
	/* W hero (wariant 'hero', dowolna strona): okruszek w roli eyebrow — blue-light
	   zamiast bazowego white .breadcrumbs--hero, sitewide (bylo 4x powielone per-strona). */
	.breadcrumbs--hero .breadcrumbs__link,
	.breadcrumbs--hero .breadcrumbs__item:nth-last-child(2)::before {
		color: var(--blue-light);
	}
}