/*
 * Component: Breadcrumb
 * Depends on: tokens.css
 */

.breadcrumb {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 2px;
}

.breadcrumb a {
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.breadcrumb a:hover { color: var(--color-primary); }

/* Desktop only on single posts (class sp-breadcrumb-desk hides on mobile) */
.sp-breadcrumb-desk {
  display: block;
}

@media (max-width: 600px) {
  .sp-breadcrumb-desk { display: none; }
}