.flex-layout.hero_secondary_detail_werkenbij {
	--layout-spacing-top: max(1rem, calc(1.5 * var(--su)));
	--layout-spacing-bottom: max(3rem, calc(5.875 * var(--su)));
	--text-color: var(--white-100);
	position: relative;
	display: grid;
	height: calc(100svh - var(--nova-header-flow-height, var(--pk-header-height)));
	min-height: 43.5rem;
	overflow: hidden;
	background: radial-gradient(119.16% 178% at 96.2% 162.32%, var(--support-1) 0%, var(--primary-100) 96.33%), var(--primary-100);
}

.flex-layout.hero_secondary_detail_werkenbij .background-text {
	/* Figma-specifieke decoratieve watermark; geen inhoudelijke heading. */
	position: absolute;
	top: 26.5%;
	left: 50%;
	z-index: 1;
	width: max-content;
	max-width: none;
	transform: translateX(-50%);
	font-family: var(--pk-heading-font-family);
	font-size: clamp(11rem, 19.2vw, 30rem);
	font-weight: var(--pk-heading-font-weight);
	line-height: 1;
	white-space: nowrap;
	color: rgba(255, 255, 255, .08);
	pointer-events: none;
}

.flex-layout.hero_secondary_detail_werkenbij .hero-collage {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
}

.flex-layout.hero_secondary_detail_werkenbij .hero-photo {
	position: absolute;
	overflow: hidden;
	pointer-events: auto;
	will-change: transform;
}

.flex-layout.hero_secondary_detail_werkenbij .hero-photo img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	will-change: transform;
}

.flex-layout.hero_secondary_detail_werkenbij .photo-1 {
	top: 0;
	left: 50.79%;
	width: 29.43%;
	aspect-ratio: 445 / 285;
}

.flex-layout.hero_secondary_detail_werkenbij .photo-2 {
	top: 48.26%;
	left: 43.05%;
	width: 13.89%;
	aspect-ratio: 1;
}

.flex-layout.hero_secondary_detail_werkenbij .photo-3 {
	right: 4.23%;
	bottom: 0;
	width: 20.9%;
	aspect-ratio: 316 / 292;
}

.flex-layout.hero_secondary_detail_werkenbij .hero-grid {
	position: relative;
	z-index: 3;
	grid-template-rows: auto 1fr auto;
	width: 100%;
	padding-block: 0;
	pointer-events: none;
}

.flex-layout.hero_secondary_detail_werkenbij .breadcrumbs-col {
	grid-row: 1;
	pointer-events: auto;
}

.flex-layout.hero_secondary_detail_werkenbij .content-col {
	grid-row: 3;
	color: var(--text-color);
	pointer-events: auto;
}

.flex-layout.hero_secondary_detail_werkenbij .content-col .pk-heading,
.flex-layout.hero_secondary_detail_werkenbij .content-col .pk-text {
	color: inherit;
}

.flex-layout.hero_secondary_detail_werkenbij .content-col .pk-heading + .pk-text {
	margin-top: max(1.5rem, calc(1.5 * var(--su)));
}

/* Bij de transparante header begint de hero bovenaan het scherm. De extra
   bovenruimte houdt de breadcrumbs op dezelfde visuele positie onder de nav. */
body.has-jobs-header-overlay .flex-layout.hero_secondary_detail_werkenbij[data-jobs-header-overlay] {
	--layout-spacing-top: calc(var(--pk-header-height) + max(1rem, calc(1.5 * var(--su))));
}

@media screen and (max-width: 991px) {

	.flex-layout.hero_secondary_detail_werkenbij {
		--layout-spacing-top: max(1rem, calc(1.5 * var(--su)));
		--layout-spacing-bottom: 0;
		display: block;
		height: auto;
		min-height: max(calc(44rem - var(--layout-spacing-top)), calc(100svh - var(--nova-header-flow-height, var(--pk-header-height)) - var(--layout-spacing-top)));
		background: radial-gradient(119.16% 178% at 96.2% 162.32%, var(--support-1) 0%, var(--primary-100) 96.33%), var(--primary-100);
	}

	.flex-layout.hero_secondary_detail_werkenbij .background-text {
		top: max(8rem, calc(9 * var(--su)));
		left: 0;
		transform: none;
		font-size: clamp(8rem, 36vw, 15rem);
	}

	.flex-layout.hero_secondary_detail_werkenbij .hero-grid {
		position: relative;
		display: grid;
		grid-template-rows: auto 1fr;
		row-gap: 0;
		min-height: max(calc(44rem - var(--layout-spacing-top)), calc(100svh - var(--nova-header-flow-height, var(--pk-header-height)) - var(--layout-spacing-top)));
		pointer-events: auto;
	}

	.flex-layout.hero_secondary_detail_werkenbij .content-col {
		grid-row: 2;
		align-self: start;
		margin-top: clamp(16rem, 28svh, 20rem);
		padding-bottom: max(2rem, calc(3 * var(--su)));
	}

	.flex-layout.hero_secondary_detail_werkenbij .hero-collage {
		position: absolute;
		inset: 0;
		display: block;
		pointer-events: auto;
	}

	.flex-layout.hero_secondary_detail_werkenbij .hero-photo {
		position: absolute;
	}

	.flex-layout.hero_secondary_detail_werkenbij .photo-1 {
		top: max(4rem, calc(4 * var(--su)));
		right: -2%;
		left: auto;
		width: 55%;
		aspect-ratio: 445 / 285;
	}

	.flex-layout.hero_secondary_detail_werkenbij .photo-2 {
		top: auto;
		bottom: max(7rem, calc(9 * var(--su)));
		left: 6%;
		width: 29%;
		aspect-ratio: 1;
	}

	.flex-layout.hero_secondary_detail_werkenbij .photo-3 {
		top: auto;
		right: 3%;
		bottom: 0;
		left: auto;
		width: 45%;
		aspect-ratio: 316 / 292;
	}

}

@media screen and (max-width: 991px) {

	body.has-jobs-header-overlay .flex-layout.hero_secondary_detail_werkenbij[data-jobs-header-overlay] {
		--layout-spacing-top: calc(var(--pk-header-height) + max(1rem, calc(1.5 * var(--su))));
		height: auto;
		min-height: 100svh;
	}
}

@media screen and (max-width: 767px) {

	.flex-layout.hero_secondary_detail_werkenbij,
	.flex-layout.hero_secondary_detail_werkenbij .hero-grid {
		min-height: max(calc(37rem - var(--layout-spacing-top)), calc(100svh - var(--nova-header-flow-height, var(--pk-header-height)) - var(--layout-spacing-top)));
	}

	.flex-layout.hero_secondary_detail_werkenbij .background-text {
		top: 8rem;
	}

	.flex-layout.hero_secondary_detail_werkenbij .content-col {
		margin-top: clamp(9rem, 20svh, 11rem);
		padding-bottom: 3rem;
	}

	.flex-layout.hero_secondary_detail_werkenbij .photo-1 {
		top: 4rem;
		right: -12%;
		width: 58%;
	}

	.flex-layout.hero_secondary_detail_werkenbij .photo-2 {
		bottom: 3rem;
		left: 6%;
		width: 32%;
	}

	.flex-layout.hero_secondary_detail_werkenbij .photo-3 {
		right: -8%;
		width: 44%;
	}

}

@media screen and (min-width: 600px) and (max-width: 991px) {

	.flex-layout.hero_secondary_detail_werkenbij .content-col {
		margin-top: clamp(16rem, 34vw, 21rem);
	}

	.flex-layout.hero_secondary_detail_werkenbij .photo-1 {
		top: 4rem;
		right: -2%;
		width: 40%;
	}

	.flex-layout.hero_secondary_detail_werkenbij .photo-2 {
		bottom: 3rem;
		left: 6%;
		width: 27%;
	}

	.flex-layout.hero_secondary_detail_werkenbij .photo-3 {
		right: -3%;
		width: 38%;
	}
}

@media screen and (max-width: 767px) and (max-height: 720px) {

	.flex-layout.hero_secondary_detail_werkenbij,
	.flex-layout.hero_secondary_detail_werkenbij .hero-grid {
		min-height: calc(45rem - var(--layout-spacing-top));
	}
}