/* Vacatures: overzicht (gegroepeerd per vakgebied) + detailpagina.
   Terughoudend en volledig op variabelen met een neutrale fallback, zodat een site 'm
   bijkleurt in plaats van overschrijft. De module staat op zichzelf: zonder site-CSS
   moet dit er nog steeds uitzien als een lijst en niet als een stapel losse regels. */

.layer-vacancies {
  --vacancies-gap: var(--space-4, 1.5rem);
  --vacancies-card-bg: var(--color-surface, #fff);
  --vacancies-card-fg: var(--color-fg, #1a1a1a);
  --vacancies-card-radius: var(--radius-2, 8px);
  --vacancies-card-border: var(--color-border, #e5e5e5);
  --vacancies-muted: var(--color-muted, #6b7280);
}

.vacancies__group + .vacancies__group { margin-top: var(--vacancies-gap); }

.vacancies__group-title {
  margin: 0 0 calc(var(--vacancies-gap) / 2);
  font-size: 1.15rem;
}

.vacancies__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
  gap: var(--vacancies-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.vacancies__vacancy {
  background: var(--vacancies-card-bg);
  color: var(--vacancies-card-fg);
  border: 1px solid var(--vacancies-card-border);
  border-radius: var(--vacancies-card-radius);
  overflow: hidden;
}

.vacancies__vacancy-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

a.vacancies__vacancy-link:hover,
a.vacancies__vacancy-link:focus-visible { text-decoration: underline; }

.vacancies__vacancy-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.vacancies__vacancy-body {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: var(--space-3, 1rem);
}

.vacancies__vacancy-title { margin: 0; font-size: 1.05rem; }

.vacancies__vacancy-specs {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .75rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: .85rem;
  color: var(--vacancies-muted);
}

.vacancies__vacancy-intro {
  margin: 0;
  font-size: .92rem;
  line-height: 1.55;
}

/* Detailpagina */

.vacancy-detail__title { margin: 0 0 .5rem; }

.vacancy-detail__specs {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1rem;
  margin: 0 0 var(--space-4, 1.5rem);
  padding: 0;
  list-style: none;
  color: var(--color-muted, #6b7280);
}

.vacancy-detail__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-2, 8px);
  margin-bottom: var(--space-4, 1.5rem);
}

.vacancy-detail__block + .vacancy-detail__block { margin-top: var(--space-4, 1.5rem); }

.vacancy-detail__block-title { margin: 0 0 .5rem; font-size: 1.15rem; }