/**
 * Layout: Hero - Onderzoek detail
 * Slug: hero_onderzoek
 */
.hero_onderzoek-layout + .flex-layout {
	background-color: transparent;
}
.hero_onderzoek-layout {
    position: relative;
	z-index: 10;
    padding-top: var(--pk-hero-top-spacing);
	background-color: #ffffff;
	padding-bottom: 0;
	border-radius: 2rem;
	margin-bottom: 4rem;
}

.hero_onderzoek-layout .image-col {
	position: relative;
	z-index: 1;
	margin-bottom: -4rem;
}
.hero_onderzoek-layout .image-col .hero_img {
	mask: url('../../../../assets/images/imageMask.svg');
	mask-size: cover;
	mask-position: center;
	mask-repeat: no-repeat;
	aspect-ratio: 22/27;
	object-fit: cover;
	width: 100%;
}
.hero_onderzoek-layout .image-col .hero-icon {
	position: absolute;
	top: 10%;
	right: 0;
	z-index: 5;
	background-color: #ffffff;
	border-radius: 100%;
	padding: max(1.5rem, calc(2.5 * var(--su)));
	translate: 50% 0;
	filter: drop-shadow(0 3.8px 38px rgba(0, 0, 0, 0.05));
	border: 1px solid rgba(10, 55, 124, 0.10);
}
.hero_onderzoek-layout .image-col .hero-icon img {
	width: max(3rem, calc(3.75 * var(--su)));
	aspect-ratio: 1;
	height: auto;
}
.hero_onderzoek-layout .image-col .hero-icon .rings {
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 1;
	translate: -50% -50%;
	width: 100%;
	height: 100%;
	opacity: 0.5;
	pointer-events: none;
}
.hero_onderzoek-layout .image-col .hero-icon .rings .ring {
	border: 1px solid var(--dia-blue);
	position: absolute;
	left: 50%;
	top: 50%;
	translate: -50% -50%;
	border-radius: 100%;
	aspect-ratio: 1;
}
.hero_onderzoek-layout .image-col .rings .ring-1 {
	width: calc(100% + max(50px, calc(4 * var(--su))));
	opacity: 10%;
	filter: blur(0.2px);
}
.hero_onderzoek-layout .image-col .rings .ring-2 {
	width: calc(100% + max(100px, calc(8 * var(--su))));
	opacity: 10%;
	filter: blur(0.25px);
}
.hero_onderzoek-layout .image-col .rings .ring-3 {
	width: calc(100% + max(150px, calc(12 * var(--su))));
	opacity: 15%;
	filter: blur(1px);
}


.hero_onderzoek-layout .content-col {
	position: relative;
	z-index: 2;
}
.hero_onderzoek-layout .content-col .pk-button-group {
	margin-block: max(1.5rem, calc(2 * var(--su)));
}
.hero_onderzoek-layout .content-col .usps {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-top: max(2rem, calc(4 * var(--su)));
}
.hero_onderzoek-layout .content-col .usp {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-size: var(--desktop-body-xs);
	max-width: max(250px, calc(15.5 * var(--su)));
	background-color: #ffffff;
	border-radius: 1rem;
	border-bottom-right-radius: 0;
	padding: max(0.5rem, calc(0.5 * var(--su)));
	border: 1px solid rgba(10, 55, 124, 0.10);
}
.hero_onderzoek-layout .content-col .usp:nth-child(1) {
	--uspColor: var(--dia-pink-rgb);
}
.hero_onderzoek-layout .content-col .usp:nth-child(2) {
	--uspColor: var(--dia-orange-rgb);
}
.hero_onderzoek-layout .content-col .usp:nth-child(3) {
	--uspColor: var(--dia-purple-rgb);
}
.hero_onderzoek-layout .content-col .usp .icon-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	border: 1px solid rgba(var(--uspColor), 0.15);
	border-radius: 100%;
	width: max(2.5rem, calc(2.5 * var(--su)));
	aspect-ratio: 1;
}
.hero_onderzoek-layout .content-col .usp .text {
	/* font-weight: 500; */
}
.hero_onderzoek-layout .content-col .usp .icon-wrapper svg path[stroke] {
	stroke: rgb(var(--uspColor));
}
.hero_onderzoek-layout .content-col .usp .icon-wrapper svg path[fill] {
	fill: rgb(var(--uspColor));
}

@media screen and (min-width: 993px) and (max-width: 1200px) {
	.hero_onderzoek-layout:has(.hero-icon) .content-col {
		padding-left: 4rem;
	}
}

@media screen and (max-width: 992px) {
	.hero_onderzoek-layout .image-col {
		order: 2;
		margin-top: 4rem;
	}
	.hero_onderzoek-layout .image-col .hero-icon {
		right: var(--pk-site-gutter);
		top: auto;
		bottom: 0;
		translate: 0 50%;
	}
}

@media screen and (max-width: 767px) {
	.hero_onderzoek-layout .image-col {
		margin-top: 1.5rem;
	}
	.hero_onderzoek-layout .content-col .usp {
		font-size: var(--desktop-body-sm);
	}
}