/* ============================================================================
   BRUYST — BLOG
   ----------------------------------------------------------------------------
   Het overzicht op /blog/ en de categoriepagina's daaronder, plus de kaartjes
   van [bruyst_berichten].

   Net als de andere Bruyst-CSS:
     - GEEN font-family (de typografie komt uit Elementor);
     - GEEN losse hex-kleuren, alles via --bruyst-*;
     - afrondingen uit dezelfde twee knoppen als de rest: 24px voor kaarten
       en vlakken, 10px voor pillen en knoppen.
   ============================================================================ */

.bruyst-blog,
.bruyst-blogkop {
  --bruyst-blog-radius:    var(--bruyst-loc-radius, 24px);
  --bruyst-blog-pil:       var(--bruyst-knop-radius, 10px);
  --bruyst-blog-lijn:      rgba(20, 20, 60, .12);
  --bruyst-blog-schaduw:   0 6px 28px rgba(21, 20, 62, .07);
  --bruyst-blog-gat:       clamp(20px, 2.4vw, 30px);
}

.bruyst-blog {
  max-width: var(--bruyst-content-breedte, 1240px);
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 56px) clamp(60px, 8vw, 100px);
}


/* ============================================================
   1. Kop — beeld met een kaart die er half overheen valt
   ============================================================ */
.bruyst-blogkop { position: relative; margin-bottom: clamp(36px, 5vw, 64px); }

.bruyst-blogkop__beeld {
  height: clamp(240px, 32vw, 400px);
  background-color: var(--bruyst-accent-soft, #E8F2F1);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* Geen foto gekozen: een vlak in de merkkleuren in plaats van een gat.
   Niet op een artikel zonder foto — die krijgt een DONKER vlak mee
   (.bruyst-vlak-N), en dit lichte verloop zou daar overheen winnen:
   :not([style]) telt als een tweede selector en is dus specifieker. */
.bruyst-blogkop__beeld:not([style]):not([class*="bruyst-vlak-"]) {
  background-image:
    radial-gradient(120% 90% at 78% 18%, rgba(111, 201, 194, .55), transparent 60%),
    linear-gradient(118deg, var(--bruyst-duif, #A5B9C8) 0%, var(--bruyst-groen, #6CA8A2) 58%, var(--bruyst-accent-dark, #4A9BA1) 100%);
}

/* Dezelfde marges als het overzicht eronder, zodat de kaart precies
   uitlijnt met de filterbalk en de kaarten. */
.bruyst-blogkop__binnen {
  max-width: var(--bruyst-content-breedte, 1240px);
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 56px);
}

.bruyst-blogkop__kaart {
  position: relative;
  max-width: 660px;
  margin-top: clamp(-90px, -8vw, -56px);
  background: #fff;
  border-radius: var(--bruyst-blog-radius);
  box-shadow: var(--bruyst-blog-schaduw);
  padding: clamp(24px, 4vw, 48px);
}

.bruyst-blogkop__label {
  display: block;
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bruyst-accent-dark, #4A9BA1);
  margin-bottom: 14px;
}

.bruyst-blogkop h1 { margin: 0 0 16px; }
.bruyst-blogkop p  { margin: 0; max-width: 52ch; opacity: .8; }


/* ============================================================
   2. Filterbalk
   ============================================================ */
.bruyst-blogfilter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding-bottom: clamp(24px, 3.5vw, 40px);
  border-bottom: 1px solid var(--bruyst-blog-lijn);
  margin-bottom: clamp(28px, 4vw, 48px);
}

.bruyst-blogfilter__label {
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .55;
  margin-right: 6px;
}

.bruyst-blogpil {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  border: 1px solid var(--bruyst-blog-lijn);
  border-radius: var(--bruyst-blog-pil);
  background: #fff;
  color: inherit;
  text-decoration: none;
  font-size: .95rem;
  line-height: 1.3;
  transition: border-color .16s, background .16s, color .16s;
}
.bruyst-blogpil:hover,
.bruyst-blogpil:focus-visible { border-color: var(--bruyst-accent-dark, #4A9BA1); }

.bruyst-blogpil.is-actief {
  background: var(--bruyst-primary, #14143C);
  border-color: var(--bruyst-primary, #14143C);
  color: #fff;
}

.bruyst-blogpil__aantal { opacity: .55; font-size: .85em; }

.bruyst-blogfilter__vestiging {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}
.bruyst-blogfilter__vestiging label {
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .55;
}
.bruyst-blogfilter__vestiging select {
  font: inherit;
  font-size: .95rem;
  padding: 9px 14px;
  border: 1px solid var(--bruyst-blog-lijn);
  border-radius: var(--bruyst-blog-pil);
  background: #fff;
  color: inherit;
  cursor: pointer;
  max-width: 100%;
}


/* ============================================================
   3. Uitgelicht artikel
   ============================================================ */
.bruyst-bloguitgelicht {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  background: var(--bruyst-wolk, #F6F9FA);
  border-radius: var(--bruyst-blog-radius);
  padding: clamp(22px, 3.5vw, 44px);
  margin-bottom: clamp(32px, 5vw, 60px);
}
.bruyst-bloguitgelicht > * { min-width: 0; }

/* Het beeld is hier een vlak waar de foto in valt: de foto zelf staat
   absoluut (zie sectie 4), dus hij heeft een kader nodig met een maat. */
.bruyst-bloguitgelicht__beeld {
  order: 2;
  display: block;
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: calc(var(--bruyst-blog-radius) - 8px);
  background: var(--bruyst-primary, #14143C);
}

.bruyst-bloguitgelicht h2 { margin: 12px 0 14px; }
.bruyst-bloguitgelicht h2 a { color: inherit; text-decoration: none; }
.bruyst-bloguitgelicht h2 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.bruyst-bloguitgelicht p { margin: 0 0 24px; opacity: .8; }

.bruyst-bloglees {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  color: inherit;
  font-weight: 500;
  border-bottom: 1px solid var(--bruyst-secondary, #D2694B);
  padding-bottom: 3px;
  transition: gap .16s;
}
.bruyst-bloglees:hover { gap: 14px; }
.bruyst-bloglees span { color: var(--bruyst-secondary, #D2694B); }


/* ============================================================
   4. Raster met kaarten — tekst óver de foto
   ------------------------------------------------------------
   De klant wilde de titel op het beeld, zoals bij FysioHolland.
   Het risico daarvan is een witte kop op een lichte foto, dus
   ligt er altijd een donker verloop onder de tekst. Dat verloop
   is geen decoratie maar de reden dat dit leesbaar blijft:
   niet weghalen zonder de kleur van de tekst mee te veranderen.
   ============================================================ */
.bruyst-blograster {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--bruyst-blog-gat);
}

.bruyst-blogkaart {
  display: block;
  position: relative;
  border-radius: var(--bruyst-blog-radius);
  overflow: hidden;
  color: #fff;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease;
}
.bruyst-blogkaart:hover,
.bruyst-blogkaart:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--bruyst-blog-schaduw);
}

.bruyst-blogkaart__beeldvlak {
  display: block;
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--bruyst-primary, #14143C);
}

.bruyst-blogkaart__beeld {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
.bruyst-blogkaart:hover .bruyst-blogkaart__beeld { transform: scale(1.04); }

/* Het verloop waar de tekst op ligt. */
.bruyst-blogkaart__beeldvlak::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(20, 20, 60, .82) 0%,
    rgba(20, 20, 60, .55) 30%,
    rgba(20, 20, 60, .12) 58%,
    rgba(20, 20, 60, 0) 78%);
}

.bruyst-blogkaart__cat {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 1;
  padding: 6px 13px;
  border-radius: var(--bruyst-blog-pil);
  background: rgba(255, 255, 255, .94);
  color: var(--bruyst-primary, #14143C);
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.3;
}

.bruyst-blogkaart__over {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 22px clamp(18px, 2vw, 26px) clamp(18px, 2vw, 24px);
}

.bruyst-blogkaart__over h3 {
  margin: 0 0 8px;
  color: #fff;
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  line-height: 1.24;
  /* Een lange titel mag het beeld niet helemaal opslokken. */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bruyst-blogkaart__regel {
  display: block;
  color: rgba(255, 255, 255, .8);
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.bruyst-blogplaats { color: inherit; }


/* ============================================================
   5. Meta-regel (categorie · datum)
   ============================================================ */
.bruyst-blogmeta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.bruyst-blogmeta__cat   { color: var(--bruyst-secondary, #D2694B); }
.bruyst-blogmeta__datum { opacity: .5; }
.bruyst-blogmeta__punt  { opacity: .35; }


/* ============================================================
   6. Onderkant: leeg, en vorige/volgende
   ============================================================ */
.bruyst-blogleeg { padding: 40px 0 60px; opacity: .7; }

.bruyst-blognav {
  display: flex;
  justify-content: center;
  gap: 14px;
  padding-top: clamp(40px, 6vw, 72px);
}
.bruyst-blognav a {
  display: inline-block;
  padding: 14px 30px;
  border: 1px solid var(--bruyst-primary, #14143C);
  border-radius: var(--bruyst-blog-pil);
  color: inherit;
  text-decoration: none;
  font-weight: 500;
  transition: background .16s, color .16s;
}
.bruyst-blognav a:hover {
  background: var(--bruyst-primary, #14143C);
  color: #fff;
}
.bruyst-blognav__vorige a {
  border-color: var(--bruyst-blog-lijn);
}


/* ============================================================
   7. [bruyst_berichten] op een gewone pagina
   ============================================================ */
.bruyst-blogsectie { --bruyst-blog-gat: clamp(20px, 2.4vw, 30px); }
.bruyst-blogsectie__kop { margin: 0 0 clamp(20px, 3vw, 32px); }


/* ============================================================
   8. Vlakken voor artikelen zonder uitgelichte afbeelding
   ------------------------------------------------------------
   Zes varianten, gekozen op het ID van het artikel — zo staat er
   nooit een gat, en ziet dezelfde pagina er elke keer gelijk uit.
   ============================================================ */
.bruyst-blogkaart__beeld--leeg { position: absolute; inset: 0; width: 100%; height: 100%; }
.bruyst-vlak-1 { background: linear-gradient(150deg, var(--bruyst-groen, #6CA8A2), var(--bruyst-primary, #14143C)); }
.bruyst-vlak-2 { background: linear-gradient(150deg, var(--bruyst-accent-dark, #4A9BA1), var(--bruyst-primary, #14143C)); }
.bruyst-vlak-3 { background: linear-gradient(150deg, var(--bruyst-duif, #A5B9C8), var(--bruyst-primary, #14143C)); }
.bruyst-vlak-4 { background: linear-gradient(150deg, var(--bruyst-purple, #9393C2), var(--bruyst-primary, #14143C)); }
.bruyst-vlak-5 { background: linear-gradient(150deg, var(--bruyst-accent, #6FC9C2), var(--bruyst-primary, #14143C)); }
.bruyst-vlak-6 { background: linear-gradient(150deg, var(--bruyst-teal-light, #72C4C0), var(--bruyst-primary, #14143C)); }


/* ============================================================
   8b. Het artikel zelf
   ------------------------------------------------------------
   Dezelfde kop als het overzicht, daaronder één leeskolom. De
   typografie staat hier bewust minimaal: koppen en tekst komen
   uit Elementor, dit regelt alleen de RUIMTE en de breedte.
   ============================================================ */
.bruyst-artikelkop .bruyst-blogkop__kaart { max-width: 760px; }

.bruyst-artikelkop__cat {
  display: inline-block;
  margin-bottom: 16px;
  padding: 6px 14px;
  border-radius: var(--bruyst-blog-pil);
  background: var(--bruyst-accent-soft, #E8F2F1);
  color: var(--bruyst-accent-dark, #4A9BA1);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .16s;
}
.bruyst-artikelkop__cat:hover { background: var(--bruyst-accent, #6FC9C2); color: #fff; }

.bruyst-artikelkop h1 { margin: 0 0 14px; }
.bruyst-artikelkop .bruyst-blogmeta__plaats { opacity: .5; }

.bruyst-artikel__tekst {
  /* Links uitlijnen, niet centreren: de titelkaart erboven staat ook links.
     Gecentreerd leest het als een foutje in plaats van als een keuze. */
  max-width: var(--bruyst-blog-leeskolom, 70ch);
  margin: 0;
}
.bruyst-artikel__tekst > * { margin-top: 0; }
.bruyst-artikel__tekst > * + * { margin-top: 1.1em; }
.bruyst-artikel__tekst h2 { margin-top: 1.9em; }
.bruyst-artikel__tekst h3 { margin-top: 1.6em; }
.bruyst-artikel__tekst ul,
.bruyst-artikel__tekst ol { padding-left: 1.3em; }
.bruyst-artikel__tekst li + li { margin-top: .4em; }

.bruyst-artikel__tekst img,
.bruyst-artikel__tekst figure { border-radius: var(--bruyst-blog-radius); overflow: hidden; }
.bruyst-artikel__tekst figure { margin-left: 0; margin-right: 0; }
.bruyst-artikel__tekst figcaption { margin-top: .6em; font-size: .9rem; opacity: .6; }

.bruyst-artikel__tekst blockquote {
  margin-left: 0;
  margin-right: 0;
  padding-left: 22px;
  border-left: 3px solid var(--bruyst-secondary, #D2694B);
  font-size: 1.1em;
}

.bruyst-artikel__tekst a { color: var(--bruyst-secondary, #D2694B); }

/* De weg terug, onder de tekst maar binnen dezelfde kolom. */
.bruyst-artikel__vestiging,
.bruyst-artikel__terug {
  max-width: var(--bruyst-blog-leeskolom, 70ch);
  margin-left: 0;
  margin-right: 0;
}
.bruyst-artikel__vestiging {
  margin-top: clamp(36px, 5vw, 56px);
  padding: 18px 22px;
  border-radius: var(--bruyst-blog-radius);
  background: var(--bruyst-accent-soft, #E8F2F1);
}
.bruyst-artikel__terug { margin-top: 26px; }
.bruyst-artikel__terug a { text-decoration: none; font-weight: 500; }
.bruyst-artikel__terug a:hover { text-decoration: underline; text-underline-offset: 3px; }

.bruyst-artikel__verwant {
  margin-top: clamp(56px, 8vw, 90px);
  padding-top: clamp(36px, 5vw, 56px);
  border-top: 1px solid var(--bruyst-blog-lijn);
}


/* ============================================================
   9. Responsive
   ============================================================ */
@media (max-width: 980px) {
  .bruyst-blograster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bruyst-bloguitgelicht { grid-template-columns: 1fr; }
  .bruyst-bloguitgelicht__beeld { order: 0; }
}

@media (max-width: 640px) {
  .bruyst-blograster { grid-template-columns: 1fr; }
  .bruyst-blogkop__kaart { margin-top: -40px; }
  .bruyst-blogfilter__vestiging { margin-left: 0; width: 100%; }
  .bruyst-blogfilter__vestiging select { flex: 1; min-width: 0; }
  .bruyst-blognav { flex-direction: column; align-items: stretch; text-align: center; }
}