/* Boekingsectie — de omlijsting rond de boek-widget in de niche-previews.
   De widget zelf (booking-demo.css) blijft ongemoeid; dit bestand levert
   alleen de band eromheen: een tekstkolom die uitlegt wat je boekt en een
   paneel waar de widget in staat. Zonder deze laag hangt de widget los
   onderaan een sectie die ergens anders over gaat.

   Elke preview zet zijn eigen huisstijl via --msb-* op de sectie. De
   waarden hieronder zijn neutrale terugvallen, zodat een preview zonder
   tokens er nog steeds verzorgd uitziet. */
.ms-boeksectie{
  --msb-band:#f2f1ec;
  --msb-paneel:#ffffff;
  --msb-ink:#1b2126;
  --msb-mute:#65727a;
  --msb-accent:#2f9ec4;
  --msb-lijn:rgba(20,28,34,.14);
  --msb-radius:22px;
  --msb-schaduw:0 26px 64px -34px rgba(20,28,34,.45);
  --msb-maxw:1200px;
  --msb-pad:clamp(56px,8vw,104px);
  --msb-kop:inherit;
  --msb-tekst:inherit;

  padding:var(--msb-pad) clamp(18px,5vw,40px);
  background:var(--msb-band);
  color:var(--msb-ink);
  font-family:var(--msb-tekst);
  /* De widget belandde eerder in een flexkolom met items-center en kromp
     daar tot tekstbreedte. Deze twee regels maken dat onmogelijk. */
  align-self:stretch;
  width:100%;
}
.ms-boeksectie *{box-sizing:border-box}

.ms-boeksectie__wrap{
  display:grid;
  width:100%;
  max-width:var(--msb-maxw);
  margin:0 auto;
  gap:clamp(26px,4vw,54px);
  /* De paneelkolom moet op desktop boven de 620px containerquery van
     booking-demo.css uitkomen; anders klapt de widget in zijn smalle modus en
     staan de dienstkaarten onder elkaar terwijl er ruimte over is. */
  grid-template-columns:minmax(0,.76fr) minmax(0,1.24fr);
  align-items:start;
}

.ms-boeksectie__tekst{
  display:grid;
  align-content:start;
  min-width:0;
  gap:14px;
  padding-top:4px;
}
.ms-boeksectie__kicker{
  display:flex;
  align-items:center;
  gap:11px;
  margin:0;
  color:var(--msb-accent);
  font-size:12px;
  font-weight:800;
  letter-spacing:.15em;
  line-height:1.2;
  text-transform:uppercase;
}
.ms-boeksectie__kicker::before{
  content:"";
  flex:0 0 26px;
  height:2px;
  background:currentColor;
}
.ms-boeksectie__kop{
  margin:0;
  color:var(--msb-ink);
  font-family:var(--msb-kop);
  font-size:clamp(27px,3.3vw,41px);
  font-weight:700;
  letter-spacing:-.02em;
  line-height:1.07;
  text-wrap:balance;
}
.ms-boeksectie__intro{
  max-width:46ch;
  margin:0;
  color:var(--msb-mute);
  font-size:clamp(15px,1.1vw,16.5px);
  line-height:1.62;
}
.ms-boeksectie__punten{
  display:grid;
  margin:4px 0 0;
  padding:0;
  gap:11px;
  list-style:none;
}
.ms-boeksectie__punten li{
  position:relative;
  padding-left:29px;
  color:var(--msb-ink);
  font-size:14.5px;
  line-height:1.5;
}
.ms-boeksectie__punten li::before{
  content:"\2713";
  position:absolute;
  top:.02em;
  left:0;
  display:grid;
  width:20px;
  height:20px;
  place-items:center;
  border-radius:50%;
  background:color-mix(in srgb,var(--msb-accent) 17%,transparent);
  color:var(--msb-accent);
  font-size:11px;
  font-weight:900;
  line-height:1;
}
.ms-boeksectie__demo{
  margin:6px 0 0;
  padding:12px 15px;
  border-left:3px solid color-mix(in srgb,var(--msb-accent) 55%,transparent);
  border-radius:0 10px 10px 0;
  background:color-mix(in srgb,var(--msb-ink) 6%,transparent);
  color:var(--msb-mute);
  font-size:13px;
  line-height:1.5;
}

.ms-boeksectie__paneel{
  min-width:0;
  padding:clamp(18px,2.5vw,34px);
  border:1px solid var(--msb-lijn);
  border-radius:var(--msb-radius);
  background:var(--msb-paneel);
  box-shadow:var(--msb-schaduw);
}
/* De widget centreert zichzelf op 720px. In het paneel mag hij de hele
   kolom hebben; de containerqueries in booking-demo.css meten toch de
   mount zelf, dus de kolomindeling blijft kloppen. */
.ms-boeksectie__paneel .ms-widget{max-width:none;margin:0}

/* Onder 920px past de tekstkolom naast het paneel niet meer zonder dat de
   agenda in de knel komt. Dan stapelen we. */
@media (max-width:920px){
  .ms-boeksectie__wrap{grid-template-columns:minmax(0,1fr)}
  .ms-boeksectie__intro{max-width:60ch}
}
@media (max-width:520px){
  .ms-boeksectie__paneel{
    padding:14px;
    border-radius:min(var(--msb-radius),18px);
  }
}

/* Donkere previews: de band volgt de pagina, het paneel blijft licht zodat
   het formulier leesbaar is. Alleen de tekstkolom keert om. */
.ms-boeksectie[data-msb-toon="donker"] .ms-boeksectie__demo{
  background:color-mix(in srgb,var(--msb-ink) 10%,transparent);
}

@media (prefers-reduced-motion:reduce){
  .ms-boeksectie *{transition:none!important}
}