/*
 * Page Hero
 * Part: template-parts/page-hero.php
 * Auto-enqueued by functions.php after css/theme.css.
 *
 * Default: centred heading and intro. The "hub" variant (members area)
 * borrows the homepage hero: left-aligned copy, the dark motif bleeding off
 * the right edge and the curved divider (same path as main-hero.css) into
 * the section below.
 *
 * With an image (.page-hero--image, Knowledge Hub and its archives) the faint
 * motif is replaced by a photo clipped to the solid clover in
 * assets/graphics/motif-mask.svg. It sits in a second grid column beside the
 * copy, runs off the right edge, and the band grows to fit it.
 */

.page-hero {
    padding-block: var(--space-3xl);
    color: var(--color-contrast);
    background-color: var(--color-primary);
    text-align: center;
}

.page-hero__heading {
    margin: 0;
    color: var(--color-background);
}

/* Same size and weight as the homepage hero subheading (main-hero.css). */
.page-hero__intro {
    max-width: 60rem;
    margin: var(--space-md) auto 0;
    font-size: var(--text-1);
    font-weight: var(--font-regular);
}

.page-hero__intro p {
    margin: 0;
}

/* --- Hub variant --------------------------------------------------------- */

.page-hero--hub {
    --motif-size: 40rem;
    position: relative;
    z-index: 1;
    padding-block: var(--space-2xl) var(--space-xl);
    text-align: left;
}

/*
 * Motif layer: fills the band and clips the motif to it. The band itself
 * cannot clip, or the divider hanging below it would be hidden too.
 */
.page-hero__motif {
    position: absolute;
    inset: 0;
    overflow: clip;
    pointer-events: none;
}

/* Dark motif: right edge, vertically centred, its lower petals running off under the divider. */
.page-hero__motif::before {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: var(--motif-size);
    height: var(--motif-size);
    translate: 10% -45%;
    background: url('../../assets/graphics/motif-lg-dark.svg') center / contain no-repeat;
}

.page-hero--hub > .container {
    position: relative;
}

.page-hero--hub .page-hero__content {
    max-width: 40rem;
}

.page-hero--hub .page-hero__intro {
    margin-inline: 0;
}

/* --- Hub variant with a clover-masked photo -------------------------------- */

/*
 * The band keeps its natural height (with a floor) and the clover is cropped
 * to it, so a large photo never makes the hero taller. Copy stays clear of the
 * clover by capping the content column at 42% of the container.
 */
.page-hero--image {
    --hero-min-h: clamp(18rem, 26vw, 24rem);
    padding-block: var(--space-xl);
}

.page-hero--image > .container {
    display: grid;
    align-content: center;
    min-height: calc(var(--hero-min-h) - 2 * var(--space-xl));
}

.page-hero--image .page-hero__content {
    max-width: min(40rem, 42%);
}

/*
 * Photo layer: covers the band plus the divider hanging below it, and is
 * masked to that outline (a rectangle over the band, the divider curve
 * beneath) so the photo follows the curve instead of stopping in a hard line
 * where the band ends. Nothing here is interactive.
 */
.page-hero__image {
    --hero-inner: min(100% - 2 * var(--space-md), 90rem);
    position: absolute;
    inset: 0 0 calc(-1 * var(--divider-h)) 0;
    z-index: 1; /* above the divider (painted later in the DOM), below the copy */
    pointer-events: none;
    -webkit-mask:
        linear-gradient(#000, #000) top / 100% calc(100% - var(--divider-h)) no-repeat,
        url('../../assets/graphics/hero-divider-mask.svg') bottom / 100% var(--divider-h) no-repeat;
    mask:
        linear-gradient(#000, #000) top / 100% calc(100% - var(--divider-h)) no-repeat,
        url('../../assets/graphics/hero-divider-mask.svg') bottom / 100% var(--divider-h) no-repeat;
}

/* Wash over the photo: brand green pulled towards the dark text green, mostly opaque. */
.page-hero__image {
    --hero-wash: color-mix(in srgb, color-mix(in srgb, var(--color-primary) 55%, var(--color-text)) 72%, transparent);
}

/*
 * The clover: two-thirds of the band wide, centred on the band, starting just
 * past the copy column (44% into the container) and running off the right.
 * A heavy wash of the brand green sits over the photo so it reads as a dark,
 * tonal texture rather than a bright picture; the mask is the clover from
 * motif-lg.svg at full opacity.
 */
.page-hero__image::before {
    content: "";
    position: absolute;
    top: calc((100% - var(--divider-h)) / 2);
    left: calc(50% - var(--hero-inner) / 2 + var(--hero-inner) * 0.44);
    width: 66%;
    aspect-ratio: 1;
    translate: 0 -50%;
    background:
        linear-gradient(var(--hero-wash), var(--hero-wash)),
        var(--hero-image) center / cover no-repeat;
    -webkit-mask: url('../../assets/graphics/motif-mask.svg') center / contain no-repeat;
    mask: url('../../assets/graphics/motif-mask.svg') center / contain no-repeat;
}

/* Copy sits above the photo layer. */
.page-hero--image > .container {
    z-index: 2;
}

/* Curved divider below the band, in the hero colour so it overlaps the next section. */
.page-hero__divider {
    display: block;
    position: absolute;
    z-index: 0;
    top: 100%;
    left: 0;
    width: 100%;
    height: var(--divider-h);
    color: var(--color-primary);
}

/* Whatever follows (a section, or <main> wrapping one) pads down past the divider. */
.page-hero--hub + * {
    --section-offset: var(--divider-h);
}

/* --- Responsive ---------------------------------------------------------- */

@media screen and (max-width: 768px) {

    .page-hero {
        padding-block: var(--space-2xl);
    }

    .page-hero--hub {
        --motif-size: 22rem;
        padding-block: var(--space-xl) var(--space-lg);
    }

    .page-hero__motif::before {
        top: auto;
        bottom: 0;
        translate: 25% 35%;
    }

    /*
     * Copy takes the full width. The band reserves a strip below it where the
     * upper half of the clover shows: its centre sits on the band's bottom edge.
     */
    .page-hero--image {
        --hero-min-h: 0px;
        --clover-w: min(100vw, 30rem);
        padding-block: var(--space-xl) calc(var(--space-lg) + var(--clover-w) * 0.42);
    }

    .page-hero--image .page-hero__content {
        max-width: none;
    }

    .page-hero__image::before {
        top: auto;
        bottom: calc(var(--divider-h) - var(--clover-w) / 2);
        left: 40%;
        width: var(--clover-w);
        translate: none;
    }

}