/* =========================
   Breadcrumbs
   ========================= */

.breadcrumbs{
  width: min(1420px, 100%);
  margin: 0 auto;
  padding: 8px var(--pad-x);
  font-size: clamp(13px, 1.2vw, 14px);
  color: #475569; /* slate-600 */
}

.breadcrumbs__list{
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;              /* gap around the separators */
  margin: 0;
  padding: 0;
}

.breadcrumbs__item{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

/* separator */
.breadcrumbs__item + .breadcrumbs__item::before{
  content: "/";
  color: #94a3b8;        /* slate-400 */
  display: inline-block;
}

/* links */
.breadcrumbs a{
  color: #0077b6;
  text-decoration: none;
  font-weight: 600;
}
.breadcrumbs a:hover{ text-decoration: underline; }

/* current page (no link) */
.breadcrumbs [aria-current="page"]{
  color: #0f172a;        /* slate-900 */
  font-weight: 700;
}

/* ---- Modifiers ---- */

/* On dark backgrounds (e.g., over images or #7E7358 pane) */
.breadcrumbs--on-dark{ color: rgba(255,255,255,.85); }
.breadcrumbs--on-dark .breadcrumbs__item + .breadcrumbs__item::before{ color: rgba(255,255,255,.55); }
.breadcrumbs--on-dark a{ color:#fff; text-decoration-color: rgba(255,255,255,.7); }
.breadcrumbs--on-dark [aria-current="page"]{ color:#fff; }

/* Collapse middle crumbs on very small screens */
@media (max-width: 480px){
  .breadcrumbs--collapse .breadcrumbs__item:not(:first-child):not(:last-child){
    display: none;
  }
  .breadcrumbs--collapse .breadcrumbs__item:nth-child(2){
    display: inline-flex;
  }
  .breadcrumbs--collapse .breadcrumbs__item:nth-child(2)::after{
    content: "…";
    margin-left: 4px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .breadcrumbs *{ transition:none !important; }
}