/* JDI Cases · opmaak van de kaart, het raster, de filter en de detailpagina.
   Laadt op de werkpagina (pagina met [jdi_case_filter]), op een case, op een tagpagina en op elke pagina met een
   caseband (pijler, SEO-pagina, home: een container met klasse jdi-band). */

/* ---------------------------------------------------------------- de knopjes (tags)
   Elk knopje is even breed: de langste tag (Business model canvas) past net, een langere loopt over twee regels. */
.jdi-pillen{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.jdi-pillen:empty{display:none}
.jdi-pil{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:176px;min-height:32px;padding:6px 14px;
  border-radius:999px;background:rgba(225,234,234,.9);color:#1d2c33;font-family:"Ambit Semi-Bold",sans-serif;font-size:12px;line-height:1.2;
  letter-spacing:.18px;text-align:center;text-decoration:none}
/* op de detailpagina: aanklikbaar, naast elkaar */
.jdi-pillen-link{flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px}
.jdi-pillen-label{font-family:"Ambit Regular",sans-serif;font-size:16px;line-height:1.4;color:#1d2c33;margin-right:8px}
.jdi-pillen-link .jdi-pil{width:200px;min-height:40px;font-size:14px;letter-spacing:0;transition:background-color .2s ease-in-out,color .2s ease-in-out}
.jdi-pillen-link .jdi-pil:hover,.jdi-pillen-link .jdi-pil:focus-visible{background:#1d2c33;color:#fff}
.jdi-pillen-link .jdi-pil:focus-visible{outline:2px solid #1d2c33;outline-offset:2px}

/* ---------------------------------------------------------------- de kaart
   Tags rechtsonder over het beeld. De naam is de link; die strekt zich uit over de hele kaart. */
.jdi-kaart{position:relative}
.jdi-kaart .jdi-kaart-beeld>.fusion-column-wrapper{position:relative;overflow:hidden;background-color:var(--jdi-vlak,#1d2c33)!important;transition:filter .4s ease-in-out}
/* JDI-kleurvlakken in plaats van foto's (Cases > Weergave), en altijd als een case nog geen kaartbeeld heeft */
body.jdi-vlakken .jdi-kaart-beeld img{opacity:0}
body.jdi-vlakken .jdi-kaart:hover .jdi-kaart-beeld>.fusion-column-wrapper{filter:brightness(1.12)}
/* een case met "Toon deze foto op de kaart" houdt haar foto, ook tussen de kleurvlakken (de plugin zet jdi-kaart-foto) */
body.jdi-vlakken .jdi-kaart-beeld .jdi-kaart-foto img{opacity:1}
body.jdi-vlakken .jdi-kaart:has(.jdi-kaart-foto):hover .jdi-kaart-beeld>.fusion-column-wrapper{filter:none}
.jdi-kaart-beeld>.fusion-column-wrapper:not(:has(img,video)){aspect-ratio:4/3}
.jdi-kaart-beeld :is(img,video){display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:50% 40%;transition:transform .6s ease-in-out}
.jdi-kaart:hover .jdi-kaart-beeld :is(img,video){transform:scale(1.03)}
.jdi-kaart-tags{position:absolute!important;right:24px;bottom:24px;margin:0!important;z-index:2;pointer-events:none}
.jdi-kaart-tags p{margin:0}
.jdi-kaart-titel a{color:inherit!important;text-decoration:none}
/* boven alles van de kaart (Avada zet het beeldvak op z-index 10): beeld, tags en naam brengen je naar de case */
.jdi-kaart-titel a::after{content:"";position:absolute;inset:0;z-index:20;cursor:pointer}
.jdi-kaart-titel a:focus-visible{outline:none}
.jdi-kaart-titel a:focus-visible::after{outline:2px solid #1d2c33;outline-offset:6px}
.jdi-kaart-zin p{margin:0}

/* ---------------------------------------------------------------- video in de plaats van een foto
   Op de kaart en op beeld 1 tot 4 (de plugin zet de video in het beeldvak, in dezelfde vorm), en bij Meer beelden.
   Stil en in een lus; het script van de plugin speelt ze enkel af als ze in beeld zijn. Tot dan schijnt het vlak erdoor. */
.jdi-kaart-video,.jdi-case-video{display:block!important;width:100%}
.jdi-video{display:block;width:100%;height:auto;object-fit:cover}
.jdi-case-video .jdi-video{aspect-ratio:var(--awb-aspect-ratio,1 / 1);object-position:var(--awb-object-position,50% 50%);background:#e1eaea}

/* ---------------------------------------------------------------- het raster
   Kaarten in wisselende maten, willekeurig geschikt met veel lucht (cases.js legt ze). Zonder script blijft het
   gewone Avada-raster staan. */
.jdi-raster .fusion-grid>li[hidden]{display:none!important}
.jdi-raster:not(.is-js) .fusion-grid{opacity:0}
.jdi-raster.is-js .fusion-grid{position:relative;display:block!important;margin:0!important;padding:0!important;width:auto!important;opacity:1;
  transition:opacity .35s ease,height .55s cubic-bezier(.2,.7,.2,1)}
.jdi-raster.is-js .fusion-grid>li{position:absolute!important;left:0;top:0;margin:0!important;padding:0!important;float:none!important;max-width:none!important}
.jdi-raster.is-klaar .fusion-grid>li{transition:transform .55s cubic-bezier(.2,.7,.2,1),opacity .45s ease}
.jdi-raster .fusion-grid>li.is-in{opacity:0}
.jdi-raster .fusion-grid>li[data-vorm="breed"] .jdi-kaart-beeld :is(img,video){aspect-ratio:2/1}
.jdi-raster .fusion-grid>li[data-vorm="staand"] .jdi-kaart-beeld :is(img,video){aspect-ratio:4/5}
.jdi-raster .fusion-grid>li[data-vorm="vierkant"] .jdi-kaart-beeld :is(img,video){aspect-ratio:1/1}
.jdi-raster .fusion-grid>li[data-vorm="liggend"] .jdi-kaart-beeld :is(img,video){aspect-ratio:4/3}
.jdi-raster .fusion-grid>li[data-vorm="hoog"] .jdi-kaart-beeld :is(img,video){aspect-ratio:3/4}
.jdi-raster .fusion-grid>li[data-vorm="panorama"] .jdi-kaart-beeld :is(img,video){aspect-ratio:16/9}
.jdi-raster .fusion-grid>li[data-vorm="foto"] .jdi-kaart-beeld :is(img,video){aspect-ratio:3/2}
.jdi-raster .fusion-grid>li[data-maat="klein"] .jdi-kaart-titel .fusion-title-heading{font-size:28px!important}
.jdi-raster .fusion-grid>li[data-vorm="breed"] .jdi-kaart-beeld>.fusion-column-wrapper:not(:has(img,video)){aspect-ratio:2/1}
.jdi-raster .fusion-grid>li[data-vorm="staand"] .jdi-kaart-beeld>.fusion-column-wrapper:not(:has(img,video)){aspect-ratio:4/5}
.jdi-raster .fusion-grid>li[data-vorm="vierkant"] .jdi-kaart-beeld>.fusion-column-wrapper:not(:has(img,video)){aspect-ratio:1/1}
.jdi-raster .fusion-grid>li[data-vorm="liggend"] .jdi-kaart-beeld>.fusion-column-wrapper:not(:has(img,video)){aspect-ratio:4/3}
.jdi-raster .fusion-grid>li[data-vorm="hoog"] .jdi-kaart-beeld>.fusion-column-wrapper:not(:has(img,video)){aspect-ratio:3/4}
.jdi-raster .fusion-grid>li[data-vorm="panorama"] .jdi-kaart-beeld>.fusion-column-wrapper:not(:has(img,video)){aspect-ratio:16/9}
.jdi-raster .fusion-grid>li[data-vorm="foto"] .jdi-kaart-beeld>.fusion-column-wrapper:not(:has(img,video)){aspect-ratio:3/2}
@media (max-width:1024px){.jdi-raster .fusion-grid>li .jdi-kaart-titel .fusion-title-heading{font-size:26px!important}}
@media (max-width:640px){
  .jdi-raster.is-js .fusion-grid>li{position:relative!important;top:auto!important;left:auto!important;width:100%!important;transform:none!important;margin:0 0 56px!important}
  .jdi-raster.is-js .fusion-grid{height:auto!important}
  .jdi-kaart-tags{right:12px;bottom:12px}
  .jdi-kaart .jdi-pillen{gap:6px}
  .jdi-kaart .jdi-pil{width:152px;min-height:28px;padding:5px 12px;font-size:11px}
}

/* ---------------------------------------------------------------- de caseband (pijler, SEO-pagina, home)
   Post Card "Case · kaart op donker" (home, pijler) of "Case · kaart SEO-pagina" (zonder tags) in een donkere band. Alle beelden
   even groot (16:9). Als kleurvlak om beurt wit, mint en lichtgrijs. Drie naast elkaar, niet op een lijn: de tweede
   staat lager, de derde half zo laag. Tablet twee (de tweede lager), gsm onder elkaar. Geen case = de band verdwijnt. */
.fusion-fullwidth.jdi-band:not(:has(.jdi-kaart)){display:none!important}
.jdi-band .fusion-grid>li:nth-child(3n+1){--jdi-vlak:#ffffff;--jdi-pil:#e1eaea}
.jdi-band .fusion-grid>li:nth-child(3n+2){--jdi-vlak:#65cdb4;--jdi-pil:#ffffff}
.jdi-band .fusion-grid>li:nth-child(3n){--jdi-vlak:#e1eaea;--jdi-pil:#ffffff}
.jdi-kaart-band{container-type:inline-size}
.jdi-kaart-band .jdi-kaart-beeld :is(img,video),.jdi-kaart-band .jdi-kaart-beeld>.fusion-column-wrapper:not(:has(img,video)){aspect-ratio:16/9}
body.jdi-vlakken .jdi-kaart-band .jdi-pil{background:var(--jdi-pil,#fff)}
body.jdi-vlakken .jdi-kaart-band:has(.jdi-kaart-foto) .jdi-pil{background:rgba(225,234,234,.9)}
body.jdi-vlakken .jdi-kaart-band:hover .jdi-kaart-beeld>.fusion-column-wrapper{filter:brightness(.93)}
.jdi-kaart-band .jdi-kaart-titel a:focus-visible::after{outline-color:#65cdb4}
.jdi-kaart-band:hover .jdi-kaart-titel a{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
@container (max-width:380px){.jdi-kaart-band .jdi-kaart-titel .fusion-title-heading{font-size:24px!important}}
@media (min-width:1025px){
  .jdi-band .fusion-grid>li:nth-child(3n+2){margin-top:112px}
  .jdi-band .fusion-grid>li:nth-child(3n){margin-top:48px}
}
@media (min-width:641px) and (max-width:1024px){
  .jdi-band .fusion-grid>li:nth-child(n+3){display:none!important}
  .jdi-band .fusion-grid>li:nth-child(2){margin-top:72px}
}
@media (max-width:640px){.jdi-kaart-band .jdi-kaart-tags{right:12px;bottom:12px}}

/* ---------------------------------------------------------------- de filter
   Bovenaan de pijlers met hun aantal. Een klik opent een vak met de tags van die pijler, ook als knopjes van gelijke breedte. */
.jdi-filter{margin:0 0 64px}
.jdi-filter-cats{display:flex;flex-wrap:wrap;gap:8px}
.jdi-filter-knop{-webkit-appearance:none;appearance:none;border:0;margin:0;cursor:pointer;display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 24px;
  border-radius:999px;background:#eef1f2;color:#1d2c33;font-family:"Ambit Semi-Bold",sans-serif;font-size:17px;line-height:1;white-space:nowrap;
  transition:background-color .25s ease-in-out,color .25s ease-in-out}
.jdi-filter-knop:hover{background:#e1eaea}
.jdi-filter-knop[hidden]{display:none}
.jdi-filter-knop[aria-pressed="true"]{background:#1d2c33;color:#fff}
.jdi-filter-knop:focus-visible,.jdi-filter-tag:focus-visible{outline:2px solid #1d2c33;outline-offset:3px}
.jdi-filter-n{font-family:"Ambit Regular",sans-serif;font-size:13px;line-height:1;color:#4c5a60;transition:color .25s ease-in-out}
.jdi-filter-knop[aria-pressed="true"] .jdi-filter-n,.jdi-filter-tag[aria-pressed="true"] .jdi-filter-n{color:#65cdb4}
.jdi-filter-vak{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.2,.7,.2,1)}
.jdi-filter.is-open .jdi-filter-vak{grid-template-rows:1fr}
.jdi-filter-binnen{min-height:0;overflow:hidden;visibility:hidden;transition:visibility 0s linear .45s}
.jdi-filter.is-open .jdi-filter-binnen{visibility:visible;transition-delay:0s}
.jdi-filter-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;padding:24px;border-radius:24px;background:#d4eae8}
.jdi-filter-tag{-webkit-appearance:none;appearance:none;border:0;margin:0;cursor:pointer;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;
  gap:8px;width:220px;min-height:44px;padding:6px 14px;border-radius:999px;background:#fff;color:#1d2c33;font-family:"Ambit Semi-Bold",sans-serif;
  font-size:15px;line-height:1.2;text-align:center;transition:background-color .2s ease-in-out,color .2s ease-in-out,transform .2s ease-in-out}
.jdi-filter-tag:hover{transform:translateY(-1px)}
.jdi-filter-tag[aria-pressed="true"]{background:#1d2c33;color:#fff}
.jdi-filter-tag[hidden]{display:none}
.jdi-filter-tags.is-nieuw .jdi-filter-tag{animation:jdi-pil-in .35s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i,0) * 22ms)}
.jdi-filter-telling{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@keyframes jdi-pil-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (max-width:640px){
  .jdi-filter{margin-bottom:40px}
  .jdi-filter-cats{flex-direction:column;align-items:flex-start}
  .jdi-filter-knop{flex:0 0 auto;height:46px;padding:0 18px;font-size:16px}
  .jdi-filter-tags{padding:16px;border-radius:20px}
  .jdi-filter-tag,.jdi-pillen-link .jdi-pil{width:calc(50% - 4px)}
  .jdi-filter-tag{min-height:52px;padding:6px 10px;font-size:14px;line-height:1.15}
  .jdi-pillen-label{flex-basis:100%;margin:0 0 4px}
}

/* ---------------------------------------------------------------- de detailpagina */
.fusion-text.jdi-case-verhaal h3{font-family:"Ambit Bold",sans-serif;font-size:24px!important;line-height:1.2!important;letter-spacing:-.5px;margin:48px 0 12px;color:#1d2c33}
.fusion-text.jdi-case-verhaal h3:first-child{margin-top:0}
.jdi-case-verhaal p{margin:0 0 20px}
.jdi-case-verhaal p:last-child{margin-bottom:0}
.jdi-case-verhaal ul{margin:0 0 20px 1.2em}
.jdi-case-onderschrift p,.jdi-case-kernregel p,.jdi-case-cijfer p,.jdi-case-cijfertekst p:last-child,.jdi-case-quote p:last-child,.jdi-case-quotenaam p,.jdi-case-quotefunctie p{margin:0}
.jdi-case-cijfer p{letter-spacing:-2px}
/* de quote: aanhalingstekens rond de tekst, ook als die uit meer alinea's bestaat */
.jdi-case-quote p:first-child::before{content:"\201C"}
.jdi-case-quote p:last-child::after{content:"\201D"}
/* de donkere band met een quote van de klant in plaats van het cijfer (de plugin zet ze erin, zie jdi_cases_band).
   Zoals het citaat in een blog, maar groter en op inkt: Ambit Light in wit, een groot aanhalingsteken toon op toon erachter
   (mint op 16 % op inkt, nooit als letter), wie het zei in mint (op inkt 7,49:1) en de functie in lichtgrijs (9,65:1).
   Links op de lijn van de inhoud, zoals het cijfer. Rechtop: Avada zet op elke blockquote een schuine letter en een rand. */
.jdi-case-band .jdi-case-bandquote{position:relative;margin:37px 0 0;padding:0;max-width:1040px}
/* optisch even veel ruimte boven als onder (Thijs, 19-10): het aanhalingsteken steekt boven de tekst uit (gemeten: teken op
   33 px van de bovenrand, functie op 107 px van de onderrand, op 1440). De quote zakt dus de helft van dat verschil en de
   band verliest dat onderaan: teken en functie staan elk 70 px van de rand (gsm 43), de band blijft even hoog. */
.fusion-fullwidth.jdi-case-band-quote{padding-bottom:67px!important}
.jdi-case-band .jdi-case-bandquote::before{content:"\201C";content:"\201C" / "";position:absolute;left:-.1em;top:-.36em;
  font-family:"Ambit Ultra-Bold",sans-serif;font-style:normal;font-size:240px;line-height:1;color:rgba(101,205,180,.16);pointer-events:none}
.jdi-case-band .jdi-case-bandquote>*{position:relative}
.jdi-case-band .jdi-case-bandquote blockquote{margin:0;padding:0;border:0;background:none;box-shadow:none;quotes:none;
  font-family:"Ambit Light",sans-serif;font-style:normal;font-weight:400;font-size:34px;line-height:1.3;letter-spacing:-.3px;color:#fff;
  text-wrap:pretty}
.jdi-case-band .jdi-case-bandquote blockquote p{margin:0;font:inherit;color:inherit}
.jdi-case-band .jdi-case-bandquote blockquote p+p{margin-top:20px}
.jdi-case-band .jdi-case-bandquote figcaption{display:flex;flex-direction:column;gap:2px;margin-top:32px}
.jdi-case-bandnaam{font-family:"Ambit Bold",sans-serif;font-size:18px;line-height:1.4;color:#65cdb4}
.jdi-case-bandfunctie{font-family:"Ambit Regular",sans-serif;font-size:16px;line-height:1.45;color:#c9d6d8}
@media (prefers-reduced-motion:no-preference){
  .jdi-case-band .jdi-case-bandquote{transition:opacity .8s cubic-bezier(.45,0,.55,1),transform .8s cubic-bezier(.45,0,.55,1)}
  .jdi-case-band .jdi-case-bandquote.jdi-wacht{opacity:0;transform:translateY(24px)}
}
@media (max-width:1024px){
  .jdi-case-band .jdi-case-bandquote{margin-top:28px}
  .fusion-fullwidth.jdi-case-band-quote{padding-bottom:76px!important}
  .jdi-case-band .jdi-case-bandquote blockquote{font-size:28px;line-height:1.3}
  .jdi-case-band .jdi-case-bandquote::before{font-size:200px}
}
@media (max-width:640px){
  .jdi-case-band .jdi-case-bandquote{margin-top:19px}
  .fusion-fullwidth.jdi-case-band-quote{padding-bottom:45px!important}
  .jdi-case-band .jdi-case-bandquote blockquote{font-size:22px;line-height:1.35;letter-spacing:-.1px}
  .jdi-case-band .jdi-case-bandquote::before{font-size:150px;left:-.06em}
  .jdi-case-band .jdi-case-bandquote figcaption{margin-top:24px}
}
/* het antwoord zonder beeld 2: de tekst staat dan links, op dezelfde lijn als de rest */
.fusion-builder-row>.jdi-case-antwoord-tekst:first-child{--awb-padding-left:0px!important}
.fusion-builder-row>.jdi-case-antwoord-tekst:first-child>.fusion-column-wrapper{padding-left:0!important}
.jdi-case-volgende-kolom .fusion-column-wrapper{align-items:flex-end}
.jdi-case-volgende{text-align:right}
.jdi-volgende-label{display:block;font-family:"Ambit Regular",sans-serif;font-size:18px;line-height:1.6;color:#1d2c33}
.jdi-volgende{font-family:"Ambit Bold",sans-serif;font-size:18px;line-height:1.6;color:#1d2c33;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.jdi-volgende:hover{color:#1d2c33;text-decoration-thickness:2px}
.jdi-case-terug a{font-family:"Ambit Semi-Bold",sans-serif}
/* 9 · Meer beelden: twee naast elkaar in hun eigen vorm, de rechterkolom lager zoals bij de twee beelden (blok 6).
   Eén beeld = twee derde breed. Op de gsm onder elkaar, in de volgorde van de backend. */
.jdi-beelden{display:flex;align-items:flex-start;gap:48px}
.jdi-beelden-kolom{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:48px}
.jdi-beelden-kolom+.jdi-beelden-kolom{margin-top:104px}
.jdi-beelden-1 .jdi-beelden-kolom{flex:0 1 66.6667%}
.jdi-beeld{margin:0}
.jdi-beeld img,.jdi-beeld .jdi-video{display:block;width:100%;height:auto}
.jdi-beeld .jdi-video{background:#e1eaea}
.jdi-beeld figcaption{margin-top:10px;font-family:"Ambit Light",sans-serif;font-size:13px;line-height:1.7;color:#1d2c33}
/* Twee kolommen: links 50 %, rechts 41 %, de open ruimte ertussen. Thijs, 29-10: minder lucht dan de ronde van Lotte
   (27-10: 48/30,6 % met 144 px tussen de beelden), iets meer dan het origineel (48 px). Alle afstanden schalen mee met
   de schermbreedte: op 1440 px 86 px tussen de beelden en de rechterkolom 130 px lager, smaller navenant minder. */
.jdi-beelden:not(.jdi-beelden-1){justify-content:space-between;gap:0}
.jdi-beelden:not(.jdi-beelden-1) .jdi-beelden-kolom{flex:0 0 50%;gap:clamp(40px,6vw,96px)}
.jdi-beelden:not(.jdi-beelden-1) .jdi-beelden-kolom+.jdi-beelden-kolom{flex-basis:41%;margin-top:clamp(48px,9vw,144px)}
@media (max-width:1024px){
  .jdi-beelden,.jdi-beelden-kolom{gap:32px}
  .jdi-beelden-kolom+.jdi-beelden-kolom{margin-top:64px}
}
@media (max-width:640px){
  .jdi-beelden{flex-direction:column;align-items:stretch}
  .jdi-beelden-kolom{display:contents}
  /* onder elkaar: altijd lucht tussen de beelden */
  .jdi-beelden:not(.jdi-beelden-1),.jdi-beelden.jdi-beelden-1{gap:clamp(24px,8vw,40px)}
}
/* de titel van een case: geen afgebroken woorden; cases.js houdt hem op drie regels (eerst breder, dan kleiner) */
.jdi-case-top h1.fusion-title-heading{hyphens:manual!important;-webkit-hyphens:manual!important}
@media (max-width:1024px){
  .jdi-case-top h1.fusion-title-heading{font-size:60px!important;line-height:1!important}
  .jdi-case-cijfer,.jdi-case-cijfer p{font-size:140px!important;line-height:1!important}
}
@media (max-width:640px){
  .jdi-case-top h1.fusion-title-heading{font-size:30px!important;line-height:1.1!important;letter-spacing:-.5px!important}
  .jdi-case-groot h2.fusion-title-heading{font-size:24px!important;line-height:1.3!important}
  .jdi-case-cijfer,.jdi-case-cijfer p{font-size:96px!important}
  .jdi-case-quote,.jdi-case-quote p{font-size:21px!important}
  .jdi-case-volgende{text-align:left}
  .jdi-case-volgende-kolom .fusion-column-wrapper{align-items:flex-start}
}

/* ---------------------------------------------------------------- deze pagina's hebben de lichte header
   Geen witte stroken boven en onder de inhoud, en het menu in inkt zoals op de SEO-pagina's. */
body.jdi-licht #main{padding-top:0!important;padding-bottom:0!important;background-color:var(--awb-color2)!important}
body.jdi-licht .fusion-tb-header .awb-menu__m-toggle{color:#1d2c33!important}
@media (min-width:1025px){
  body.jdi-licht .fusion-tb-header .awb-menu__main-li:not(:last-child) > .awb-menu__main-a,
  body.jdi-licht .fusion-tb-header .awb-menu__main-li:not(:last-child):hover > .awb-menu__main-a,
  body.jdi-licht .fusion-tb-header .awb-menu__main-li.current-page-ancestor > .awb-menu__main-a{color:#1d2c33!important}
}

@media (prefers-reduced-motion:reduce){
  .jdi-filter-vak,.jdi-filter-binnen,.jdi-raster.is-js .fusion-grid,.jdi-raster.is-klaar .fusion-grid>li,.jdi-kaart-beeld :is(img,video){transition:none!important}
  .jdi-filter-tags.is-nieuw .jdi-filter-tag{animation:none}
}

/* 2.11.0 (23-10, Thijs) · Een zin in het cijferveld (AGO: zes regels op cijfermaat, "niet te lezen") staat op koptekstmaat
   over de hele breedte; een echt cijfer (300+, 2 naar 7, +2.500) blijft groot. De plugin zet de klasse jdi-case-cijfer-zin. */
.jdi-case-band.jdi-case-cijfer-zin .fusion-layout-column{width:100%!important;flex:0 0 100%!important;max-width:100%!important}
.jdi-case-band.jdi-case-cijfer-zin .jdi-case-cijfer,.jdi-case-band.jdi-case-cijfer-zin .jdi-case-cijfer p{font-size:52px!important;line-height:1.12!important;letter-spacing:-1px!important;max-width:1000px;text-wrap:balance}
.jdi-case-band.jdi-case-cijfer-zin .jdi-case-cijfertekst{margin-top:24px}
@media (max-width:1024px){.jdi-case-band.jdi-case-cijfer-zin .jdi-case-cijfer,.jdi-case-band.jdi-case-cijfer-zin .jdi-case-cijfer p{font-size:40px!important}}
@media (max-width:640px){.jdi-case-band.jdi-case-cijfer-zin .jdi-case-cijfer,.jdi-case-band.jdi-case-cijfer-zin .jdi-case-cijfer p{font-size:30px!important;line-height:1.15!important;letter-spacing:-.5px!important}}
/* 2.11.0 · Geen beeld 1 en geen beeld 2: de vraag en het antwoord naast elkaar (anders stond alles links en was rechts leeg).
   De vraag = de container net voor die met .jdi-case-antwoord-tekst. Onder 801 px gewoon onder elkaar. */
@media (min-width:801px){
  .jdi-case-zonder-beelden .fusion-fullwidth:has(+ .fusion-fullwidth .jdi-case-antwoord-tekst),
  .jdi-case-zonder-beelden .fusion-fullwidth:has(> .fusion-builder-row .jdi-case-antwoord-tekst){float:left;width:50%!important;box-sizing:border-box}
  .jdi-case-zonder-beelden .fusion-fullwidth:has(+ .fusion-fullwidth .jdi-case-antwoord-tekst){padding-right:32px!important}
  .jdi-case-zonder-beelden .fusion-fullwidth:has(> .fusion-builder-row .jdi-case-antwoord-tekst){padding-left:32px!important}
  .jdi-case-zonder-beelden .fusion-fullwidth:has(+ .fusion-fullwidth .jdi-case-antwoord-tekst) .fusion-layout-column,
  .jdi-case-zonder-beelden .fusion-fullwidth:has(> .fusion-builder-row .jdi-case-antwoord-tekst) .fusion-layout-column{width:100%!important;flex:0 0 100%!important;max-width:100%!important}
  .jdi-case-zonder-beelden .fusion-fullwidth:has(> .fusion-builder-row .jdi-case-antwoord-tekst) + *{clear:both}
}

/* 2.13.3 (25-10, Thijs) · Een kort cijfer ("7" bij Crelan Nico): cijfer en uitleg staan samen in het midden van de band,
   56 px uit elkaar, de uitleg op 460 px. cases.js meet de breedte en zet jdi-case-cijfer-kort. Op gsm staan ze onder
   elkaar en blijft alles links. */
@media (min-width:801px){
.jdi-case-band.jdi-case-cijfer-kort .fusion-row{justify-content:center!important;align-items:center!important;column-gap:56px}
.jdi-case-band.jdi-case-cijfer-kort .fusion-layout-column{width:auto!important;flex:0 1 auto!important;max-width:none!important;margin-left:0!important;margin-right:0!important}
.jdi-case-band.jdi-case-cijfer-kort .fusion-layout-column>.fusion-column-wrapper{padding-left:0!important;padding-right:0!important;margin:0!important}
.jdi-case-band.jdi-case-cijfer-kort .jdi-case-cijfertekst{max-width:460px}
}

/* 2.13.0 (25-10, Thijs: "de verspringing mag niet") · De titel van een case staat meteen op zijn maat: de kolom is de volle
   breedte van de site (Avada hield de titel op 1000 px, cases.js moest hem verbreden) en de letter hangt af van de lengte
   (body-klasse, de plugin telt de tekens: tot 60 gewoon, tot 80 lang, daarboven zeer lang). Onder 1280 px schaalt de letter
   mee met de breedte, zodat het aantal regels gelijk blijft. Gemeten: cases.js past daarna niets meer aan. De regel eronder
   blijft op leesbreedte. */
.jdi-case-top .fusion-title{max-width:none!important}
.jdi-case-top h1.fusion-title-heading{max-width:none!important;text-wrap:balance}
.jdi-case-top .jdi-case-kernregel{max-width:860px}
body.jdi-kop-lang .jdi-case-top h1.fusion-title-heading{font-size:80px!important}
body.jdi-kop-zeerlang .jdi-case-top h1.fusion-title-heading{font-size:min(66px,4.8vw)!important;line-height:1!important}
@media (max-width:1279px){
  body.jdi-kop-gewoon .jdi-case-top h1.fusion-title-heading{font-size:min(80px,7.2vw)!important}
  body.jdi-kop-lang .jdi-case-top h1.fusion-title-heading{font-size:min(68px,6.1vw)!important}
  body.jdi-kop-zeerlang .jdi-case-top h1.fusion-title-heading{font-size:min(56px,4.7vw)!important}
}
@media (max-width:1024px){
  body.jdi-kop-gewoon .jdi-case-top h1.fusion-title-heading{font-size:min(60px,7.2vw)!important}
  body.jdi-kop-lang .jdi-case-top h1.fusion-title-heading{font-size:min(52px,6.2vw)!important}
  body.jdi-kop-zeerlang .jdi-case-top h1.fusion-title-heading{font-size:min(42px,4.8vw)!important;line-height:1.05!important}
}
@media (max-width:640px){
  body.jdi-kop-gewoon .jdi-case-top h1.fusion-title-heading{font-size:clamp(22px,7vw,30px)!important}
  body.jdi-kop-lang .jdi-case-top h1.fusion-title-heading{font-size:clamp(20px,6.3vw,27px)!important}
  body.jdi-kop-zeerlang .jdi-case-top h1.fusion-title-heading{font-size:clamp(16px,4.8vw,22px)!important;line-height:1.12!important}
}