/* ==========================================================================
   Breadcrumb Component – CAAT Design System
   ========================================================================== */

.caat-breadcrumb {
  font-family: var(--caat-font-primary);
  font-size: var(--caat-font-size-xs);
  /* Chevron is THE separator — single variant by decision (slash and
     deep-page truncated variants removed). */
  --bs-breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='%236c757d'/%3E%3C/svg%3E");
}

.caat-breadcrumb .breadcrumb {
  background: transparent;
  padding: 0;
  margin-bottom: 0;
}

.caat-breadcrumb .breadcrumb-item a {
  color: var(--caat-color-text-link);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.15s ease;
}

.caat-breadcrumb .breadcrumb-item a:hover,
.caat-breadcrumb .breadcrumb-item a.is-hover {
  color: var(--caat-color-text-link-hover);
  text-decoration: underline;
}

.caat-breadcrumb .breadcrumb-item a:focus-visible,
.caat-breadcrumb .breadcrumb-item a.is-focus {
  outline: 0;
  box-shadow: var(--caat-color-focus-ring);
  border-radius: 2px;
}

.caat-breadcrumb .breadcrumb-item.active {
  color: var(--caat-color-text-muted);
  font-weight: 400;
}

/* --- Item length cap: 30 characters ---
   Labels longer than 30ch truncate with an ellipsis. Server-side
   rendering also caps at 30 chars; this rule is the CSS guarantee.
   The full label stays available via the title attribute. */
.caat-breadcrumb .breadcrumb-item a,
.caat-breadcrumb .breadcrumb-item.active {
  display: inline-block;
  max-width: 30ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

/* --- Responsive --- */
@media (max-width: 575.98px) {
  .caat-breadcrumb .breadcrumb {
    flex-wrap: nowrap;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .caat-breadcrumb .breadcrumb::-webkit-scrollbar {
    display: none;
  }
}