/* Page hero fragment */

.pp-page-hero {
    padding: clamp(4rem, 7vw, 7rem) 0;
    background-color: var(--pp-colour-surface);
    background-image: var(--pp-page-hero-image, none);
    background-position: var(--pp-page-hero-position, center center);
    background-repeat: var(--pp-page-hero-repeat, no-repeat);
    background-size: var(--pp-page-hero-size, cover);
    box-shadow: inset 0 0 0 var(--pp-inner-border-width) var(--pp-inner-border-color);
}

.pp-page-hero--bg-page {
    background-color: var(--pp-colour-page);
}

.pp-page-hero--bg-primary {
    background-color: var(--pp-colour-primary);
}

.pp-page-hero--bg-inverse {
    background-color: var(--pp-colour-inverse);
}

.pp-page-hero--compact {
    padding-block: clamp(3rem, 5vw, 5rem);
}

.pp-page-hero--tight {
    padding-block: clamp(1.75rem, 3vw, 3rem);
}

.pp-page-hero--photo-fade {
    background-image:
        linear-gradient(
            90deg,
            var(--pp-colour-surface) 0%,
            color-mix(in srgb, var(--pp-colour-surface) 96%, transparent) 30%,
            color-mix(in srgb, var(--pp-colour-surface) 70%, transparent) 52%,
            transparent 76%
        ),
        var(--pp-page-hero-image, none);
    background-position: right center;
}

@media (max-width: 767.98px) {
    .pp-page-hero--photo-fade {
        background-image:
            linear-gradient(var(--pp-colour-surface-84), var(--pp-colour-surface-84)),
            var(--pp-page-hero-image, none);
        background-position: right center;
    }
}

.pp-page-hero--photo-underlay {
    background-image:
        linear-gradient(
            color-mix(in srgb, var(--pp-page-hero-background, var(--pp-colour-primary)) 86%, transparent),
            color-mix(in srgb, var(--pp-page-hero-background, var(--pp-colour-primary)) 86%, transparent)
        ),
        var(--pp-page-hero-image, none);
    background-position: var(--pp-page-hero-position, center center);
    background-size: var(--pp-page-hero-size, cover);
}

@media (max-width: 767.98px) {
    .pp-page-hero--photo-underlay {
        background-image:
            linear-gradient(
                color-mix(in srgb, var(--pp-page-hero-background, var(--pp-colour-primary)) 90%, transparent),
                color-mix(in srgb, var(--pp-page-hero-background, var(--pp-colour-primary)) 90%, transparent)
            ),
            var(--pp-page-hero-image, none);
    }
}

@media (min-width: 992px) {
    .pp-page-hero--align-left .row {
        justify-content: flex-start !important;
    }

    .pp-page-hero--narrow .row > div,
    .pp-page-hero--wide .row > div {
        flex: 0 0 100%;
        width: 100%;
    }

    .pp-page-hero--narrow .row > div {
        max-width: 52rem;
    }

    .pp-page-hero--wide .row > div {
        max-width: 72rem;
    }
}

.pp-page-eyebrow {
    color: var(--pp-colour-accent-hover);
    font-size: .85rem;
    font-weight: var(--pp-font-weight-bold);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.pp-page-eyebrow--hand {
    color: var(--pp-colour-primary);
    font-family: var(--pp-font-hand);
    font-size: clamp(1.25rem, 1.8vw, 1.7rem);
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.05;
    text-transform: none;
    transform: rotate(-2deg);
    transform-origin: left center;
}

.pp-page-title {
    font-size: clamp(2.75rem, 5vw, 4.75rem);
    line-height: 1.05;
}

.pp-page-title span {
    display: block;
    color: var(--pp-page-hero-emphasis, var(--pp-colour-accent));
}

.pp-page-lead {
    color: var(--pp-colour-muted);
    font-size: clamp(1.05rem, 1.5vw, 1.25rem);
    line-height: 1.65;
}

.pp-page-hero--inverse {
    background-color: var(--pp-colour-primary);
    color: var(--pp-colour-inverse-85);
}

.pp-page-hero--inverse .pp-page-title,
.pp-page-hero--inverse .pp-page-lead {
    color: var(--pp-colour-inverse);
}

.pp-page-hero--inverse .pp-page-eyebrow {
    color: var(--pp-colour-accent);
}


/* Optional palette-slot colour roles supplied by Fragment::colourStyle(). */
.pp-page-hero,
.pp-page-hero--bg-page,
.pp-page-hero--bg-primary,
.pp-page-hero--bg-inverse {
    background-color: var(--pp-page-hero-background, var(--pp-colour-surface));
    color: var(--pp-page-hero-text, var(--pp-colour-text));
}

.pp-page-hero--bg-page {
    background-color: var(--pp-page-hero-background, var(--pp-colour-page));
}

.pp-page-hero--bg-primary {
    background-color: var(--pp-page-hero-background, var(--pp-colour-primary));
}

.pp-page-hero--bg-inverse {
    background-color: var(--pp-page-hero-background, var(--pp-colour-inverse));
}

.pp-page-eyebrow {
    color: var(--pp-page-hero-emphasis, var(--pp-colour-accent-hover));
}

.pp-page-title span {
    color: var(--pp-page-hero-emphasis, var(--pp-colour-accent));
}

.pp-page-title,
.pp-page-hero .pp-page-title {
    color: var(--pp-page-hero-title, var(--pp-colour-primary));
}

.pp-page-hero .pp-page-lead {
    color: var(--pp-page-hero-text, var(--pp-colour-muted));
}

.pp-page-hero--inverse {
    background-color: var(--pp-page-hero-background, var(--pp-colour-primary));
    color: var(--pp-page-hero-text, var(--pp-colour-inverse-85));
}

.pp-page-hero--inverse .pp-page-title {
    color: var(--pp-page-hero-title, var(--pp-colour-inverse));
}

.pp-page-hero--inverse .pp-page-lead {
    color: var(--pp-page-hero-text, var(--pp-colour-inverse));
}

.pp-page-hero--inverse .pp-page-eyebrow {
    color: var(--pp-page-hero-emphasis, var(--pp-colour-accent));
}

.pp-page-hero--photo-fade {
    background-image:
        linear-gradient(
            90deg,
            var(--pp-page-hero-background, var(--pp-colour-surface)) 0%,
            color-mix(in srgb, var(--pp-page-hero-background, var(--pp-colour-surface)) 96%, transparent) 30%,
            color-mix(in srgb, var(--pp-page-hero-background, var(--pp-colour-surface)) 70%, transparent) 52%,
            transparent 76%
        ),
        var(--pp-page-hero-image, none);
}

@media (max-width: 767.98px) {
    .pp-page-hero--photo-fade {
        background-image:
            linear-gradient(
                var(--pp-page-hero-background, var(--pp-colour-surface-84)),
                var(--pp-page-hero-background, var(--pp-colour-surface-84))
            ),
            var(--pp-page-hero-image, none);
    }
}