/* Shared start for public overview and detail heroes at every breakpoint. */
:root{--main-page-hero-top:48px;--main-page-breadcrumb-gap:8px}
@media(max-width:800px){:root{--main-page-hero-top:32px;--main-page-breadcrumb-gap:4px}}
@media(max-width:560px){:root{--main-page-hero-top:24px;--main-page-breadcrumb-gap:1px}}
.main-page-hero.main-page-hero{padding-top:var(--main-page-hero-top);position:relative}
.main-page-hero .main-page-intro{align-self:start}

/* Keep preceding breadcrumbs inside the shared top space, above the label.
   Their DOM order, typography and links remain intact. */
.main-page-hero .main-page-breadcrumb{position:absolute;top:calc(var(--main-page-hero-top) - 1.6em - var(--main-page-breadcrumb-gap));margin-top:0;margin-bottom:0;min-height:0;line-height:1.6}

/* Compact overviews share the same label start as all public heroes. */
:root{--main-page-hero-overview-padding:48px;--main-page-hero-photo-gap:32px;--main-page-hero-overview-min:284px}
.main-page-hero.main-page-hero--overview{display:flex;align-items:flex-start;padding-block:var(--main-page-hero-top) var(--main-page-hero-overview-padding);min-height:var(--main-page-hero-overview-min);background:#f3f3f3}
.main-page-hero--overview > .wrap{align-self:auto;margin-block:0;display:flow-root}
.main-page-hero--overview > .wrap > :last-child{margin-bottom:0}
.main-page-hero--overview + .main-page-hero-photo{padding-top:var(--main-page-hero-photo-gap)}
@media(max-width:800px){:root{--main-page-hero-overview-padding:32px;--main-page-hero-overview-min:320px}}
@media(max-width:560px){:root{--main-page-hero-overview-padding:24px;--main-page-hero-photo-gap:24px;--main-page-hero-overview-min:400px}}
@media(max-width:360px){:root{--main-page-hero-overview-min:456px}}