/* =============================================================
   CMS-aanvullingen op style.css — uitsluitend nieuwe elementen,
   in dezelfde vormtaal (paginakleur-variabelen, luxe easing).
   ============================================================= */

/* Uitklapbare vacature (kaart mét omschrijving uit het CMS) */
.vacature--klap { display: block; padding: 0; }
.vacature--klap:hover { padding-left: 0; }
.vacature--klap .vacature__kop {
  display: grid; grid-template-columns: 1fr auto auto 44px; gap: 22px; align-items: center;
  width: 100%; padding: 26px 6px;
  background: none; border: 0; cursor: pointer; color: inherit; text-align: left; font: inherit;
  transition: padding .4s var(--ease-luxe);
}
.vacature--klap:hover .vacature__kop { padding-left: 18px; }
.vacature--klap .vacature__body { padding: 0 6px 28px; max-width: 72ch; }
.vacature--klap .vac-tekst { color: var(--inkt-zacht); line-height: 1.65; }
.vacature--klap .vac-tekst p { margin: 0 0 .8em; }
.vacature--klap .vac-tekst h3,
.vacature--klap .vac-tekst h4 { font-family: var(--font-display); margin: 1.3em 0 .45em; color: var(--inkt); }
.vacature--klap .vac-tekst ul,
.vacature--klap .vac-tekst ol { margin: .6em 0 .9em; padding-left: 1.25em; }
.vacature--klap .vac-tekst li { margin-bottom: .3em; }
.vacature--klap .vac-tekst a { color: var(--paginakleur-diep); }
.vacature--klap .vac-solliciteer { margin-top: 14px; }
.vacature--klap[data-open] .vac-pijl { transform: rotate(90deg); }
.vacature--klap[data-open] .vacature__kop { padding-left: 18px; background: var(--paginakleur-gloed); }

@media (max-width: 720px) {
  .vacature--klap .vacature__kop { grid-template-columns: 1fr 44px; }
  .vacature--klap .vacature__kop .vac-meta:last-of-type { display: none; }
}