/**
 * Icon Boxes — aspetto. COPIA NOSTRA, indipendente da Elementor.
 *
 * PROVENIENZA: elewidget/assets/css/textbox.css, 331 righe. Il widget si chiama «Icon
 * Boxes» in Elementor ma il file è `text_box.php` e internamente si chiama `TextBox`:
 * i tre nomi convivono nel sorgente, qui il blocco si chiama Icon Boxes e basta.
 * Copiato una volta, non collegato: elewidget è congelato (07-piano-widget.md).
 *
 * LO SCOPE. Tutto prefissato `.se-gjs-page`, che esiste sia sul frontend sia nel canvas.
 *
 * ⚠ COSA È STATO LASCIATO FUORI, e perché
 *
 *   L'ICONA. Il widget ha un controllo «Icon» con default `fa-star`, e sul sito è usato
 *   ZERO volte su 64 box — tutti e 64 hanno invece un'immagine. Il blocco si chiama Icon
 *   Boxes ma un'icona non l'ha mai avuta nessuno. Non è portata; se un domani servirà, il
 *   set SVG scritto per le Tabs è già lì.
 *
 *   LO SKELETON. Le righe grigie animate che coprivano il carosello finché Swiper non era
 *   pronto. Servivano a Elementor, che renderizza i container in un secondo momento; qui il
 *   markup c'è già ed è la griglia stessa a fare da attesa. Niente CSS morto per un markup
 *   che non emettiamo.
 *
 *   `box_class`. Un controllo mai usato sul sito (0 usi su 16).
 *
 *   `centered_text` era anch'esso fuori — 0 box su 64 — ed è RIENTRATO, in forma diversa:
 *   non un interruttore «centrato sì/no» ma tre scelte, sinistra centro destra, una per
 *   riquadro. Le regole sono poco più sotto, accanto a quella che la copia si portava già.
 *
 * ⚠ LA GRIGLIA SI È SPOSTATA, ed è la sola modifica al CSS copiato. Nell'originale
 * `.textbox_wrapper` è la griglia e i box sono i suoi figli. Qui il markup porta SEMPRE
 * l'impalcatura di Swiper (`.swiper-wrapper > .swiper-slide`), anche in modalità griglia,
 * perché passare da griglia a carosello dovrebbe altrimenti riscrivere il DOM — e
 * riscrivere il DOM di un blocco pieno di contenuto è il modo di perderlo. Un markup solo,
 * una classe che decide: la griglia è quindi su `.swiper-wrapper`.
 */

/* ⚠ QUI C'ERA `overflow: hidden`, ED È QUELLO CHE TAGLIAVA LE CARD.
   Il riquadro ha `box-shadow: 0 0 10px`, cioè un'ombra che esce di una decina di pixel su
   tutti e quattro i lati. Con il ritaglio sulla radice l'ombra della prima e dell'ultima
   colonna spariva di netto, e con lei quella dell'ultima riga: le card sembravano
   affettate lungo il bordo del blocco, con un lato in ombra e l'altro tagliato a filo.

   Nell'originale quel ritaglio ci stava, perché là `.textbox_wrapper` ERA il contenitore
   di Swiper e doveva nascondere le slide fuori campo. Qui non lo è più — la classe
   `swiper` sta sulla pista, vedi «I COMANDI STANNO FUORI DALLA PISTA» in
   components/iconboxes.js — quindi il ritaglio non nascondeva più niente e tagliava
   soltanto l'ombra. Il carosello continua a ritagliare dove serve: `overflow: hidden` su
   `.swiper` lo mette Swiper con il suo foglio, e vale anche per i contenuti vecchi dove
   quella classe è rimasta sulla radice. */
.se-gjs-page .textbox_wrapper {
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
}

.se-gjs-page .textbox_wrapper__box {
    max-width: 410px;
    width: 100%;
    height: 100%;
    padding-bottom: 1rem;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 20px;
    position: relative;
    justify-self: center;
}

.se-gjs-page a .textbox_wrapper__box::after {
    content: "\2192";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 35px;
    height: 35px;
    border-bottom-right-radius: 0%;
    border-bottom-left-radius: 0%;
    border-top-right-radius: 0%;
    border-top-left-radius: 38%;
    background: rgb(229 229 229 / 50%);
    text-align: center;
    line-height: 37px;
    color: #b6b6b6;
}

.se-gjs-page .textbox_wrapper__box:hover img {
    transform: scale(1.03);
    transition: all 0.3s ease-in-out;
}

.se-gjs-page .textbox_wrapper__box__title {
    font-size: 22px;
    font-weight: bold;
}

/* ⚠ L'ALLINEAMENTO DEL TITOLO — `center` è dell'originale, `right` è nostra.
   Il widget aveva un interruttore «Centered text» per riquadro e stampava la classe
   `center`: quella regola è arrivata con la copia ed è rimasta qui anche quando il
   controllo non era portato. Ora il controllo c'è — tre pulsanti nell'elenco dei
   riquadri, vedi components/iconboxes.js — e ha bisogno anche della destra.

   SINISTRA NON HA UNA CLASSE, ed è voluto: è il comportamento di sempre, e darle una
   classe vorrebbe dire riscrivere il titolo di ogni riquadro già salvato per lasciarlo
   com'era. Chi non ha mai toccato il controllo non ha niente addosso e non cambia.

   Vale (0,3,0), quindi batte i (0,3,0) di `.textbox_wrapper .box__content h2` solo se
   scritta dopo — e quella regola non dichiara `text-align`, quindi non c'è gara. Se un
   domani gliene si desse uno, queste due righe andrebbero spostate più in basso. */
.se-gjs-page .textbox_wrapper__box__title.center {
    text-align: center;
}

.se-gjs-page .textbox_wrapper__box__title.right {
    text-align: right;
}

.se-gjs-page .textbox_wrapper__box img {
    width: 100%;
    max-height: 300px;
    height: auto;
    object-fit: contain;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 0 0 transparent;
}

.se-gjs-page .textbox_wrapper__box .box__content {
    padding: 0 24px;
    margin-top: 1rem;
}

.se-gjs-page .textbox_wrapper a {
    color: black;
}

.se-gjs-page .textbox_wrapper a:hover {
    text-decoration: none;
}

.se-gjs-page .textbox_wrapper__box .box__content {

    color: black;
}

.se-gjs-page .textbox_wrapper .box__content h2 {
    font-size: 23px;
    font-weight: 600;
    margin-bottom: .5rem;
    hyphens: auto;
}

.se-gjs-page .textbox_wrapper .box__content p,
.se-gjs-page .textbox_wrapper p {
    font-size: 17px;
    font-weight: 400;
    line-height: 1.5;
    margin-bottom: .5rem;
    hyphens: auto;
}

.se-gjs-page .box__image {
    width: 100%;
    margin-bottom: 1rem;

    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    overflow: hidden;
    height: 300px;
}

.se-gjs-page .box__image img {
    transform: scale(.999);
}

.se-gjs-page .textbox_wrapper .swiper-slide {
    margin-bottom: 1rem;
}

.se-gjs-page .textbox_wrapper .swiper-pagination {
    position: relative !important;
    bottom: 0px !important;
    width: auto !important;
    display: flex;
    flex-wrap: wrap;
}

.se-gjs-page .textbox_wrapper .swiper-button-next,
.se-gjs-page .textbox_wrapper .swiper-button-prev {
    position: relative;

    width: 30px;
    height: 30px;
    margin-top: 0;
    z-index: 10;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    background: #137ED0;
    border-radius: 50%;
}

.se-gjs-page .textbox_wrapper .swiper-button-next:after {
    position: relative;
    left: 2px;
}

.se-gjs-page .textbox_wrapper .swiper-navigation-controls {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
}

.se-gjs-page .textbox_wrapper .swiper-button-next:after,
.se-gjs-page .textbox_wrapper .swiper-button-prev:after {
    font-size: 18px;
}

.se-gjs-page .swiper-slide .textbox_wrapper__box {
    max-width: 100%;
    margin-bottom: 1rem;
}

.se-gjs-page ul.case_history__list {
    display: flex;
    margin: 0;
    padding: 0;

    flex-wrap: wrap;
    gap: 5px
}

.se-gjs-page .textbox_wrapper__box.case_history {
    max-width: 100%;
}

.se-gjs-page .textbox_wrapper__box.case_history .box__content {
    padding: 0 14px;
}

.se-gjs-page li.case_history__list__item {
    display: flex;
    flex-direction: column;
    background: aliceblue;
    padding: 10px;
    border-radius: 10px;
    flex: 1;
}

.se-gjs-page span.case_history__list__item__date {
    font-weight: 900;
    font-size: 1.2rem;
    line-height: 1;
    margin-bottom: 5px;
}

.se-gjs-page span.case_history__list__item__description {
    line-height: 1;
    font-size: 13px;
}

.se-gjs-page .textbox_wrapper.dark .textbox_wrapper__box {
    background-color: black;
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
    /* ⚠ L'ALTEZZA VA DICHIARATA QUI, e prima non lo era.
       In modalità scura l'immagine è fuori flusso (assoluta), quindi non dà altezza a
       niente: l'unica cosa in flusso è la fascia del testo. L'originale otteneva l'altezza
       di sponda, con un `margin-top: 210px` sulla fascia — un margine che serviva a due
       cose insieme, tenere in basso il testo e tenere in piedi il riquadro.
       Sostituendolo con `auto` la prima cosa funzionava e la seconda spariva: i riquadri si
       schiacciavano sul solo testo. Le due cose vanno separate — qui l'altezza, sulla
       fascia la posizione.
       300px è l'altezza che la variante chiara dà all'area dell'immagine: la stessa
       proporzione, e un solo numero da cambiare se un domani si vuole più alta. */
    min-height: 300px;
}

.se-gjs-page .textbox_wrapper.dark .textbox_wrapper__box .box__content {
    color: rgb(255, 255, 255);
}

.se-gjs-page .textbox_wrapper.dark .textbox_wrapper__box .box__content {
    color: rgb(255, 255, 255);
    /* ⚠ `auto` E NON I 210px DELL'ORIGINALE.
       Il riquadro è un contenitore in colonna e l'immagine è fuori flusso (assoluta), quindi
       l'unico elemento in flusso è questo: con un margine FISSO il testo si fermava 210px
       sotto il bordo alto e lo spazio che avanzava restava in FONDO — la fascia scura
       galleggiava, con un dito di immagine chiara sotto. È quello che si vede nello
       screenshot.
       `margin-top: auto` si prende tutto lo spazio libero: la fascia si appoggia al fondo
       qualunque sia l'altezza del riquadro, che in griglia è quella della riga più alta e
       non un numero che si possa indovinare. L'immagine resta scoperta sopra, che era
       l'effetto voluto dai 210px. */
    margin-top: auto;
    position: relative;
    z-index: 2;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, .85) 15%);
    padding-top: 2rem;
    padding-bottom: .5rem;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.se-gjs-page .textbox_wrapper.dark .box__image {
    max-height: 100%;
    position: absolute;
    z-index: 0;
    height: 100%;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.se-gjs-page .textbox_wrapper.dark li.case_history__list__item {
    background: rgb(255 255 255 / 20%);
    color: white
}

.se-gjs-page .textbox_wrapper.dark .textbox_wrapper__box img {
    width: 100%;
    max-height: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 0 0 transparent;
}

/* ==========================================================================
   AGGIUNTE NOSTRE — la griglia sull'impalcatura di Swiper
   ========================================================================== */

/* Modalità griglia: è `.swiper-wrapper` a impaginare. Vale (0,4,0), quindi vince sul
   `display:flex` che Swiper mette su `.swiper-wrapper` (0,1,0) col suo foglio. */
.se-gjs-page .textbox_wrapper:not(.textbox_wrapper--carousel) .swiper-wrapper {
    display: grid;
    /* ⚠ TRE COLONNE ESPLICITE, e le eccezioni stanno nelle media query IN FONDO al file.
       C'è stato un tentativo con `repeat(auto-fit, minmax(min(100%, 400px), 1fr))`, che
       avrebbe fatto decidere al contenitore quante colonne ci stanno: sulla carta più
       robusto, in pratica la griglia è collassata a UNA colonna anche su schermo largo.
       Quel conto ha bisogno che il contenitore abbia una larghezza definita, e qui —
       dentro una colonna flex dentro una riga — non sempre ce l'ha.
       Meglio noioso e prevedibile: un numero, e due soglie scritte a mano. */
    grid-template-columns: repeat(3, 1fr);
    column-gap: 2rem;
    row-gap: 2rem;
}

/* Le frecce e i pallini non hanno senso senza il carosello. */
.se-gjs-page .textbox_wrapper:not(.textbox_wrapper--carousel) .swiper-navigation-controls {
    display: none;
}

/* La freccina nell'angolo del box la mette l'originale su `a .textbox_wrapper__box`.
   Qui il tag `<a>` c'è SEMPRE — toglierlo e rimetterlo a ogni link scritto o cancellato
   sarebbe chirurgia sul markup — quindi la freccia va legata all'HREF, non al tag: senza
   indirizzo quello non è un link, e non deve prometterne uno. */
.se-gjs-page .textbox_wrapper__link:not([href]) .textbox_wrapper__box::after {
    content: none;
}

/* ==========================================================================
   SOLO NELL'EDITOR — `.se-gjs-canvas`
   ==========================================================================
   Nel canvas il carosello non gira: Swiper è roba di frontend, e un carosello che
   scorre mentre si scrive nasconderebbe i box da riempire. Si vedono tutti, in griglia,
   anche quando il blocco è impostato su carosello.

   ⚠ MA LA GRIGLIA NON DEVE FAR CREDERE DI ESSERE UNA GRIGLIA. Fino a oggi un blocco a
   carosello nel canvas era indistinguibile da uno a griglia: stesse tre colonne, comandi
   nascosti, e i tre campi «Per riga» che non muovevano niente. L'autore impostava
   quattro riquadri per riga e ne vedeva tre; sceglieva Carosello e non cambiava nulla.
   Non è il carosello che manca — quello nel canvas non lo vogliamo — è che la griglia
   raccontava una cosa falsa. Le tre aggiunte qui sotto la rendono onesta:

     1. le colonne seguono i `data-slides-*`, cioè gli stessi numeri che leggerà Swiper;
     2. frecce e pallini si vedono, così si sa che ci sono e dove finiscono;
     3. una fascetta dice che è un carosello e quanti riquadri si vedranno alla volta.

   Niente JavaScript: sono attributi che stanno già nel markup, e il canvas li legge da
   sé. Quello che sta in questa sezione non arriva mai sul sito.
   ========================================================================== */

.se-gjs-canvas .textbox_wrapper .swiper-wrapper {
    display: grid;
    /* ⚠ TRE COLONNE ESPLICITE, e le eccezioni stanno nelle media query IN FONDO al file.
       C'è stato un tentativo con `repeat(auto-fit, minmax(min(100%, 400px), 1fr))`, che
       avrebbe fatto decidere al contenitore quante colonne ci stanno: sulla carta più
       robusto, in pratica la griglia è collassata a UNA colonna anche su schermo largo.
       Quel conto ha bisogno che il contenitore abbia una larghezza definita, e qui —
       dentro una colonna flex dentro una riga — non sempre ce l'ha.
       Meglio noioso e prevedibile: un numero, e due soglie scritte a mano. */
    grid-template-columns: repeat(3, 1fr);
    column-gap: 2rem;
    row-gap: 2rem;
    /* Swiper, quando gira, mette una `transform` sul wrapper per scorrere. Nel canvas non
       gira, ma se un contenuto salvato la portasse dietro il blocco risulterebbe spostato
       fuori vista senza una ragione visibile. */
    transform: none !important;
}

/* ── 1. LE COLONNE SEGUONO I NUMERI DEL CAROSELLO ──────────────────────────────────────
   `data-slides-per-view`, `-tablet` e `-mobile` sono i tre campi «Per riga» del pannello,
   e stanno come attributi sulla radice del blocco. Il CSS non sa fare un conto con
   `attr()` fuori da `content`, quindi la strada è la variabile: un elenco di attributi che
   la impostano, e UNA regola che la usa. Dieci righe per soglia — il massimo che il campo
   accetta — scritte a mano, nello stesso spirito delle tre colonne qui sopra: noioso e
   prevedibile batte astuto e fragile.

   Solo il CAROSELLO: la griglia sul sito è a 3/2/1 fisse e i tre numeri non la riguardano,
   quindi nel canvas deve restare com'era o il canvas mentirebbe al contrario. */
.se-gjs-canvas .textbox_wrapper--carousel {
    --se-ib-colonne: 3;
}

.se-gjs-canvas .textbox_wrapper--carousel[data-slides-per-view="1"] { --se-ib-colonne: 1; }
.se-gjs-canvas .textbox_wrapper--carousel[data-slides-per-view="2"] { --se-ib-colonne: 2; }
.se-gjs-canvas .textbox_wrapper--carousel[data-slides-per-view="3"] { --se-ib-colonne: 3; }
.se-gjs-canvas .textbox_wrapper--carousel[data-slides-per-view="4"] { --se-ib-colonne: 4; }
.se-gjs-canvas .textbox_wrapper--carousel[data-slides-per-view="5"] { --se-ib-colonne: 5; }
.se-gjs-canvas .textbox_wrapper--carousel[data-slides-per-view="6"] { --se-ib-colonne: 6; }
.se-gjs-canvas .textbox_wrapper--carousel[data-slides-per-view="7"] { --se-ib-colonne: 7; }
.se-gjs-canvas .textbox_wrapper--carousel[data-slides-per-view="8"] { --se-ib-colonne: 8; }
.se-gjs-canvas .textbox_wrapper--carousel[data-slides-per-view="9"] { --se-ib-colonne: 9; }
.se-gjs-canvas .textbox_wrapper--carousel[data-slides-per-view="10"] { --se-ib-colonne: 10; }

/* ⚠ QUATTRO CLASSI, e la ridondanza è il punto: `.textbox_wrapper.textbox_wrapper--carousel`
   vale (0,4,0) e batte le due media query in fondo al file, che valgono (0,3,0) e vengono
   DOPO. Scritta con tre classi questa regola perderebbe da 991px in giù e il carosello
   tornerebbe a due colonne fisse proprio dove i numeri contano di più. Le soglie del
   carosello si cambiano di là, riscrivendo la variabile — non questa regola. */
.se-gjs-canvas .textbox_wrapper.textbox_wrapper--carousel .swiper-wrapper {
    grid-template-columns: repeat(var(--se-ib-colonne, 3), 1fr);
}

/* ── 2. FRECCE E PALLINI SI VEDONO, IN CAROSELLO ───────────────────────────────────────
   Erano nascosti per tutti e due gli impaginati. A griglia è giusto — comandi che sul sito
   non compaiono — ma a carosello significava togliere dagli occhi due elementi che sul
   sito ci saranno, che occupano spazio sotto i riquadri e che sono selezionabili.
   I pallini nel canvas restano una fascia vuota: li disegna Swiper uno per pagina, e Swiper
   qui non gira. Si vede il posto che prendono, che è già più della loro assenza. */
.se-gjs-canvas .textbox_wrapper:not(.textbox_wrapper--carousel) .swiper-navigation-controls {
    display: none;
}

/* ── 3. LA FASCETTA ────────────────────────────────────────────────────────────────────
   Dice le due cose che la griglia da sola non può dire: che questo blocco sul sito scorre,
   e quanti riquadri se ne vedranno alla volta. Il numero lo stampa `attr()` dallo stesso
   attributo che governa le colonne, quindi cambia insieme al campo del pannello e non c'è
   niente da tenere allineato a mano.
   Stessa lingua dell'etichetta delle schede in tabs.css: maiuscoletto grigio e riga
   tratteggiata. È chrome dell'editor, non deve sembrare contenuto. */
.se-gjs-canvas .textbox_wrapper--carousel::before {
    content: "Carosello — " attr(data-slides-per-view) " per riga sul sito, qui si vedono tutti";
    display: block;
    margin-bottom: .75rem;
    padding-bottom: .35rem;
    border-bottom: 1px dashed #d7dbe2;
    font: 600 11px/1.4 -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #9aa0a6;
}

/* Un blocco salvato prima che i tre campi esistessero l'attributo non ce l'ha, e `attr()`
   su un attributo assente restituisce la stringa vuota: la fascetta sarebbe uscita con un
   buco al posto del numero. Qui dice solo la parte che è sempre vera. Vale (0,3,0) contro i
   (0,2,0) della regola sopra, quindi la scavalca senza dipendere dall'ordine. */
.se-gjs-canvas .textbox_wrapper--carousel:not([data-slides-per-view])::before {
    content: "Carosello — sul sito i riquadri scorrono, qui si vedono tutti";
}



/* ⚠ LE FRECCE SCENDEVANO SOTTO IL TAGLIO, e la colpa è di UNA proprietà rimasta scoperta.
   Swiper posiziona le frecce con `position: absolute; top: 50%; margin-top: -22px`, cioè
   centrandole sul fianco del carosello. Il foglio copiato da elewidget le riporta in flusso
   con `position: relative` e azzera il `margin-top`, ma NON tocca `top`: su un elemento
   relativo quel `top: 50%` resta valido e diventa uno spostamento verso il basso di metà
   della riga dei comandi. Le frecce finivano più in basso dei pallini — si vede nello
   screenshot, i cerchi blu sono sfalsati rispetto ai puntini — e uscivano dal contenitore,
   che ha `overflow: hidden` e le tagliava.
   `top` e `bottom` ad `auto`: la freccia sta dove la mette il flusso, come i pallini. */
.se-gjs-page .textbox_wrapper .swiper-button-next,
.se-gjs-page .textbox_wrapper .swiper-button-prev {
    top: auto;
    bottom: auto;
}

/* Un po' d'aria fra i riquadri e i comandi: appiccicati sembravano parte dell'ultimo box. */
.se-gjs-page .textbox_wrapper--carousel .swiper-navigation-controls {
    margin-top: 1rem;
}


/* ==========================================================================
   IL CAROSELLO
   ==========================================================================
   Lo scorrimento, le misure delle slide e i comandi li governa Swiper (8.4.5), accodato
   da SE_Builder_Frontend e acceso da js/widgets/iconboxes.js.

   ⚠ QUI NON SI DICHIARA NIENTE CHE RIGUARDI LA LARGHEZZA. Swiper calcola quanto è larga
   una slide e lo scrive inline: qualunque nostra `width` o `flex-basis` entrerebbe in
   conflitto con quel conto, e a perdere sarebbe il carosello — la nostra regola vincerebbe
   sulla misura, ma non saprebbe quante slide stanno in pagina.
   C'è stato un giro in cui il carosello era stato riscritto senza libreria, con le
   larghezze in CSS: rimesso Swiper su indicazione, perché la gestione responsive ce l'ha
   e va lasciata fare a lui.
   ========================================================================== */

/* ⚠ RESPIRO DENTRO IL RITAGLIO, SU TUTTI E QUATTRO I LATI.
   Sulla radice il ritaglio è stato tolto, ma in carosello resta quello di Swiper sulla
   pista — e quello non si tocca: è come le slide fuori campo restano fuori campo. Quindi
   qui l'ombra non si salva togliendo un `overflow`, si salva allargando la zona ritagliata
   oltre il bordo delle slide. È il padding a farlo, ed è il margine negativo a fare in
   modo che quel padding non sposti niente.

   I conti, lato per lato: sopra e ai fianchi 16 di padding meno 16 di margine fa zero, e
   il blocco resta esattamente dov'era e largo com'era — quindi Swiper misura le stesse
   slide di prima e nessuna colonna si sposta di un pixel. Sotto il margine non c'è, così i
   16px restano come spazio, che è quello che faceva il `padding-bottom` di prima.

   16 e non 10: l'ombra sfuma per 10px, e sotto i 20px di `spaceBetween` fra una slide e
   l'altra. Chi sta in mezzo non si vede — nel padding finisce lo spazio vuoto fra le
   slide, non la slide successiva. Alzarlo oltre 20 farebbe capolino il riquadro seguente
   dal bordo del ritaglio. */
.se-gjs-page .textbox_wrapper--carousel .textbox_wrapper__pista {
    padding: 16px;
    margin: -16px -16px 0;
}

/* ⚠ QUI NON SI DICHIARA LA LARGHEZZA DELLE SLIDE, ed è deliberato.
   La calcola Swiper e la scrive inline sull'elemento: una nostra `flex-basis` la
   scavalcherebbe — per un elemento flex la base vince sulla `width` — e il carosello si
   troverebbe con le misure di due padroni diversi. Fra i due comanda chi sa quante slide
   stanno in pagina, e quello è Swiper.
   Resta solo il margine azzerato: quello di serie spingeva il riquadro contro il taglio. */
.se-gjs-page .textbox_wrapper--carousel .swiper-slide {
    margin-bottom: 0;
}

/* Il riquadro riempie la sua slide: il `max-width: 410px` della regola generale qui
   stringerebbe le slide larghe. */
.se-gjs-page .textbox_wrapper--carousel .textbox_wrapper__box {
    max-width: 100%;
}


/* ==========================================================================
   FRECCE E PALLINI — disegnati qui, perché il font di Swiper non c'è più
   ==========================================================================
   Le frecce di Swiper erano un GLIFO: `content: 'next'` con `font-family: swiper-icons`,
   un font che la libreria si portava dietro. Tolta la libreria, quel `content` uscirebbe
   come la parola «next» scritta per esteso. Qui la freccia è due lati di un quadrato
   ruotato di 45 gradi: nessun font, nessun file, e segue il `color` come faceva il glifo.
   ========================================================================== */

.se-gjs-page .textbox_wrapper .swiper-button-next::after,
.se-gjs-page .textbox_wrapper .swiper-button-prev::after {
    content: "";
    width: 8px;
    height: 8px;
    border: solid currentColor;
    border-width: 2px 2px 0 0;
    position: relative;
}

.se-gjs-page .textbox_wrapper .swiper-button-next::after {
    transform: rotate(45deg);
    left: -2px;
}

.se-gjs-page .textbox_wrapper .swiper-button-prev::after {
    transform: rotate(-135deg);
    left: 2px;
}

/* Freccia spenta: si vede che c'è e che di là non si va. `pointer-events` a zero perché
   un pulsante che non fa niente ma si preme insegna a non fidarsi dei pulsanti. */
.se-gjs-page .textbox_wrapper .swiper-button-next.is-spento,
.se-gjs-page .textbox_wrapper .swiper-button-prev.is-spento {
    opacity: .35;
    pointer-events: none;
}

/* I pallini li disegna Swiper: qui solo il colore, che è quello del sito. */
.se-gjs-page .textbox_wrapper .swiper-pagination-bullet-active {
    background: #137ED0;
}

/* ==========================================================================
   QUANTE COLONNE, AL RESTRINGERSI — E STANNO IN FONDO PER FORZA
   ==========================================================================
   ⚠ QUESTE DUE MEDIA QUERY DEVONO RESTARE L'ULTIMA COSA DEL FILE.
   Una media query NON aggiunge specificità: fra due regole che valgono uguale vince
   quella scritta DOPO. Erano più su, prima delle regole base che dichiarano tre colonne,
   e non facevano niente — la griglia restava a tre a ogni larghezza, a 500px come a 1500.
   Chi aggiungerà una regola sulle colonne la scriva PRIMA di qui.

   I confini sono 991 e 767, gli stessi del resto del plugin e del selettore dei
   dispositivi dell'editor.
   ========================================================================== */

@media screen and (max-width: 991px) {

    .se-gjs-page .textbox_wrapper:not(.textbox_wrapper--carousel) .swiper-wrapper,
    .se-gjs-canvas .textbox_wrapper .swiper-wrapper {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Il carosello nel canvas segue il suo numero da tablet. Le due righe vanno in
       QUEST'ORDINE: valgono uguale (0,3,0) e a parità decide chi è scritto dopo, quindi il
       ripiego prima e l'attributo poi. Il ripiego serve ai blocchi salvati prima che i tre
       campi esistessero, che l'attributo non ce l'hanno: senza, si terrebbero il numero da
       desktop anche stretti. */
    .se-gjs-canvas .textbox_wrapper.textbox_wrapper--carousel {
        --se-ib-colonne: 2;
    }

    .se-gjs-canvas .textbox_wrapper--carousel[data-slides-tablet="1"] { --se-ib-colonne: 1; }
    .se-gjs-canvas .textbox_wrapper--carousel[data-slides-tablet="2"] { --se-ib-colonne: 2; }
    .se-gjs-canvas .textbox_wrapper--carousel[data-slides-tablet="3"] { --se-ib-colonne: 3; }
    .se-gjs-canvas .textbox_wrapper--carousel[data-slides-tablet="4"] { --se-ib-colonne: 4; }
    .se-gjs-canvas .textbox_wrapper--carousel[data-slides-tablet="5"] { --se-ib-colonne: 5; }
    .se-gjs-canvas .textbox_wrapper--carousel[data-slides-tablet="6"] { --se-ib-colonne: 6; }
    .se-gjs-canvas .textbox_wrapper--carousel[data-slides-tablet="7"] { --se-ib-colonne: 7; }
    .se-gjs-canvas .textbox_wrapper--carousel[data-slides-tablet="8"] { --se-ib-colonne: 8; }
    .se-gjs-canvas .textbox_wrapper--carousel[data-slides-tablet="9"] { --se-ib-colonne: 9; }
    .se-gjs-canvas .textbox_wrapper--carousel[data-slides-tablet="10"] { --se-ib-colonne: 10; }

    /* La fascetta cambia numero insieme alle colonne, o direbbe il falso proprio dove il
       numero è diverso da quello di desktop. */
    .se-gjs-canvas .textbox_wrapper--carousel[data-slides-tablet]::before {
        content: "Carosello — " attr(data-slides-tablet) " per riga sul sito, qui si vedono tutti";
    }

}

@media screen and (max-width: 767px) {

    .se-gjs-page .textbox_wrapper:not(.textbox_wrapper--carousel) .swiper-wrapper,
    .se-gjs-canvas .textbox_wrapper .swiper-wrapper {
        grid-template-columns: repeat(1, 1fr);
    }

    /* Come nella query qui sopra: ripiego prima, attributo dopo. */
    .se-gjs-canvas .textbox_wrapper.textbox_wrapper--carousel {
        --se-ib-colonne: 1;
    }

    .se-gjs-canvas .textbox_wrapper--carousel[data-slides-mobile="1"] { --se-ib-colonne: 1; }
    .se-gjs-canvas .textbox_wrapper--carousel[data-slides-mobile="2"] { --se-ib-colonne: 2; }
    .se-gjs-canvas .textbox_wrapper--carousel[data-slides-mobile="3"] { --se-ib-colonne: 3; }
    .se-gjs-canvas .textbox_wrapper--carousel[data-slides-mobile="4"] { --se-ib-colonne: 4; }
    .se-gjs-canvas .textbox_wrapper--carousel[data-slides-mobile="5"] { --se-ib-colonne: 5; }
    .se-gjs-canvas .textbox_wrapper--carousel[data-slides-mobile="6"] { --se-ib-colonne: 6; }
    .se-gjs-canvas .textbox_wrapper--carousel[data-slides-mobile="7"] { --se-ib-colonne: 7; }
    .se-gjs-canvas .textbox_wrapper--carousel[data-slides-mobile="8"] { --se-ib-colonne: 8; }
    .se-gjs-canvas .textbox_wrapper--carousel[data-slides-mobile="9"] { --se-ib-colonne: 9; }
    .se-gjs-canvas .textbox_wrapper--carousel[data-slides-mobile="10"] { --se-ib-colonne: 10; }

    .se-gjs-canvas .textbox_wrapper--carousel[data-slides-mobile]::before {
        content: "Carosello — " attr(data-slides-mobile) " per riga sul sito, qui si vedono tutti";
    }

    /* ⚠ A UNA COLONNA L'IMMAGINE SI VEDE INTERA, e qui c'era il contrario: `object-fit:
       cover` con `object-position: top`, cioè l'immagine allargata fino a riempire i 300px
       del riquadro e tagliata sotto.

       Il ritaglio ha un senso finché le card stanno affiancate: `.box__image` è alto 300px
       fissi proprio perché due o tre riquadri in fila devono avere il titolo alla stessa
       altezza, e un'immagine che si adatta al suo rapporto quell'allineamento lo rompe. A
       una colonna sola non c'è più niente da allineare — c'è solo un'immagine mutilata.

       Quindi qui il riquadro smette di imporre l'altezza e la prende dall'immagine, che
       torna a scalare per intero sulla larghezza della card. Con `height: auto`
       l'`object-fit` non ha più niente da decidere: lo lascio a `contain` per coerenza col
       valore di base, non perché serva. `max-height: none` è indispensabile — senza, i
       300px della regola base tornerebbero a tagliare le immagini alte.

       La variante `dark` NON è toccata, ed è voluto: lì l'immagine è lo sfondo della card
       col testo sopra, e riempire tutto è il suo mestiere. Se ne tira fuori da sola per
       specificità — `.textbox_wrapper.dark .box__image` vale (0,3,0) contro i (0,2,0) di
       qui — quindi non serve nessuna esclusione scritta a mano. */
    .se-gjs-page .box__image {
        height: auto;
    }

    .se-gjs-page .textbox_wrapper__box img {
        height: auto;
        max-height: none;
        object-fit: contain;
    }

}