/* /ervaringen/ page rules (design-v2 B). Only what site.css has no component for:
   the text hero with its three fact tiles, the six-case gallery (each card is
   wrapped so the Alle / Mannen / Vrouwen filter hides the wrapper too),
   the verwachtingen block with the risk box beside the prose. Weights 400/700 only. */

/* Text hero: copy in columns 1-7, three fact tiles in 8-12 from 1024 */
.hero--text .hero__title{max-width:18ch}
.hero__facts{order:2;list-style:none;padding:0;margin:0;display:grid;gap:12px;grid-template-columns:repeat(3,minmax(0,1fr))}
.hero__facts li{background:#fff;border:1px solid var(--c-rule);border-radius:var(--r-lg);padding:18px 16px;min-width:0;box-shadow:var(--sh-card)}
.hero__facts .big{display:block;font-size:clamp(2rem,1.5rem + 2vw,2.75rem);color:var(--c-teal-dark)}
.hero__facts span{display:block;margin-top:8px;font-size:.82rem;line-height:1.4;color:var(--c-muted);font-weight:700}
@media (max-width:599px){
  .hero__facts{grid-template-columns:1fr}
  .hero__facts li{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;padding:14px 16px}
  .hero__facts .big{min-width:2.2ch;text-align:center}
  .hero__facts span{margin-top:0}
}
@media (min-width:1024px){
  .hero--text .hero__copy{grid-column:1 / 8;grid-row:1}
  .hero__facts{grid-column:9 / -1;grid-row:1;grid-template-columns:1fr;gap:14px;align-self:center}
  .hero__facts li{padding:22px 24px}
}

/* Gallery: the filter hides the card (site.js sets [hidden] on .ba); hide the wrapper too */
.ba-case:has(> .ba[hidden]){display:none}
@media (min-width:1024px){.ba-gallery--all{row-gap:40px}}

/* Verwachtingen: prose and note left, the risk box beside it from 1024 */
.verwachtingen{display:grid;gap:var(--s-6)}
.verwachtingen__text{min-width:0}
.verwachtingen__text .section__head{margin-bottom:var(--s-5)}
.verwachtingen__risico{min-width:0}
.verwachtingen__risico .box{background:#fff;height:100%}
@media (min-width:1024px){
  .verwachtingen{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:var(--s-8);align-items:start}
  .verwachtingen__text .section__head{margin-bottom:var(--s-6)}
}

/* FAQ: two questions only, no "praktisch" group here */
.faq-layout .faq__list{gap:12px}