/* v239-PREVIEW — /family/ als paradepaardje: hero met stille dronelus, foto-rijen, filmstage, fotostrook, prijsanker bij het
   boekingspaneel, één inklapbare Q&A. Alleen gelinkt op de 5 /family/-pagina's. Raakt het boekingspaneel (#book), kalender,
   chat en schema niet aan. Bouwt voort op family236.css (v236-preview). */

/* ---------- 0. Hero: stille dronelus achter de bestaande still ---------- */
.sub-hero.hero-split .sh-media.f239-media{position:relative;overflow:hidden}
.f239-hero{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .6s ease;pointer-events:none}
.f239-hero.is-on{opacity:1}
@media(prefers-reduced-motion:reduce){.f239-hero{display:none}}

/* ---------- 0b. Filmstage (zelfde component als de homepage) + plan-B-tekst eronder ---------- */
#famfilm .vstage{margin-top:26px}
#famfilm .vstage.square .vframe{height:auto;width:min(100%,640px);aspect-ratio:1/1;margin-inline:auto}
#famfilm .vstage:focus-visible{outline:2px solid var(--zellige,#4F7263);outline-offset:6px;border-radius:18px}
.f239-planb{margin-top:clamp(36px,5vw,64px);padding-top:clamp(26px,3.4vw,40px);border-top:1px solid rgba(44,38,32,.12)}
.f239-planb .duo-copy{max-width:none;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:18px clamp(28px,5vw,72px);align-items:start}
.f239-planb .duo-copy .eyebrow{grid-column:1/-1;margin-bottom:0}
.f239-planb .duo-copy h2{margin:0;font-size:clamp(1.5rem,2.6vw,2.1rem)}
.f239-planb .duo-copy p{max-width:58ch;margin:0}
.f239-planb .duo-facts{grid-column:2;margin-top:4px}
@media(max-width:820px){.f239-planb .duo-copy{grid-template-columns:1fr}.f239-planb .duo-facts{grid-column:auto}}

/* ---------- 0c. Prijsanker: de kostenvraag vlak boven het boekingspaneel ---------- */
.f239-anchor{padding-bottom:0!important}
.f239-anchor .f239-doubt{max-width:720px;margin:18px auto 0;padding:26px 28px 24px;background:var(--white);border:1px solid rgba(44,38,32,.1);border-radius:16px;border-top:1px solid rgba(44,38,32,.1)}
.f239-anchor .f239-doubt h3{font-size:1.4rem}
.f239-anchor+.book{padding-top:clamp(40px,5vw,64px)!important}
@media(max-width:560px){.f239-anchor .f239-doubt{padding:20px 18px 18px}}
.f236-qa .fam-plan{margin-top:22px}

/* ---------- 1. Drie generaties: foto-rijen over de volle breedte, afwisselend ---------- */
.f236-rows{margin-top:clamp(28px,3.4vw,44px)}
.f236-row{display:grid;grid-template-columns:1fr 1fr;align-items:center}
.f236-row+.f236-row{margin-top:0}
.f236-row figure{margin:0;overflow:hidden;background:var(--sand-deep);aspect-ratio:3/2;max-height:460px;width:100%}
.f236-row figure picture{display:block;width:100%;height:100%}
.f236-row figure img{display:block;width:100%;height:100%;object-fit:cover}
.f236-row:nth-child(even) figure{order:2}
.f236-copy{padding:clamp(28px,5vw,80px) clamp(28px,6vw,96px)}
.f236-copy h3.sub-h{font-family:var(--serif);font-weight:400;font-size:clamp(1.5rem,2.5vw,2.1rem);line-height:1.15;margin:0 0 12px}
.f236-copy p{margin:0;font-size:1rem;line-height:1.7;color:var(--ink-soft);max-width:40ch}
#cards .fam-plan{margin-top:clamp(26px,3vw,40px)}
@media(max-width:820px){
  .f236-row{grid-template-columns:1fr}
  .f236-row figure{aspect-ratio:3/2;max-height:none}
  .f236-row:nth-child(even) figure{order:0}
  .f236-copy{padding:22px 20px 30px}
}

/* ---------- 2. Galerij: één strook met pijlen en teller (7 foto's) ---------- */
#gallery .f236-box{position:relative}
#gallery .mosaic{position:relative;display:flex!important;gap:12px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
#gallery .mosaic::-webkit-scrollbar{display:none}
#gallery .mosaic figure{flex:0 0 31%;height:auto;aspect-ratio:3/2;grid-column:auto!important;grid-row:auto!important;scroll-snap-align:start;border-radius:12px;box-shadow:none}
#gallery .mosaic figure picture{display:block;width:100%;height:100%}
#gallery .mosaic figure img{width:100%;height:100%;object-fit:cover;transition:none!important;transform:none!important;animation:none!important}
@media(max-width:820px){#gallery .mosaic figure{flex-basis:84%}}
.f236-nav{display:flex;justify-content:center;align-items:center;gap:14px;margin-top:16px}
.f236-nav button{width:44px;height:44px;border-radius:50%;border:1px solid rgba(44,38,32,.2);background:var(--white);color:var(--ink);font:inherit;font-size:1.35rem;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0 0 3px;transition:background .25s,border-color .25s,opacity .25s}
.f236-nav button:hover:not(:disabled){background:var(--sand-deep);border-color:rgba(44,38,32,.35)}
.f236-nav button:disabled{opacity:.35;cursor:default}
.f236-nav button:focus-visible{outline:2px solid var(--zellige,#4F7263);outline-offset:2px}
.f236-num{margin:0;min-width:4.6em;text-align:center;font-size:.85rem;letter-spacing:.12em;color:var(--ink-soft);font-variant-numeric:tabular-nums}

/* ---------- 3. Eén Q&A: drie vragen van organisatoren + vijf van ouders, inklapbaar ---------- */
.f236-qa{padding-bottom:clamp(64px,7vw,104px)}
.f236-anc{display:block;height:0}
.f236-qa .f236-lead{margin:0 0 4px;font-family:var(--serif);font-style:italic;font-size:clamp(1.1rem,1.8vw,1.3rem);line-height:1.4;color:var(--ink-soft)}
.f236-qa .f236-grp{margin:26px 0 12px;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft)}
.f236-qa .faq-item{margin-top:0;margin-bottom:10px;border:1px solid rgba(44,38,32,.1)}
.f236-qa .faq-q:focus-visible{outline:2px solid var(--zellige,#4F7263);outline-offset:-3px;border-radius:16px}
.f236-qa .faq-a>p:first-child{padding-bottom:18px}
.f236-qa .faq-a>p:only-child{padding-bottom:24px}
.f236-qa .faq-a blockquote{margin:0 26px 24px;padding:0 0 0 14px;border-left:2px solid var(--zellige,#4F7263)}
.f236-qa .faq-a blockquote p{padding:0;margin:0;font-family:var(--serif);font-style:italic;font-size:1rem;line-height:1.55;color:var(--ink,#2C2620)}
.f236-qa .faq-a blockquote cite{display:block;font-style:normal;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft,#4A4139);opacity:.85;margin-top:8px}
.f236-qa .fam-honest{margin-top:26px}
@media(max-width:560px){
  .f236-qa .faq-q{padding:18px 18px}
  .f236-qa .faq-a p{padding-left:18px;padding-right:18px}
  .f236-qa .faq-a blockquote{margin-left:18px;margin-right:18px}
}

/* ---------- 4. Plan B: tekst + vier films (geen foto) ---------- */
.f236-planb{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,4.4vw,64px);align-items:center}
.f236-clips{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0}
.f236-clips video{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:14px;background:#141110;pointer-events:none}
@media(max-width:820px){
  .f236-planb{grid-template-columns:1fr;gap:26px}
  .f236-clips{gap:8px}
  .f236-clips video{border-radius:10px}
}