/*
 * ON Racconto: titolo, attacco con capolettera, citazione grande, resto da aprire.
 * Prototipo: sito.css 81-88 (.prose), scene.css 579-587 (.racc). La testata usa il foglio
 * di ON Titolo Sezione, il corpo del testo la classe .on-prose di base.css.
 * Mobile first: le regole senza media query valgono per il telefono.
 */

.on-racconto {
	/* Un tono più chiaro dello stesso verde, per il numero dei paragrafi sul bottone nero */
	--on-racconto-verde-chiaro: color-mix(in srgb, var(--on-green) 55%, var(--on-white));
	--on-racconto-q-fs: 10vw;
}

/*
 * Corpo del testo con la misura del prototipo (sito.css 81 .prose e scene.css 938 .prose.evento:
 * clamp(17px, 1.25vw, 19px), cioè 17 px sul telefono e 18 px a 1440): il --on-fs-lede generale
 * di .on-prose darebbe 16 e 19 px.
 */
.on-racconto .on-racconto__testo {
	font-size: clamp(17px, 1.25vw, 19px);
}

.on-racconto__testo > * {
	margin-block: 0;
}

.on-racconto__testo > * + * {
	margin-top: 1.25em;
}

.on-racconto__resto {
	margin-top: 1.25em;
}

/* L'apertura dell'evento (.prose.evento p, scene.css 938): interlinea 1.6 invece di 1.7 */
.on-racconto--evento .on-racconto__apertura {
	line-height: 1.6;
}

/* Nella bio anche la seconda metà è .prose.evento (eroe-zanetti.html 77): stessa interlinea */
.on-racconto--bio .on-racconto__seguito {
	line-height: 1.6;
}

/*
 * .prose.evento p usa --t-lede (scene.css 938): 16 px fino a 900 px (home.css 640), poi come
 * il resto della prosa.
 */
.on-racconto.on-racconto--evento .on-racconto__apertura,
.on-racconto.on-racconto--bio .on-racconto__seguito {
	font-size: 16px;
}

@media (min-width: 901px) {
	.on-racconto.on-racconto--evento .on-racconto__apertura,
	.on-racconto.on-racconto--bio .on-racconto__seguito {
		font-size: clamp(17px, 1.25vw, 19px);
	}
}

/*
 * Il titolo della testata è il .st h2 del prototipo (sito.css 77), più piccolo del titolo
 * "media" di ON Titolo Sezione (56 px già a 1440): vale per il racconto e per l'evento.
 */
.on-racconto .on-racconto__testa {
	--on-ts-fs: clamp(1.875rem, 3.6vw, 3.5rem);
}

/*
 * Resto chiuso con hidden="until-found" (on-racconto.js): il reset di Hello Elementor mette
 * [hidden] a display:none, che lo toglierebbe anche dalla ricerca della pagina. Qui il blocco
 * resta nel flusso e lo nasconde il browser (content-visibility); niente margine, così chiuso
 * non lascia un vuoto sopra il bottone.
 */
.on-racconto .on-racconto__resto[hidden="until-found"] {
	display: block;
	margin-top: 0;
}

.on-racconto .on-racconto__testo a {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: var(--on-green);
	text-underline-offset: 4px;
}

/* L'attacco: un po' più grande e più pieno degli altri paragrafi */
.on-racconto .on-racconto__attacco {
	font-size: 1.12em;
	font-weight: 500;
}

/*
 * Nell'evento l'attacco ha la misura degli altri paragrafi: nel prototipo ".prose.evento p"
 * (scene.css 938) vince su ".prose .lead" per la misura, il peso 500 invece resta.
 */
.on-racconto--evento .on-racconto__attacco {
	font-size: 1em;
}

/* Capolettera nel verde ON: è testo grande (oltre 70 px), 3,76:1 sulla carta */
.on-racconto--capolettera .on-racconto__attacco::first-letter {
	float: left;
	padding: .06em .1em 0 0;
	color: var(--on-green);
	font-family: var(--on-font-display);
	font-size: 4.4em;
	font-weight: 700;
	line-height: .82;
}

/*
 * La citazione grande, a tutta colonna. Il distacco è padding: il reset di Elementor
 * (".elementor .elementor-widget:not(...):not(...) figure", specificità 0,4,1) azzera il margin.
 */
.on-racconto .on-racconto__citazione {
	margin: 0;
	padding: clamp(32px, 4vw, 56px) 0;
}

/* Due classi: il blockquote del kit (bordo, corsivo, rientri) non deve passare */
.on-racconto .on-racconto__q {
	margin: 0;
	padding: 0;
	border: 0;
	max-width: 18ch;
	color: var(--on-green);
	font-family: var(--on-font-display);
	font-size: var(--on-racconto-q-fs);
	font-style: normal;
	font-weight: 700;
	line-height: 1.06;
	text-transform: uppercase;
	text-wrap: balance;
}

.on-racconto .on-racconto__q p {
	margin: 0;
}

/* Le virgolette d'apertura sono decorative: il testo alternativo vuoto le toglie agli screen reader */
.on-racconto__q::before {
	content: "«";
	content: "«" / "";
	display: block;
	color: var(--on-ink);
	font-size: .8em;
	line-height: .6;
	opacity: .2;
}

.on-racconto__autore {
	margin-top: 14px;
	color: var(--on-ink-2);
	font-family: var(--on-font-cond);
	font-size: var(--on-fs-label);
	font-weight: 700;
	letter-spacing: var(--on-ls-label);
	text-transform: uppercase;
}

/*
 * Il bottone "Continua a leggere". Classe + elemento + stato: lo stile bottoni del kit
 * (".elementor-kit-6 button", con :hover e :focus) altrimenti lo rifà verde o nero pieno.
 */
.on-racconto button.on-racconto__leggi,
.on-racconto button.on-racconto__leggi:focus {
	display: inline-flex;
	align-items: baseline;
	gap: 14px;
	margin-top: 28px;
	padding: 16px 22px 14px;
	border: 0;
	border-radius: var(--on-radius-xs);
	background: var(--on-black);
	color: var(--on-white);
	font-family: var(--on-font-cond);
	font-size: .9375rem;
	font-weight: 700;
	letter-spacing: var(--on-ls-label);
	line-height: 1.1;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color var(--on-dur-2) ease;
}

.on-racconto button.on-racconto__leggi[hidden] {
	display: none;
}

/* Al passaggio il verde inchiostro: il bianco sul verde ON non arriva a 4,5:1 (piano §3.2) */
.on-racconto button.on-racconto__leggi:hover {
	background: var(--on-green-ink);
	color: var(--on-white);
}

.on-racconto .on-racconto__leggi i {
	color: var(--on-racconto-verde-chiaro);
	font-family: var(--on-font-tv);
	font-size: 1.125rem;
	font-style: normal;
	font-weight: 400;
	letter-spacing: 0;
}

.on-racconto .on-racconto__leggi:hover i {
	color: var(--on-white);
}

.on-racconto .on-racconto__leggi[aria-expanded="true"] i {
	display: none;
}

/* Su un fondo scuro il bottone diventa chiaro, come i bottoni del tema */
.on-tone-dark .on-racconto button.on-racconto__leggi,
[data-tone="dark"] .on-racconto button.on-racconto__leggi {
	background: var(--on-white);
	color: var(--on-black);
}

.on-tone-dark .on-racconto .on-racconto__leggi i,
[data-tone="dark"] .on-racconto .on-racconto__leggi i {
	color: var(--on-green-ink);
}

.on-tone-dark .on-racconto__q::before,
[data-tone="dark"] .on-racconto__q::before {
	color: var(--on-white);
}

@media (min-width: 901px) {
	.on-racconto {
		--on-racconto-q-fs: clamp(36px, 4.2vw, 72px);
	}
}