/*
 * Intro delle pagine interne. Stessa impostazione dell'hero della home
 * (foto a tutta larghezza, testo in basso, sfumatura per la testata
 * trasparente), ma più bassa: la prima schermata a piena altezza è della home,
 * qui sotto la piega deve entrare anche il contenuto.
 */

.cn-intro {
	position: relative;
	isolation: isolate;
	display: grid;
	align-items: end;
	min-height: min(68svh, 38rem);
	overflow: hidden;
}

/* Due classi e non una: Elementor stampa `.elementor img { height: auto }`,
   che con una classe sola vincerebbe e rimetterebbe l'immagine sulle sue
   proporzioni originali. */
.cn-intro .cn-intro__foto {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 45%;
}

/* Più scura in cima dell'hero della home: qui passano anche foto con il cielo
   chiaro, e il menu trasparente è bianco. */
.cn-intro::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		to bottom,
		rgba(28, 20, 14, 0.56) 0%,
		rgba(28, 20, 14, 0.24) 38%,
		rgba(28, 20, 14, 0.44) 74%,
		rgba(28, 20, 14, 0.68) 100%
	);
}

.cn-intro__testo {
	width: min(100% - var(--cn-gutter) * 2, var(--cn-max-width));
	margin-inline: auto;
	padding-block: clamp(7rem, 16vh, 10rem) clamp(2.6rem, 7vh, 4.5rem);
	color: var(--cn-panna);
}

.cn-intro__titolo {
	font-size: var(--cn-titolo-sezione);
	font-weight: 300;
	margin: 0 0 0.8rem;
	color: var(--cn-panna);
	text-wrap: balance;
	max-width: 30ch;
	text-shadow: 0 0.1em 1.4em rgba(0, 0, 0, 0.35);
}

.cn-intro__sotto {
	font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem);
	color: rgba(245, 242, 238, 0.9);
	max-width: 46ch;
	margin: 0;
}

@media (max-width: 52rem) {
	.cn-intro {
		min-height: min(62svh, 30rem);
	}
}