/* De restaurantfoto vormt het decor; productbeelden, uitleg en formulieren
   blijven echte HTML op de voorgrond. Dezelfde kop voor alle module- en
   verdiepingspagina's, met de kleuren en letters uit de Morris-brandkit. */
body.fotopagina{--kop-fotopositie:66% center}
.fotopagina.foto-keuken{--kop-fotopositie:72% center}
.fotopagina.foto-team{--kop-fotopositie:68% center}
.fotopagina.foto-kantoor{--kop-fotopositie:70% center}
.fotopagina .kop{position:relative;isolation:isolate;overflow:hidden;padding:clamp(36px,4vw,58px) 0 clamp(56px,6vw,88px);margin-top:var(--m-ruimte-12)}
.fotopagina .kop-sfeer{position:absolute;inset:0;z-index:-2;pointer-events:none;background:var(--vlak)}
.fotopagina .kop-sfeer img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:var(--kop-fotopositie);filter:none}
.fotopagina .kop::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,color-mix(in srgb,var(--vlak) 98%,transparent),color-mix(in srgb,var(--vlak) 94%,transparent) 32%,color-mix(in srgb,var(--vlak) 72%,transparent) 54%,color-mix(in srgb,var(--vlak) 24%,transparent)),linear-gradient(0deg,var(--vlak),transparent 42%)}
.fotopagina .kop > .wrap{max-width:1240px;padding-inline:clamp(22px,4vw,48px)}
.fotopagina .kop .kruimel{margin-bottom:clamp(28px,4vw,48px);color:var(--tekst2)}
.fotopagina .kop .kop-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,4vw,64px)}
.fotopagina .kop .kop-grid > *{min-width:0}
.fotopagina .kop h1{font-size:var(--m-display-l);line-height:var(--m-regel-kop);letter-spacing:var(--m-spatie-kop);font-weight:700;text-wrap:balance;overflow-wrap:break-word;hyphens:auto;margin-block:var(--m-ruimte-16) var(--m-ruimte-24)}
.fotopagina .kop .lede{max-width:49ch;font-size:var(--m-tekst-xl);line-height:var(--m-regel-lang);color:var(--tekst2)}
.fotopagina .kop .eyebrow{font-size:var(--m-tekst-xs);letter-spacing:var(--m-spatie-kapitaal)}
.fotopagina .kop .knoppen{gap:var(--m-ruimte-12);margin-top:var(--m-ruimte-24);flex-wrap:wrap}
.kop .knoppen .btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:var(--m-ruimte-12) var(--m-ruimte-16);text-align:center}
.kop .knoppen .btn-ghost{background:color-mix(in srgb,var(--vlak) 82%,transparent);border-color:color-mix(in srgb,var(--tekst) 35%,var(--lijn))}
.fotopagina .kop .scene{position:relative;align-self:center}
.fotopagina .kop .scene > img{width:100%;height:auto;filter:drop-shadow(0 18px 30px color-mix(in srgb,var(--vlak) 75%,transparent))}
.fotopagina .kop .voorbeeld-label{display:table;max-width:100%;padding:var(--m-ruimte-8) var(--m-ruimte-12);border:1px solid var(--lijn);border-radius:var(--m-radius-s);background:color-mix(in srgb,var(--vlak) 92%,transparent);line-height:var(--m-regel-tekst);color:var(--tekst2);text-align:center}
.kop .scene :is(.venster,.makers),.fotopagina .kop .aanvraag{background:var(--kaart);border-color:color-mix(in srgb,var(--amber) 25%,var(--lijn));border-radius:var(--m-radius-l);box-shadow:var(--schaduw-groot)}
.fotopagina .kop .kenmerken{gap:var(--m-ruimte-16)}
.fotopagina .kop .kenmerken li{color:var(--tekst2);line-height:var(--m-regel-lang)}
.fotopagina .kop .aanvraag{position:relative}
.kop .makers .makersnoot{font-family:var(--f-display);font-size:var(--m-tekst-3xl);font-weight:600;line-height:var(--m-regel-tekst);letter-spacing:var(--m-spatie-kop);margin-bottom:var(--m-ruimte-24)}

@container inhoud (max-width:1050px){
  .fotopagina .kop .kop-grid{gap:var(--m-ruimte-32)}
}
@container inhoud (max-width:900px){
  .fotopagina .kop{padding-block:var(--m-ruimte-32) var(--m-ruimte-48)}
  .fotopagina .kop .kop-grid{grid-template-columns:minmax(0,1fr);gap:var(--m-ruimte-32)}
  .fotopagina .kop-sfeer{inset:0 0 auto;aspect-ratio:16/10;max-height:100%}
  .fotopagina .kop-sfeer img{object-position:var(--kop-fotopositie)}
  .fotopagina .kop::before{background:linear-gradient(90deg,color-mix(in srgb,var(--vlak) 94%,transparent),color-mix(in srgb,var(--vlak) 76%,transparent)),linear-gradient(0deg,var(--vlak) 34%,color-mix(in srgb,var(--vlak) 92%,transparent) 58%,transparent)}
  .fotopagina .kop h1{max-width:22ch}
  .fotopagina .kop .lede{max-width:64ch}
  .fotopagina .kop .scene{width:100%;max-width:650px;margin-inline:auto}
  .fotopagina .kop .aanvraag{width:100%;max-width:650px}
}
@container inhoud (max-width:599px){
  .fotopagina .kop{margin-top:var(--m-ruimte-10);padding-block:var(--m-ruimte-24) var(--m-ruimte-48)}
  .fotopagina .kop > .wrap{padding-inline:var(--m-ruimte-20)}
  .fotopagina .kop .kruimel{font-size:var(--m-tekst-s);margin-bottom:var(--m-ruimte-32)}
  .fotopagina .kop h1{line-height:var(--m-regel-kop);margin-block:var(--m-ruimte-16) var(--m-ruimte-20)}
  .fotopagina .kop .lede{font-size:var(--m-tekst-xl);line-height:var(--m-regel-lang)}
  .fotopagina .kop .knoppen{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--m-ruimte-10);margin-top:var(--m-ruimte-24)}
  .kop .knoppen .btn{width:100%}
  .fotopagina .kop .kop-grid{gap:var(--m-ruimte-32)}
  .fotopagina .kop .kenmerken{gap:var(--m-ruimte-12)}
  .fotopagina .kop .kenmerken li{font-size:var(--m-tekst-l)}
  .kop .scene .makers,.fotopagina .kop .aanvraag{padding:var(--m-ruimte-24) var(--m-ruimte-20)}
  .kop .makers .makersnoot{font-size:var(--m-tekst-2xl)}
}