/* Vacancies: the intro stays in view on the left while the positions (white cards) scroll past on the right. */
.vacancies-block { position: relative; isolation: isolate; padding: 104px 0; background: var(--fa-color-primary-very-light); }
.vacancies-block--light { background: var(--fa-color-background); }
/* As the last section in stone, the colour continues through the gap above the footer and behind its rounded corners. */
.vacancies-block:not(.vacancies-block--light):last-child::after { position: absolute; z-index: -1; top: 100%; right: 0; left: 0; height: 120px; content: ""; background: inherit; pointer-events: none; }
.vacancies-block::before { position: absolute; z-index: -1; right: 0; bottom: 0; width: min(420px, 70%); height: 340px; content: ""; background: var(--fa-motif) no-repeat; background-position: 0 0; background-size: 560px 560px; pointer-events: none; }
.vacancies-block__layout { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 72px; align-items: start; }
.vacancies-block__intro { position: sticky; top: 48px; }
.vacancies-block__eyebrow { margin: 0 0 16px; color: var(--fa-color-primary); font-size: 13px; line-height: 1.4; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.vacancies-block__title { margin: 0; color: var(--fa-color-text); font-size: 52px; line-height: 1.05; font-weight: 500; letter-spacing: -.035em; }
html[lang^="nl"] .vacancies-block__title { font-size: 48px; }
.vacancies-block__title em { color: var(--fa-color-primary); font-style: normal; }
.vacancies-block__text { margin-top: 22px; color: rgba(0, 0, 0, .74); font-size: 16px; line-height: 1.7; }
.vacancies-block__text > :first-child, .vacancies-block__card-text > :first-child { margin-top: 0; }
.vacancies-block__text > :last-child, .vacancies-block__card-text > :last-child { margin-bottom: 0; }

/* Buttons: the pill with the round arrow used elsewhere on the site. */
.vacancies-block__button, .vacancies-block__card-button { display: inline-flex; gap: 12px; align-items: center; min-height: 48px; margin-top: 28px; padding: 5px 6px 5px 18px; color: var(--fa-color-primary); background: #fff; border: 1px solid var(--fa-color-primary); border-radius: 999px; font-size: 15px; line-height: 1; font-weight: 600; text-decoration: none; transition: color var(--fa-duration-hover) var(--fa-ease-snappy), background-color var(--fa-duration-hover) var(--fa-ease-snappy), transform var(--fa-duration-hover) var(--fa-ease-spring); }
.vacancies-block__button:hover, .vacancies-block__card-button:hover { color: #fff; background: var(--fa-color-primary); text-decoration: none; transform: translateY(-2px); }
.vacancies-block__button:active, .vacancies-block__card-button:active { transform: scale(.97); transition-duration: var(--fa-duration-press); transition-timing-function: var(--fa-ease-snappy); }
.vacancies-block__arrow { display: inline-flex; flex: 0 0 36px; align-items: center; justify-content: center; width: 36px; height: 36px; background: var(--fa-color-primary); border-radius: 50%; transition: background-color var(--fa-duration-hover) var(--fa-ease-snappy); }
.vacancies-block__arrow span { width: 13px; height: 13px; background: #fff; -webkit-mask: url("../../images/right-arrow.svg") center / contain no-repeat; mask: url("../../images/right-arrow.svg") center / contain no-repeat; transform: rotate(-45deg); transition: transform var(--fa-duration-hover) var(--fa-ease-spring), background-color var(--fa-duration-hover) var(--fa-ease-snappy); }
.vacancies-block__button:hover .vacancies-block__arrow, .vacancies-block__card-button:hover .vacancies-block__arrow { background: #fff; }
.vacancies-block__button:hover .vacancies-block__arrow span, .vacancies-block__card-button:hover .vacancies-block__arrow span { background: var(--fa-color-primary); transform: rotate(0deg); }

/* Cards. */
.vacancies-block__list { display: grid; gap: 18px; }
.vacancies-block__card, .vacancies-block__empty { padding: 30px 32px; background: #fff; border: 1px solid rgba(100, 90, 78, .14); border-bottom: 3px solid var(--fa-color-primary); border-radius: 22px; box-shadow: 0 18px 40px rgba(60, 52, 44, .07); }
.vacancies-block__card-head { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 18px; align-items: start; }
.vacancies-block__icon { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; color: #fff; background: var(--fa-color-primary); border-radius: 50%; }
.vacancies-block__icon svg { display: block; width: 20px; height: 20px; margin: 0; color: inherit; }
.vacancies-block__card-title { margin: 9px 0 0; color: var(--fa-color-text); font-size: 22px; line-height: 1.25; font-weight: 700; letter-spacing: -.02em; }
.vacancies-block__meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.vacancies-block__meta li { margin: 0; padding: 5px 12px; color: rgba(0, 0, 0, .72); background: var(--fa-color-primary-very-light); border: 1px solid var(--fa-color-border); border-radius: 999px; font-size: 13px; line-height: 1.3; font-weight: 600; }
.vacancies-block__card-text { margin: 20px 0 0 64px; color: rgba(0, 0, 0, .74); font-size: 15.5px; line-height: 1.7; }
.vacancies-block__card-text ul { margin: 0 0 1em; padding: 0; list-style: none; }
.vacancies-block__card-text li { position: relative; margin: 5px 0; padding-left: 20px; }
.vacancies-block__card-text li::before { position: absolute; top: .7em; left: 2px; width: 6px; height: 6px; content: ""; background: var(--fa-color-primary); border-radius: 50%; }
.vacancies-block__card-button { margin: 22px 0 0 64px; }
.vacancies-block__empty { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 18px; align-items: center; }
.vacancies-block__empty p { margin: 0; color: rgba(0, 0, 0, .74); font-size: 16px; line-height: 1.65; }

@media (max-width: 900px) {
	.vacancies-block { padding: 80px 0; }
	.vacancies-block__layout { grid-template-columns: minmax(0, 1fr); gap: 40px; }
	.vacancies-block__intro { position: static; }
	.vacancies-block__title, html[lang^="nl"] .vacancies-block__title { font-size: 44px; }
}
@media (max-width: 600px) {
	.vacancies-block { padding: 64px 0; }
	.vacancies-block__title, html[lang^="nl"] .vacancies-block__title { font-size: 38px; }
	.vacancies-block__card, .vacancies-block__empty { padding: 24px 22px; }
	.vacancies-block__card-text, .vacancies-block__card-button { margin-left: 0; }
	.vacancies-block::before { height: 220px; background-size: 330px 330px; opacity: .7; }
}
@media (prefers-reduced-motion: reduce) {
	.vacancies-block__button, .vacancies-block__card-button, .vacancies-block__arrow, .vacancies-block__arrow span { transition: none; }
	.vacancies-block__button:hover, .vacancies-block__card-button:hover { transform: none; }
}