/* ═══════════════════════════════════════
   BREADCRUMBS — Navigation path
   ═══════════════════════════════════════ */

.y-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--y-space-s);
  font-size: var(--y-font-s);
  color: var(--y-color-text-muted);
  margin-bottom: var(--y-space-xxl);
}

.y-breadcrumb-item {
  display: flex;
  align-items: center;
  gap: var(--y-space-s);
}

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

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

.y-breadcrumb-item.active {
  color: var(--y-color-text);
  font-weight: var(--y-weight-medium);
}

.y-breadcrumb-separator {
  color: var(--y-color-text-muted);
  display: flex;
  align-items: center;
}

.y-breadcrumb-separator i,
.y-breadcrumb-separator svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════
   RESPONSIVE STYLES
   ═══════════════════════════════════════ */

@media (max-width: 1200px) {
  .y-breadcrumb {
    margin-bottom: var(--y-space-l);
  }
}

@media (max-width: 768px) {
  .y-breadcrumb {
    font-size: var(--y-font-xs);
    gap: var(--y-space-xs);
    flex-wrap: wrap;
  }
}

@media (max-width: 480px) {
  .y-breadcrumb {
    margin-bottom: var(--y-space-m);
  }
}