/* Vacancies: overview at /werken-bij/ (archive-iew_vacature.php) and the vacancy page (single-iew_vacature.php).
   In the style of the guest homepage (home-catalogus.css): warm paper, the gold icon pattern behind the title,
   Fraunces headings with the gold full stop, gold labels, the white services panel, square buttons in capitals.
   Scoped to .iew-vac; tokens come from design-system.css. */

body.iew-vacatures-page { background-color: var(--iew-paper); }
body main.iew-vac.site-main { max-width: none; width: 100%; margin: 0; padding: 0; }
.iew-vac {
	--vac-gap: 24px;
	--vac-line: #E2DED3;
	--vac-head: var(--iew-font-heading);
	--vac-ui: var(--iew-font-sans);
	--vac-ease: cubic-bezier(.2, .7, .2, 1);
	color: var(--iew-ink-900);
	font-family: var(--vac-ui);
}
.iew-vac *, .iew-vac *::before, .iew-vac *::after { box-sizing: border-box; }
.iew-vac__page { max-width: 1240px; margin: 0 auto; padding: 0 28px; }
.iew-vac__lbl { display: block; font: 600 12px/1.3 var(--vac-ui); letter-spacing: .22em; text-transform: uppercase; color: var(--iew-gold-600); }
.iew-vac .woocommerce-breadcrumb { margin: 0 0 28px; font-size: var(--iew-text-sm); color: var(--iew-ink-500); }
.iew-vac .woocommerce-breadcrumb a { color: var(--iew-ink-500); text-decoration: none; }
.iew-vac .woocommerce-breadcrumb a:hover { color: var(--iew-olive-900); }

/* ---------- buttons (as on the homepage) ---------- */
.iew-vac .iew-vac__btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	font: 700 12px/1 var(--vac-ui); letter-spacing: .2em; text-transform: uppercase; text-decoration: none;
	padding: 15px 24px; border-radius: 2px; border: 1.5px solid transparent; cursor: pointer;
	transition: background .22s var(--vac-ease), color .22s;
}
.iew-vac .iew-vac__btn--primary { background: var(--iew-gold-500); color: var(--iew-olive-900); }
.iew-vac .iew-vac__btn--primary:hover { background: var(--iew-gold-400); color: var(--iew-olive-900); }
.iew-vac .iew-vac__btn--link { padding: 4px 0; border: 0; border-bottom: 1.5px solid var(--iew-gold-500); border-radius: 0; color: var(--iew-olive-700); letter-spacing: .12em; }
.iew-vac .iew-vac__btn--link:hover { color: var(--iew-olive-900); }

/* ---------- title and panel, with the gold icon pattern behind this section only ---------- */
.iew-vac__hero {
	position: relative; isolation: isolate;
	display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--vac-gap); align-items: start;
	padding: 32px 0 64px;
}
.iew-vac__hero::before {
	content: ""; position: absolute; inset: 0 calc(50% - 50vw); z-index: -1;
	background: var(--iew-paper) url("../img/home-catalogus/patroon-licht.svg"); background-size: 320px;
}
.iew-vac__h { grid-column: 1 / 8; display: flex; flex-direction: column; }
.iew-vac__h .iew-vac__lbl { margin-bottom: 18px; }
.iew-vac .iew-vac__h h1 { margin: 0; font: 400 clamp(44px, 5.6vw, 80px)/1.02 var(--vac-head); letter-spacing: -.015em; color: var(--iew-olive-900); hyphens: manual; text-wrap: balance; }
.iew-vac--single .iew-vac__h h1 { font-size: clamp(38px, 4.6vw, 64px); }
.iew-vac__h h1 span { color: var(--iew-gold-500); }
.iew-vac .iew-vac__intro { margin: 24px 0 0; padding-right: 8%; font: 400 18px/1.65 var(--vac-ui); color: var(--iew-ink-700); }
.iew-vac__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 32px; }
.iew-vac .iew-vac__closed { flex-basis: 100%; margin: 0; padding: 14px 18px; background: var(--iew-paper-2); font: 500 15px/1.5 var(--vac-ui); color: var(--iew-ink-900); }

/* the white services panel: vacancies on the overview, facts on a vacancy */
.iew-vac__panel {
	grid-column: 8 / 13; position: relative; overflow: hidden; display: flex; flex-direction: column;
	margin-top: 46px; padding: 14px 0 0; border-radius: 4px; color: var(--iew-ink-900);
	background: radial-gradient(110% 60% at 100% 0%, rgba(241, 187, 71, .14), transparent 62%), #fff;
}
.iew-vac__jobs { margin: 0; padding: 0; list-style: none; }
.iew-vac__jobs li { position: relative; margin: 0; }
.iew-vac__jobs li + li::before { content: ""; position: absolute; left: 34px; right: 34px; top: 0; border-top: 1px solid var(--iew-ink-100); opacity: .85; }
.iew-vac .iew-vac__row { position: relative; display: flex; flex-direction: column; gap: 5px; padding: 20px 64px 20px 34px; color: inherit; text-decoration: none; transition: background .25s var(--vac-ease); }
.iew-vac__k { font: 700 10px/1.3 var(--vac-ui); letter-spacing: .22em; text-transform: uppercase; color: var(--iew-wine-600); }
.iew-vac__row b { display: block; font: 500 24px/1.2 var(--vac-head); color: var(--iew-olive-900); transition: color .2s; }
.iew-vac__sum { font: 400 15px/1.55 var(--vac-ui); color: var(--iew-ink-700); }
.iew-vac__facts-line { font: 600 13.5px/1.5 var(--vac-ui); color: var(--iew-olive-700); }
.iew-vac__closes { font: 400 13.5px/1.5 var(--vac-ui); color: var(--iew-ink-500); }
.iew-vac__row i { position: absolute; right: 30px; top: 50%; font-style: normal; color: var(--iew-gold-600); font-size: 18px; transform: translate(-6px, -50%); opacity: .55; transition: opacity .25s, transform .25s; }
.iew-vac .iew-vac__row:hover { background: var(--iew-paper); color: inherit; }
.iew-vac__row:hover b { color: var(--iew-olive-700); }
.iew-vac__row:hover i { opacity: 1; transform: translate(0, -50%); }
.iew-vac__row:focus-visible { outline: 2px solid var(--iew-olive-700); outline-offset: -4px; }
.iew-vac__row--open .iew-vac__k { color: var(--iew-gold-600); }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.iew-vac__facts { margin: 0; padding: 0 34px 10px; }
.iew-vac__facts > div { display: flex; flex-direction: column; gap: 4px; padding: 14px 0; }
.iew-vac__facts > div + div { border-top: 1px solid var(--iew-ink-100); }
.iew-vac__facts dt { font: 700 10px/1.3 var(--vac-ui); letter-spacing: .22em; text-transform: uppercase; color: var(--iew-gold-600); }
.iew-vac__facts dd { margin: 0; font: 500 21px/1.25 var(--vac-head); color: var(--iew-olive-900); }

.iew-vac__foot {
	margin-top: auto; padding: 15px 34px 17px; background: var(--iew-paper-2);
	font: 500 13.5px/1.6 var(--vac-ui); color: var(--iew-ink-700);
}
.iew-vac .iew-vac__foot a { color: var(--iew-olive-700); font-weight: 700; text-decoration: none; border-bottom: 1.5px solid var(--iew-gold-500); overflow-wrap: anywhere; }
.iew-vac .iew-vac__foot a:hover { color: var(--iew-olive-900); }
.iew-vac__icon { width: 22px; height: 22px; margin-right: 10px; vertical-align: -6px; color: var(--iew-gold-600); --iw-accent: currentColor; --iw-detail: currentColor; }

/* ---------- the vacancy text (and the overview's about text) on the light band ---------- */
.iew-vac__body {
	--vac-band: #FCFCFB; /* the Elementor kit body background, as the homepage's "Nieuw" band */
	position: relative; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--vac-gap); align-items: start;
	padding: 64px 0 80px; background: var(--vac-band); box-shadow: 0 0 0 100vmax var(--vac-band); clip-path: inset(0 -100vmax);
}
.iew-vac__text { grid-column: 1 / 8; max-width: 70ch; font: 400 17px/1.7 var(--vac-ui); color: var(--iew-ink-700); }
.iew-vac__text > :first-child { margin-top: 0; }
.iew-vac__text > :last-child { margin-bottom: 0; }
.iew-vac .iew-vac__text h2 { margin: 1.5em 0 .5em; font: 400 34px/1.1 var(--vac-head); color: var(--iew-olive-900); }
.iew-vac .iew-vac__text h3 { margin: 1.4em 0 .4em; font: 500 22px/1.2 var(--vac-head); color: var(--iew-olive-900); }
.iew-vac .iew-vac__text > h2:first-child, .iew-vac .iew-vac__text > h3:first-child { margin-top: 0; }
.iew-vac__text p { margin: 0 0 1em; }
.iew-vac__text ul, .iew-vac__text ol { margin: 0 0 1.2em; padding-left: 0; list-style: none; }
.iew-vac__text li { position: relative; margin: 0; padding: 8px 0 8px 22px; border-bottom: 1px solid var(--vac-line); }
.iew-vac__text li::before { content: ""; position: absolute; left: 2px; top: 1.05em; width: 7px; height: 7px; border-radius: 50%; background: var(--iew-gold-500); }
.iew-vac__text a { color: var(--iew-olive-700); }

/* contact photo in the panel's foot */
.iew-vac__foot--photo { display: flex; align-items: center; gap: 14px; }
.iew-vac .iew-vac__face { flex: none; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--iew-gold-500); }
.iew-vac__foot b { font-weight: 700; color: var(--iew-ink-900); }

/* ---------- apply block at the foot of a vacancy, with the contact person's photo ---------- */
.iew-vac__apply { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: center; margin: 56px 0 72px; padding: 44px 48px; background: var(--iew-gold-100); }
.iew-vac__apply--photo { grid-template-columns: 220px minmax(0, 1fr); }
.iew-vac__who { margin: 0; }
.iew-vac .iew-vac__who img { display: block; width: 220px; height: 220px; border-radius: 4px; object-fit: cover; }
.iew-vac__who figcaption { margin-top: 12px; font: 700 10px/1.5 var(--vac-ui); letter-spacing: .22em; text-transform: uppercase; color: var(--iew-gold-600); }
.iew-vac__who figcaption b { display: block; font: 500 21px/1.2 var(--vac-head); letter-spacing: 0; text-transform: none; color: var(--iew-olive-900); }
.iew-vac__apply-tx .iew-vac__lbl { margin-bottom: 12px; }
.iew-vac .iew-vac__apply h2 { margin: 0 0 14px; font: 500 34px/1.15 var(--vac-head); color: var(--iew-olive-900); text-wrap: balance; }
.iew-vac .iew-vac__apply p { max-width: 560px; margin: 0 0 26px; font: 400 16px/1.7 var(--vac-ui); color: var(--iew-ink-700); overflow-wrap: anywhere; }
.iew-vac .iew-vac__apply p a { color: var(--iew-olive-700); font-weight: 600; }

/* ---------- overview: about Ian en Wijn, with the team as the homepage's region index ---------- */
.iew-vac .iew-vac__intro strong { display: block; margin-bottom: 6px; font: 500 24px/1.3 var(--vac-head); color: var(--iew-olive-900); }
.iew-vac__about .iew-vac__text blockquote { margin: 28px 0 0; padding: 18px 20px; border: 0; background: var(--iew-paper-2); font: italic 400 19px/1.55 var(--vac-head); color: var(--iew-olive-900); }
.iew-vac__about .iew-vac__text cite { display: block; margin-top: 10px; font: 700 10px var(--vac-ui); font-style: normal; letter-spacing: .22em; text-transform: uppercase; color: var(--iew-gold-600); }
.iew-vac__team { grid-column: 9 / 13; padding-top: 10px; }
.iew-vac .iew-vac__team .iew-vac__lbl { margin: 0 0 10px; }
.iew-vac__team ul { margin: 0 0 22px; padding: 0; list-style: none; }
.iew-vac__team li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--vac-line); }
.iew-vac__team li b { font: 700 14px var(--vac-ui); color: var(--iew-ink-900); }
.iew-vac__team li span { font: 500 13.5px/1.4 var(--vac-ui); color: var(--iew-gold-600); text-align: right; }

/* ---------- tablet and phone ---------- */
@media (max-width: 1000px) {
	.iew-vac__page { padding: 0 18px; }
	.iew-vac__hero, .iew-vac__body { grid-template-columns: 1fr; column-gap: 0; }
	.iew-vac__hero { padding: 20px 0 40px; }
	.iew-vac__h, .iew-vac__panel, .iew-vac__text, .iew-vac__team { grid-column: 1 / -1; }
	.iew-vac__team { margin-top: 40px; }
	.iew-vac__panel { margin-top: 32px; }
	.iew-vac__body { padding: 44px 0 56px; }
	.iew-vac__apply { padding: 36px 32px; gap: 32px; }
	.iew-vac__apply--photo { grid-template-columns: 160px minmax(0, 1fr); }
	.iew-vac .iew-vac__who img { width: 160px; height: 160px; }
	.iew-vac__apply { margin-top: 40px; }
}
@media (max-width: 560px) {
	.iew-vac .iew-vac__h h1 { font-size: 40px; }
	.iew-vac .iew-vac__intro strong { font-size: 21px; }
	.iew-vac--single .iew-vac__h h1 { font-size: 34px; }
	.iew-vac .iew-vac__intro { padding-right: 0; font-size: 16.5px; }
	.iew-vac .iew-vac__row { padding: 18px 48px 18px 22px; }
	.iew-vac__jobs li + li::before { left: 22px; right: 22px; }
	.iew-vac__row b { font-size: 21px; }
	.iew-vac__row i { right: 20px; }
	.iew-vac__facts { padding: 0 22px 8px; }
	.iew-vac__facts dd { font-size: 19px; }
	.iew-vac__foot { padding: 14px 22px 16px; }
	.iew-vac .iew-vac__text h2 { font-size: 28px; }
	.iew-vac__text { font-size: 16px; }
	.iew-vac__apply, .iew-vac__apply--photo { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-bottom: 48px; padding: 28px 22px 30px; }
	.iew-vac__who { display: flex; align-items: center; gap: 16px; }
	.iew-vac .iew-vac__who img { width: 88px; height: 88px; }
	.iew-vac__who figcaption { margin-top: 0; }
	.iew-vac .iew-vac__apply h2 { font-size: 26px; }
	.iew-vac__apply .iew-vac__btn--primary { width: 100%; }
	.iew-vac__acts .iew-vac__btn--primary { flex: 1 1 100%; }
}