/* ==========================================================================
   Werven: werken-bij (.wb-*, #form-sollicitatie) en beurstijger (.bt-*, #form-beurstijger).
   ========================================================================== */

/* Live gebruikt Plus Jakarta Sans ook in 400 en 800; main.css declareert alleen 500-700.
   Eigen familienaam, zodat dit niets op andere pagina's verandert. */
@font-face { font-family: 'Blink Jakarta'; font-style: normal; font-weight: 200 800; font-display: swap; src: url(../../fonts/plus-jakarta-sans.woff2) format('woff2'); }

/* --- Werken bij: gedeeld ------------------------------------------------------------------ */
.wb-hero, .wb-culture, .wb-join, .wb-apply__end { font-family: 'Blink Jakarta', sans-serif; }
.wb-h2 { font-size: 48px; font-weight: 700; line-height: 57.6px; letter-spacing: -1px; color: var(--ink); }
.wb-btn { display: inline-block; font-family: 'Blink Jakarta', sans-serif; font-size: 14px; font-weight: 600; line-height: 21px; letter-spacing: 1px; padding: 16px 32px; text-decoration: none; text-align: center; transition: background .2s; }
.wb-btn--blush { padding: 16px 40px; border-radius: 4px; background: var(--blush); color: var(--merlot); }
.wb-btn--blush:hover { background: var(--white); }
.wb-btn--merlot { background: var(--merlot); color: var(--white); }
.wb-btn--merlot:hover { background: var(--rose); }

/* --- Hero ------------------------------------------------------------------ */
.wb-hero { position: relative; min-height: 819px; display: flex; align-items: center; justify-content: center; padding: 0 20px; text-align: center; isolation: isolate; }
.wb-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; z-index: -2; }
.wb-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(22, 0, 9, .4) 0%, rgba(22, 0, 9, .7) 100%); opacity: .5; }
.wb-hero__inner { max-width: 896px; display: flex; flex-direction: column; align-items: center; gap: 24px; }
.wb-h1 { font-size: 96px; font-weight: 700; line-height: 105.6px; letter-spacing: -2px; color: var(--white); }
.wb-hero p { max-width: 672px; margin-bottom: 14.4px; font-size: 20px; line-height: 28px; color: #f6f3f2; }

/* --- De Blink Mentaliteit ------------------------------------------------------------------ */
.wb-culture .wrap { max-width: none; padding: 10px; }
.wb-culture__row { display: flex; align-items: center; gap: 120px; }
.wb-culture__text, .wb-quote { flex: 0 0 570px; padding: 10px; }
.wb-culture__text { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.wb-culture__text > p { margin-bottom: 14.4px; font-size: 16px; line-height: 29.6px; color: var(--grey); }
.wb-tag { padding: 4px 16px; border-radius: 4px; background: var(--champagne); font-size: 14px; font-weight: 600; line-height: 21px; letter-spacing: 1px; color: var(--merlot); }
.wb-trait { display: flex; align-items: center; gap: 16px; padding-top: 8px; }
.wb-trait__icon { flex: 0 0 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: var(--blush); }
.wb-trait__icon svg { width: 20px; height: 20px; fill: var(--merlot); }
.wb-trait p, .wb-person__name { margin-bottom: 14.4px; font-size: 14px; font-weight: 600; line-height: 21px; letter-spacing: 1px; color: var(--merlot); }
.wb-quote { position: relative; isolation: isolate; }
.wb-quote::before { content: ''; position: absolute; inset: 10px; z-index: -1; border-radius: 24px; background: var(--blush); }
.wb-quote__card { display: flex; flex-direction: column; gap: 32px; margin: 8px 40px 40px 8px; padding: 41px; background: var(--white); border: 1px solid #eae7e7; border-radius: 12px; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1); }
.wb-quote__icon { display: block; width: 31px; height: 31px; margin: 0 auto 6px; fill: #eae0e0; }
.wb-quote__text { font-size: 32px; font-weight: 700; line-height: 40px; letter-spacing: -.5px; color: var(--ink); }
.wb-person { display: flex; align-items: center; gap: 16px; padding: 10px; }
.wb-person__img { flex: 0 0 56px; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.wb-person__text { display: flex; flex-direction: column; gap: 4px; width: 200px; padding: 10px; }
.wb-person__text p:last-child { margin-bottom: 14.4px; font-family: var(--font); font-size: 14px; line-height: 20px; color: var(--grey); }

/* --- Werken bij Blink? ------------------------------------------------------------------ */
.wb-join { padding: 160px 80px 80px; }
.wb-join .wrap { max-width: none; padding: 10px; }
.wb-join__row { display: flex; align-items: center; justify-content: center; gap: 48px; }
.wb-join__text { flex: 0 0 606px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; padding: 10px; }
.wb-join .wb-h2 { color: var(--merlot); }
.wb-join__body { flex: 0 0 auto; width: 672px; display: flex; flex-direction: column; gap: 16px; padding: 10px; }
.wb-join__body p { margin-bottom: 14.4px; font-size: 18px; line-height: 28px; color: #645d5d; }
.wb-join__body .wb-join__lead { font-weight: 800; font-style: italic; color: var(--rose); }
.wb-join__photos { flex: 0 0 606px; min-height: 357px; display: flex; align-items: flex-start; gap: 10px; padding: 10px; }
.wb-join__photo { flex: 0 0 250px; width: 250px; height: 350px; border-radius: 15px; object-fit: none; }
.wb-join__photo--1 { margin-top: 40px; object-position: -540px -471px; }
.wb-join__photo--2 { object-position: -631px -322px; }

/* --- Formulier ------------------------------------------------------------------ */
.wb-apply { padding: 80px 212px; }
.wb-apply__card { display: flex; flex-direction: column; gap: 48px; padding: 49px; background: var(--white); border: 1px solid #eae7e7; border-radius: 16px; box-shadow: 0 1px 1px rgba(0, 0, 0, .05); }
.wb-apply__end { display: flex; flex-direction: column; align-items: center; gap: 8px; padding-top: 24px; border-top: 1px solid #d7c1c7; text-align: center; }
.wb-apply__end p { margin-bottom: 14.4px; font-size: 14px; line-height: 20px; color: var(--grey); }
.wb-apply__end .wb-apply__wink { font-family: var(--font); font-size: 18px; font-weight: 700; font-style: italic; line-height: 28px; color: var(--merlot); }

#form-sollicitatie .form__grid { align-items: center; }
#form-sollicitatie .form__field { margin-bottom: 24px; }
#form-sollicitatie .form__field--submit { margin-bottom: 0; }
#form-sollicitatie .form__label { padding-bottom: 5px; font-size: 16px; font-weight: 400; line-height: 16px; letter-spacing: 0; text-transform: none; color: #1b1b1b; }
#form-sollicitatie .form__req { display: none; }
#form-sollicitatie input[type="text"], #form-sollicitatie input[type="email"], #form-sollicitatie input[type="tel"], #form-sollicitatie input[type="date"], #form-sollicitatie select, #form-sollicitatie textarea { font-size: 16px; line-height: 22.4px; color: #1b1b1b; background-color: #f0eded; }
#form-sollicitatie select { height: 40px; padding: 5px 20px 5px 14px; line-height: 24px; -webkit-appearance: none; appearance: none; background: #f0eded url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 0h10L5 6z' fill='%231b1b1b'/%3E%3C/svg%3E") no-repeat right 10px center / 10px 6px; }
#form-sollicitatie textarea { height: 104px; }
#form-sollicitatie #f-compliment, #form-sollicitatie #f-minst_leuk, #form-sollicitatie #f-talen { height: 81px; }
#form-sollicitatie #f-waarom { height: 126px; }
#form-sollicitatie .form-heading { margin-top: 0; font-size: 16px; line-height: 24px; color: var(--grey); }
#form-sollicitatie .form__options { gap: 0; padding-top: 0; }
#form-sollicitatie .form__option { position: relative; display: block; margin: 2px 0 3px 17px; font-size: 16px; line-height: 19px; color: #1b1b1b; }
#form-sollicitatie .form__option input { position: absolute; left: -17px; top: 1px; width: 13px; height: 13px; margin: 0; }
#form-sollicitatie input[type="file"] { display: block; width: 100%; height: 30px; font-size: 16px; line-height: 24px; color: #1b1b1b; background: #f0eded; }
#form-sollicitatie .form-note--tip { margin-top: 6px; font-size: 14.4px; line-height: 21.6px; color: #555; }
#form-sollicitatie .btn--block { font-family: 'Blink Jakarta', sans-serif; font-size: 14px; font-weight: 600; line-height: 14px; letter-spacing: 1px; padding: 16px 48px 17px; border-radius: 8px; }

@media (min-width: 768px) {
	#f-schoenmaat { width: 142px; }
	#form-sollicitatie .form__field:has(#f-regio_welke) { align-self: flex-start; margin-top: 1px; }
	#form-sollicitatie #f-regio_welke { margin-top: 3px; }
}

/* --- Werken bij: tablet ------------------------------------------------------------------ */
@media (max-width: 1024px) {
	.wb-join__photo--1, .wb-join__photo--2 { object-position: 0 0; }
}

/* --- Werken bij: mobiel ------------------------------------------------------------------ */
@media (max-width: 767px) {
	.wb-hero { min-height: 560px; }
	.wb-hero__inner { width: 100%; }
	.wb-h1 { font-size: 36px; line-height: 40px; letter-spacing: -.5px; }
	.wb-hero p { font-size: 16px; line-height: 24px; }
	.wb-hero .wb-btn { align-self: stretch; }
	.wb-h2 { font-size: 28px; line-height: 32px; }

	.wb-culture__row { flex-direction: column; gap: 48px; }
	.wb-culture__text, .wb-quote { flex: none; width: 100%; }
	.wb-culture__text { gap: 20px; }
	.wb-quote { padding: 0; }
	.wb-quote::before { inset: 0; }
	.wb-quote__card { margin: 8px 24px 24px 8px; padding: 29px 25px; }
	.wb-culture__text > p { font-size: 15px; line-height: 24px; }
	.wb-trait__icon { flex-basis: 50px; }
	.wb-quote__text { font-size: 22px; line-height: 28px; }
	.wb-person { flex-wrap: wrap; align-items: flex-start; }
	.wb-person__img { flex: 0 0 36%; width: 36%; border-radius: 50px; object-position: 0 -2px; }
	.wb-person__text { width: 100%; }

	.wb-join { padding: 40px 5px 48px; }
	.wb-join__row { flex-direction: column-reverse; gap: 24px; }
	.wb-join__text, .wb-join__photos { flex: none; width: 100%; }
	.wb-join .wb-h2 { font-size: 32px; line-height: 36px; }
	.wb-join__body { width: 100%; gap: 14px; }
	.wb-join__body p { font-size: 15px; line-height: 24px; }
	.wb-join__body .wb-join__lead { font-size: 17px; line-height: 24px; }
	.wb-join .wb-btn { align-self: stretch; }
	.wb-join__photos { padding: 0; }
	.wb-join__photo--1 { flex: 1 1 auto; width: 100%; object-position: -356px -434px; }
	.wb-join__photo--2 { display: none; }

	.wb-apply { padding: 48px 5px; }
	.wb-apply__card { padding: 28px 20px; gap: 40px; }
}

/* --- Beurstijger ------------------------------------------------------------------ */
.bt-hero { padding: 96px 80px; background: var(--merlot); text-align: center; }
.bt-hero__inner { max-width: 760px; margin: 0 auto; padding: 10px 0; display: flex; flex-direction: column; align-items: center; }
.bt-hero__smile { display: block; width: 104px; height: 27px; margin-bottom: 18px; }
.bt-eyebrow { margin-bottom: 10px; font-size: 12px; font-weight: 700; line-height: 12px; letter-spacing: 2.4px; text-transform: uppercase; color: var(--blush); }
.bt-h1 { font-size: 56px; font-weight: 700; line-height: 60px; letter-spacing: -1px; color: var(--white); }
.bt-hero__text { max-width: 620px; margin: 12px 0 14.4px; font-size: 18px; line-height: 29px; color: var(--blush); }
.bt-btn { margin-top: 28px; padding: 17px 32px; border-radius: 6px; background: var(--champagne); font-size: 17px; font-weight: 700; line-height: 17px; color: var(--merlot); text-decoration: none; transition: background .2s; }
.bt-btn:hover, .bt-btn:focus { background: var(--white); }

.bt-form { padding: 80px 80px 88px; background: var(--champagne); }
.bt-form__card { background: var(--white); border: 1px solid rgba(215, 193, 199, .45); border-radius: 12px; box-shadow: 0 2px 10px rgba(68, 0, 38, .06); }
.bt-form__inner { max-width: 640px; margin: 0 auto; padding: 40px 0; }
.bt-form__intro { margin-bottom: 40.4px; font-size: 17px; line-height: 28px; color: #000; }
.bt-form__outro { margin-top: 18px; }
.bt-form__outro p { margin-bottom: 14.4px; font-size: 14px; line-height: 22px; color: var(--grey); }
.bt-form__outro a { color: #cc3366; text-decoration: none; }

#form-beurstijger .form__grid { margin: 0 -8px; }
#form-beurstijger .form__field { padding: 0 8px; margin-bottom: 18px; }
#form-beurstijger .form__field--submit { margin-bottom: 0; }
#form-beurstijger .form__label { padding-bottom: 0; font-size: 15px; font-weight: 700; line-height: 15px; letter-spacing: 0; text-transform: none; color: var(--merlot); }
#form-beurstijger .form__req { display: inline; padding-left: 3px; color: var(--rose); }
#form-beurstijger input[type="text"], #form-beurstijger input[type="email"], #form-beurstijger input[type="tel"], #form-beurstijger textarea { height: 47px; padding: 6px 16px; font-size: 16px; line-height: 22.4px; color: #000; background: var(--white); border: 1px solid #e0d2d8; border-radius: 6px; }
#form-beurstijger textarea { height: 81px; }
#form-beurstijger .form__field:has(.form__option--accept) { line-height: 24px; }
#form-beurstijger .form__option--accept { display: inline; font-size: 16px; line-height: 16px; color: var(--merlot); }
#form-beurstijger .form__option--accept input { margin: 0 4px 0 0; vertical-align: baseline; }
#form-beurstijger .form__option--accept a { color: #cc3366; text-decoration: none; }
#form-beurstijger .btn--block { font-size: 17px; line-height: 17px; padding: 15px 30px; border-radius: 6px; }

@media (max-width: 767px) {
	.bt-hero { padding: 56px 20px 52px; }
	.bt-hero__inner { padding: 0; }
	.bt-h1 { font-size: 36px; line-height: 40px; letter-spacing: -.5px; }
	.bt-hero__text { font-size: 16px; line-height: 26px; }
	.bt-form { padding: 40px 20px 48px; }
	.bt-form__inner { padding: 24px 20px; }
	.bt-form__intro { font-size: 16px; line-height: 26px; }
}