/* White photo veil, following the public heroes of Valk VvE Beheer and VvE-tje.
   Keep the source photos intact; change these stops to adjust the haze. */
.photo-banner {
    --photo-veil: linear-gradient(90deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.88) 42%, rgba(255,255,255,.68) 64%, rgba(255,255,255,.3) 100%);
    --photo-position: center 55%;
    position: relative;
    isolation: isolate;
    background: var(--warm);
}
.photo-banner > .banner-image {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--photo-position);
    pointer-events: none;
}
.photo-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--photo-veil);
    pointer-events: none;
}
.photo-banner--appartementen { --photo-position: center 55%; }
.photo-banner--brief { --photo-position: center 64%; }
.photo-banner--overleg { --photo-position: center 58%; }
.photo-banner--kantoor { --photo-position: center 58%; }
.hero.photo-banner .hero-inner {
    display: block;
    padding-block: clamp(3rem, 5.5vw, 5rem);
}
.hero.photo-banner .hero-copy { max-width: 660px; }
.hero.photo-banner h1 { max-width: 22ch; }
.photo-banner .lead,
.photo-banner .hero-note { color: var(--ink); }
.hero.photo-banner .lead { max-width: 56ch; }
.photo-banner .button-outline { background: rgba(255,255,255,.65); }
.photo-banner .button-outline:hover { background: var(--petrol); }
.page-intro.photo-banner { padding-bottom: clamp(3rem, 5vw, 4.5rem); }
.page-intro.photo-banner .lead { max-width: 60ch; }
.content-photo { margin: 0; }
.content-photo-frame { position: relative; }
.content-photo-image {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: 70% center;
}
.content-photo-frame::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,.14);
    pointer-events: none;
}
.content-photo figcaption {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.2rem 1.4rem;
    border-left: 3px solid var(--petrol);
    background: var(--surface);
    color: var(--ink);
    font-size: .8125rem;
}
.content-photo figcaption .icon { color: var(--petrol); }
@media (max-width: 68rem) {
    .photo-banner {
        --photo-veil: linear-gradient(90deg, rgba(255,255,255,.95), rgba(255,255,255,.88) 64%, rgba(255,255,255,.58));
    }
}
@media (max-width: 52rem) {
    .photo-banner {
        --photo-veil: linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.87));
    }
    .photo-banner > .banner-image { object-position: 70% center; }
    .hero.photo-banner .hero-copy { max-width: 44rem; }
    .content-photo-image { aspect-ratio: 16 / 9; }
}
@media (max-width: 47.99rem) {
    .hero.photo-banner .hero-inner { padding-block: 2.8rem; }
    .hero.photo-banner h1 { max-width: 17ch; }
    .page-intro.photo-banner { padding-bottom: 2.7rem; }
}
@media print {
    .photo-banner > .banner-image,
    .photo-banner::before { display: none; }
    .photo-banner { background: white; }
}