/**
 * Search hero photography — one frame shot twice (day / night).
 *
 * The photo box is sized from the viewport width only, so it keeps its
 * place while the hero grows or shrinks (hint line, results opening,
 * mobile toolbar). Both themes share the same box, crop and fade; only
 * the frame and the canvas colour change.
 */

.sp-hero--photo {
    --sp-hero-photo-w: 100%;
    --sp-hero-photo-h: clamp(360px, 34vw, 620px);
    /* Light veil over the headline; the jet on the right stays clear. */
    --sp-hero-photo-fade-x: linear-gradient(
        90deg,
        rgb(0 0 0 / 0.8) 0%,
        rgb(0 0 0 / 0.9) 34%,
        #000 58%
    );
    --sp-hero-photo-fade-y: linear-gradient(180deg, #000 70%, transparent 100%);
    --sp-hero-photo-duration: 0.55s;

    padding-block: clamp(44px, 5.2vw, 88px) clamp(36px, 3.6vw, 64px);
    background: var(--sp-canvas);
}

.sp-hero--photo::after {
    content: none;
}

.sp-hero__media {
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
    display: grid;
    grid-template: minmax(0, 1fr) / minmax(0, 1fr);
    width: var(--sp-hero-photo-w);
    height: var(--sp-hero-photo-h);
    overflow: hidden;
    pointer-events: none;
    -webkit-mask-image: var(--sp-hero-photo-fade-x), var(--sp-hero-photo-fade-y);
    -webkit-mask-composite: source-in;
    mask-image: var(--sp-hero-photo-fade-x), var(--sp-hero-photo-fade-y);
    mask-composite: intersect;
}

.sp-hero__photo {
    grid-area: 1 / 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 100% 22%;
    transition: opacity var(--sp-hero-photo-duration) var(--sp-ease);
}

.sp-hero__photo--night {
    opacity: 0;
}

:root[data-theme="dark"] .sp-hero__photo--day {
    opacity: 0;
}

:root[data-theme="dark"] .sp-hero__photo--night {
    opacity: 1;
}

/* Narrow screens: the headline spans the jet, so the veil stays even. */
@media (max-width: 720px) {
    .sp-hero--photo {
        --sp-hero-photo-h: clamp(300px, 92vw, 460px);
        --sp-hero-photo-fade-x: linear-gradient(
            90deg,
            rgb(0 0 0 / 0.62) 0%,
            rgb(0 0 0 / 0.74) 100%
        );
        --sp-hero-photo-fade-y: linear-gradient(180deg, #000 50%, transparent 100%);
    }

    .sp-hero__photo {
        object-position: 85% 50%;
    }
}

@media (max-width: 480px) {
    .sp-hero--photo {
        padding-block: 32px 28px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sp-hero__photo {
        transition: none;
    }
}