/*
 * Block: Vacatures (.vacancies). One card per open function in lila (--culture), the band in the tint.
 * Lila belongs to culture: Over ons and Vacatures only.
 */

.vacancy-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gap); }
.vacancy {
	position: relative;
	overflow: hidden;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--col-gap);
	padding: clamp(24px, 3.4vw, 48px);
	border-radius: var(--radius-l);
	background: var(--culture);
	--bc: var(--culture-tint);
	--bl: 44%;
	--bw: 22%;
}
/* The band sits at z-index -1 in the isolated card (system.css), so the content needs no positioning.
 * That keeps .vacancy the containing block: the textlink stretches over the whole card (clickable as a whole). */
.vacancy .textlink::after { content: ""; position: absolute; inset: 0; }
.vacancy .textlink:focus-visible { outline: 0; }
.vacancy:has(.textlink:focus-visible) { outline: 2px solid var(--green); outline-offset: 3px; }
.vacancy-main { display: grid; gap: 16px; align-content: start; }
.vacancy h3 { font-size: clamp(30px, 3.2vw, 48px); max-width: 14em; }
.vacancy-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.vacancy-meta span { font-size: var(--fs-micro); font-weight: 400; background: var(--beige-tint); padding: 6px 12px; border-radius: 999px; }
.vacancy-side { display: grid; gap: 24px; align-content: end; justify-items: start; }
.vacancy-summary { max-width: 32em; }
.vacancy .textlink { color: var(--green); }

.vacancy-empty {
	display: inline-block;
	color: var(--ink-soft);
	background: var(--culture-tint);
	border-radius: var(--radius-s);
	padding: 14px 20px;
	font-size: var(--fs-small);
}

@media (max-width: 900px) {
	.vacancy { grid-template-columns: 1fr; row-gap: 24px; --bl: 56%; --bw: 34%; }
}