/* Kaart met twee kolommen en blauwe band met pop-out, zoals op /certificeringen/, voor een blogbericht (9-10-2026). Regels letterlijk uit style-dienst.min.css; alleen het blok onderaan (--buste, --drie, --twee) is nieuw. */
.cert-kolommen{columns:2;column-gap:clamp(1.8rem,4vw,3.4rem);margin-top:1rem}
.cert-kolommen p{margin:0 0 .9rem;color:var(--ant-zacht);font-size:1.05rem;line-height:1.65}
.cert-kolommen a{color:var(--goud-diep);font-weight:700}
@media(max-width:760px){
.cert-kolommen{columns:1}
}
@media (min-width:761px){
#cert-kop+.cert-kolommen p{margin:0}
#cert-kop+.cert-kolommen p+p{margin-top:.9rem}
}
@media (min-width:761px){
.cert-kolommen{margin-bottom:.9rem}
}
.c7-cert-band{--uit:clamp(48px,6vw,84px);position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,32%);margin-top:calc(clamp(1.6rem,3vw,2.2rem) + var(--uit));border-radius:22px;background:var(--bruin)}
.c7-cert-band--los{grid-template-columns:minmax(0,1fr);margin-top:clamp(1.6rem,3vw,2.2rem)}
.c7-cert-raster{display:grid;grid-template-columns:repeat(4,140px);gap:1.5rem 1.25rem;justify-content:center;align-content:center;margin:0;padding:clamp(1.6rem,3vw,2.4rem) clamp(1.2rem,2.4vw,2rem)}
.c7-cert-item{display:flex;flex-direction:column;align-items:center;gap:.45rem;text-align:center;text-decoration:none;color:var(--wit);font:700 .82rem/1.3 var(--font-kop)}
.c7-cert-badge{flex:none;display:grid;place-items:center;width:140px;height:90px;padding:12px;border-radius:14px;background:var(--wit);box-shadow:0 10px 24px rgba(2,13,65,.28);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.c7-cert-badge img{display:block;width:auto;height:auto;max-width:112px;max-height:62px}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
.c7-cert-item:hover .c7-cert-badge{transform:translateY(-4px);box-shadow:0 16px 30px rgba(0,0,0,.32)}
}
.c7-cert-item:focus-visible .c7-cert-badge{outline:3px solid var(--geel);outline-offset:3px}
@media (max-width:1100px){
.c7-cert-band{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:700px){
.c7-cert-raster{grid-template-columns:repeat(2,140px)}
}
@media (max-width:560px){
.c7-cert-raster{grid-template-columns:repeat(2,128px);gap:1.2rem .9rem;padding:1.4rem .9rem}
.c7-cert-raster .c7-cert-badge{width:128px;height:82px}
.c7-cert-raster .c7-cert-badge img{max-width:104px;max-height:56px}
}
@media (min-width:900px){
.c7-cert-band.c7-cert-band--persoon{grid-template-columns:auto minmax(0,1fr)}
.c7-cert-band--persoon .c7-cert-raster{justify-content:start;padding-right:0}
}
.c7-cert-persoon{--boven:clamp(1rem,2vw,1.6rem);--schuif:clamp(.75rem,1.4vw,1.2rem);--h:min(calc(100cqh + var(--boven)*.6),96cqw);
position:relative;isolation:isolate;container-type:size;min-width:0;margin:var(--boven) clamp(1.4rem,3vw,2.6rem) clamp(1.4rem,2.6vw,2.2rem) clamp(1rem,2vw,1.8rem);
clip-path:inset(-50vh -3rem 0 -3rem);pointer-events:none}
.c7-cert-persoon__vlak,.c7-cert-persoon__geel{position:absolute;left:50%;bottom:0;width:min(calc(100cqw - var(--schuif)),calc(var(--h)*1.08));height:calc(var(--h)*.64);border-radius:22px}
.c7-cert-persoon__geel{z-index:0;background:var(--geel);transform:translate(calc(-50% + var(--schuif)),calc(-1*var(--schuif)))}
.c7-cert-persoon__vlak{z-index:1;background:var(--goud);transform:translateX(-50%)}
.c7-cert-persoon img{position:absolute;z-index:2;left:50%;bottom:0;width:auto;height:var(--h);max-width:none;transform:translateX(-50%);transform-origin:50% 100%;filter:drop-shadow(6px 10px 12px rgba(2,13,65,.3))}
@media (prefers-reduced-motion:no-preference){
.c7-cert-persoon img{transition:transform .8s var(--ease) .15s}
.c7-cert-persoon__geel{transition:transform .7s var(--ease) .35s}
}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
.c7-cert-band--persoon:hover .c7-cert-persoon img{transform:translateX(-50%) scale(1.02)}
.c7-cert-band--persoon:hover .c7-cert-persoon__geel{transform:translate(calc(-50% + var(--schuif)*1.4),calc(-1.4*var(--schuif)))}
}
@media (min-width:900px) and (max-width:1240px){
.c7-cert-band--persoon .c7-cert-raster{grid-template-columns:repeat(4,112px);gap:1.2rem .75rem;padding-left:clamp(1rem,2vw,1.4rem)}
.c7-cert-band--persoon .c7-cert-badge{width:112px;height:72px;padding:10px}
.c7-cert-band--persoon .c7-cert-badge img{max-width:92px;max-height:48px}
.c7-cert-persoon{margin-right:clamp(1rem,2vw,1.4rem);margin-left:.8rem}
}
@media (max-width:899px){
.c7-cert-persoon{--boven:0px;height:clamp(15rem,62vw,19rem);margin:0 clamp(1rem,4vw,2rem) clamp(1rem,4vw,1.6rem)}
}
/* --buste, --drie, --twee: nieuw voor de blogkaart.
   --buste (op de figure): de buste is breder dan het blauwe vlak; de foto wordt op de breedte van het vlak afgeknipt, met dezelfde ronde hoeken onderaan, en zoomt bij hover niet mee, zodat er niets buiten het vlak komt.
   --drie en --twee (op de band): drie of twee tegels op een rij en een band die hoog genoeg is voor de pop-out; mobiel staat bij drie tegels de derde gecentreerd onder de eerste twee. */
.c7-cert-persoon--buste img{clip-path:inset(0 calc(50% - min(calc(100cqw - var(--schuif)),calc(var(--h)*1.08))/2) 0 round 0 0 22px 22px)}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
.c7-cert-band--persoon:hover .c7-cert-persoon--buste img{transform:translateX(-50%)}
}
@media (min-width:701px){
.c7-cert-band--drie .c7-cert-raster{grid-template-columns:repeat(3,140px)}
.c7-cert-band--twee .c7-cert-raster{grid-template-columns:repeat(2,140px)}
}
@media (min-width:900px){
.c7-cert-band--drie,.c7-cert-band--twee{min-height:clamp(19rem,30vw,25rem)}
}
@media (min-width:900px) and (max-width:1240px){
.c7-cert-band--drie .c7-cert-raster{grid-template-columns:repeat(3,112px)}
.c7-cert-band--twee .c7-cert-raster{grid-template-columns:repeat(2,112px)}
}
@media (max-width:700px){
.c7-cert-band--drie .c7-cert-item:nth-child(3){grid-column:1/-1}
}