/**
 * Component: Vacatureoverzicht
 *
 * Kaarten van gelijke hoogte met de knoptekst altijd onderaan, ook
 * wanneer de ene vacature een langere introductie heeft dan de andere.
 * Dat gebeurt met margin-block-start: auto op de CTA en niet met een
 * vaste hoogte, zodat de kaart meegroeit wanneer de tekst groeit.
 */

.bw-vacatures__grid {
	list-style: none;
	margin: 0;
	padding: 0;
}

.bw-vacature {
	display: flex;
}

.bw-vacature__inner {
	display: flex;
	flex-direction: column;
	gap: var(--bw-space-2xs);
	width: 100%;
	padding: var(--bw-space-md);
	background-color: var(--bw-white);
	border: 1px solid var(--bw-surface-border, var(--bw-border));
	border-radius: var(--bw-radius-lg);
	transition:
		transform var(--bw-duration) var(--bw-ease),
		box-shadow var(--bw-duration) var(--bw-ease);
}

.bw-vacature__inner:has(.bw-vacature__link:hover),
.bw-vacature__inner:has(.bw-vacature__link:focus-visible) {
	transform: translateY(-3px);
	box-shadow: var(--bw-shadow);
}

/* Uren en locatie als badges. Ze mogen wrappen op smalle schermen. */
.bw-vacature__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bw-space-2xs);
	list-style: none;
	margin: 0 0 var(--bw-space-2xs);
	padding: 0;
}

.bw-vacature__pill {
	padding: 0.25rem 0.625rem;
	border-radius: var(--bw-radius-sm);
	background-color: var(--bw-oat);
	color: var(--bw-midnight);
	font-size: var(--bw-text-xs);
	letter-spacing: 0.01em;
}

.bw-vacature__title {
	margin: 0;
	font-size: var(--bw-text-lg);
}

.bw-vacature__link {
	text-decoration: none;
}

/* Het hele vlak is klikbaar, maar er is één tabstop: de titel. */
.bw-vacature__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.bw-vacature__inner {
	position: relative;
}

.bw-vacature__text {
	margin: 0;
	font-size: var(--bw-text-sm);
	line-height: 1.55;
	color: var(--bw-text-muted);
}

.bw-vacature__cta {
	display: flex;
	align-items: center;
	gap: var(--bw-space-2xs);
	margin: var(--bw-space-sm) 0 0;
	padding-block-start: var(--bw-space-sm);
	border-block-start: 1px solid var(--bw-border);
	margin-block-start: auto;
	font-family: var(--bw-font-heading);
	font-size: var(--bw-text-sm);
	letter-spacing: var(--bw-tracking-caps);
	text-transform: uppercase;
	color: var(--bw-accent-text);
}

.bw-vacature__cta .bw-icon {
	width: 1.1rem;
	height: 1.1rem;
	transition: transform var(--bw-duration) var(--bw-ease);
}

.bw-vacature__inner:has(.bw-vacature__link:hover) .bw-vacature__cta .bw-icon {
	transform: translateX(3px);
}

/* Geen openstaande vacatures. */
.bw-vacatures__leeg {
	max-width: 44rem;
	padding: var(--bw-space-lg);
	border: 1px solid var(--bw-surface-border, var(--bw-border));
	border-radius: var(--bw-radius-lg);
	background-color: var(--bw-surface-bg, var(--bw-white));
}

.bw-vacatures__leeg-titel {
	margin: 0;
	font-family: var(--bw-font-heading);
	font-size: var(--bw-text-xl);
	line-height: var(--bw-leading-snug);
}