/* Diensten Sectie Component */

.diensten-sectie {
	background-color: #100129;
	color: var(--color-amber-50);
}

.diensten-sectie__bg {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(54% 84% at 4% 24%, rgba(115, 12, 255, 0.5) 0%, rgba(82, 9, 182, 0.24) 42%, rgba(16, 1, 41, 0) 74%),
		radial-gradient(24% 42% at 100% 54%, rgba(96, 15, 208, 0.22) 0%, rgba(16, 1, 41, 0) 72%),
		linear-gradient(90deg, #1b003d 0%, #100129 28%, #100129 72%, #1a003a 100%);
}

.diensten-sectie__bg-decoration {
	position: absolute;
	top: -12%;
	left: 0%;
	width: clamp(460px, 52%, 820px);
	opacity: 0.68;
	mix-blend-mode: color-dodge;
	filter: saturate(1.12) brightness(1.12);
	pointer-events: none;
	user-select: none;
	will-change: transform;
}

.diensten-sectie__inner {
	position: relative;
	z-index: 1;
}

.diensten-sectie__badge,
.diensten-sectie__service-label {
	outline: 1px solid rgba(216, 210, 225, 0.9);
	outline-offset: -1px;
}

.diensten-sectie__badge-text,
.diensten-sectie__service-label,
.diensten-sectie__service-content,
.diensten-sectie__cta-text {
	font-family: 'PP Neue Montreal', sans-serif;
}

.diensten-sectie__title,
.diensten-sectie__service-title {
	font-family: 'Mona Sans', sans-serif;
}

.diensten-sectie__badge-text {
	font-size: clamp(1rem, 1.3vw, 1.5rem);
	line-height: 1.3;
	letter-spacing: 0.03em;
}

.diensten-sectie__title {
	font-size: clamp(2.5rem, 8vw, 6rem);
	font-weight: 700;
	line-height: 0.95;
	letter-spacing: -0.02em;
}

.diensten-sectie__image-wrap {
	width: clamp(260px, 33vw, 520px);
	height: clamp(300px, 38vw, 636px);
	z-index: 1;
}

.diensten-sectie__image {
	will-change: transform;
}

.diensten-sectie__image-placeholder {
	background:
		radial-gradient(70% 100% at 20% 0%, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.03) 80%),
		linear-gradient(150deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.02) 100%);
}

.diensten-sectie__service-label {
	font-size: 1.125rem;
	font-weight: 500;
	line-height: 1.2;
	position: relative;
	z-index: 2;
}

.diensten-sectie__service {
	position: relative;
	overflow: hidden;
}

.diensten-sectie__service::before {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(255, 252, 241, 0.2);
	backdrop-filter: blur(64px);
	transform: translateY(100%);
	transition: transform 0.55s cubic-bezier(0.22, 1.18, 0.36, 1);
	pointer-events: none;
	z-index: 0;
}

.diensten-sectie__service:hover::before {
	transform: translateY(0);
}

.diensten-sectie__service-title {
	font-size: 36px;
	font-weight: 700;
	line-height: 1.02;
	letter-spacing: -0.01em;
	position: relative;
	z-index: 1;
}

.diensten-sectie__service-content {
	font-size: 1.125rem;
	line-height: 1.4;
	color: #B7B1B4;
	position: relative;
	z-index: 1;
}

.diensten-sectie__service-arrow {
	color: var(--color-amber-50);
	position: relative;
	z-index: 1;
	flex-shrink: 0;
	margin-right: 0.5rem;
	transition: transform 0.24s ease-out;
}

.diensten-sectie__service:hover .diensten-sectie__service-arrow {
	transform: translateX(6px);
}

.diensten-sectie__cta {
	align-self: flex-start;
	margin-left: 2rem;
}

@media (max-width: 1023px) {
	.diensten-sectie__badge-text,
	.diensten-sectie__service-label {
		font-size: 14px;
		font-weight: 500;
	}

	.diensten-sectie__image-wrap {
		position: relative !important;
		left: auto !important;
		bottom: auto !important;
		width: calc(100% - 24px);
		height: clamp(240px, 62vw, 420px);
		margin: 1.75rem 24px 0 0;
	}

	.diensten-sectie__service {
		padding: 1.5rem 1rem !important;
		gap: 1rem !important;
	}

	.diensten-sectie__cta {
		margin-left: 1rem;
	}

	.diensten-sectie__service-title {
		font-size: 1.5rem;
	}

}