/* ==========================================================================
   Vacaturepagina — in de huisstijl van de site

   Hier stond eerder een nabouw van de pdf: een donker kopblok (#2A2D29), een
   serif-titel in Playfair Display en goudkleurige accenten (#D4BF96). Dat was
   een eigen ontwerp dat nergens anders op de site terugkomt en daardoor als
   een vreemde eend aanvoelde.

   Deze versie gebruikt uitsluitend bestaande bouwstenen: de tekstpagina-opzet
   van /vacatures/ en /over-ons/, de sectiekoppen uit de Elementor-kit, het
   crème vlak (#F1E9E4) en de bestaande zwarte knop. Geen nieuwe kleuren, geen
   nieuw lettertype. De typografie van de vacaturetekst zelf (h2 32/500, tekst
   16/1.5, kenmerken in bruin hoofdletters) staat al in tekst.css.
   ========================================================================== */

/* De inhoud loopt door onder de kop; de kenmerkenregel zit in de tekst zelf */
.vacature__inhoud { margin-top: var(--ruimte-lg); }

/* --- Slotvlak ------------------------------------------------------------
   Zelfde opmaak als de vacaturebanner op de homepage, zodat de twee plekken
   waar we om sollicitaties vragen er hetzelfde uitzien.
   ------------------------------------------------------------------------ */
.vacature__slot {
  background: var(--kleur-creme);
  padding-inline: var(--rand-zij);
}
.vacature__slot-binnen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ruimte-lg);
  padding-block: var(--ruimte-lg);
}
.vacature__slot-label {
  font-family: var(--font-accent);
  font-size: var(--tekst-accent);
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--kleur-bruin);
  margin-bottom: var(--ruimte-sm);
}
.vacature__slot-kop {
  font-family: var(--font-kop);
  font-size: var(--tekst-h2);        /* 38px, gelijk aan de andere sectiekoppen */
  font-weight: 600;
  line-height: 1.1;
}
.vacature__slot-sub {
  margin-top: var(--ruimte-sm);
  font-size: var(--tekst-body);
  line-height: 1.5;
}
.vacature__slot-sub a { color: inherit; text-decoration: underline; }
.vacature__slot-actie { flex: 0 0 auto; }

@media (hover: hover) and (min-width: 1025px) {
  .vacature__slot-sub a:hover { color: var(--kleur-bruin); }
}

@media (max-width: 767px) {
  .vacature__slot-binnen {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ruimte-md);
  }
  .vacature__slot-actie { align-self: stretch; }
  .vacature__slot-actie .knop { display: block; text-align: center; }
}