/* breadcrumb — site-hierarchy trail. Styling ported from the amp-2024 AEM
 * breadcrumb (critical CSS) and Figma node 1911:74620: blue underlined links
 * (Open Sans 600, 14/20), a slate non-link "active" current page, and small
 * chevron separators. Full-bleed white band that sits above the article body.
 * Horizontal rhythm matches .article-layout so the trail lines up with the
 * page content. */

.breadcrumb.block {
  background: var(--amp-bg, #fff);
}

.breadcrumb.block[hidden] {
  display: none;
}

.breadcrumb .breadcrumb-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-6);
  width: 100%;
  max-width: var(--content-max-width, 1248px);
  margin: 0 auto;
  padding: var(--spacing-12) var(--spacing-16);
  list-style: none;
}

.breadcrumb .breadcrumb-item {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-6);
}

.breadcrumb .breadcrumb-item a {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-6);
  color: var(--amp-ultramarine, #0018f0);
  font-family: var(--body-font-family);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-600);
  line-height: var(--line-height-20);
  text-decoration: none;
}

.breadcrumb .breadcrumb-item a span {
  text-decoration: underline;
  text-decoration-color: currentcolor;
  text-decoration-thickness: 1px;
  text-underline-offset: 1.5px;
}

.breadcrumb .breadcrumb-item a:hover {
  color: var(--amp-ultramarine-hover, #001ac5);
}

/* Chevron separator follows each link; blue to match amp-2024 (where the
   chevron sits inside the link) and the Figma vector stroke (#0018F0). */
.breadcrumb .breadcrumb-chevron {
  flex: 0 0 auto;
  width: var(--spacing-16);
  height: var(--spacing-16);
  color: var(--amp-ultramarine, #0018f0);
}

/* Current page: slate, no link, no underline (Figma active state). */
.breadcrumb .breadcrumb-item-active {
  color: var(--amp-slate, #4c617a);
  font-family: var(--body-font-family);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-600);
  line-height: var(--line-height-20);
}

/* Desktop shows the full trail; mobile shows only the parent back-link. */
.breadcrumb .breadcrumb-wrapper-desktop {
  display: none;
}

/* Mobile wrapper sits in a full-bleed (zero-padding) section, so its 100% width
   spans the viewport; border-box keeps the 16px side padding inside that width
   instead of adding to it (which pushed the band 32px past the viewport and
   caused horizontal scroll). Scoped to the mobile element only so the desktop
   trail's content-box geometry — and its alignment with the article rail — is
   untouched. */
.breadcrumb .breadcrumb-wrapper-mobile {
  box-sizing: border-box;
}

.breadcrumb .breadcrumb-wrapper-mobile .breadcrumb-item-mobile a {
  gap: var(--spacing-8);
  color: var(--amp-ultramarine, #0018f0);
}

@media (width >= 1024px) {
  .breadcrumb .breadcrumb-wrapper {
    gap: var(--spacing-10);
    width: min(var(--content-max-width, 1248px), 100% - 64px);
    padding: var(--spacing-18) 0;
  }

  .breadcrumb .breadcrumb-wrapper-desktop {
    display: flex;
  }

  .breadcrumb .breadcrumb-wrapper-mobile {
    display: none;
  }
}