/* ═══════════════════════════════════════════════════════════════════════════
   Breadcrumbs (#27) — навігаційний ланцюжок.

   Розмітка: nav.breadcrumbs[aria-label] > ol.breadcrumbs__list > li.breadcrumbs__item.
   Проміжні елементи — .breadcrumbs__link (<a>); ОСТАННІЙ — .breadcrumbs__current
   (<span> з aria-current="page"), не посилання.

   Роздільники — лише CSS (chevron у mask на ::before), у розмітці їх НЕМАЄ:
   так скрінрідер не озвучує «greater-than» між пунктами.

   Нових токенів не потрібно — semantic-шар покриває кольори й розміри.
   ═══════════════════════════════════════════════════════════════════════════ */

.breadcrumbs {
  font-family: var(--uris-font-family-body);
  font-size: var(--uris-text-sm-size);
  line-height: var(--uris-text-sm-line);
}

.breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--uris-spacing-1) var(--uris-spacing-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.breadcrumbs__item {
  display: inline-flex;
  align-items: center;
  min-width: 0; /* дозволяє стискати item для truncation */
}

/* ── Роздільник: chevron-right перед кожним item, окрім першого ─────────────
   SVG у mask задає лише форму (альфа); колір — background-color з токена.
   Декоративний: pseudo-елемент не потрапляє в accessibility-дерево. */
.breadcrumbs__item + .breadcrumbs__item::before {
  content: "";
  flex-shrink: 0;
  width: var(--uris-spacing-4);
  height: var(--uris-spacing-4);
  margin-inline-end: var(--uris-spacing-2);
  background-color: var(--uris-color-semantic-text-muted);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M6 3.5l4 4.5-4 4.5' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M6 3.5l4 4.5-4 4.5' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* ── Посилання (ghost-стиль: підкреслення лише на hover) ────────────────────
   Контекст nav повідомляє про інтерактивність → WCAG 1.4.1 дотримано. */
.breadcrumbs__link {
  display: inline-flex;
  align-items: center;
  gap: var(--uris-spacing-1);
  min-width: 0;
  /* Тач-таргет: висота ≥44px без зміни візуального рядка (аудит #11, 2026-07-02) */
  min-block-size: 44px;
  color: var(--uris-component-breadcrumbs-text);
  text-decoration: none;
  border-radius: var(--uris-radius-sm);
  transition:
    color  var(--uris-duration-fast) var(--uris-ease-default),
    filter var(--uris-duration-fast) var(--uris-ease-default);
}

.breadcrumbs__link:hover {
  text-decoration: underline;
  text-underline-offset: 0.15em;
  filter: brightness(0.8);
}

.breadcrumbs__link:active {
  filter: brightness(0.65);
}
/* focus-visible: глобальне кільце фокуса — _shared/utilities.css */

/* ── Поточна сторінка — НЕ посилання ───────────────────────────────────────── */
.breadcrumbs__current {
  display: inline-flex;
  align-items: center;
  gap: var(--uris-spacing-1);
  min-width: 0;
  color: var(--uris-component-breadcrumbs-text);
  font-weight: var(--uris-font-weight-medium);
}

/* ── Іконка (напр., «дім» у першому пункті) ─────────────────────────────────── */
.breadcrumbs__icon {
  flex-shrink: 0;
  width: 1em;
  height: 1em;
}

/* ── Скорочення довгого шляху ───────────────────────────────────────────────
   Статичний «…»: неінтерактивна заглушка прихованих рівнів. */
.breadcrumbs__ellipsis {
  color: var(--uris-component-breadcrumbs-text);
  user-select: none;
}

/* ── Опційне розкриття «…» через нативний <details> — без JS ────────────────── */
.breadcrumbs__more {
  display: inline-flex;
  align-items: center;
}

/* Підсумок-тригер виглядає як «…»; маркер-трикутник прибрано */
.breadcrumbs__more-toggle {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--uris-spacing-1);
  color: var(--uris-component-breadcrumbs-text);
  border-radius: var(--uris-radius-sm);
  cursor: pointer;
  list-style: none;
}

.breadcrumbs__more-toggle::-webkit-details-marker { display: none; }

.breadcrumbs__more-toggle:hover { filter: brightness(0.8); }

/* Розкритий список прихованих рівнів — inline-ланцюжок із власними роздільниками */
.breadcrumbs__more-list {
  display: none;
}

.breadcrumbs__more[open] .breadcrumbs__more-list {
  display: inline-flex;
  align-items: center;
  gap: var(--uris-spacing-1) var(--uris-spacing-2);
  margin-inline-start: var(--uris-spacing-2);
}

/* Роздільник усередині розкритого списку — той самий chevron перед кожним
   посиланням (зокрема провідний, що сполучає «…» з першим прихованим рівнем) */
.breadcrumbs__more-list .breadcrumbs__link::before {
  content: "";
  flex-shrink: 0;
  width: var(--uris-spacing-4);
  height: var(--uris-spacing-4);
  margin-inline-end: var(--uris-spacing-2);
  background-color: var(--uris-color-semantic-text-muted);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M6 3.5l4 4.5-4 4.5' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M6 3.5l4 4.5-4 4.5' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* ── Reduced motion ────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .breadcrumbs__link { transition: none; }
}