/**
 * Layout: Hero - Verhaal detail
 * Slug: hero_verhaal_detail
 */

.hero_verhaal_detail-layout {
	position: relative;
	--pk-heading-color: #ffffff;
	background-color: var(--fdhl-red);
	padding-top: max(calc(var(--pk-header-height) + 2rem), calc(9 * var(--su)));
	color: #ffffff;
}
.hero_verhaal_detail-layout:not(:has(.image-col)) {
	padding-bottom: max(2rem, calc(4.5 * var(--su)));
}
.hero_verhaal_detail-layout::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 0;
	pointer-events: none;
	width: 100%;
	height: 100px;
	background-color: var(--fdhl-red-dark);
}
.hero_verhaal_detail-layout .pk-grid-container {
	position: relative;
	z-index: 5;
}

.hero_verhaal_detail-layout .content-wrapper {
	position: relative;
	z-index: 5;
	background-color: var(--fdhl-red-dark);
	padding: max(2rem, calc(3 * var(--su)))
	max(1.5rem, calc(4 * var(--su)));
	border-radius: 0.75rem;
}

.hero_verhaal_detail-layout .content-wrapper > .icon-wrapper {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	translate: 50% -50%;
	background-color: var(--fdhl-red);
	border-radius: 100%;
	box-shadow: 0 0 10px rgba(0,0,0,0.15);
	width: 4.75rem;
	aspect-ratio: 1;
}
.hero_verhaal_detail-layout .content-wrapper .name {
	margin-bottom: 0.5rem;
	font-size: max(1.125rem, calc(1.375 * var(--su)));
}
.hero_verhaal_detail-layout .content-wrapper .pk-heading {
	font-size: max(2rem, calc(2.5 * var(--su)));
	line-height: 1;
}
.hero_verhaal_detail-layout .content-wrapper .pk-text {
	font-size: max(1.25rem, calc(1.5 * var(--su)));
	font-weight: 500;
	line-height: 1.2;
}

.hero_verhaal_detail-layout .image-col img {
	width: 100%;
	border-bottom-right-radius: 0.75rem;
	border-top-right-radius: 0.75rem;
	aspect-ratio: 2/1;
	object-fit: cover;
}

@media (min-width: 993px) {
	.hero_verhaal_detail-layout .bottom-row {
		margin-top: -10rem;
		z-index: 2;
		margin-inline: calc(var(--pk-site-gutter) * -1);
		width: auto;
	}
}

@media screen and (max-width: 992px) {
	.hero_verhaal_detail-layout .bottom-row {
		margin-top: 2rem;
	}
	.hero_verhaal_detail-layout .image-col img {
		border-radius: 0.75rem;
	}
}

@media screen and (max-width: 767px) {
	.hero_verhaal_detail-layout .content-wrapper > .icon-wrapper {
		/* width: calc(var(--pk-site-gutter) * 2); */
		translate: -1rem -50%;
		right: 0;
	}
	/* .hero_verhaal_detail-layout .content-wrapper > .icon-wrapper svg {
		width: 1.5rem;
		height: auto;
	} */
}