/* ==========================================================================
   Blok — Vacatures: intro links (sticky op desktop), vacaturekaarten rechts,
   een gestippelde kaart voor de open sollicitatie onder de lijst. Alleen een
   kop (--alleen-kop): kop boven de lijst. Zonder vacatures één navy kaart
   "Open sollicitatie" met de groene mailto-knop.
   ========================================================================== */
.b-vacatures {
  --b-vac-px: clamp(1.35rem, 1rem + 1.4vw, 2.25rem);
  --b-vac-py: clamp(1.35rem, 1.05rem + 1vw, 1.9rem);
}

.b-vacatures__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.25rem, 1.5rem + 2.5vw, 3.5rem);
}
@media (min-width: 1024px) {
  .b-vacatures__grid {
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
    gap: var(--gap-lg);
    align-items: start;
  }
}
/* De intro blijft in beeld zolang de lijst langer is; alleen bij genoeg
   schermhoogte, anders valt de contactpersoon onder de vouw zolang hij plakt */
@media (min-width: 1024px) and (min-height: 820px) {
  .b-vacatures:not(.b-vacatures--alleen-kop) .b-vacatures__intro {
    position: sticky;
    top: calc(var(--header-h) + 2rem);
  }
}
/* Alleen een kop (geen lead of contactpersoon): kop boven de lijst, zoals
   een .sectie-kop, in plaats van een lege linkerkolom */
@media (min-width: 1024px) {
  .b-vacatures--alleen-kop .b-vacatures__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(2.25rem, 1.5rem + 2.5vw, 3.75rem);
  }
}
.b-vacatures--alleen-kop .b-vacatures__kop { max-width: 20ch; }

/* --- Intro ------------------------------------------------------------ */
.b-vacatures__kop { max-width: 14ch; }
.b-vacatures__lead { margin-top: 1.1rem; max-width: 46ch; }

/* Tablet: kop en lead links, contactpersoon rechts (scheelt een lange
   aanloop voor de lijst). Naast elkaar is de scheidingslijn verticaal. */
@media (min-width: 720px) and (max-width: 1023.98px) {
  .b-vacatures__intro:has(.b-vacatures__contact) {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: var(--gap);
    align-items: end;
  }
  .b-vacatures__intro .b-vacatures__contact {
    margin-top: 0;
    padding-top: 0;
    padding-left: var(--gap);
    border-top: 0;
    border-left: 1px solid var(--lijn);
  }
}

/* HR-contactpersoon */
.b-vacatures__contact {
  max-width: 30rem;
  margin-top: clamp(2rem, 1.5rem + 1.5vw, 2.75rem);
  padding-top: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  border-top: 1px solid var(--lijn);
}
.b-vacatures__vraag {
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  line-height: 1.45;
  color: var(--tekst-zacht);
}
.b-vacatures__persoon {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
}
.b-vacatures__portret {
  flex: none;
  width: clamp(3.75rem, 3.2rem + 1.5vw, 4.5rem);
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 50%;
  background: var(--grijs);
}
.b-vacatures__portret img { width: 100%; height: 100%; object-fit: cover; }
.b-vacatures__wie { display: grid; gap: .1rem; line-height: 1.35; }
.b-vacatures__naam {
  font-weight: var(--fw-bold);
  color: inherit;
  text-decoration: none;
}
a.b-vacatures__naam:hover { text-decoration: underline; }
.b-vacatures__functie { font-size: var(--fs-small); color: var(--tekst-zacht); }

.b-vacatures__gegevens {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.5rem;
  margin-top: 1.1rem;
}
.b-vacatures__regel {
  display: flex;
  align-items: center;
  gap: .55rem;
  min-width: 0;
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
}
.b-vacatures__regel a { color: inherit; text-decoration: none; overflow-wrap: anywhere; }
.b-vacatures__regel a:hover { text-decoration: underline; }
.b-vacatures__icoon { width: 1.1rem; height: 1.1rem; color: var(--blauw); }
.b-vacatures.band--navy .b-vacatures__icoon { color: var(--roze); }

/* --- Lijst ------------------------------------------------------------ */
/* Lijst en de open-sollicitatiekaart eronder: zelfde ritme */
.b-vacatures__inhoud,
.b-vacatures__lijst {
  display: grid;
  gap: clamp(.875rem, .6rem + .8vw, 1.25rem);
  margin: 0;
}
.b-vacatures__item { display: flex; }

/* Vacaturekaart: .kaart levert wit vlak, schaduw, hover-lift, de klikbare
   titel en de focusring; hier alleen de horizontale opbouw. */
.b-vacatures__vacature {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem clamp(1rem, .5rem + 1.5vw, 2rem);
  padding: var(--b-vac-py) var(--b-vac-px);
}
.b-vacatures__tekst { display: flex; flex-direction: column; gap: .55rem; min-width: 0; }

.b-vacatures__titel {
  font-size: var(--fs-h3);
  font-weight: var(--fw-medium);
  line-height: 1.22;
  letter-spacing: -.005em;
}
.b-vacatures__titel a { text-decoration-thickness: 1px; text-underline-offset: .18em; }
.b-vacatures__vacature:hover .b-vacatures__titel a { text-decoration-line: underline; }

/* Locatie staat in de broncode na de titel, visueel erboven */
.b-vacatures__locatie {
  order: -1;
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  line-height: 1.35;
  color: var(--tekst-zacht);
}
.b-vacatures__locatie-icoon { width: 1rem; height: 1rem; color: var(--blauw); }

.b-vacatures__samenvatting {
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--tekst-zacht);
  max-width: 56ch;
}
.b-vacatures__tags { margin: .35rem 0 0; }

/* Pijl-cirkel rechts: .pijl-cirkel uit components.css (zelfde maat en
   signaal als cases, kennis en kaarten). Op een navy band komen de donkere
   kaart en de witte pijl ook uit components.css (.band--navy .kaart). */

/* Alleen een kop, brede lijst (desktop): titel links, kenmerken rechts naast
   de pijl, zoals een vacaturebank, in plaats van een lege middenstrook.
   Rijen zonder gap (marges): een ontbrekende locatie of samenvatting laat
   dan geen lege ruimte achter. */
@media (min-width: 1100px) {
  .b-vacatures--alleen-kop .b-vacatures__vacature .b-vacatures__tekst {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0 clamp(1.5rem, .5rem + 2vw, 3rem);
  }
  .b-vacatures--alleen-kop .b-vacatures__vacature .b-vacatures__tekst > * { grid-column: 1; }
  .b-vacatures--alleen-kop .b-vacatures__locatie { grid-row: 1; margin-bottom: .55rem; }
  .b-vacatures--alleen-kop .b-vacatures__titel { grid-row: 2; }
  .b-vacatures--alleen-kop .b-vacatures__samenvatting { grid-row: 3; margin-top: .55rem; }
  .b-vacatures--alleen-kop .b-vacatures__vacature .b-vacatures__tags {
    grid-column: 2;
    grid-row: 1 / 4;
    justify-content: flex-end;
    max-width: 24rem;
    margin: 0;
  }
}

/* Mobiel: geen pijl-cirkel (de hele kaart is de link), tekst volle breedte */
@media (max-width: 639.98px) {
  .b-vacatures__vacature { grid-template-columns: minmax(0, 1fr); }
  .b-vacatures__vacature .pijl-cirkel { display: none; }
}

.b-vacatures.band--navy .b-vacatures__locatie-icoon { color: var(--roze); }

/* --- Open sollicitatie onder de lijst: gestippelde rand in de stijl van
   de route (een plek die nog open is) ---------------------------------- */
.b-vacatures__open {
  position: relative;
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: .9rem 2rem;
  padding: var(--b-vac-py) var(--b-vac-px);
  border: 2px dotted rgba(0, 0, 64, .3);
  border-color: color-mix(in srgb, var(--blauw) 55%, transparent);
  border-radius: var(--r-lg);
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
@media (min-width: 640px) {
  .b-vacatures__open { grid-template-columns: minmax(0, 1fr) auto; }
}
.b-vacatures__open-titel {
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  line-height: 1.3;
  letter-spacing: 0;
}
.b-vacatures__open-tekst {
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--tekst-zacht);
}
/* Hele kaart klikbaar via de link */
.b-vacatures__open-link::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: var(--r-lg);
}
.b-vacatures__open-link:focus-visible { box-shadow: none; }
.b-vacatures__open:has(.b-vacatures__open-link:focus-visible) { box-shadow: var(--focus); }
.b-vacatures__open:hover { border-color: var(--navy); background: rgba(255, 255, 255, .6); }
/* Hover zit al in components.css (de ::after hoort bij de link); hier
   hetzelfde signaal bij toetsenbordfocus */
.b-vacatures__open:focus-within .b-vacatures__open-link { text-decoration-line: underline; }
.b-vacatures__open:focus-within .link-pijl__pijl { transform: translateX(3px); }

.b-vacatures.band--wit .b-vacatures__open:hover { background: var(--grijs-licht); }
.b-vacatures.band--navy .b-vacatures__open { border-color: rgba(255, 255, 255, .35); }
.b-vacatures.band--navy .b-vacatures__open:hover { border-color: var(--wit); background: var(--navy-90); }

/* --- Geen vacatures: navy kaart ------------------------------------------ */
.b-vacatures__leeg {
  --boog: clamp(8rem, 5rem + 8vw, 12.5rem);
  --tekst-zacht: var(--tekst-op-donker-zacht);
  --focus: 0 0 0 3px var(--navy), 0 0 0 6px var(--roze);
  position: relative;
  display: grid;
  justify-items: start;
  gap: 1rem;
  padding: clamp(2rem, 1.25rem + 3vw, 3.75rem);
  overflow: hidden;
  border-radius: var(--r-xl);
  background: var(--navy);
  color: var(--wit);
  box-shadow: var(--shadow-card);
}
/* Decoratief: een gestippelde boog (kwartcirkel om de hoek rechtsboven)
   met een roze eindpunt erop: de route. --boog is de straal. */
.b-vacatures__leeg::before,
.b-vacatures__leeg::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.b-vacatures__leeg::before {
  top: calc(-1 * var(--boog));
  right: calc(-1 * var(--boog));
  width: calc(2 * var(--boog));
  aspect-ratio: 1;
  border: 2px dotted rgba(255, 255, 255, .24);
  border-radius: 50%;
}
.b-vacatures__leeg::after {
  /* Op de boog, onder 45 graden */
  top: calc(var(--boog) * .7071 - .4375rem);
  right: calc(var(--boog) * .7071 - .4375rem);
  width: .875rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--roze);
}
.b-vacatures__leeg > * { position: relative; z-index: 1; }
.b-vacatures__leeg-kern { display: grid; justify-items: start; gap: 1rem; }

.b-vacatures__leeg-icoon {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  margin-bottom: .5rem;
  border-radius: 50%;
  background: var(--roze);
  color: var(--navy);
}
.b-vacatures__leeg-icoon .icoon { width: 1.5rem; height: 1.5rem; }
.b-vacatures__leeg-titel {
  font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.6rem);
  font-weight: var(--fw-display);
  line-height: 1.12;
  letter-spacing: var(--ls-display);
}
.b-vacatures__leeg-tekst {
  max-width: 52ch;
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--tekst-zacht);
}
.b-vacatures__leeg-actie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .9rem 1.5rem;
  margin-top: clamp(.75rem, .5rem + 1vw, 1.5rem);
}
.b-vacatures__leeg-adres { font-size: var(--fs-small); color: var(--tekst-zacht); }
.b-vacatures__leeg-email { font-weight: var(--fw-bold); color: var(--wit); overflow-wrap: anywhere; }
@media (max-width: 479.98px) {
  .b-vacatures__leeg-actie .btn { width: 100%; }
}
/* Alleen een kop: de kaart staat over de volle breedte. Tekst links, knop
   en adres rechtsonder, zodat de rechterhelft niet leeg blijft. */
@media (min-width: 1024px) {
  .b-vacatures--alleen-kop .b-vacatures__leeg {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 1rem var(--gap-lg);
  }
  .b-vacatures--alleen-kop .b-vacatures__leeg-actie {
    flex-direction: column;
    align-items: flex-start;
    gap: .75rem;
    margin-top: 0;
  }
}

.b-vacatures.band--navy .b-vacatures__leeg {
  --focus: 0 0 0 3px var(--navy-90), 0 0 0 6px var(--roze);
  background: var(--navy-90);
  box-shadow: inset 0 0 0 1px var(--navy-80);
}