/* =========================================================================
   STRATIGO — sezioni a tutta larghezza per l'editor a blocchi.

   Questo foglio è caricato sia sul front-end sia dentro l'editor, così
   quello che si vede scrivendo è quello che finisce online.

   Una "sezione" è un blocco Gruppo con allineamento a tutta larghezza e una
   delle classi qui sotto. Dentro ci si mette qualsiasi blocco Gutenberg.
   ========================================================================= */

/* ----------------------------------------------------- area di contenuto
   Il contenuto dell'editor non sta più dentro una colonna con padding: ogni
   figlio si centra da solo sulla misura di lettura, e solo chi ha
   .alignfull arriva da bordo a bordo. È questo che mancava perché una riga
   o delle colonne coprissero davvero tutta la larghezza.                   */

.entry-content {
	display: flow-root;            /* niente margini che sfuggono dal box */
	background: var(--st-light);
	color: var(--st-ink);
}

/* .prosa continua a dare la tipografia editoriale (titoli, link, elenchi),
   ma la sua misura fissa di 74ch ora appartiene ai figli: se restasse sul
   contenitore nessuna sezione potrebbe arrivare a tutta larghezza. Il colore
   va riaffermato perché .prosa lo prende da --fg, che è bianco. */
.entry-content.prosa {
	max-width: none;
	margin: 0;
	color: var(--st-ink);
}

/* .blocco-shortcode è il contenitore dello shortcode [stratigo_blocco]: si
   comporta come l'area di contenuto, così un blocco scritto nell'editor si
   impagina uguale in una pagina, dentro una sezione o in un template PHP. */
:is(.entry-content, .blocco-shortcode) > * {
	max-width: min(var(--wp--style--global--content-size, 840px), 100% - var(--gutter) * 2);
	margin-inline: auto;
	margin-block: clamp(var(--spacing-18), 2.4vw, var(--spacing-31));
}

:is(.entry-content, .blocco-shortcode) > .alignwide {
	max-width: min(var(--wp--style--global--wide-size, 1200px), 100% - var(--gutter) * 2);
}

/* Le sezioni: larghezza piena, nessun margine, si toccano fra loro. */
:is(.entry-content, .blocco-shortcode) > .alignfull {
	max-width: none;
	width: 100%;
	margin-inline: 0;
	margin-block: 0;
}

/* Un paragrafo isolato prima o dopo le sezioni ha comunque respiro. */
.entry-content > :first-child:not(.alignfull) { margin-top: clamp(var(--spacing-45), 6vw, 96px); }
.entry-content > :last-child:not(.alignfull)  { margin-bottom: clamp(var(--spacing-45), 6vw, 96px); }

/* Il blocco non aggiunge respiro suo sopra e sotto: lo decide chi lo ospita. */
.blocco-shortcode { display: flow-root; }
.blocco-shortcode > :first-child { margin-block-start: 0; }
.blocco-shortcode > :last-child  { margin-block-end: 0; }

/* Dentro una sezione il margine laterale c'è già, nel padding della sezione:
   togliere di nuovo il gutter stringerebbe due volte la colonna su telefono. */
[class*='is-style-sez-'] .blocco-shortcode > :where(:not(.alignfull):not(.alignwide)) {
	max-width: var(--wp--style--global--content-size, 840px);
}

/* ================================================================ sezioni */

.sez,
[class*='is-style-sez-'] {
	position: relative;
	overflow: clip;
	padding: clamp(var(--spacing-45), 7vw, 112px) var(--gutter);
}

/* Il contenuto della sezione resta sulla misura di lettura anche se il fondo
   è a tutta larghezza. Con layout "constrained" ci pensa già WordPress; la
   regola qui serve quando il Gruppo non lo dichiara, e copre sia il markup
   attuale (figli diretti) sia quello storico con .wp-block-group__inner-container,
   che WordPress non emette più da 5.9 ma resta nei contenuti già salvati.

   Le esclusioni stanno in :where() per non pesare sulla specificità, come fa
   WordPress stesso: con quattro :not() nudi la regola arriverebbe a (0,5,0) e
   vincerebbe su qualsiasi eccezione scritta dopo. */
.sez > :where(:not(.alignfull):not(.alignwide):not(.alignleft):not(.alignright)),
[class*='is-style-sez-'] > :where(:not(.alignfull):not(.alignwide):not(.alignleft):not(.alignright)),
.sez > .wp-block-group__inner-container > :where(:not(.alignfull):not(.alignwide)),
[class*='is-style-sez-'] > .wp-block-group__inner-container > :where(:not(.alignfull):not(.alignwide)) {
	max-width: var(--wp--style--global--content-size, 840px);
	margin-inline: auto;
}

.sez > .alignwide,
[class*='is-style-sez-'] > .alignwide,
.sez > .wp-block-group__inner-container > .alignwide,
[class*='is-style-sez-'] > .wp-block-group__inner-container > .alignwide {
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin-inline: auto;
}

/* Il contenitore storico non deve essere lui a stringersi. */
.sez > .wp-block-group__inner-container,
[class*='is-style-sez-'] > .wp-block-group__inner-container {
	max-width: none;
}

/* Respiro fra i blocchi dentro la sezione. WordPress lo dà via blockGap
   quando il layout è dichiarato; questo copre il caso in cui non lo sia. */
.sez > * + *,
[class*='is-style-sez-'] > * + *,
.sez > .wp-block-group__inner-container > * + *,
[class*='is-style-sez-'] > .wp-block-group__inner-container > * + * {
	margin-block-start: var(--wp--style--global--block-gap, var(--spacing-24));
}

/* La griglia a fili sottili delle sezioni scure, come in home. */
.sez::before,
[class*='is-style-sez-']::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	opacity: 0;
	background-image:
		linear-gradient(to right, rgba(255, 255, 255, .08) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(255, 255, 255, .08) 1px, transparent 1px);
	background-size: 104px 104px;
	mask-image: radial-gradient(120% 90% at 50% 40%, #000 20%, transparent 78%);
	-webkit-mask-image: radial-gradient(120% 90% at 50% 40%, #000 20%, transparent 78%);
}

.sez > *,
[class*='is-style-sez-'] > * { position: relative; z-index: 2; }

/* ---------------------------------------------------------------- bianca */

.sez--bianca,
.is-style-sez-bianca {
	background: var(--st-white);
	color: var(--st-ink);
}

/* ---------------------------------------------------------------- chiara */

.sez--chiara,
.is-style-sez-chiara {
	background: var(--st-light);
	color: var(--st-ink);
}

/* ------------------------------------------------------------------- blu */

.sez--blu,
.is-style-sez-blu {
	color: var(--st-white);
	background:
		radial-gradient(26% 24% at 58% 20%, rgba(219, 110, 9, .22) 0%, transparent 70%),
		radial-gradient(52% 46% at 66% 44%, #3440a6 0%, transparent 66%),
		radial-gradient(40% 36% at 14% 18%, #2b2b9e 0%, transparent 70%),
		linear-gradient(180deg, #23257e 0%, #212179 100%);
}
.sez--blu::before,
.is-style-sez-blu::before { opacity: 1; }

/* --------------------------------------------------------------- blu ink */

.sez--ink,
.is-style-sez-ink {
	color: var(--st-white);
	background:
		radial-gradient(40% 34% at 72% 26%, #16195c 0%, transparent 70%),
		var(--st-ink);
}
.sez--ink::before,
.is-style-sez-ink::before { opacity: .6; }

/* --------------------------------------------------------------- arancio */

.sez--arancio,
.is-style-sez-arancio {
	color: var(--st-white);
	background:
		radial-gradient(38% 46% at 18% 20%, rgba(255, 160, 60, .38) 0%, transparent 70%),
		linear-gradient(150deg, #c24e00 0%, #8f3200 62%, #5e2100 100%);
}
.sez--arancio::before,
.is-style-sez-arancio::before { opacity: 1; }

/* ------------------------------------------------- tipografia in sezione
   Su fondo scuro il testo si schiarisce da solo: nessuna classe colore da
   mettere blocco per blocco.                                              */

.sez--blu, .is-style-sez-blu,
.sez--ink, .is-style-sez-ink,
.sez--arancio, .is-style-sez-arancio {
	--fg: #fff;
	--fg-72: rgba(255, 255, 255, .78);
	--line: rgba(255, 255, 255, .2);
}

.sez--blu :is(h1, h2, h3, h4, h5, h6),
.is-style-sez-blu :is(h1, h2, h3, h4, h5, h6),
.sez--ink :is(h1, h2, h3, h4, h5, h6),
.is-style-sez-ink :is(h1, h2, h3, h4, h5, h6),
.sez--arancio :is(h1, h2, h3, h4, h5, h6),
.is-style-sez-arancio :is(h1, h2, h3, h4, h5, h6) {
	color: #fff;
}

.sez--blu a:where(:not(.wp-element-button)),
.is-style-sez-blu a:where(:not(.wp-element-button)),
.sez--ink a:where(:not(.wp-element-button)),
.is-style-sez-ink a:where(:not(.wp-element-button)),
.sez--arancio a:where(:not(.wp-element-button)),
.is-style-sez-arancio a:where(:not(.wp-element-button)) {
	color: #fff;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.sez--bianca :is(h1, h2, h3, h4, h5, h6),
.is-style-sez-bianca :is(h1, h2, h3, h4, h5, h6),
.sez--chiara :is(h1, h2, h3, h4, h5, h6),
.is-style-sez-chiara :is(h1, h2, h3, h4, h5, h6) {
	color: var(--st-ink);
}

/* I titoli delle sezioni riprendono la scala della home. */
.sez h2,
[class*='is-style-sez-'] h2 {
	font-family: var(--font-title);
	font-weight: 700;
	font-size: clamp(28px, 4vw, 58px);
	line-height: .9;
	text-transform: uppercase;
	/* Nessuna max-width sul titolo: il layout "constrained" impone
	   `margin-left: auto !important`, quindi un titolo più corto della colonna
	   finirebbe centrato — rientrato rispetto a occhiello, testo ed elenco. Se
	   serve accorciare la misura di un titolo si usa il controllo di larghezza
	   del blocco, che WordPress applica in modo compatibile. */
}

.sez h3,
[class*='is-style-sez-'] h3 {
	font-family: var(--font-title);
	font-weight: 700;
	font-size: clamp(20px, 2.2vw, 30px);
	line-height: 1.05;
	text-transform: uppercase;
}

.sez p,
[class*='is-style-sez-'] p {
	font-size: clamp(15px, 1.15vw, 18px);
	line-height: 1.7;
}

.sez ul, .sez ol,
[class*='is-style-sez-'] ul,
[class*='is-style-sez-'] ol { padding-left: 1.3em; }
.sez li::marker,
[class*='is-style-sez-'] li::marker { color: currentColor; }

/* ------------------------------------------------------- occhiello sezione
   Il puntino + etichetta usato in home: si ottiene assegnando la classe
   "occhiello" a un paragrafo dentro la sezione.                            */

.occhiello,
.sez p.occhiello,
[class*='is-style-sez-'] p.occhiello {
	display: flex;
	align-items: center;
	gap: var(--spacing-10);
	font-size: var(--spacing-12);
	line-height: 1.2;
	text-transform: uppercase;
	opacity: .82;
}
.occhiello::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 9999px;
	background: currentColor;
	flex: none;
}

/* --------------------------------------------------------------- mobile */

@media (max-width: 782px) {
	.sez,
	[class*='is-style-sez-'] {
		padding: clamp(var(--spacing-41), 10vw, var(--spacing-68)) var(--gutter);
	}
}

/* =========================================================== elenco numerato
   Solo la struttura di una voce: numero, filetto corto, titolo, sottotitolo,
   filetto a tutta larghezza sotto.

   Niente colonne, niente sfondo, niente misure imposte: la voce occupa la
   larghezza che le dà il contenitore in cui la metti. Griglie, affiancamenti
   e fondi si costruiscono con i blocchi di Gutenberg intorno.

   Si applica a un elenco numerato, anche di una sola voce — che è il modo
   previsto: una voce per blocco, col numero deciso dall'attributo start.

       <ol class="elenco-numerato" start="3">
         <li><strong>Titolo</strong>Sottotitolo della voce.</li>
       </ol>

   Il numero viene dal contatore nativo delle liste, quindi start (e value su
   una singola voce) funzionano come previsto.

   I due filetti prendono il colore del testo. Per cambiarli basta
   sovrascrivere --filetto (quello corto) e --separatore (quello sotto).     */

:is(.elenco-numerato, .is-style-elenco-numerato) {
	--filetto: currentColor;
	--separatore: currentColor;
}

/* Il numero lo disegna un pseudo-elemento, quindi il marcatore nativo va via.
   Serve battere `.prosa ol { list-style: decimal }` di main.css, che con un
   tipo più una classe pesa più della sola classe dell'elenco. */
ol:is(.elenco-numerato, .is-style-elenco-numerato),
ul:is(.elenco-numerato, .is-style-elenco-numerato),
.prosa :is(.elenco-numerato, .is-style-elenco-numerato) {
	list-style: none;
	padding: 0;
	margin: 0;
}

:is(.elenco-numerato, .is-style-elenco-numerato) > li {
	position: relative;
	margin: 0;
	padding: var(--spacing-24) 0;
	padding-left: 3.4em;
	border-bottom: 1px dashed var(--separatore);
	border-bottom-color: color-mix(in srgb, var(--separatore) 30%, transparent);
}

/* Il numero, in alto a sinistra, all'altezza del titolo.
   decimal-leading-zero dà 01, 02… senza scriverli a mano. */
:is(.elenco-numerato, .is-style-elenco-numerato) > li::before {
	content: counter(list-item, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: calc(var(--spacing-24) + 17px);
	font-family: var(--font-title);
	font-weight: 700;
	font-size: var(--spacing-12);
	line-height: 1;
	font-variant-numeric: tabular-nums;
	opacity: .85;
}

/* Il titolo è il grassetto della voce; il filetto corto gli sta sopra.

   Il secondo selettore serve per l'editor: Gutenberg avvolge il contenuto
   della voce in un <div> per la scrittura, quindi lì il grassetto non è figlio
   diretto del <li>. Si punta al <div> generico e non alla classe interna di
   Gutenberg, che cambia fra versioni. Un elenco annidato è <ol>/<ul>, non un
   <div>, quindi non viene preso. */
:is(.elenco-numerato, .is-style-elenco-numerato) > li > strong,
:is(.elenco-numerato, .is-style-elenco-numerato) > li > div > strong {
	display: block;
	font-family: var(--font-title);
	font-weight: 700;
	font-size: clamp(16px, 1.35vw, 20px);
	line-height: 1.15;
	text-transform: uppercase;
	margin-bottom: var(--spacing-8);
}

:is(.elenco-numerato, .is-style-elenco-numerato) > li > strong::before,
:is(.elenco-numerato, .is-style-elenco-numerato) > li > div > strong::before {
	content: '';
	display: block;
	width: 34px;
	height: 3px;
	margin-bottom: var(--spacing-12);
	background: var(--filetto);
}

/* Il grassetto va già a capo da solo: senza questo un <br> scritto dopo il
   titolo lascerebbe una riga vuota fra titolo e sottotitolo. */
:is(.elenco-numerato, .is-style-elenco-numerato) > li > strong + br,
:is(.elenco-numerato, .is-style-elenco-numerato) > li > div > strong + br { display: none; }

/* Una lista annidata dentro la voce resta un normale elenco puntato. */
:is(.elenco-numerato, .is-style-elenco-numerato) ol,
:is(.elenco-numerato, .is-style-elenco-numerato) ul {
	margin-top: var(--spacing-10);
	padding-left: 1.2em;
}
:is(.elenco-numerato, .is-style-elenco-numerato) ol > li,
:is(.elenco-numerato, .is-style-elenco-numerato) ul > li {
	position: static;
	padding: 0;
	border: 0;
}
:is(.elenco-numerato, .is-style-elenco-numerato) ol > li::before,
:is(.elenco-numerato, .is-style-elenco-numerato) ul > li::before { content: none; }

/* ================================================================ pulsanti
   Pillola con pallino a sinistra e freccia a destra, come in home. Si
   applica a un blocco Pulsante scegliendo lo stile, oppure a mano con la
   classe btn-sez sul link.                                                 */

.entry-content,
.sez,
[class*='is-style-sez-'] {
	--freccia: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'%3E%3Cpath d='M0 6h18M13 1l5 5-5 5' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E");
}

.wp-block-button.is-style-btn-contorno > .wp-block-button__link,
.wp-block-button.is-style-btn-pieno > .wp-block-button__link,
a.btn-sez {
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-12);
	padding: var(--spacing-14) var(--spacing-24);
	border: 1px solid currentColor;
	border-radius: var(--radius-buttons-pill);
	background: transparent;
	color: inherit;
	font-family: var(--font-body);
	font-size: var(--spacing-14);
	font-weight: var(--font-weight-medium);
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	transition: color .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease);
}

/* Pallino e freccia sono decorativi: pseudo-elementi, così nell'editor si
   scrive soltanto l'etichetta. */
.wp-block-button.is-style-btn-contorno > .wp-block-button__link::before,
.wp-block-button.is-style-btn-pieno > .wp-block-button__link::before,
a.btn-sez::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: var(--radius-full);
	background: currentColor;
	flex: none;
}

/* La freccia è una maschera, non un'immagine colorata: così segue il colore
   del testo al passaggio del mouse e nelle sezioni chiare. */
.wp-block-button.is-style-btn-contorno > .wp-block-button__link::after,
.wp-block-button.is-style-btn-pieno > .wp-block-button__link::after,
a.btn-sez::after {
	content: '';
	width: 20px;
	height: 12px;
	flex: none;
	background: currentColor;
	transition: transform .25s var(--ease);
	-webkit-mask: var(--freccia) no-repeat center / contain;
	mask: var(--freccia) no-repeat center / contain;
}

.wp-block-button.is-style-btn-contorno > .wp-block-button__link:hover::after,
.wp-block-button.is-style-btn-pieno > .wp-block-button__link:hover::after,
a.btn-sez:hover::after { transform: translateX(4px); }

/* Contornato: si riempie al passaggio del mouse. */
.wp-block-button.is-style-btn-contorno > .wp-block-button__link:hover,
.wp-block-button.is-style-btn-contorno > .wp-block-button__link:focus-visible,
a.btn-sez:hover,
a.btn-sez:focus-visible {
	background: var(--st-white);
	color: var(--st-ink);
	border-color: var(--st-white);
}

/* Pieno: parte bianco e si svuota. */
.wp-block-button.is-style-btn-pieno > .wp-block-button__link {
	background: var(--st-white);
	color: var(--st-ink);
	border-color: var(--st-white);
}
.wp-block-button.is-style-btn-pieno > .wp-block-button__link:hover,
.wp-block-button.is-style-btn-pieno > .wp-block-button__link:focus-visible {
	background: transparent;
	color: var(--st-white);
	border-color: var(--st-white);
}

/* Sulle sezioni chiare bianco su bianco non si vedrebbe: si invertono. */
.sez--bianca .wp-block-button.is-style-btn-pieno > .wp-block-button__link,
.is-style-sez-bianca .wp-block-button.is-style-btn-pieno > .wp-block-button__link,
.sez--chiara .wp-block-button.is-style-btn-pieno > .wp-block-button__link,
.is-style-sez-chiara .wp-block-button.is-style-btn-pieno > .wp-block-button__link {
	background: var(--st-ink);
	color: var(--st-white);
	border-color: var(--st-ink);
}
.sez--bianca .wp-block-button.is-style-btn-pieno > .wp-block-button__link:hover,
.is-style-sez-bianca .wp-block-button.is-style-btn-pieno > .wp-block-button__link:hover,
.sez--chiara .wp-block-button.is-style-btn-pieno > .wp-block-button__link:hover,
.is-style-sez-chiara .wp-block-button.is-style-btn-pieno > .wp-block-button__link:hover,
.sez--bianca .wp-block-button.is-style-btn-contorno > .wp-block-button__link:hover,
.is-style-sez-bianca .wp-block-button.is-style-btn-contorno > .wp-block-button__link:hover,
.sez--chiara .wp-block-button.is-style-btn-contorno > .wp-block-button__link:hover,
.is-style-sez-chiara .wp-block-button.is-style-btn-contorno > .wp-block-button__link:hover {
	background: var(--st-ink);
	color: var(--st-white);
	border-color: var(--st-ink);
}

.sez--bianca .wp-block-button.is-style-btn-pieno > .wp-block-button__link:hover,
.is-style-sez-bianca .wp-block-button.is-style-btn-pieno > .wp-block-button__link:hover,
.sez--chiara .wp-block-button.is-style-btn-pieno > .wp-block-button__link:hover,
.is-style-sez-chiara .wp-block-button.is-style-btn-pieno > .wp-block-button__link:hover {
	background: transparent;
	color: var(--st-ink);
}