/* ============================================================
   Metro Breadcrumbs — Premium Design
   Desktop: full pills
   Mobile: auto-collapse + fade mask
============================================================ */
.museum-breadcrumbs{position:relative;overflow:hidden;padding:.6em .8em;border-radius:10px;font-family:'Work Sans',sans-serif}

/* Horizontal layout */
.museum-breadcrumbs ol{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:.5em;overflow-x:hidden;scrollbar-width:none}
.museum-breadcrumbs ol::-webkit-scrollbar{display:none}

/* Fade mask on mobile */
.museum-breadcrumbs::after{content:"";position:absolute;right:0;top:0;width:40px;height:100%;background:linear-gradient(90deg,transparent,#f3f3f3);pointer-events:none}
.museum-breadcrumbs li{display:flex;align-items:center;white-space:nowrap}

/* Pill links */
.museum-breadcrumbs a.museum-crumb{display:inline-flex;align-items:center;gap:.35em;padding:.35em .9em;border-radius:999px;background-color:#0089ce14;color:#0089CE;text-decoration:none;font-weight:500;transition:all .25s ease}
.museum-breadcrumbs a.museum-crumb:hover{background-color:#0089CE;color:#fff}

/* Current crumb */
.museum-crumb-current{font-weight:600;color:#333;padding:.35em .2em}

/* Separator */
.museum-crumb-sep{color:#aaa;font-size:.85em;margin:0 .1em;margin-left:8px;}

/* Home icon */
.museum-breadcrumbs li:first-child a.museum-crumb::before{content:"🏠";font-size:1em;margin-right:.2em}

/* ============================================================
   MOBILE COLLAPSE
============================================================ */
@media (max-width: 640px) {
  .museum-breadcrumbs{padding:.5em .6em}
  .museum-breadcrumbs ol{overflow:hidden;gap:.35em}

  /* Hide every crumb by default */
  .museum-breadcrumbs li{display:none}
  /* Show Home */
  .museum-breadcrumbs li:first-child{display:flex}
  /* Show last 2 crumbs */
  .museum-breadcrumbs li:nth-last-child(-n+2){display:flex}
  /* Hide Home's original separator */
  .museum-breadcrumbs li:first-child .museum-crumb-sep{display:none}
  /* Add mobile ellipsis after Home */
  .museum-breadcrumbs li:first-child::after{content:"› …";margin-left:.4em;color:#999;font-size:.9em}
  /* Make current page truncate nicely */
  .museum-crumb-current{max-width:42vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .museum-breadcrumbs a.museum-crumb{padding:.3em .65em}
  .museum-breadcrumbs::after{display:none}
}