/*
 * ON Newsletter: la cartolina vera (home.css 403-436, 470-475, 602-608, 683, 753-775, 817-818)
 * e la fascia semplice delle pagine interne (sito.css 253-263).
 * Mobile first: telefono senza media query, tablet da 600 px, desktop da 901 px.
 *
 * La cartolina è una fotografia scontornata (1,3813:1): i testi stanno sulle sue righe
 * stampate. Il modulo NON è posizionato in assoluto: è nel flusso con un padding in alto
 * (le percentuali dei padding si calcolano sulla larghezza), così se il testo cresce
 * (zoom, consenso lungo) la cartolina si allunga invece di tagliare il modulo.
 * Senza servizio o informativa il modulo non c'è: sulle stesse righe va il link senza modulo
 * (.on-newsletter__alternativa), con le stesse misure.
 */

.on-newsletter {
	position: relative;
	padding: var(--on-space-section) var(--on-gutter);
	background-color: var(--on-paper-2);
	color: var(--on-ink);
}

/* Grana della carta */
.on-newsletter::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: var(--on-grain);
	opacity: .5;
	mix-blend-mode: multiply;
}

.on-newsletter__in {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(32px, 5vw, 80px);
	align-items: center;
	max-width: var(--on-container);
	margin: 0 auto;
}

/* ---------- l'invito ---------- */

.on-newsletter__occhiello {
	display: block;
	margin: 0 0 12px;
	font-size: .75rem;
	color: var(--on-green-ink);
}

.on-newsletter__titolo {
	max-width: 14ch;
	font-size: var(--on-fs-h2);
	letter-spacing: 0;
	line-height: var(--on-lh-title);
	text-wrap: balance;
}

.on-newsletter__testo {
	max-width: 44ch;
	margin: 14px 0 0;
	font-size: var(--on-fs-lede);
	line-height: 1.5;
}

/* ---------- la cartolina ---------- */

.on-newsletter__cartolina {
	/* Inclinazione verso il puntatore (scritta dal JS) e verde del francobollo stampato */
	--on-nl-rx: 0deg;
	--on-nl-ry: 0deg;
	--on-nl-r: 0deg;
	--on-nl-bollo-a: color-mix(in srgb, var(--on-green) 90%, var(--on-white));
	--on-nl-bollo-b: color-mix(in srgb, var(--on-green) 75%, var(--on-black));
	position: relative;
	aspect-ratio: 1.3813;
	container-type: inline-size;
	filter: drop-shadow(0 40px 36px color-mix(in srgb, var(--on-shade) 30%, transparent));
	transform: perspective(1400px) rotate(var(--on-nl-r)) rotateX(var(--on-nl-rx)) rotateY(var(--on-nl-ry));
}

@media (prefers-reduced-motion: no-preference) {
	.on-newsletter__cartolina {
		transition: transform .6s var(--on-ease-out);
	}
}

/* Doppia classe: ".elementor img" (0,1,1) le darebbe height: auto e la carta non seguirebbe il contenuto. */
.on-newsletter .on-newsletter__carta {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: fill;
}

.on-newsletter__francobollo {
	position: absolute;
	left: 81%;
	top: 6.5%;
	width: 15.5%;
	transform: rotate(-3deg);
}

.on-newsletter__bordo {
	display: block;
	width: 100%;
	height: auto;
	filter: drop-shadow(0 2px 3px color-mix(in srgb, var(--on-shade) 25%, transparent));
}

.on-newsletter__dentro {
	position: absolute;
	left: 14.2%;
	top: 12%;
	display: grid;
	place-items: center;
	align-content: center;
	gap: 4%;
	width: 70.1%;
	height: 77%;
	padding: 6%;
	box-sizing: border-box;
	background: radial-gradient(ellipse at 50% 40%, var(--on-nl-bollo-a), var(--on-nl-bollo-b));
}

.on-newsletter__dentro img {
	width: 46%;
	height: auto;
}

.on-newsletter__dentro span {
	font-family: var(--on-font-cond);
	font-size: clamp(6px, .95cqw, 9px);
	font-weight: 700;
	letter-spacing: .08em;
	line-height: 1.1;
	text-align: center;
	text-transform: uppercase;
	color: var(--on-white);
}

.on-newsletter__timbro {
	position: absolute;
	left: 61%;
	top: -3%;
	width: 36%;
	height: auto;
	opacity: .8;
	mix-blend-mode: multiply;
	pointer-events: none;
	transform: rotate(-12deg);
}

/* Il messaggio a pennarello: sul telefono non c'è spazio */
.on-newsletter__messaggio {
	display: none;
	position: absolute;
	left: 6%;
	top: 27%;
	width: 38%;
	font-family: var(--on-font-marker);
	font-size: 15px;
	line-height: 1.4;
	color: var(--on-marker-blue);
	text-shadow: 0 0 .7px color-mix(in srgb, var(--on-marker-blue) 55%, transparent);
	transform: rotate(-1.5deg);
}

.on-newsletter__messaggio p {
	margin: 0;
}

.on-newsletter__messaggio .on-newsletter__firma {
	margin-top: .6em;
}

/* ---------- il modulo sulla cartolina ---------- */

.on-newsletter__cartolina .on-newsletter__modulo,
.on-newsletter__cartolina .on-newsletter__alternativa {
	position: relative;
	z-index: 2;
	display: grid;
	width: 88%;
	margin-left: 7%;
	/* 38% dell'altezza della cartolina, espresso sulla larghezza (38 / 1,3813) */
	padding: 27.51% 0 4%;
}

.on-newsletter__etichetta {
	font-family: var(--on-font-cond);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: var(--on-ls-label);
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--on-ink-2);
}

.on-newsletter__cartolina .on-newsletter__email {
	width: 100%;
	min-width: 0;
	height: auto;
	padding: 11px 0 9px;
	border: 0;
	/* La riga sotto il campo lo fa riconoscere come tale (WCAG 1.4.11): 5,8:1 sulla carta */
	border-bottom: 1px solid var(--on-ink-2);
	border-radius: 0;
	background: transparent;
	font-family: var(--on-font-marker);
	font-size: 1rem;
	line-height: 1;
	color: var(--on-marker-blue);
	text-shadow: 0 0 .7px color-mix(in srgb, var(--on-marker-blue) 55%, transparent);
}

.on-newsletter__email::placeholder {
	color: color-mix(in srgb, var(--on-marker-blue) 55%, transparent);
}

.on-newsletter__consenso {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 2px 8px;
	align-items: start;
	margin: 10px 0 0;
	font-size: .75rem;
	line-height: 1.4;
	color: var(--on-ink);
}

.on-newsletter__consenso input {
	width: 1rem;
	height: 1rem;
	margin: .1em 0 0;
	accent-color: var(--on-green-ink);
}

.on-newsletter__consenso a {
	grid-column: 2;
	color: var(--on-green-ink);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Trappola per i robot: fuori dallo schermo, non display:none (alcuni robot lo saltano) */
/* La trappola per i robot: fuori schermo, ritagliata a zero, mai visibile né cliccabile */
.on-newsletter .on-newsletter__trappola {
	position: absolute;
	top: auto;
	left: -9999px;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
}

.on-newsletter__azione {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: 14px;
}

.on-newsletter__btn {
	border: 0;
	cursor: pointer;
	font-size: .8125rem;
	padding: 13px 18px 11px;
}

/*
 * Doppia classe solo per ciò che stila anche ".elementor-kit-6 button" (0,1,1): angoli e spaziatura.
 * Misure e corpo restano a una classe, così le varianti e le media query qui sotto le cambiano.
 */
.on-newsletter .on-newsletter__btn {
	border-radius: var(--on-radius-xs);
	letter-spacing: var(--on-ls-button);
}

.on-newsletter__nota {
	font-size: .75rem;
	line-height: 1.4;
	color: var(--on-ink-2);
}

.on-newsletter__esito {
	margin: 16px 0 0;
	font-size: var(--on-fs-small);
	font-weight: 600;
	line-height: 1.45;
	color: var(--on-ink);
}

.on-newsletter__esito:empty {
	display: none;
}

/* Il link senza modulo: un solo pulsante allineato a sinistra, sulle righe dell'indirizzo */
.on-newsletter__alternativa {
	display: grid;
	justify-items: start;
}

/* ---------- variante semplice (pagine interne) ---------- */

.on-newsletter--semplice {
	padding-block: var(--on-space-section-s);
}

.on-newsletter--semplice .on-newsletter__in {
	gap: clamp(24px, 4vw, 64px);
}

.on-newsletter--semplice .on-newsletter__occhiello {
	margin-bottom: 10px;
}

.on-newsletter--semplice .on-newsletter__titolo {
	max-width: none;
	font-size: var(--on-fs-h2-s);
}

.on-newsletter--semplice .on-newsletter__testo {
	margin-top: 12px;
	font-size: var(--on-fs-body);
	line-height: var(--on-lh-body);
	color: var(--on-ink-2);
}

.on-newsletter--semplice .on-newsletter__modulo {
	display: grid;
	gap: 10px;
}

.on-newsletter--semplice .on-newsletter__riga {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 10px;
}

.on-newsletter--semplice .on-newsletter__email {
	min-width: 0;
	padding: 15px 16px;
	/* Bordo leggibile (il filo del prototipo, 1,3:1, non basta a riconoscere il campo) */
	border: 1px solid var(--on-ink-2);
	border-radius: var(--on-radius-xs);
	background: var(--on-white);
	font: 500 1.0625rem/1.2 var(--on-font-text);
	color: var(--on-ink);
}

.on-newsletter--semplice .on-newsletter__btn {
	font-size: var(--on-fs-nav);
	padding: var(--on-btn-pad);
}

.on-newsletter--semplice .on-newsletter__consenso {
	margin: 0;
	font-size: .8125rem;
}

.on-newsletter--semplice .on-newsletter__azione {
	margin: 0;
}

.on-newsletter--semplice .on-newsletter__nota,
.on-newsletter--semplice .on-newsletter__esito {
	margin: 0;
	font-size: .8125rem;
}

@media (min-width: 600px) {

	.on-newsletter__messaggio {
		display: block;
	}

	.on-newsletter__francobollo {
		width: 15%;
	}

	.on-newsletter__timbro {
		left: 60%;
		width: 34%;
	}

	.on-newsletter__cartolina .on-newsletter__modulo,
	.on-newsletter__cartolina .on-newsletter__alternativa {
		width: 42%;
		margin-left: 52%;
		/* 36 / 1,3813 */
		padding-top: 26.06%;
	}

	.on-newsletter__etichetta {
		font-size: .8125rem;
	}

	.on-newsletter__cartolina .on-newsletter__email {
		font-size: 1.25rem;
	}

	.on-newsletter__btn {
		font-size: var(--on-fs-nav);
		padding: 14px 20px 12px;
	}

	.on-newsletter__nota {
		font-size: .8125rem;
	}
}

@media (min-width: 901px) {

	.on-newsletter__in {
		grid-template-columns: minmax(280px, .8fr) minmax(0, 1.4fr);
	}

	.on-newsletter--semplice .on-newsletter__in {
		grid-template-columns: minmax(0, 1fr) minmax(300px, 520px);
	}

	.on-newsletter__occhiello {
		font-size: var(--on-fs-label);
	}

	.on-newsletter__testo {
		margin-top: 20px;
		line-height: var(--on-lh-lede);
	}

	.on-newsletter__cartolina {
		--on-nl-r: -1.2deg;
	}

	.on-newsletter__francobollo {
		width: 15.5%;
	}

	.on-newsletter__timbro {
		left: 61%;
		width: 36%;
	}

	.on-newsletter__messaggio {
		width: 40%;
		font-size: clamp(11px, 2.2cqw, 19px);
	}

	.on-newsletter__cartolina .on-newsletter__modulo,
	.on-newsletter__cartolina .on-newsletter__alternativa {
		width: 41%;
		margin-left: 54%;
		/* 40,5 / 1,3813 */
		padding-top: 29.32%;
	}

	.on-newsletter__etichetta {
		font-size: clamp(12px, 1.1cqw, 15px);
	}

	.on-newsletter__cartolina .on-newsletter__email {
		height: 9.5cqw;
		padding: 2% 0 0;
		font-size: clamp(1rem, 2.6cqw, 1.5rem);
	}

	.on-newsletter__cartolina .on-newsletter__consenso {
		margin-top: 2cqw;
		font-size: clamp(12px, 1cqw, 13px);
	}

	.on-newsletter__cartolina .on-newsletter__azione {
		gap: 12px;
		margin-top: 2.5cqw;
	}

	.on-newsletter__cartolina .on-newsletter__btn {
		font-size: clamp(13px, 1.1cqw, 15px);
		padding: 1.6cqw 2cqw 1.3cqw;
	}

	.on-newsletter__nota {
		font-size: clamp(12px, 1cqw, 13px);
	}
}