/*
 * NPU CTA Banner block.
 * Figma reference: 0277aepgvQrSa8qJCDLosA — node 293:559 (1600×750).
 * The purple tone and the white logo glyph are baked into the source image —
 * no overlay or extra decoration layer in Figma, so we render the image alone.
 */

.npu-cta-banner {
	position: relative;
	display: flex;
	align-items: center;
	aspect-ratio: 1600 / 750;
	min-height: 500px;
	--npu-block-padding-top: 3.75rem;
	--npu-block-padding-bottom: 3.75rem;
	padding: var(--npu-block-padding-top) 0 var(--npu-block-padding-bottom);
	overflow: hidden;
	background-color: var(--npu-purple-deep);
	color: var(--npu-text-on-dark);
}

.npu-cta-banner__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
	pointer-events: none;
}

.npu-cta-banner__inner {
	position: relative;
	z-index: 1;
	width: 100%;
}

.npu-cta-banner__column {
	display: flex;
	flex-direction: column;
	gap: var(--npu-gap-medium);
	max-width: 750px;
}

.npu-cta-banner__title {
	font-family: var(--npu-font-body);
	font-weight: 700;
	font-size: 40px;
	line-height: 1.2;
	color: inherit;
	margin: 0;
}

.npu-cta-banner__body {
	font-family: var(--npu-font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.4;
	color: inherit;
	margin: 0;
}

@media (max-width: 980px) {
	.npu-cta-banner {
		aspect-ratio: auto;
		min-height: 520px;
	}

	.npu-cta-banner__title {
		font-size: 32px;
	}
}

@media (max-width: 600px) {
	.npu-cta-banner {
		min-height: 420px;
	}

	.npu-cta-banner__title {
		font-size: 26px;
	}
}