/* ============================================================
   SC/Direction · Хлібні крихти
   figma: node-id=318:72 — полоса 50 с кромкой, разделитель «→»
   ============================================================ */

.sc-dcrumbs {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  min-block-size: var(--sc-crumbs-h); /* 70 — как в блоге и статьях (2026-10-11; в макете 318:72 полоса 50) */
  padding: var(--sc-space-2) var(--sc-pad-x);
  border-block: var(--hairline) solid var(--border);
  background: var(--warm); /* в тон первого экрана и шапки над ним — полоса продолжает hero (2026-10-11) */
  color: var(--sc-neutral-600);
}

.sc-dcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sc-space-1) var(--sc-space-1_5);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Разделитель — в CSS: каждая подпись остаётся цельным узлом (qTranslate) */
.sc-dcrumbs__list li + li::before {
  content: "→";
  margin-inline-end: var(--sc-space-1_5);
}

.sc-dcrumbs__list a {
  color: inherit;
  text-decoration: none;
}

.sc-dcrumbs__list [aria-current] { color: var(--foreground); }

@media (hover: hover) and (pointer: fine) {
  .sc-dcrumbs__list a:hover {
    color: var(--foreground);
    text-decoration: underline;
    text-underline-position: from-font;
  }
}

.sc-dcrumbs__list a:focus-visible {
  outline: var(--sc-focus-w) solid var(--ring);
  outline-offset: var(--sc-focus-offset);
}

/* ---------- Телефон: одна ланка «‹ батьківська сторінка» (2026-10-27) ----------
   Повний ланцюг на вузькому екрані розсипався на три рядки. Як у дизайн-системах
   Queensland Gov і Volvo: лишаємо тільки посилання на рівень вище зі шевроном назад.
   Розмітка та сама (повний <ol> для SEO і BreadcrumbList) — ховає лише CSS */
@media (max-width: 640px) {
  .sc-dcrumbs__list li { display: none; }
  .sc-dcrumbs__list li:nth-last-child(2) { display: block; }

  .sc-dcrumbs__list li:nth-last-child(2)::before { content: none; }

  .sc-dcrumbs__list li:nth-last-child(2) a {
    display: inline-flex;
    align-items: center;
    gap: var(--sc-space-2);
    min-block-size: var(--sc-space-11, 44px); /* тап-зона 44 */
    color: var(--foreground);
  }

  .sc-dcrumbs__list li:nth-last-child(2) a::before {
    content: "";
    inline-size: var(--sc-space-2);
    block-size: var(--sc-space-2);
    border-inline-start: var(--sc-line) solid currentColor;
    border-block-end: var(--sc-line) solid currentColor;
    transform: rotate(45deg);
  }
}