/* ==========================================================================
   Vacaturebanner (homepage)

   Nieuw ten opzichte van het origineel — daar staan de vacatures nergens op de
   homepage. Opgemaakt met de bestaande bouwstenen: crème vlak (#F1E9E4),
   Inter Tight voor de kop, Roboto in hoofdletters voor het label, en de
   bestaande zwarte knop. Geen nieuwe kleuren, geen nieuwe vormen.
   ========================================================================== */
.vacaturebanner {
  background: var(--kleur-creme);
  padding-inline: var(--rand-zij);
}
.vacaturebanner__binnen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ruimte-lg);
  padding-block: var(--ruimte-lg);
}

/* Roboto in hoofdletters, zoals de accenttypografie uit de Elementor-kit */
.vacaturebanner__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);
}
.vacaturebanner__kop {
  font-family: var(--font-kop);
  font-size: var(--tekst-h2);        /* 38px, zoals de andere sectiekoppen */
  font-weight: 600;
  line-height: 1.1;
}
.vacaturebanner__sub {
  margin-top: var(--ruimte-sm);
  font-size: var(--tekst-body);
  line-height: 1.5;
}
.vacaturebanner__actie { flex: 0 0 auto; }

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