/**
 * Section: Header Breadcrumb
 * Variants: [data-variant="muted"] (default), [data-variant="light"], [data-variant="dark"]
 */

.header-breadcrumb {
  padding-top: var(--space-20);
  padding-bottom: var(--space-14);
  background: var(--color-bg-subtle);
}

.header-breadcrumb[data-variant="light"] { background: var(--color-bg); }
.header-breadcrumb[data-variant="dark"]  { background: var(--color-bg-dark); }

/* ─── Breadcrumbs ────────────────────────────── */

.header-breadcrumb__crumbs ol {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
}

.header-breadcrumb__crumbs li {
  display: flex;
  align-items: center;
}

.header-breadcrumb__link {
  font-size: var(--text-sm);
  color: var(--color-text-subtle);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.header-breadcrumb__link:hover {
  color: var(--color-text);
  text-decoration: none;
}

.header-breadcrumb[data-variant="dark"] .header-breadcrumb__link {
  color: rgba(255, 255, 255, 0.5);
}

.header-breadcrumb[data-variant="dark"] .header-breadcrumb__link:hover {
  color: var(--color-text-on-dark);
}

.header-breadcrumb__sep {
  color: var(--color-text-subtle);
  display: flex;
  align-items: center;
}

.header-breadcrumb__sep svg { width: 12px; height: 12px; }

.header-breadcrumb[data-variant="dark"] .header-breadcrumb__sep {
  color: rgba(255, 255, 255, 0.35);
}

.header-breadcrumb__current {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text);
}

.header-breadcrumb[data-variant="dark"] .header-breadcrumb__current {
  color: var(--color-text-on-dark);
}

/* ─── Inner ──────────────────────────────────── */

.header-breadcrumb__inner {
  max-width: 720px;
}

.header-breadcrumb__heading {
  color: var(--color-text);
  margin-bottom: var(--space-3);
}

.header-breadcrumb[data-variant="dark"] .header-breadcrumb__heading {
  color: var(--color-text-on-dark);
}

.header-breadcrumb__subtext {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--color-text-subtle);
}

.header-breadcrumb[data-variant="dark"] .header-breadcrumb__subtext {
  color: rgba(255, 255, 255, 0.6);
}

/* ─── Responsive ─────────────────────────────── */

@media (max-width: 809px) {
  .header-breadcrumb {
    padding-top: var(--space-14);
    padding-bottom: var(--space-10);
  }
  .header-breadcrumb__subtext { font-size: var(--text-base); }
}