/* assets/css/pages/castle-diependael.css -- per-pagina laag (CLAUDE.md CSS-architectuur).
In via mb_reve_pagina_css('castle-diependael') in page-castle-diependael.php. Tokens/componenten uit reve-base.css + reve-pages.css. */
.castle-hero { position: relative; min-height: 82vh; overflow: hidden; }
.castle-hero img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.scroll-cue { position: absolute; left: 50%; bottom: 32px; transform: translateX(-50%); width: 44px; height: 44px; border-radius: 50%; background: rgba(0, 0, 0, .25); border: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; animation: reve-bounce 1.8s ease-in-out infinite; }
@keyframes reve-bounce { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 8px); } }
@media (max-width: 860px) { .castle-hero { min-height: 40vh; } }
/* ---------- "A Legend, Lovingly Restored" -- citaat + 2-koloms beeldrij ---------- */
.legend { padding: var(--sec) 0; }
.legend-text { max-width: 700px; text-align: center; }
.legend-text h1 { font-family: var(--f-display); font-weight: 400; font-size: clamp(32px, 4vw, 46px); line-height: 1.15; margin: 0 0 24px; }
.legend-text p { font: 400 17px/1.7 var(--f-body); color: #2b2b2b; margin: 0; }
.legend-text p.sig { margin-top: 18px; }
/* Binnen dezelfde max-breedte als de rest van de pagina (was volle viewport-breedte). */
.legend-gallery { display: flex; gap: 10px; max-width: var(--wrap); margin: var(--sec) auto 0; padding: 0 24px; align-items: stretch; }
.legend-tower { width: 34%; position: relative; }
.legend-tower img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.legend-right { width: 66%; display: flex; flex-direction: column; gap: 10px; }
.legend-portrait { position: relative; min-height: 360px; flex: 1; }
/* Z725854 is een liggende foto (2560x1707); zonder object-position sneed het brede kader het
gezicht bovenaan af. 20% van boven houdt het hoofd in beeld. */
.legend-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; position: absolute; inset: 0; }
.legend-quote { min-height: 300px; background: var(--c-grey-bg); display: flex; align-items: center; justify-content: center; padding: clamp(36px, 5vw, 72px); text-align: center; }
.legend-quote p { font: 400 20px/1.6 var(--f-body); color: #2b2b2b; margin: 0; }
@media (max-width: 860px) {
.legend-gallery { flex-direction: column; padding: 0 20px; }
.legend-tower, .legend-right { width: 100%; }
.legend-tower { min-height: 800px; }
.legend-quote { padding: 40px 24px; min-height: auto; }
}
/* ---------- video ---------- */
.castle-video { padding: 0 30px; }
.castle-video video { width: 100%; display: block; min-height: 500px; max-height: 620px; object-fit: cover; }
@media (max-width: 860px) {
/* video rand tot rand op mobiel -- .wrap draagt anders 24px zijpadding (reve-base.css) */
.castle-video .wrap { padding: 0; }
}
/* ---------- "The Castle Experience" -- tekst + beeld, grijze achtergrond ---------- */
.experience-row { display: flex; max-width: var(--wrap); margin: 0 auto; padding: 20px 24px 0; gap: 10px; align-items: stretch; }
/* Links uitgelijnd i.p.v. gecentreerd: dit zijn meerdere lopende alinea's, geen korte intro
(die ragde langs beide kanten en las slordig). */
.experience-text { width: 50%; background: var(--c-grey-bg); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; text-align: left; padding: clamp(40px, 5vw, 72px); min-height: 400px; }
.experience-text h2 { font-family: var(--f-display); font-weight: 400; font-size: clamp(28px, 3.2vw, 38px); margin: 0 0 22px; }
.experience-text p { font: 400 16px/1.7 var(--f-body); color: #2b2b2b; max-width: 52ch; margin: 0 0 16px; }
.experience-text p:last-of-type { margin-bottom: 26px; }
.experience-image { width: 50%; position: relative; min-height: 400px; }
.experience-image img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
@media (max-width: 860px) {
.experience-row { flex-direction: column; padding: 20px 20px 0; }
.experience-text, .experience-image { width: 100%; }
.experience-text { padding: 40px 24px; }
.experience-image { min-height: 560px; }
}
/* ---------- "The Castle Setting" -- gecentreerd tekstblok ---------- */
.setting { padding: var(--sec) 0; }
.setting-text { max-width: 800px; text-align: center; }
.setting-text h2 { font-family: var(--f-display); font-weight: 400; font-size: clamp(28px, 3.2vw, 38px); margin: 0 0 30px; }
.setting-text p { font: 400 17px/1.7 var(--f-body); color: #2b2b2b; margin: 0 0 20px; }
.setting-text p:last-child { margin-bottom: 0; }
/* ---------- "What's inside the Castle" -- zwarte achtergrond, rechtstreeks onder de
carrousel (bron: reve.gregoir.com/castle-diependael -- geen wit tussenvlak). ---------- */
.whats-inside { background: #000; padding: 70px 20px 90px; }
.whats-inside-text { max-width: 760px; text-align: center; margin: 0 auto; }
.whats-inside-text h2 { font-family: var(--f-display); font-weight: 400; font-size: clamp(28px, 3.2vw, 38px); color: #fff; margin: 0 0 30px; }
.whats-inside-text p { font: 400 17px/1.7 var(--f-body); color: rgba(255, 255, 255, .82); margin: 0 0 20px; }
.whats-inside-text p strong { color: #fff; }
/* Gewone .btn-ghost (zie reve-base.css) i.p.v. een eigen pil-stijl -- die pil kwam rechtstreeks
uit de productiebron mee (geen designbestand voor deze pagina) en stond als enige knop op de
site in die vorm. Gelijkgetrokken op klantvraag 2026-09-02. Volle breedte op mobiel komt al
mee via de globale .btn-regel in reve-base.css. */
.whats-inside-text .btn { margin-top: 12px; }
/* ---------- beeldencarrousel -- vast sjabloon van 5 plekken, middelste altijd groot ---------- */
.castle-gallery { background: #000; padding: 70px 20px 90px; display: flex; align-items: center; gap: 14px; }
/* clip-path i.p.v. overflow:hidden -- clipt enkel horizontaal, laat de middelste (grotere) foto
verticaal vrij zodat die bewust boven de zwarte balk uit mag steken (zie negative margin-top
hieronder). overflow-x:hidden zou overflow-y stilzwijgend naar auto promoten (CSS Overflow
spec) en zo net dát tegenhouden. */
/* negatieve marge op de track zelf (niet op één foto) -- align-items:center centreert elke
foto op zijn eigen hoogte, dus de grote middelste steekt sowieso al verder naar boven uit
dan de vier normale; schuift de hele rij als één geheel omhoog, dan is het die grote foto
die als enige voorbij de zwarte sectierand komt. */
.gallery-track { flex: 1; display: flex; align-items: center; gap: 10px; clip-path: inset(-9999px 0); margin-top: -110px; }
.gallery-slide { position: relative; flex: 0 0 29%; height: 50vh; transition: height .4s ease; overflow: hidden; }
/* plek 1 en 5 (offset-links/rechts) tonen maar 20% van de normale breedte -- object-fit:cover
op de ![]()
laat dat als een afgesneden rand ogen, zonder scroll/transform-trucjes. */
.gallery-slide:first-child, .gallery-slide:last-child { flex-basis: 5.8%; }
.gallery-slide:nth-child(3) { height: 70vh; }
/* 2 gestapelde lagen per plek -- crossfade tussen oud/nieuw i.p.v. één ![]()
waarvan de src
wisselt (dat gaf een moment van "niets zichtbaar" tussen de foto's). */
.gallery-slide .layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity .5s ease; }
.gallery-slide .layer.is-visible { opacity: 1; }
.gallery-arrow { flex: 0 0 auto; background: transparent; border: 0; color: #fff; width: 40px; height: 40px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
/* onder 1200px is er geen plaats meer voor de twee smalle randfoto's (5.8%) -- die vallen weg
en de overige 3 (normaal-groot-normaal) groeien gelijk om de rij te vullen. */
@media (max-width: 1200px) {
.gallery-slide:first-child, .gallery-slide:last-child { display: none; }
.gallery-slide:nth-child(2), .gallery-slide:nth-child(3), .gallery-slide:nth-child(4) { flex: 1 1 0; }
}
@media (max-width: 860px) {
.castle-gallery { padding: 40px 10px 60px; gap: 6px; }
.gallery-track { margin-top: -60px; }
.gallery-slide { height: 32vh; }
.gallery-slide:nth-child(3) { height: 42vh; }
.gallery-arrow { width: 26px; }
.gallery-arrow svg { width: 16px; height: 16px; }
}