/* Breadcrumb trail — sitewide component used on every detail page
 * (APTED, NewsItem, ProjectItem, CareersApply). The companion JSON-LD
 * BreadcrumbList lives in {% block structured_data %}.
 *
 * Tokens — text-muted for inactive crumbs, text-heading-strong for the
 * current page, --interactive on hover. All values flow through base.css.
 */

.breadcrumb-trail {
  width: 100%;
  font-size: 14px;
  margin-bottom: 16px;
  margin-top: 4px;
}

.breadcrumb-trail__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.breadcrumb-trail__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* Last crumb (the current page) overflows on narrow viewports —
     clamp to one line with ellipsis so the trail stays one row. */
  max-width: 100%;
}

.breadcrumb-trail__item--current .breadcrumb-trail__current {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.breadcrumb-trail__link {
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.15s ease;
}

.breadcrumb-trail__link:hover,
.breadcrumb-trail__link:focus-visible {
  color: var(--interactive);
  text-decoration: underline;
}

.breadcrumb-trail__current {
  color: var(--text-heading-strong);
  font-weight: 500;
}

.breadcrumb-trail__sep {
  color: var(--border-default);
  user-select: none;
}

@media (max-width: 450px) {
  .breadcrumb-trail {
    font-size: 12px;
    margin-bottom: 12px;
  }
}