/* ============================================================
   breadcrumb.css - 面包屑导航组件
   
   用途: 页面层级导航
   依赖: core/tokens.css
   ============================================================ */

.pb-breadcrumb {
  min-height: 48px; /* R14: CLS fix - 防止字体加载后高度变化 */
  max-width: var(--container-xl);
  margin-inline: auto;
  padding: var(--space-4);
  background-color: var(--color-bg-secondary);
  border-bottom: var(--space-px) solid var(--color-border);
}

.pb-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--font-size-sm);
  line-height: 1.5; /* R14: CLS fix - 固定行高防止字体加载抖动 */
  min-height: 24px; /* R14: CLS fix - 固定最小高度 */
}

.pb-breadcrumb__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.pb-breadcrumb__item:not(:last-child)::after {
  content: '/';
  display: inline-block;
  width: 8px; /* R14: CLS fix - 固定分隔符宽度 */
  text-align: center;
  color: var(--color-text-muted);
}

.pb-breadcrumb__link {
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color var(--duration-150) var(--easing-in-out);
}

.pb-breadcrumb__link:hover {
  color: var(--color-primary);
}

.pb-breadcrumb__current {
  color: var(--color-text);
  font-weight: var(--font-weight-medium);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 200px;
}

/* ============================================================
   Responsive - 768px+
   ============================================================ */
@media (min-width: 768px) {
  .pb-breadcrumb {
    padding: var(--space-4) var(--space-6);
  }

  .pb-breadcrumb__current {
    max-width: 400px;
  }
}

/* ============================================================
   Responsive - 1024px+
   ============================================================ */
@media (min-width: 1024px) {
  .pb-breadcrumb {
    padding: var(--space-4) var(--space-8);
  }
}