/**
 * breadcrumbs.css — okruszki nad nagłówkiem podstrony.
 *
 * KOMPONENT (reguła 18): przepis skopiowany z product-hero.css (sekcja
 * „Okruszki", 2026-08-30) — czwarte wystąpienie po product-hero, koszyku
 * i koncie. Od 2026-08-31 kanoniczny zapis jest tutaj; trzy wcześniejsze
 * kopie zostają na miejscu jako kandydaci do migracji (raport zadania).
 *
 * Wymaga tokens.css i base.css. Znacznik: template-parts/components/breadcrumbs.php.
 *
 * Makieta podstron: 12,5 px #9a958a, gap 8, separator „›" złoty, bieżąca
 * strona #5a5a5a 600, margines 28 pod spodem. Scalenia (reguła 15):
 * 12,5 → --dc-text-sm; #9a958a → --dc-text-subtle; separator z makiety
 * podstron to „›" — product-hero rysuje „/"; wygrywa PROJEKT (jeden zapis
 * okruszków w motywie), więc zostaje „/" w --dc-text-subtle 50 %.
 */

.dc-breadcrumbs {
  margin-block-end: var(--dc-space-28);
}

.dc-breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--dc-space-8);
  font-size: var(--dc-text-sm);
  color: var(--dc-text-subtle);
}

.dc-breadcrumbs__item {
  display: inline-flex;
  align-items: center;
  gap: var(--dc-space-8);
}

/* Separator rysowany ::before, żeby nie mnożyć znaczników; kolor to
   --dc-text-subtle w połowie krycia (jak w product-hero). */
.dc-breadcrumbs__item + .dc-breadcrumbs__item::before {
  content: '/';
  color: color-mix(in srgb, var(--dc-text-subtle) 50%, transparent);
}

/* base.css daje każdemu <a> złoto i podkreślenie — okruszek jest szary
   i bez kreski; najazd kolorem do --dc-text (C.2). */
.dc-breadcrumbs__link {
  color: var(--dc-text-subtle);
  text-decoration: none;
  transition: color var(--dc-duration-base) var(--dc-ease);
}

.dc-breadcrumbs__link:hover {
  color: var(--dc-text);
}

.dc-breadcrumbs__current {
  color: var(--dc-text);
  font-weight: var(--dc-weight-medium);
}