/* ============================================================
   BREADCRUMB — globaali komponentti
   Käyttö: <?php $crumbs = [...]; include 'partials/breadcrumb.php'; ?>
   ============================================================ */

/* Heron murupolku on joka sivulla samassa kohdassa ja sisällölle jää sama ilma.
   Sivun hero-CSS ei säädä näitä; poikkeava margin-top kerrotaan --crumb-offsetilla. */
:root {
  --crumb-top: 160px;
  --crumb-gap: 64px;
}
@media (max-width: 768px) {
  :root {
    --crumb-top: 144px;
    --crumb-gap: 36px;
  }
}
section:has(> .container > .breadcrumb:first-child) {
  padding-top: calc(var(--crumb-top) - var(--crumb-offset, 0px));
}
.breadcrumb:first-child + * { margin-top: 0; }

.breadcrumb {
  margin-bottom: var(--crumb-gap);
  position: relative;
  z-index: 2;
  --breadcrumb-link: var(--navy, #2d3a7d);
  --breadcrumb-current: #4b5563;
  --breadcrumb-hover: #b6005d;
  --breadcrumb-separator: var(--border, #d8dce8);
}
.breadcrumb--dark {
  --breadcrumb-link: #ffffff;
  --breadcrumb-current: var(--navy-100, #d5daed);
  --breadcrumb-hover: var(--pink-soft, #ffb3d9);
  --breadcrumb-separator: rgba(255, 255, 255, 0.65);
}
.breadcrumb ol {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
}
.breadcrumb li {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--breadcrumb-current);
  font-weight: 600;
}
.breadcrumb li::after {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--breadcrumb-separator);
  flex-shrink: 0;
}
.breadcrumb li:last-child::after { display: none; }
.breadcrumb a {
  color: var(--breadcrumb-link);
  transition: color 0.2s;
}
.breadcrumb a:hover { color: var(--breadcrumb-hover); }
.breadcrumb li:last-child {
  color: var(--breadcrumb-current);
  font-weight: 500;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}