/* Page hero — markup: app/views/partials/page-hero.php */

.page-hero {
    position: relative;
    isolation: isolate;
    display: grid;
    align-items: end;
    min-height: clamp(280px, 34vw, 440px);
    padding-block: var(--s-9) var(--s-8);
    background: var(--ink-900);
    color: var(--c-white);
    overflow: hidden;
}

/* Photo variant: whatever the client uploads sits behind a gradient, so the
   headline stays readable on a bright or a busy image alike. */
.page-hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
}
.page-hero--image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(34, 34, 35, .55) 0%, rgba(34, 34, 35, .88) 100%);
    z-index: -1;
}

.page-hero__inner { position: relative; }

.page-hero__title {
    max-width: 20ch;
    margin-top: var(--s-3);
    font-size: var(--fs-3xl);
    font-weight: 800;
    color: var(--c-white);
}

.page-hero__text {
    max-width: 56ch;
    margin-top: var(--s-4);
    font-size: var(--fs-md);
    color: var(--ink-300);
}

/* The breadcrumb sits on the dark hero, so it takes the inverted palette. */
.page-hero .breadcrumb__item { color: var(--ink-300); }
.page-hero .breadcrumb__item a:hover,
.page-hero .breadcrumb__item [aria-current] { color: var(--c-gold); }