/**
 * Il vestito dei blocchi-sezione (`fs/sezione-*`).
 *
 * ===========================================================================
 * PERCHE' QUESTI BLOCCHI UN FOGLIO CE L'HANNO, E GLI ALTRI TREDICI NO
 * ===========================================================================
 *
 * I gemelli dei widget vivono dentro pagine CONVERTITE, e li' il vestito
 * arriva dal CSS congelato: `base-desktop.css` per le regole comuni e
 * `post-<id>.css` per quelle della singola pagina, che a ogni contenitore
 * assegna le sue variabili (`--display`, `--flex-direction`, `--width`…).
 * Aggiungere un foglio nostro vorrebbe dire una seconda verita' accanto a
 * quella congelata.
 *
 * I blocchi-sezione stanno all'opposto: nascono per andare in pagine che
 * Elementor non ha mai toccato, dove `post-<id>.css` non esiste proprio. Se
 * non si vestono da soli non li veste nessuno.
 *
 * ===========================================================================
 * 1. `--display`: SENZA QUESTA RIGA IL CONTENITORE SI ACCARTOCCIA
 * ===========================================================================
 *
 * Il motore di Elementor disegna i contenitori cosi'
 * (`assets/css/elementor-motore/frontend.min.css`):
 *
 *     .e-con, .e-con > .e-con-inner { display: var(--display) }
 *
 * e un valore di scorta per `--display` non c'e'. Quando la variabile non e'
 * definita la dichiarazione e' invalida al momento del calcolo e `display`
 * torna al suo valore iniziale: `inline`. Il contenitore smette di essere una
 * scatola — la sua imbottitura non spinge piu' dentro il figlio, la sua
 * larghezza non vale — e la fascia si vede giusta solo per il caso fortunato
 * che il widget dentro e' un blocco e si prende la riga da solo.
 *
 * Le altre tre variabili sono quelle che il CSS congelato mette insieme a
 * `--display` sui contenitori veri (vedi `post-16375.css`, la pagina
 * Collezioni Sposa): stessa fascia, stesse regole.
 *
 * ===========================================================================
 * 2. `calc( 50% - 50vw )`: LA FASCIA ESCE DALLA COLONNA DEL TEMA
 * ===========================================================================
 *
 * Su una pagina non convertita `page.php` avvolge il contenuto in tre div —
 * `.pe-section > .pe-wrapper > .pe-col-12` — e quei due interni hanno
 * un'imbottitura: 30px + 15px sul desktop, 12,5px + 15px sotto i 576px
 * (`style.css` r. 1080, r. 1122 e r. 5279). Una fascia che comincia 45px
 * dentro non e' allineata con niente: il logo in testata comincia a 20px,
 * perche' la testata e' un modello Elementor a tutta larghezza.
 *
 * `50% - 50vw` e' esattamente l'opposto di quel margine, QUALUNQUE esso sia:
 * meta' della larghezza del genitore meno meta' della finestra. Sul desktop
 * fa -45px, sotto i 576px fa -27,5px, su una pagina gia' a tutta larghezza fa
 * 0 e non si muove niente. Nessun numero scritto a mano da tenere allineato a
 * `style.css`, e nessuna media query da rincorrere quando il tema cambia le
 * sue imbottiture.
 *
 * Le variabili sono `--margin-left` e `--margin-right` e non le proprieta'
 * vere perche' e' cosi' che il motore le legge:
 *
 *     .e-con { margin-inline-start: var(--margin-inline-start) }
 *     .e-con { --margin-inline-start: var(--margin-left) }
 *
 * Scrivendo `margin-inline` si finirebbe a pari specificita' con quella
 * regola, e a decidere sarebbe l'ordine in cui i fogli entrano in coda.
 *
 * `--width: auto` completa il conto: con la larghezza automatica la scatola si
 * prende il genitore PIU' i due margini negativi, cioe' la finestra intera,
 * senza passare da `100vw`. E' la differenza che si vede su Windows, dove la
 * barra di scorrimento sta dentro `vw` ma fuori dalla larghezza vera.
 *
 * L'imbottitura di 10px che i due contenitori hanno gia' fa il resto: 10 fuori
 * + 10 dentro = i 20px del logo.
 *
 * ===========================================================================
 * 3. PERCHE' `.e-con.e-con.fs-sezione` E NON `.fs-sezione` E BASTA
 * ===========================================================================
 *
 * Perche' `frontend.min.css` contiene questa riga:
 *
 *     .e-con { --margin-left: 0px; --width: 100% }
 *
 * e una media query con `.e-con.e-flex { --width: 100% }`. La prima ha la
 * stessa specificita' di `.fs-sezione` (una classe), la seconda ne ha due, e
 * il foglio del motore entra in coda DOPO il nostro — il nostro lo mette
 * `register_block_type()` quando registra il blocco, il suo lo mette
 * Elementor piu' tardi. A parita' di specificita' vince l'ultimo arrivato:
 * con il selettore corto le due variabili tornavano a `0px` e `100%` e la
 * fascia restava incastrata nella colonna, larga 1366 invece di 1456.
 *
 * La classe ripetuta porta il conto a tre e chiude la questione senza
 * `!important` e senza dipendere dall'ordine della coda, che non e' cosa
 * nostra. Si legge anche bene: «su un contenitore che e' una fascia di
 * sezione».
 *
 * @package Faustosari
 */

.e-con.e-con.fs-sezione,
.e-con.e-con.fs-sezione-dentro {
	--display: flex;
	--flex-direction: column;
	--container-widget-width: 100%;
	--width: 100%;
}

.e-con.e-con.fs-sezione {
	--margin-left: calc( 50% - 50vw );
	--margin-right: calc( 50% - 50vw );
	--width: auto;
	width: auto;
}