/* ==========================================================================
   Component: page header  (<x-site.page-header>)
   --------------------------------------------------------------------------
   One big rounded photo card: breadcrumb pill, H1, intro, actions over a
   plain bottom-up shade.
   ========================================================================== */

.page-header { padding-top: var(--s-2); }
.page-header__card { min-height: clamp(300px, 22vw + 140px, 440px); }

.page-header__crumbs ol {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-1);
    margin-bottom: var(--s-4);
    padding: 0.35em 0.95em;
    border-radius: var(--r-pill);
    background: rgb(16 30 40 / 0.55);
    font-size: var(--fs-xs);
    font-weight: 600;
}
.page-header__crumbs li { display: inline-flex; align-items: center; gap: var(--s-1); }
.page-header__crumbs a:hover { color: var(--lemon); }
.page-header__crumbs span[aria-current] { color: var(--on-dark-soft); }
.page-header__sep { opacity: 0.6; }

.page-header__title { max-width: 18ch; font-size: var(--fs-2xl); color: var(--on-dark); }
.page-header__text  { max-width: 40rem; margin-top: var(--s-3); color: var(--on-dark-soft); font-size: var(--fs-md); }
.page-header__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); }