/*
 * ON Titolo Sezione: occhiello, titolo, testo, link "more".
 * Misure dal prototipo: home.css .raduni .testo (compatta), .sec h2 e .sec .head (grande, testata),
 * sito.css .st (media, riga). Mobile first: 600 px tablet, 901 px desktop.
 */

.on-titolo-sezione {
	/* Variabili locali, cambiano con la dimensione e lo schermo */
	--on-ts-fs: 2.5rem;
	--on-ts-lh: var(--on-lh-title);
	--on-ts-gap-occhiello: 12px;
	--on-ts-gap-testo: 14px;
	--on-ts-gap-link: 16px;
	--on-ts-testo-fs: 1rem;
	--on-ts-testo-lh: 1.5;
	--on-ts-testo-colore: inherit;
	--on-ts-occhiello-colore: inherit;
	--on-ts-filetto: var(--on-line);
}

/* Sulla carta l'occhiello è verde inchiostro (7,29:1), non il verde di brand (3,76:1) */
.on-tone-light .on-titolo-sezione,
[data-tone="light"] .on-titolo-sezione {
	--on-ts-occhiello-colore: var(--on-green-ink);
}

.on-tone-dark .on-titolo-sezione,
.on-tone-green .on-titolo-sezione,
[data-tone="dark"] .on-titolo-sezione,
[data-tone="green"] .on-titolo-sezione {
	--on-ts-filetto: var(--on-line-inv);
}

.on-titolo-sezione__testa {
	margin: 0;
}

.on-titolo-sezione__occhiello {
	display: block;
	margin: 0;
	color: var(--on-ts-occhiello-colore);
	font-size: var(--on-fs-micro);
	line-height: 1.5;
}

/*
 * Due classi di specificità: la tipografia del kit Elementor ('.elementor-kit-N h2', 0,1,1)
 * batterebbe una classe sola e il titolo prenderebbe la misura dell'h2 di pagina.
 */
.on-titolo-sezione .on-titolo-sezione__titolo {
	margin: 0;
	font-family: var(--on-font-cond);
	font-size: var(--on-ts-fs);
	font-weight: 700;
	letter-spacing: 0;
	line-height: var(--on-ts-lh);
	text-transform: uppercase;
	text-wrap: balance;
}

.on-titolo-sezione .on-titolo-sezione__occhiello + .on-titolo-sezione__titolo {
	margin-top: var(--on-ts-gap-occhiello);
}

.on-titolo-sezione__corpo > :first-child {
	margin-top: 0;
}

.on-titolo-sezione__testa + .on-titolo-sezione__corpo {
	margin-top: var(--on-ts-gap-testo);
}

.on-titolo-sezione__testo {
	max-width: 44ch;
	margin: 0;
	color: var(--on-ts-testo-colore);
	font-size: var(--on-ts-testo-fs);
	line-height: var(--on-ts-testo-lh);
}

.on-titolo-sezione__azione {
	margin: var(--on-ts-gap-link) 0 0;
}

/*
 * Il link "more": sottolineato da un filetto. Sul telefono l'area di tocco cresce a 44 px
 * con padding e margini negativi, senza spostare il resto (giro 3 del prototipo).
 */
.on-titolo-sezione__more {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: -10px 0 -7px;
	padding: 10px 0;
	border-bottom: 1.5px solid currentColor;
	color: inherit;
	font-family: var(--on-font-cond);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: var(--on-ls-button);
	text-decoration: none;
	text-transform: uppercase;
}

/*
 * Sul campo verde il bianco piccolo arriva a 4,3:1 (sotto l'AA): occhiello e link stanno su
 * un'etichetta verde inchiostro (8,4:1), come nell'album della home.
 */
.on-tone-green .on-titolo-sezione .on-titolo-sezione__occhiello,
[data-tone="green"] .on-titolo-sezione .on-titolo-sezione__occhiello {
	display: inline-block;
	padding: 4px 9px 3px;
	border-radius: 2px;
	background: var(--on-green-ink);
	color: var(--on-white);
}

.on-tone-green .on-titolo-sezione .on-titolo-sezione__more,
[data-tone="green"] .on-titolo-sezione .on-titolo-sezione__more {
	padding-inline: 10px;
	border-radius: 2px;
	background: var(--on-green-ink);
	color: var(--on-white);
}

/* ---------- Dimensioni ---------- */

.on-titolo-sezione--compatta {
	--on-ts-fs: 2rem;
	--on-ts-testo-fs: .9375rem;
}

.on-tone-light .on-titolo-sezione--compatta,
[data-tone="light"] .on-titolo-sezione--compatta {
	--on-ts-testo-colore: var(--on-ink-2);
}

.on-titolo-sezione--compatta .on-titolo-sezione__titolo {
	max-width: 20ch;
}

.on-titolo-sezione--media {
	--on-ts-fs: var(--on-fs-h2-s);
	--on-ts-lh: 1.08;
	--on-ts-gap-occhiello: 8px;
}

/* ---------- Disposizioni ---------- */

.on-titolo-sezione--riga {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: clamp(24px, 3vw, 44px);
	padding-bottom: 14px;
	border-bottom: 1px solid var(--on-ts-filetto);
}

.on-titolo-sezione--riga .on-titolo-sezione__testa + .on-titolo-sezione__corpo {
	margin-top: 0;
}

.on-titolo-sezione--testata {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 14px;
	margin-bottom: 24px;
}

.on-titolo-sezione--testata .on-titolo-sezione__testa + .on-titolo-sezione__corpo {
	margin-top: 0;
}

@media (min-width: 600px) {
	.on-titolo-sezione {
		--on-ts-fs: 3.125rem;
		--on-ts-testo-fs: 1.0625rem;
	}

	.on-titolo-sezione--compatta {
		--on-ts-fs: 2.375rem;
		--on-ts-testo-fs: 1rem;
	}

	.on-titolo-sezione--media {
		--on-ts-fs: var(--on-fs-h2-s);
	}
}

@media (min-width: 901px) {
	.on-titolo-sezione {
		--on-ts-fs: var(--on-fs-h2);
		--on-ts-testo-fs: var(--on-fs-lede);
		--on-ts-testo-lh: var(--on-lh-lede);
		--on-ts-gap-link: 18px;
	}

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

	.on-titolo-sezione__more {
		margin: 0;
		padding: 0 0 3px;
		font-size: var(--on-fs-nav);
	}

	.on-titolo-sezione--compatta {
		--on-ts-fs: clamp(2rem, .5rem + 2.4vw, 2.875rem);
		--on-ts-gap-occhiello: 10px;
		--on-ts-gap-link: 14px;
		--on-ts-testo-fs: .9375rem;
		--on-ts-testo-lh: var(--on-lh-body);
	}

	.on-titolo-sezione--media {
		--on-ts-fs: var(--on-fs-h2-s);
		--on-ts-gap-occhiello: 8px;
	}

	.on-titolo-sezione--testata {
		grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
		align-items: end;
		gap: 48px;
		margin-bottom: clamp(40px, 5vw, 72px);
	}
}