/* ============================================================================
   BRUYST — PAGINABLOKKEN
   ----------------------------------------------------------------------------
   DIT BESTAND IS DE ENIGE PLEK waar de vormgeving van de locatie- en
   behandelpagina's staat. Pas je hier iets aan, dan veranderen alle pagina's
   mee — ook de dertig die er straks staan. Dat is precies de bedoeling.

   Wat je waarschijnlijk wilt bijstellen staat in het blok INSTELKNOPPEN.
   Daaronder hoef je normaal niet te komen.

   Geen font-family (dat doet Elementor) en geen losse hex-kleuren
   (die komen uit --bruyst-*, zie inc/config.php).
   ============================================================================ */

:root {
  --bruyst-blok-max:      1140px;  /* maximale breedte van een blok        */
  --bruyst-blok-gap:        64px;  /* ruimte tussen tekst en beeld         */
  --bruyst-blok-padding:    72px;  /* verticale ruimte boven/onder een blok*/
  --bruyst-blok-radius:     20px;  /* ronding van afbeeldingen             */
  --bruyst-blok-beeld:     1fr;    /* verhouding beeld t.o.v. tekst        */
  --bruyst-blok-tekst:     1fr;
  --bruyst-knop-radius:    10px;   /* afronding van alle knoppen           */
  --bruyst-knop-padding:   14px 30px;

  /* Verticale ritmes BINNEN een blok — overal dezelfde verhoudingen
     (v3.17.0). Eén plek bijstellen = alle blokken en de hero mee. */
  --bruyst-afstand-eyebrow: 14px;  /* label/eyebrow → titel                */
  --bruyst-afstand-titel:   24px;  /* titel → tekst                        */
  --bruyst-afstand-tekst:   30px;  /* tekst → knop(pen)                    */
}


/* ============================================================
   1. Hero
   ============================================================ */
/* LET OP — de :not(.ys-split) is essentieel.
   Draait de plugin Yinga Split, dan krijgt de hero haar engine en moeten deze
   regels zich er niet mee bemoeien. Zonder de :not() wint hier
   `align-items:center` en `max-width`, en dan krijgt het mediavak hoogte 0 —
   de foto verdwijnt dan zonder foutmelding. */
.bruyst-hero:not(.ys-split) {
  display: grid;
  grid-template-columns: var(--bruyst-blok-tekst) var(--bruyst-blok-beeld);
  gap: var(--bruyst-blok-gap);
  align-items: center;
  max-width: var(--bruyst-blok-max);
  margin: 0 auto;
  padding: var(--bruyst-blok-padding) 0;
}

.bruyst-hero--geen-beeld:not(.ys-split) {
  grid-template-columns: 1fr;
  max-width: 780px;
  text-align: center;
}

.bruyst-hero__titel {
  margin: 0 0 var(--bruyst-afstand-titel);
  color: var(--bruyst-accent-dark);
}

/* Beeld en tekst van de hero in de niet-plugin variant. */
.bruyst-hero:not(.ys-split) .bruyst-hero__beeld img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--bruyst-blok-radius);
}

.bruyst-hero__body > *:first-child { margin-top: 0; }
.bruyst-hero__body > *:last-child  { margin-bottom: 0; }

.bruyst-hero__beeld img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--bruyst-blok-radius);
}


/* ============================================================
   2. Inhoudsblok
   ============================================================ */
/* LET OP — dezelfde valkuil als bij de hero.
   `padding: 72px 20px` is een shorthand en zet dus OOK padding-left en -right.
   Daarmee overschreef hij de padding van .ys-split, en juist die berekent waar
   de tekst op het grid begint en hoe ver het beeld naar de schermrand bleedt.
   Gevolg: de bleed kwam niet netjes tegen de kant. Alleen de verticale ruimte
   zetten dus, en de horizontale aan de engine overlaten. */
.bruyst-blok:not(.ys-split) {
  padding: var(--bruyst-blok-padding) 20px;
}

.bruyst-blok.ys-split {
  padding-top: var(--bruyst-blok-padding);
  padding-bottom: var(--bruyst-blok-padding);
}

.bruyst-blok__binnen {
  display: grid;
  grid-template-columns: var(--bruyst-blok-tekst) var(--bruyst-blok-beeld);
  gap: var(--bruyst-blok-gap);
  align-items: center;
  max-width: var(--bruyst-blok-max);
  margin: 0 auto;
}

/* Beeld links: tekst schuift naar kolom 2 zonder de HTML-volgorde te wijzigen,
   zodat schermlezers en mobiel altijd eerst de kop krijgen. */
.bruyst-blok--beeld-links .bruyst-blok__tekst { order: 2; }
.bruyst-blok--beeld-links .bruyst-blok__beeld { order: 1; }

.bruyst-blok--beeld-geen .bruyst-blok__binnen {
  grid-template-columns: 1fr;
  max-width: 820px;
}

.bruyst-blok__titel {
  margin: 0 0 var(--bruyst-afstand-titel);
  color: var(--bruyst-primary);
}

.bruyst-blok__body > *:first-child { margin-top: 0; }
.bruyst-blok__body > *:last-child  { margin-bottom: 0; }

/* Eyebrow/label boven de titel — vaste afstand, waar hij ook opduikt.
   Met de Yinga-plugin draagt hij .ys-split__eyebrow (kleur komt uit de
   brug in inc/assets.php); zonder plugin doet het theme het hier zelf. */
.bruyst-blok__eyebrow,
.bruyst-hero__eyebrow,
.ys-split__eyebrow,
.ys-split__tags-label {
  margin: 0 0 var(--bruyst-afstand-eyebrow);
}

/* Ook mét de plugin geeft het theme de eyebrow zijn vorm — maar alleen
   binnen een Bruyst-blok of -hero, dus Yinga-secties elders op de site
   houden hun eigen opmaak. Zo ziet de eyebrow er overal hetzelfde uit,
   welke pluginversie er ook draait. */
.bruyst-blok__eyebrow,
.bruyst-hero__eyebrow,
.bruyst-blok .ys-split__eyebrow,
.bruyst-hero .ys-split__eyebrow {
  color: var(--bruyst-accent-dark);
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Op een donker vlak moet de eyebrow wit zijn, net als de kop. */
.bruyst-blok--bg-mint .bruyst-blok__eyebrow,
.bruyst-blok--bg-duif .bruyst-blok__eyebrow,
.bruyst-blok--bg-mint .ys-split__eyebrow,
.bruyst-blok--bg-duif .ys-split__eyebrow { color: #fff; }

.bruyst-blok__beeld img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--bruyst-blok-radius);
}

/* ============================================================
   ACHTERGRONDEN
   ----------------------------------------------------------------------------
   Twee vormen, per blok te kiezen:

     "Over de hele breedte"  de kleur loopt van schermrand tot schermrand
     "Afgerond vlak"         de kleur blijft binnen de kolom en krijgt hoeken

   De kleur wordt één keer als variabele gezet (--bruyst-blok-bg). Daardoor
   hoeft een nieuwe achtergrondkleur maar op één regel te worden toegevoegd —
   de vlak-variant erft hem automatisch. Zie ook het kopje "Een kleur
   toevoegen" in README.md.
   ============================================================ */
.bruyst-blok--bg-zacht { --bruyst-blok-bg: var(--bruyst-accent-soft); }
.bruyst-blok--bg-wolk  { --bruyst-blok-bg: var(--bruyst-wolk); }
.bruyst-blok--bg-mint  { --bruyst-blok-bg: var(--bruyst-groen); }
.bruyst-blok--bg-duif  { --bruyst-blok-bg: var(--bruyst-duif); }

.bruyst-blok--bg-zacht,
.bruyst-blok--bg-wolk,
.bruyst-blok--bg-mint,
.bruyst-blok--bg-duif { background: var(--bruyst-blok-bg); }

/* Donkere vlakken: tekst omkeren, anders wordt het onleesbaar. */
.bruyst-blok--bg-mint,
.bruyst-blok--bg-duif { color: #fff; }
.bruyst-blok--bg-mint .bruyst-blok__titel,
.bruyst-blok--bg-duif .bruyst-blok__titel { color: #fff; }

/* --- Het vlak (v3.32: drie smaken + hoekkeuze) ---
     --vol         kleur op de sectie, schermrand tot schermrand (hierboven)
     --vlak-kaart  "Vlak om tekst en beeld": kleur op .bruyst-blok__binnen
     --vlak-tekst  "Alleen het tekstvlak": kleur alleen op het tekstvak
     --recht       hoeken recht in plaats van afgerond                       */
:root { --bruyst-vlak-radius: 24px; --bruyst-vlak-padding: 48px; }

/* De sectie zelf wordt weer doorzichtig; de kleur verhuist naar binnen. */
.bruyst-blok--vlak { background: none; }

.bruyst-blok--vlak > .bruyst-blok__inhoud,
.bruyst-blok--vlak-kaart > .bruyst-blok__binnen,
.bruyst-blok--vlak-tekst.ys-split > .ys-split__text,
.bruyst-blok--vlak-tekst > .bruyst-blok__binnen > .bruyst-blok__tekst {
  background: var(--bruyst-blok-bg);
  border-radius: var(--bruyst-vlak-radius);
  padding: var(--bruyst-vlak-padding);
}

.bruyst-blok--recht { --bruyst-vlak-radius: 0px; }

/* Met de Yinga-engine staat tekst en beeld naast elkaar op één rij; bij
   "alleen het tekstvlak" hoort de kleur om de tekstkolom, niet om het beeld. */
.bruyst-blok--vlak-tekst.ys-split > .ys-split__text {
  box-sizing: border-box;
}


/* ============================================================
   HET KADER MET DE GOLF  (achtergrond = "kader")
   ----------------------------------------------------------------------------
   Het omlijnde blok van de homepagina. De ONDERRAND wordt getekend door de
   SVG, niet door de border — daarom border-bottom: 0 en geen ronding onderaan.
   De SVG hangt met -2px aan alle drie de kanten zodat zijn verticale uiteinden
   precies op de zijranden vallen.
   ============================================================ */
:root {
  --bruyst-kader-radius:  24px;
  --bruyst-kader-rand:     2px;
  --bruyst-kader-padding: 48px 60px;   /* boven/onder wordt hieronder gezet */
  --bruyst-kader-golf:    73px;        /* hoogte van de golf-SVG */
}

.bruyst-blok--kader {
  padding: var(--bruyst-blok-padding) 20px;
}

.bruyst-kader {
  position: relative;
  max-width: var(--bruyst-blok-max);
  margin: 0 auto;
  background: #fff;
  color: var(--bruyst-secondary);          /* rand en golf erven dit */
  padding: 48px 60px calc(var(--bruyst-kader-golf) + 24px);
}

/* De drie rechte randen. Cruciaal is `bottom: var(--bruyst-kader-golf)`:
   daar houdt de rand op en neemt de golf het over. De golf tekent namelijk
   zelf een stukje zijkant — links maar 31px, rechts 65px, omdat de hoek
   linksonder ruim gebogen is en die rechtsonder krap. Liet je de rand
   doorlopen tot de onderkant, dan liepen die verticale lijnen te ver door. */
.bruyst-kader__rand {
  position: absolute;
  left: 0; right: 0; top: 0;
  bottom: var(--bruyst-kader-golf);
  border: var(--bruyst-kader-rand) solid currentColor;
  border-bottom: 0;
  border-radius: var(--bruyst-kader-radius) var(--bruyst-kader-radius) 0 0;
  pointer-events: none;
}

/* De inhoud erft de gewone tekstkleur weer terug. */
.bruyst-kader__binnen {
  color: var(--bruyst-text);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--bruyst-blok-gap);
  align-items: center;
}

.bruyst-kader--beeld-links .bruyst-kader__binnen,
.bruyst-kader--beeld-rechts .bruyst-kader__binnen {
  grid-template-columns: 1fr 1fr;
}

.bruyst-kader--beeld-links .bruyst-kader__tekst { order: 2; }
.bruyst-kader--beeld-links .bruyst-kader__beeld { order: 1; }

.bruyst-kader__beeld img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--bruyst-blok-radius);
}

.bruyst-kader__golf {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  width: 100%;
  height: var(--bruyst-kader-golf);
  display: block;
  overflow: visible;   /* de golf mag net onder de rand uitkomen */
  pointer-events: none;
}


/* ============================================================
   BLOKKEN DIE EEN ANDER ONDERDEEL TEKENEN
   ----------------------------------------------------------------------------
   Locaties, behandelingen, team, vragen en Elementor-sjablonen zitten in
   dezelfde blokkenlijst als de tekstblokken. Dáár bepaal je de volgorde van de
   pagina: sleep het locatieblok tussen twee tekstblokken en zo staat het op de
   voorkant ook.

   De onderdelen zelf (.bruyst-locaties, .bruyst-team, .bruyst-behandelingen)
   brengen bewust géén eigen buitenruimte mee — die stond altijd al in de
   Elementor-sectie eromheen. Als blok krijgen ze die ruimte hier, één keer.
   ============================================================ */
.bruyst-blok--onderdeel {
  padding: var(--bruyst-blok-padding) 20px;
}

.bruyst-blok--onderdeel > .bruyst-blok__inhoud {
  max-width: var(--bruyst-blok-max);
  margin: 0 auto;
}

/* Twee uitzonderingen: het vragenblok en een Elementor-sjabloon hebben hun
   eigen ruimte al. Zou het blok daar nóg eens padding overheen zetten, dan
   werd het gat boven en onder twee keer zo groot.
   Twee classes, zodat dit het regeltje hierboven verslaat zonder !important. */
.bruyst-blok.bruyst-blok--faq,
.bruyst-blok.bruyst-blok--sjabloon {
  padding: 0;
}

.bruyst-blok--sjabloon > .bruyst-blok__inhoud,
.bruyst-blok--faq > .bruyst-blok__inhoud {
  max-width: none;
}

/* Staat er een kop boven een sjabloonblok, dan hoort die wél binnen dezelfde
   maximumbreedte als de rest van de pagina. */
.bruyst-blok--sjabloon > .bruyst-blok__inhoud > .bruyst-blok__titel {
  max-width: var(--bruyst-blok-max);
  margin: 0 auto;
  padding: var(--bruyst-blok-padding) 20px 0;
  text-align: center;
}


/* ============================================================
   2b. Samenspel met de plugin "Yinga Split"
   ----------------------------------------------------------------------------
   Staat die plugin aan, dan gebruiken de blokken háár engine: dezelfde
   .ys-split-classes, dezelfde bleed, dezelfde typografie. Hier zetten we alleen
   de twee dingen recht die dan nog nodig zijn.
   ============================================================ */

/* De hero draait op dezelfde engine als een inhoudsblok. We zetten alleen de
   verticale ruimte en de eigen kleur van de hero-kop. */
.bruyst-hero.ys-split {
  padding-top: var(--bruyst-blok-padding);
  padding-bottom: var(--bruyst-blok-padding);
}

.bruyst-hero.ys-split .ys-split__title {
  color: var(--bruyst-accent-dark);
}

/* Een blok zonder beeld draagt óók .ys-split, maar alleen voor de
   ritme-variabelen. De full-bleed layout draaien we hier terug naar een
   gewone gecentreerde tekstkolom. */
.bruyst-hero--geen-beeld.ys-split,
.bruyst-blok--beeld-geen.ys-split {
  display: block;
  width: auto;
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}

/* UITZONDERING op de regel hierboven — dit moet ná die regel staan, anders
   verliest hij (even veel classes = de laatste wint).

   Een tekstblok zonder beeld is een gecentreerde kolom van 820px, en die
   maxbreedte zit op de SECTIE. Zolang de sectie wit is merk je dat niet.
   Zodra er een achtergrondkleur op komt wél: de kleur zou dan een balk van
   820px worden in plaats van door te lopen tot de schermrand. Bij de keuze
   "Over de hele breedte" verhuist de maxbreedte daarom naar de kolom binnenin.
   Bij "Afgerond vlak" blijft alles zoals het was — daar hoort de kleur juist
   binnen de kolom. */
.bruyst-blok--beeld-geen.bruyst-blok--vol,
.bruyst-blok--beeld-geen.ys-split.bruyst-blok--vol {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

.bruyst-blok--beeld-geen.bruyst-blok--vol > .ys-split__text,
.bruyst-blok--beeld-geen.bruyst-blok--vol > .bruyst-blok__binnen {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
}

.bruyst-hero--geen-beeld.ys-split .ys-split__text,
.bruyst-blok--beeld-geen.ys-split .ys-split__text {
  flex: none;
  max-width: none;
}

/* "Afgerond vlak" bij een logo of video (v3.30.0): de kleur hoort dan om
   het HELE blok — tekst en beeld samen in één vlak. Een logo of video vult
   zijn helft immers niet, dus met de kleur alleen om de tekstkolom bleef
   half het vlak wit. De sectie stapt uit het plugin-grid (zelfde patroon
   als "geen beeld" hierboven); de twee kolommen komen uit
   .bruyst-blok__binnen en de kleur uit .bruyst-blok--vlak > __binnen. */
.bruyst-blok--vlak-kaart.ys-split {
  display: block;
  width: auto;
  max-width: calc(var(--bruyst-blok-max) + 40px);
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}

/* De linklijst van de plugin kleurt de hele regel in de accentkleur. Voor
   echte links klopt dat; voor een opsomming die geen link is, is het te veel.
   Daar kleuren we alleen het vinkje. */
.bruyst-vinkjes .ys-split__link {
  color: var(--bruyst-primary);
}

.bruyst-vinkjes .ys-split__linklist {
  --ys-link-markerc: var(--bruyst-secondary);
}


/* ============================================================
   2c. De herofoto als achtergrond, zonder dynamische tag
   ----------------------------------------------------------------------------
   Zet deze class op een Elementor-container en laat het achtergrond-veld leeg.
   De foto en het focuspunt komen uit "Kop van de pagina".
   Staat er geen foto op de pagina, dan gebeurt er niets — geen kapotte URL.
   ============================================================ */
.bruyst-achtergrond-hero {
  background-image: var(--bruyst-hero-foto, none);
  background-size: cover;
  background-position: var(--bruyst-hero-focus, 50% 50%);
  background-repeat: no-repeat;
}


/* ============================================================
   3. Vinkjeslijst — eigen vangnet als de plugin uit staat
   ============================================================ */
.bruyst-lijst__kop {
  margin: 26px 0 12px;
  font-weight: 700;
  color: var(--bruyst-primary);
}

.bruyst-lijst {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bruyst-lijst__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  padding: 0;
}

.bruyst-lijst__vink {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  margin-top: .25em;
  color: var(--bruyst-secondary);
}

/* --- Twee kolommen naast elkaar ---
   Voor lijstjes met vijf of meer korte punten ("Onze behandelingen").
   De items vullen kolom voor kolom van links naar rechts; onder 767px
   wordt het altijd één kolom, hoe smal het scherm ook is.
   Zowel voor de eigen lijst als voor de linklijst van de plugin: die
   heeft zijn eigen kolominstelling, maar niet elke plugin-versie kent
   'cols', dus zetten we het hier ook vast. */
/* CSS-kolommen (niet grid): daarmee loopt de lijst KOLOMSGEWIJS vol —
   eerst de hele linkerkolom, dan de rechter — precies zoals in het ontwerp.
   Een grid zou de punten om en om verdelen. */
.bruyst-lijst--kolommen-2,
.bruyst-vinkjes--kolommen-2 .ys-split__linklist,
.bruyst-vinkjes--kolommen-2 .ys-split__items {
  display: block;
  columns: 2;
  column-gap: 32px;
}

.bruyst-lijst--kolommen-2 .bruyst-lijst__item,
.bruyst-vinkjes--kolommen-2 .ys-split__linklist > *,
.bruyst-vinkjes--kolommen-2 .ys-split__items > * {
  break-inside: avoid;          /* een punt nooit over twee kolommen breken */
  margin-bottom: 10px;
}

@media (max-width: 767px) {
  .bruyst-lijst--kolommen-2,
  .bruyst-vinkjes--kolommen-2 .ys-split__linklist,
  .bruyst-vinkjes--kolommen-2 .ys-split__items {
    columns: 1;
  }
}




/* ============================================================
   GOLFRAND BOVENKANT (per blok instelbaar, met amplitude)
   ------------------------------------------------------------
   De bovenkant van de achtergrondkleur wordt als golf uitgesneden met een
   CSS-mask: één laag dekt alles onder de golf, de golf-SVG zelf maskeert de
   bovenste --wave-h. Zelfde golflijn als het kader. Alleen zinvol bij
   "Over de hele breedte" (--vol): daar draagt de sectie zelf de kleur.
   Het blok krijgt --wave-h extra padding boven, zodat de inhoud onder de
   golf blijft. Amplitude = gewoon een andere --wave-h.
   ============================================================ */
.bruyst-blok--golf.bruyst-blok--vol {
  --wave-h: 73px;
  padding-top: calc(var(--bruyst-blok-padding) + var(--wave-h)) !important;
  -webkit-mask:
    linear-gradient(#000,#000) bottom/100% calc(100% - var(--wave-h)) no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 998 73' preserveAspectRatio='none'%3E%3Cg transform='translate(998,73)%20scale(-1,-1)'%3E%3Cpath fill='%23000' d='M0,0 L0,65.2 H533.25 C566.02,65.21 585.59,58.46 604.89,49.48 C621.79,41.6 637.74,34.17 659.51,34.17 C683.76,34.17 701.01,43.43 717.7,52.37 C732.6,60.37 748.46,68.42 765.03,67.99 C781.78,67.55 794.74,53.22 809.35,37.57 C826.44,19.25 844.13,0.31 870.53,0.31 C893.52,0.31 909.93,17.35 925.8,33.83 C946.95,55.8 963.75,71.63 989.12,67.17 C993.72,66.36 997.01,63.11 997.01,59.34 L998,59.34 L998,0 Z'/%3E%3C/g%3E%3C/svg%3E")
    top/100% var(--wave-h) no-repeat;
  mask:
    linear-gradient(#000,#000) bottom/100% calc(100% - var(--wave-h)) no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 998 73' preserveAspectRatio='none'%3E%3Cg transform='translate(998,73)%20scale(-1,-1)'%3E%3Cpath fill='%23000' d='M0,0 L0,65.2 H533.25 C566.02,65.21 585.59,58.46 604.89,49.48 C621.79,41.6 637.74,34.17 659.51,34.17 C683.76,34.17 701.01,43.43 717.7,52.37 C732.6,60.37 748.46,68.42 765.03,67.99 C781.78,67.55 794.74,53.22 809.35,37.57 C826.44,19.25 844.13,0.31 870.53,0.31 C893.52,0.31 909.93,17.35 925.8,33.83 C946.95,55.8 963.75,71.63 989.12,67.17 C993.72,66.36 997.01,63.11 997.01,59.34 L998,59.34 L998,0 Z'/%3E%3C/g%3E%3C/svg%3E")
    top/100% var(--wave-h) no-repeat;
}
.bruyst-blok--golf-subtiel.bruyst-blok--vol      { --wave-h: 40px; }
.bruyst-blok--golf-normaal.bruyst-blok--vol      { --wave-h: 73px; }
.bruyst-blok--golf-uitgesproken.bruyst-blok--vol { --wave-h: 110px; }


/* ============================================================
   4. Knop
   ============================================================ */
.bruyst-blok__actie {
  margin: var(--bruyst-afstand-tekst) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.bruyst-knop {
  display: inline-flex;
  align-items: center;
  background: var(--bruyst-secondary);
  color: #fff !important;
  padding: var(--bruyst-knop-padding);
  border-radius: var(--bruyst-knop-radius);
  text-decoration: none;
  transition: filter .15s;
}

/* Tweede knop: dezelfde vorm, maar met een lijntje in plaats van een vlak. */
.bruyst-knop--tweede {
  background: transparent;
  color: var(--bruyst-primary) !important;
  border: 1.5px solid var(--bruyst-primary);
}

.bruyst-knop--tweede:hover {
  background: var(--bruyst-primary);
  color: #fff !important;
  filter: none;
}

.bruyst-knop:hover { filter: brightness(.92); }


/* ============================================================
   5. Veelgestelde vragen
   <details>/<summary> — uitklappen zonder JavaScript
   ============================================================ */
.bruyst-faq {
  max-width: 820px;
  margin: 0 auto;
  padding: var(--bruyst-blok-padding) 20px;
}

/* Twee kolommen heeft meer ruimte nodig dan één. */
.bruyst-faq--kolommen-2 {
  max-width: var(--bruyst-blok-max);
}

.bruyst-faq__titel {
  text-align: center;
  margin: 0 0 32px;
  color: var(--bruyst-primary);
}

.bruyst-faq__lijst {
  display: grid;
  grid-template-columns: 1fr;
  align-content: start;
  gap: 12px;
}

/* Twee kolommen. Bewust `grid` en geen `columns`: bij CSS-kolommen kan een
   uitklappend antwoord halverwege afbreken en naar de volgende kolom springen.
   Met grid blijft elke vraag heel.
   `align-items: start` voorkomt dat alle items even hoog worden zodra er één
   opengeklapt is. */
.bruyst-faq__lijst[data-kolommen="2"] {
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 12px 20px;
}

@media (max-width: 767px) {
  .bruyst-faq__lijst[data-kolommen="2"] { grid-template-columns: 1fr; }
}

.bruyst-faq__item {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 2px 14px rgba(21, 20, 62, .07);
  overflow: hidden;
}

.bruyst-faq__vraag {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 24px;
  cursor: pointer;
  font-weight: 700;
  color: var(--bruyst-primary);
  list-style: none;
}

/* Het standaard driehoekje van de browser weg. */
.bruyst-faq__vraag::-webkit-details-marker { display: none; }
.bruyst-faq__vraag::marker { content: ""; }

.bruyst-faq__pijl {
  width: 13px;
  height: 9px;
  flex-shrink: 0;
  color: var(--bruyst-secondary);
  transition: transform .2s ease;
}

.bruyst-faq__item[open] .bruyst-faq__pijl {
  transform: rotate(180deg);
}

.bruyst-faq__antwoord {
  padding: 0 24px 20px;
}

.bruyst-faq__antwoord > *:first-child { margin-top: 0; }
.bruyst-faq__antwoord > *:last-child  { margin-bottom: 0; }

.bruyst-faq__item:focus-within {
  outline: 2px solid var(--bruyst-accent);
  outline-offset: 2px;
}

/* Knop onder de vragenlijst, bv. "Bekijk alle veelgestelde vragen".
   .bruyst-blok__actie is een flexrij, dus centreren gaat via justify-content —
   text-align doet daar niets. */
.bruyst-faq__actie {
  margin-top: 32px;
}

.bruyst-faq__actie .bruyst-blok__actie {
  justify-content: center;
  margin: 0;
}


/* ============================================================
   6. Responsive — onder 900px alles onder elkaar, beeld eerst
   ============================================================ */
@media (max-width: 900px) {

  :root {
    --bruyst-blok-gap:     32px;
    --bruyst-blok-padding: 48px;
    --bruyst-kader-golf:   48px;
  }

  /* :not(.ys-split): op de Yinga-engine bepaalt de plugin de kolommen —
     zonder deze uitsluiting kreeg het mediavak daar hoogte 0 (zelfde
     invariant als bovenin dit bestand). */
  .bruyst-hero:not(.ys-split),
  .bruyst-blok__binnen {
    grid-template-columns: 1fr;
  }

  /* Op mobiel eerst het beeld, dan de tekst — ongeacht de gekozen zijde. */
  .bruyst-hero__beeld,
  .bruyst-blok__beeld { order: 1; }
  .bruyst-hero__tekst,
  .bruyst-blok__tekst { order: 2; }

  .bruyst-blok--beeld-links .bruyst-blok__tekst { order: 2; }
  .bruyst-blok--beeld-links .bruyst-blok__beeld { order: 1; }
}


/* --- Het kader op smalle schermen --- */
@media (max-width: 767px) {
  .bruyst-kader {
    padding: 32px 24px calc(var(--bruyst-kader-golf) + 16px);
    border-radius: 18px 18px 0 0;
  }
  .bruyst-kader--beeld-links .bruyst-kader__binnen,
  .bruyst-kader--beeld-rechts .bruyst-kader__binnen {
    grid-template-columns: 1fr;
  }
  .bruyst-kader--beeld-links .bruyst-kader__tekst,
  .bruyst-kader--beeld-links .bruyst-kader__beeld { order: 0; }
}

/* ============================================================
   LOGO IN PLAATS VAN FOTO (v3.27.0)
   ------------------------------------------------------------
   "Het beeld is een… → Logo": het beeld houdt zijn eigen vorm
   (geen bijsnijden, geen vlak vullen), met instelbare grootte
   en uitlijning. Het mediavak zelf centreert verticaal.
   ============================================================ */
.bruyst-media--logo {
  display: flex;
  align-items: center;
  aspect-ratio: auto !important;   /* nooit het foto-kader afdwingen */
}
/* LET OP: dit heet bewust "bruyst-bloklogo" en NIET "bruyst-logo" — die
   naam is al van het sitelogo in de header (bruyst-nav.css). Dezelfde naam
   gebruiken zette het headerlogo op width:100% (menu van het scherm af) en
   sloopte andersom de centrering hier. */
.bruyst-bloklogo {
  display: flex;
  width: 100%;
}
.bruyst-bloklogo--links  { justify-content: flex-start; }
.bruyst-bloklogo--midden { justify-content: center; }
.bruyst-bloklogo--rechts { justify-content: flex-end; }
.bruyst-bloklogo img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  object-fit: contain;
}
/* Riem én bretels: ook zonder de flexregels hierboven (mocht andere CSS ze
   ooit overschrijven) lijnt het logo goed uit, via auto-marges op de img. */
.bruyst-bloklogo--links  img,
.bruyst-bloklogo--links  a { margin-right: auto; }
.bruyst-bloklogo--midden img,
.bruyst-bloklogo--midden a { margin-left: auto; margin-right: auto; }
.bruyst-bloklogo--rechts img,
.bruyst-bloklogo--rechts a { margin-left: auto; }
.bruyst-bloklogo--klein  img { max-height: 64px;  max-width: min(180px, 100%); }
.bruyst-bloklogo--middel img { max-height: 110px; max-width: min(260px, 100%); }
.bruyst-bloklogo--groot  img { max-height: 170px; max-width: min(360px, 100%); }
.bruyst-bloklogo a { display: inline-flex; }
.bruyst-bloklogo a:hover img { opacity: .85; transition: opacity .15s; }

/* ============================================================
   VIDEO NAAST DE TEKST (v3.28.0)
   ------------------------------------------------------------
   "Het beeld is een… → Video": een YouTube/Vimeo-embed die zijn
   16:9-verhouding houdt (nooit meegerekt naar tekst-hoogte) en
   dezelfde afronding krijgt als de foto's.
   ============================================================ */
.bruyst-media--video {
  display: flex;
  align-items: center;
  aspect-ratio: auto !important;
}
.bruyst-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--ys-radius, 14px);
  overflow: hidden;
  background: rgba(0, 0, 0, .06);
}
.bruyst-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ============================================================
   LOGO'S-RIJ, CIJFERS EN CITAAT (v3.29.0)
   ============================================================ */
.bruyst-logos {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 4vw, 48px);
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
}
.bruyst-logos li { display: flex; }
.bruyst-logos img { width: auto; height: auto; object-fit: contain; }
.bruyst-logos--klein  img { max-height: 44px; max-width: 140px; }
.bruyst-logos--middel img { max-height: 64px; max-width: 200px; }
.bruyst-logos--groot  img { max-height: 92px; max-width: 260px; }
.bruyst-logos a { display: inline-flex; }
.bruyst-logos a:hover img { opacity: .8; transition: opacity .15s; }

.bruyst-cijfers {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(24px, 6vw, 72px);
  justify-content: center;
  margin: 0;
  padding: 0;
  text-align: center;
}
.bruyst-cijfer__getal {
  display: block;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  font-weight: 800;
  line-height: 1.05;
  color: var(--bruyst-accent);
}
.bruyst-cijfer__label {
  display: block;
  margin-top: 6px;
  font-size: .95rem;
  opacity: .75;
}

.bruyst-citaat {
  max-width: 46ch;
  margin: 0 auto;
  text-align: center;
  border: 0;
  padding: 0;
}
.bruyst-citaat__tekst {
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  font-weight: 600;
  line-height: 1.4;
  margin: 0 0 14px;
}
.bruyst-citaat__bron { font-size: .95rem; opacity: .8; }
.bruyst-citaat__bron strong { font-weight: 700; }
.bruyst-citaat__bron span::before { content: " — "; }