/*
 * Banner di testata delle pagine interne (Pagine e Articoli): immagine a
 * tutta larghezza con velo verde `var(--color-green)` in modalità
 * "multiply" (come nel Figma "pagina interna"), titolo e sottotitolo
 * bianchi allineati al contenitore di `.page-content`
 * (max-width 1594px, padding 2rem).
 */
.banner-pagina {
	position: relative;
	display: flex;
	align-items: center;
	min-height: clamp(220px, 24.8vw, 476px);
	overflow: hidden;
	background: var(--color-green);
}

.banner-pagina::after {
	position: absolute;
	inset: 0;
	content: "";
	background: var(--color-green);
	mix-blend-mode: multiply;
}

.banner-pagina__immagine {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.banner-pagina__contenuto {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 1594px;
	margin: 0 auto;
	padding: 2rem;
	color: var(--color-white);
}

.banner-pagina__titolo {
	margin: 0;
	font-family: var(--font-titles);
	font-size: clamp(2rem, 3.125vw, 3.75rem);
	font-weight: 900;
	line-height: 1.3;
	text-transform: capitalize;
}

.banner-pagina__sottotitolo {
	margin: 0;
	font-family: var(--font-titles);
	font-size: clamp(1.1rem, 1.77vw, 2.125rem);
	font-weight: 400;
	line-height: 1.3;
}

@media (width <= 767px) {
	.banner-pagina__contenuto {
		padding: 1.5rem 1rem;
	}
}