/*
 * Single vacancy. Figma frame BSGV-vacature (cream page, footer on white).
 * Title y275, content y396 (121 below). Grid as the project page:
 * 157 label | 689 text | 67 | 367 details | 16.
 */

.vacancy__header {
	padding-top: clamp(48px, 6.6vw, 102px);
}

.vacancy__content {
	display: grid;
	gap: 48px;
	margin-top: clamp(40px, 4.63vw, 70px);

	@media (min-width: 1024px) {
		grid-template-columns: 846fr 67fr 367fr 16fr;
		gap: 0;

		& .vacancy__meta {
			grid-column: 3;
		}
	}
}

.vacancy__sections {
	display: grid;
	gap: 24px;
}

/* Label in the 157px column, text in the 689px column. */
.vacancy__section {
	display: grid;
	gap: 8px;

	@media (min-width: 768px) {
		grid-template-columns: 157fr 689fr;
		gap: 0;
	}
}

.vacancy__label {
	color: var(--wp--preset--color--umber);
	padding-top: 6px;
	padding-right: 12px;
}

.vacancy__text {
	color: var(--wp--preset--color--text);

	& > * + * {
		margin-top: 0;
	}

	& ul {
		margin: 0;
		padding-left: 1.1em;
	}

	& li::marker {
		font-size: 0.8em;
	}

	& a {
		text-decoration: underline;
		text-underline-offset: 3px;
	}
}

.vacancy .site-cta {
	margin-top: clamp(64px, 8.3vw, 126px);
}