/* One breadcrumb layout for every opening. Keep the complete trail in flow:
   long labels may wrap and the content below must reserve their actual height. */
:root {
  --site-breadcrumb-limit: var(--container, 1240px);
  --site-breadcrumb-space: 56px;
  --site-breadcrumb-top: calc(var(--site-header-clearance, 96px) + 8px);
  --site-breadcrumb-margin: 0px;
}
@media (max-width: 900px) {
  :root { --site-breadcrumb-limit: 820px; --site-breadcrumb-space: 28px; }
}
@media (max-width: 640px) {
  :root { --site-breadcrumb-space: 24px; }
}
@media (max-width: 370px) {
  :root { --site-breadcrumb-space: 20px; }
}
@media (max-width: 900px) and (max-height: 480px) and (orientation: landscape) {
  :root { --site-breadcrumb-limit: var(--container, 1240px); --site-breadcrumb-space: 32px; }
}
@media screen and (440px <= width < 700px) and (max-height: 360px),
       screen and (width < 440px) and (max-height: 560px),
       screen and (width < 320px) and (max-height: 700px) {
  :root { --site-breadcrumb-top: var(--site-header-clearance, 90px); }
}
@media screen and (pointer: coarse) and (440px <= width < 700px) and (max-height: 360px) {
  :root { --site-breadcrumb-margin: -8px; }
}
html:not(.js-enabled) {
  --site-breadcrumb-top: 24px;
  --site-breadcrumb-margin: 0px;
}

@media screen {
  /* Synchronize the variables used by each layout's remaining-height calculation,
     as well as its padding. Local compact rules must not shift individual trails. */
  body.site-white[data-page] main :is(.standard-hero, .case-hero, .portfolio-opening, .guide-hero--cover, .gbp-hero) {
    --breadcrumb-opening-top: var(--site-breadcrumb-top) !important;
    --guide-cover-top: var(--site-breadcrumb-top) !important;
    --gbp-opening-top: var(--site-breadcrumb-top) !important;
    padding-top: var(--site-breadcrumb-top) !important;
  }
  body.site-white[data-page] main :is(.standard-hero, .guide-hero--cover, .gbp-hero) > .container:has(> .breadcrumb-nav) {
    width: min(var(--site-breadcrumb-limit), calc(100% - var(--site-breadcrumb-space))) !important;
    max-width: none;
    min-width: 0;
  }
  /* The brief keeps its original reading width; only its breadcrumb uses the
     shared page alignment. This also leaves the form below at the same width. */
  body.site-white[data-page] main .standard-hero--brief {
    --brief-content-space: 56px;
    container-type: inline-size;
  }
  @media (max-width: 900px) {
    body.site-white[data-page] main .standard-hero--brief { --brief-content-space: 32px; }
  }
  @media (max-width: 640px) {
    body.site-white[data-page] main .standard-hero--brief { --brief-content-space: 28px; }
  }
  body.site-white[data-page] main .standard-hero--brief > .container > .standard-hero-content {
    width: min(100%, 960px);
    width: min(960px, calc(100cqi - var(--brief-content-space)));
    justify-self: center;
    margin-inline: 0;
  }
  body.site-white[data-page] main .breadcrumb-nav {
    width: 100%;
    max-width: none;
    min-width: 0;
    height: auto;
    align-self: start;
    justify-self: center;
    margin: var(--site-breadcrumb-margin) 0 0 !important;
    padding: 0;
    overflow: visible;
    font-size: .875rem !important;
    line-height: 1.6;
  }
  /* Supersede the older standard-hero important margins, including its touch
     exception, so directory pages and the no-script fallback use the same gap. */
  body.site-white.site-refined[data-page]:not([data-page="home"]) main .standard-hero > .container > .breadcrumb-nav {
    margin: var(--site-breadcrumb-margin) 0 0 !important;
  }
  /* Project and portfolio content keep their wider layout. Recover the section's
     real width from its gutter, excluding the browser's scrollbar. */
  body.site-white[data-page] main .case-hero .breadcrumb-nav {
    width: min(var(--site-breadcrumb-limit), calc(100% + var(--case-inline-space) - var(--site-breadcrumb-space)));
  }
  body.site-white[data-page] main .portfolio-opening .breadcrumb-nav {
    width: min(var(--site-breadcrumb-limit), calc(100% + var(--portfolio-inline-space) - var(--site-breadcrumb-space)));
  }
  @media (max-width: 700px) {
    body.site-white[data-page] main .breadcrumb-nav { font-size: .75rem !important; }
  }
}

/* Inline flow lets the current title continue after its ancestors instead of
   reserving an entire flex row, including on short landscape screens. */
body.site-white[data-page] main .breadcrumb-nav > .breadcrumb-list {
  display: block !important;
  width: 100%;
  margin: 0;
  padding: 0;
  font: inherit !important;
  list-style: none;
}
body.site-white[data-page] main .breadcrumb-list > li {
  display: inline !important;
  margin: 0;
  padding: 0;
  font: inherit;
}
body.site-white[data-page] main .breadcrumb-list > li + li { margin-inline-start: .35em; }
body.site-white[data-page] main .breadcrumb-list :is(a, .breadcrumb-current) {
  display: inline !important;
  max-width: 100%;
  padding: 3px 0;
  font: inherit !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
  text-overflow: clip;
}
body.site-white[data-page] main .breadcrumb-list .word-unit {
  white-space: nowrap !important;
  overflow-wrap: normal !important;
}
body.site-white[data-page] main .breadcrumb-list .breadcrumb-separator {
  display: inline-flex !important;
  margin: 0 .4em 0 0;
  vertical-align: middle;
}
body.site-white[data-page] main .breadcrumb-list a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  border-radius: 2px;
}
@media print {
  body.site-white[data-page] main .breadcrumb-nav {
    width: 100% !important;
    max-width: 100%;
    margin: 0 0 12px !important;
  }
  body.site-white.site-refined[data-page]:not([data-page="home"]) main .standard-hero > .container > .breadcrumb-nav {
    margin: 0 0 12px !important;
  }
}