/*
 * Hero background photo for the landing and About heroes (Admin > Settings > Hero images).
 * Only active when the section carries .has-hero-image; without it the band stays the
 * plain black of public.css.
 *
 * Purpose of the gradient: readability. The configured opacity (--hero-overlay, 0.50 to
 * 0.95, printed on the section) covers the text side and fades to half on the right, so the
 * white title and the accent kicker keep WCAG AA while the photo still reads on the right.
 * Under 992px the text spans the full width, so the overlay is uniform there.
 */

.has-hero-image {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

/* The photo fills the band behind the content; absolutely positioned, so no layout shift. */
.has-hero-image > .hero-bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    display: block;
}

.has-hero-image > .hero-bg img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.has-hero-image::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    /* Full strength across the text column (landing copy, About heading and lead end near 55%). */
    background: linear-gradient(
        90deg,
        rgb(0 0 0 / var(--hero-overlay, 0.8)) 0%,
        rgb(0 0 0 / var(--hero-overlay, 0.8)) 55%,
        rgb(0 0 0 / calc(var(--hero-overlay, 0.8) * 0.5)) 100%
    );
}

/*
 * Kicker on a photo: --secondary-on-dark (70% accent) is tuned for plain black. Over a
 * photo the band can be lighter than black, so the kicker takes a lighter accent tint
 * (about #E68080 with the default red), which keeps 4.5:1 at the default 80% overlay
 * even over a white pixel.
 */
.has-hero-image .hero-v3-kicker,
.has-hero-image .about-v3-kicker {
    color: color-mix(in srgb, var(--secondary) 50%, white);
}

@media (max-width: 991px) {
    .has-hero-image::before {
        background: rgb(0 0 0 / var(--hero-overlay, 0.8));
    }
}