/* assets/css/components/breadcrumb.css
 * @layer components — .breadcrumb BEM block
 * ════════════════════════════════════════════════════════════════════
 * Wayfinding trail. Slash, chevron, and dark variants.
 * ════════════════════════════════════════════════════════════════════ */

@layer components {

  .breadcrumb {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .breadcrumb__item {
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    color: var(--text-link);
    text-decoration: none;
  }
  .breadcrumb__item:hover {
    color: var(--text-link-hover);
    text-decoration: underline;
  }

  .breadcrumb__item--current {
    color: var(--text-muted);
    pointer-events: none;
  }

  .breadcrumb__separator {
    width: 0.75rem;
    height: 0.75rem;
    color: var(--text-subtle);
    flex-shrink: 0;
  }

  /* Slash variant — text separator instead of icon */
  .breadcrumb--slash .breadcrumb__separator {
    width: auto;
    height: auto;
    font-size: var(--text-xs);
  }

  /* Dark variant — for hero overlays */
  .breadcrumb--dark .breadcrumb__item {
    color: oklch(100% 0 0 / 67%);
  }
  .breadcrumb--dark .breadcrumb__item:hover {
    color: oklch(100% 0 0 / 90%);
  }
  .breadcrumb--dark .breadcrumb__item--current {
    color: oklch(100% 0 0 / 40%);
  }
  .breadcrumb--dark .breadcrumb__separator {
    color: oklch(100% 0 0 / 33%);
  }

}