/* ==========================================================================
   Info-pagina's: hoe-het-werkt, contact, jouw-event.
   ========================================================================== */

/* --- Hoe het werkt: intro ------------------------------------------------------------------ */
.hhw-intro__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; padding: 20px 0; }
.hhw-intro__grid > * { padding: 10px; }
.hhw-intro .eyebrow { margin-bottom: 18px; }
.hhw-intro .h2 { margin-bottom: 18px; }
.hhw-intro__text p:last-child { margin-bottom: 14.4px; }
.hhw-intro__media img { width: 100%; height: 420px; object-fit: cover; border-radius: 16px; }

/* --- Hoe het werkt: proces ------------------------------------------------------------------ */
.hhw-process__head { display: flex; flex-direction: column; align-items: center; padding: 20px 10px 10px; }
.hhw-rows { display: flex; flex-direction: column; gap: 28px; margin-top: 76px; padding-bottom: 10px; }
.hhw-row { display: flex; flex-wrap: wrap; align-items: center; gap: 40px; padding: 10px 0; }
.hhw-row > * { width: 48%; }
.hhw-media { padding: 10px; }
.hhw-media img { width: 100%; height: 260px; object-fit: cover; border-radius: 12px; }
.hhw-media .hhw-img-1 { object-fit: none; object-position: -570px -705px; }
.hhw-media .hhw-img-2 { object-position: 0 -17px; }
.hhw-media .hhw-img-3 { object-position: 0 -141px; }
.hhw-card { display: flex; flex-direction: column; gap: 9px; padding: 32px; background: var(--white); border: 1px solid rgba(215, 193, 199, .5); border-radius: 12px; }
.hhw-card .eyebrow { margin: 0; }
.hhw-card .h3 { font-size: 18px; line-height: 18px; }
.hhw-card p:last-child { line-height: 26px; margin-bottom: 14.4px; }

/* --- Hoe het werkt: afsluiter ------------------------------------------------------------------ */
.hhw-cta .wrap { padding: 10px 0; }
.hhw-cta__box { display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 80px 40px; background: var(--rose); border-radius: 16px; text-align: center; color: var(--white); }
.hhw-cta__box h2 { font-size: 40px; font-weight: 700; line-height: 46px; }
.hhw-cta__box p { font-size: 19px; line-height: 32px; margin-bottom: 14.4px; }
.hhw-cta__actions { padding-top: 8px; }

@media (max-width: 1024px) {
	.hhw-row > * { width: 100%; }
	.hhw-media .hhw-img-1 { object-position: -628px -523px; }
	.hhw-media .hhw-img-2, .hhw-media .hhw-img-3 { object-position: 0 0; }
}

@media (max-width: 767px) {
	.hhw-intro__grid { grid-template-columns: 1fr; padding: 20px 10px; }
	.hhw-intro__grid > .hhw-intro__media { padding: 0; }
	.hhw-process { padding-left: 5px; padding-right: 5px; }
	.hhw-row { padding: 0; }
	.hhw-media { order: -1; padding: 0; }
	.hhw-media .hhw-img-1 { object-position: -691px -697px; }
	.hhw-media .hhw-img-3 { object-position: 0 -67px; }
	.hhw-cta .wrap { padding: 10px; }
	.hhw-cta__box { padding: 48px 24px; }
	.hhw-cta__box h2 { font-size: 28px; }
}

/* --- Contact ------------------------------------------------------------------ */
.ct-intro { padding: 128px 80px 40px; }
.ct-intro__inner { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 10px; }
.ct-intro h1 { font-family: var(--font-ui); font-size: 72px; font-weight: 700; line-height: 72px; letter-spacing: -2px; color: var(--merlot); }
.ct-intro p { max-width: 576px; margin-bottom: 14.4px; font-family: var(--font-ui); font-size: 16px; line-height: 29.6px; color: #534248; }

.ct-team { padding: 40px 80px; }
.ct-team__box { padding: 64px; background: var(--champagne); border-radius: 12px; }
.ct-team__grid { display: flex; justify-content: center; gap: 24px; padding: 10px; }
.ct-person { display: flex; align-items: flex-start; gap: 24px; width: 50%; padding: 33px; background: var(--paper); border: 1px solid rgba(215, 193, 199, .3); border-radius: 12px; box-shadow: 0 1px 1px rgba(0, 0, 0, .05); }
.ct-person__img { flex-shrink: 0; width: 116px; height: 116px; margin-top: -48px; object-fit: cover; border-radius: 50%; box-shadow: 0 8px 24px rgba(68, 0, 38, .14); }
.ct-img-anton { object-position: -4px -2px; }
.ct-img-katinka { object-position: -1px -11px; }
.ct-person__body { flex: 1; display: flex; flex-direction: column; padding: 10px; }
.ct-person h3 { font-family: var(--font-ui); font-size: 32px; font-weight: 700; line-height: 41.6px; letter-spacing: -.5px; color: var(--merlot); }
.ct-person__role { margin-bottom: 14.4px; font-family: var(--font-ui); font-size: 14px; font-weight: 600; line-height: 21px; letter-spacing: 1px; color: #c46a90; }
.ct-iconlist { list-style: none; margin: 10px 0 0; padding: 0; }
.ct-iconlist li { display: flex; align-items: center; line-height: 24px; color: #333; }
.ct-iconlist li:not(:last-child) { padding-bottom: 5px; }
.ct-iconlist li + li { margin-top: 5px; }
.ct-iconlist svg { flex-shrink: 0; width: 14px; height: 14px; margin-right: 3.5px; fill: var(--merlot); }
.ct-iconlist span { padding-left: 5px; color: var(--rose); }

.ct-info { padding: 40px 80px 120px; }
.ct-info__grid { display: flex; align-items: center; gap: 24px; padding: 10px; }
.ct-info__grid > * { width: 50%; }
.ct-info__text { display: flex; flex-direction: column; gap: 32px; padding: 10px; }
.ct-info h2 { font-family: var(--font-ui); font-size: 48px; font-weight: 700; line-height: 57.6px; letter-spacing: -1px; color: var(--merlot); }
.ct-info__list { display: flex; flex-direction: column; gap: 3px; padding: 10px; }
.ct-info__list p { margin-bottom: 14.4px; font-family: var(--font-ui); font-size: 16px; line-height: 29.6px; color: #534248; }
.ct-info__list .ct-label { font-size: 14px; font-weight: 600; line-height: 21px; letter-spacing: 1px; color: var(--merlot); }
.ct-label a { color: var(--merlot); font-weight: 600; text-decoration: none; }
.ct-map { padding: 10px; overflow: hidden; border: 1px solid rgba(215, 193, 199, .2); border-radius: 12px; box-shadow: 0 1px 2px rgba(0, 0, 0, .05); }
.ct-map iframe { display: block; width: 100%; height: 400px; border: 0; }

@media (max-width: 1024px) {
	.ct-img-anton, .ct-img-katinka { object-position: 0 0; }
}

@media (max-width: 767px) {
	.ct-intro { padding: 40px 20px 20px; }
	.ct-intro h1 { font-size: 34px; line-height: 38px; letter-spacing: -.5px; }
	.ct-intro p { max-width: none; font-size: 15px; line-height: 24px; }
	.ct-team { padding: 12px 5px; }
	.ct-team__box { padding: 24px 16px; }
	.ct-team__grid { flex-direction: column; gap: 20px; padding: 0; }
	.ct-person { flex-wrap: wrap; gap: 16px; width: 100%; padding: 25px 21px; }
	.ct-person__img { width: 92px; height: 92px; margin-top: -38px; }
	.ct-person__body { flex: none; width: 100%; padding: 0; }
	.ct-person h3 { font-size: 22px; line-height: 28px; }
	.ct-info { padding: 20px 5px 40px; }
	.ct-info__grid { flex-direction: column; }
	.ct-info__grid > * { width: 100%; }
	.ct-info h2 { font-size: 28px; line-height: 32px; }
	.ct-map iframe { height: 260px; }
}

/* --- Jouw event ------------------------------------------------------------------ */
.je-intro .wrap, .je-main .wrap { padding: 20px 10px; }
.je-intro .h2 { margin-bottom: 15px; }
.je-intro .wrap > p:last-child { margin-bottom: 14.4px; }
.je-grid { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 40px; }
.je-formcard { width: 62%; min-height: 710px; padding: 40px; background: var(--white); border: 1px solid #e5e2e1; border-radius: 12px; }
.je-side { display: flex; flex-direction: column; gap: 24px; width: 34%; }
.je-why { display: flex; flex-direction: column; gap: 22px; padding: 40px; background: var(--champagne); border-radius: 12px; }
.je-why h3 { font-size: 24px; font-weight: 700; line-height: 24px; color: var(--ink); }
.je-checks { list-style: none; margin: 0; padding: 0; }
.je-checks li { display: flex; align-items: flex-start; line-height: 24px; color: #333; }
.je-checks li:not(:last-child) { padding-bottom: 10px; }
.je-checks li + li { margin-top: 10px; }
.je-checks svg { flex-shrink: 0; width: 17px; height: 17px; margin: 5px 4.25px 0 0; fill: var(--merlot); }
.je-checks span { padding-left: 5px; color: var(--rose); }
.je-checks b { font-weight: 700; }
.je-side__img { width: 100%; height: 280px; object-fit: cover; object-position: 0 -32px; border-radius: 12px; }

/* Formulier zoals live (Elementor-formulier) */
#form-event select { height: 40px; padding: 5px 20px 5px 14px; font-size: 16px; line-height: 24px; -webkit-appearance: none; appearance: none; background: var(--sand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 357 571 322'%3E%3Cpath fill='%231c1c1c' d='M571 393Q571 407 561 418L311 668Q300 679 286 679T261 668L11 418Q0 407 0 393T11 368 36 357H536Q550 357 561 368T571 393Z'/%3E%3C/svg%3E") no-repeat right 10px center / 11px auto; }
#form-event .form__req { display: none; }
#form-event textarea { height: 98px; padding: 5px 14px; }
#form-event .btn--block { padding: 15px 30px 16px; }

@media (max-width: 1024px) {
	.je-formcard, .je-side { width: 100%; }
	.je-side__img { object-position: 0 0; }
}

@media (max-width: 767px) {
	.je-intro { padding: 56px 20px; }
	.je-intro .wrap { padding: 20px; }
	.je-main .wrap { padding: 10px; }
	.je-formcard { min-height: 0; padding: 10px 5px; }
	.je-why { padding: 10px; }
}