/* ============================================================
   extra-new.css
   Classi aggiuntive riutilizzabili su tutte le pagine del sito.
   Non modifica gli stili esistenti: contiene solo modificatori
   da applicare esplicitamente nell'HTML.
   ============================================================ */


/* ------------------------------------------------------------
   1. Copertina (big cover) in versione ridotta in altezza.

   USO: aggiungere la classe "swtfe-big-cover--short" accanto a
   "swtfe-big-cover" sulla <section> della copertina, es.:

     <section class="swtfe-big-cover swtfe-big-cover--short" ...>

   Ricordarsi di includere questo CSS nella pagina:
     <link href="assets/css/extra-new.css" rel="stylesheet">
   (i percorsi delle sottocartelle sono del tipo ../assets/css/...)

   Valori standard di style.css: 550px fino a 991px, 800px oltre.
   ------------------------------------------------------------ */

.swtfe-big-cover--short .swtfe-big-cover__slide {
    min-height: 250px;
}

.is-ie .swtfe-big-cover--short .swtfe-big-cover__slide {
    height: 250px;
}

@media (min-width:768px) {
    .swtfe-big-cover--short .swtfe-big-cover__slide {
        min-height: 300px;
    }
    .is-ie .swtfe-big-cover--short .swtfe-big-cover__slide {
        height: 300px;
    }
}

@media (min-width:992px) {
    .swtfe-big-cover--short .swtfe-big-cover__slide {
        min-height: 400px;
    }
    .is-ie .swtfe-big-cover--short .swtfe-big-cover__slide {
        height: 400px;
    }
}

@media (min-width:1200px) {
    .swtfe-big-cover--short .swtfe-big-cover__slide {
        min-height: 400px;
    }
    .is-ie .swtfe-big-cover--short .swtfe-big-cover__slide {
        height: 400px;
    }
}


/* ------------------------------------------------------------
   2. Posizione verticale del contenuto.

   Il contenuto non e' centrato verticalmente ma ancorato in
   alto: cosi' l'offset dal bordo superiore e' un valore esatto
   e prevedibile, ed e' il padding-top qui sotto, unico punto da
   toccare per alzare o abbassare titolo e testo.

   La barra del menu e' fixed e alta 64px sotto i 1200px
   (style.css .swtfe-header__pre>.container), 40px oltre: il
   padding deve restare sopra quei valori o il titolo le
   finisce sotto.
   ------------------------------------------------------------ */

.swtfe-big-cover--short .swtfe-big-cover__slide {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
}

/* Padding del blocco contenuto: standard 30px 0 */
.swtfe-big-cover--short .swtfe-big-cover__content {
    padding: 50px 0 20px;
}

@media (min-width:768px) {
    .swtfe-big-cover--short .swtfe-big-cover__content {
        padding: 50px 0 20px;
    }
}

@media (min-width:992px) {
    .swtfe-big-cover--short .swtfe-big-cover__content {
        padding: 140px 0 20px;
    }
}

/* Il margin-top:64px del titolo e' uno style inline nell'HTML:
   per annullarlo serve !important. */
.swtfe-big-cover--short .swtfe-big-cover__title {
    margin-top: 0 !important;
    margin-bottom: 16px;
}

.swtfe-big-cover--short .swtfe-big-cover__abstract {
    margin-bottom: 0;
}


/* ------------------------------------------------------------
   3. Copertina su due colonne:
   titolo + bottone a sinistra (1/2), paragrafi a destra (1/2).

   USO: dentro <div class="swtfe-big-cover__content"> avvolgere
   il contenuto cosi':

     <div class="swtfe-cover-split">
       <div class="swtfe-cover-split__left">   titolo + bottone
       <div class="swtfe-cover-split__right">  abstract

   Le due colonne affiancate partono da 992px: sotto, sarebbero
   troppo strette perche' il testo mantenga una riga di
   lunghezza leggibile, quindi si impilano.
   ------------------------------------------------------------ */

.swtfe-cover-split {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    width: 100%;
    margin: 0 -15px;
}

.swtfe-cover-split__left,
.swtfe-cover-split__right {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
    padding: 0 15px;
}

@media (min-width:992px) {
    .swtfe-cover-split__left {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
    .swtfe-cover-split__right {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* Colonne impilate: aria fra il bottone e i paragrafi */
@media (max-width:991.98px) {
    .swtfe-cover-split__right {
        margin-top: 20px;
    }

    /* Il titolo scende di 20px verso il bottone: e' cosi' che si
       accorcia lo spazio fra copertina e titolo senza alzare il
       bottone. La distanza titolo-bottone resta quella comune,
       16px, definita dal margin-bottom del titolo. */
    .swtfe-big-cover--short .swtfe-big-cover__title {
        margin-top: 20px !important;
    }
}

/* style.css assegna a titolo e abstract, quando sono figli
   diretti di .swtfe-big-cover__content, larghezze in percentuale
   e un padding laterale di 15px (da 768px in su).
   Dentro le colonne il padding va tolto: e' quello che spostava
   il titolo 15px piu' a destra del bottone. La gronda la danno
   gia' le colonne. */
.swtfe-cover-split .swtfe-big-cover__title,
.swtfe-cover-split .swtfe-big-cover__abstract {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
    margin-left: 0;
    padding-left: 0;
    padding-right: 0;
}

/* Il bottone parte dallo stesso bordo del titolo e non porta
   margine proprio: la distanza dal titolo la stabilisce il suo
   margin-bottom (16px), un valore solo invece di due sommati.
   L'HTML ha uno style inline "margin-top: 26px" sul bottone, da
   qui l'!important. */
.swtfe-cover-split__left .btn {
    margin-left: 0;
    margin-top: 0 !important;
}

/* Spazio fra i due paragrafi della colonna destra */
.swtfe-cover-split__right .swtfe-big-cover__abstract p + p {
    margin-top: 12px;
}


/* ------------------------------------------------------------
   4. Scala tipografica responsive della copertina.

   Criteri di leggibilita' applicati a ogni breakpoint:
   - corpo del testo mai sotto i 16px sugli schermi piccoli
     (si scende a 15px solo da 992px in su, nella colonna
     stretta, dove la riga e' comunque corta);
   - interlinea 1,5-1,6 sul corpo, 1,20-1,25 sui titoli;
   - riga entro i ~65 caratteri: sulle larghezze intermedie il
     testo occupa tutta la pagina, quindi serve un max-width in
     "em" che gli impedisca di stendersi troppo;
   - rapporto titolo/corpo che si comprime al restringersi dello
     schermo (1,75 su mobile - 2,0 su tablet - 2,67 su desktop):
     e' quello che mancava, il titolo rimpiccioliva da solo
     mentre testo e bottone restavano fermi;
   - bottone con area di tocco di ~44px sui dispositivi mobili.

   Questo blocco va tenuto in coda al file: sovrascrive per
   posizione le regole di pari specificita' dei blocchi
   precedenti.
   ------------------------------------------------------------ */

/* Fino a 767px - colonne impilate.
   Titolo 28px/34px, corpo 16px/24px, bottone 16px */
@media (max-width:767.98px) {
    .swtfe-big-cover--short .swtfe-big-cover__title {
        font-size: 1.75rem;
        line-height: 2.125rem;
        max-width: 18em;
    }

    .swtfe-cover-split__right .swtfe-big-cover__abstract {
        font-size: 1rem;
        line-height: 1.5rem;
        max-width: 34em;
    }

    .swtfe-cover-split__left .btn {
        font-size: 1rem;
        line-height: 1.5rem;
        padding: .625rem 1.25rem;
    }
}

/* 768-991px - ancora impilate, ma con piu' spazio.
   Titolo 34px/40px, corpo 17px/26px */
@media (min-width:768px) and (max-width:991.98px) {
    .swtfe-big-cover--short .swtfe-big-cover__title {
        font-size: 2.125rem;
        line-height: 2.5rem;
        max-width: 20em;
    }

    .swtfe-cover-split__right .swtfe-big-cover__abstract {
        font-size: 1.0625rem;
        line-height: 1.625rem;
        max-width: 36em;
    }

    .swtfe-cover-split__left .btn {
        font-size: 1rem;
        line-height: 1.5rem;
        padding: .5rem 1.125rem;
    }
}

/* Da 992px - due colonne al 50%. Il titolo resta ai 40px/45px
   standard di style.css; il corpo della colonna destra e' di 2
   punti sotto la misura standard del sito (15px), quindi 13px,
   14px oltre i 1200px. L'interlinea scende in proporzione per
   restare sul rapporto 1,5 del corpo di testo. */
@media (min-width:992px) {
    .swtfe-cover-split__right .swtfe-big-cover__abstract {
        font-size: .8125rem;
        line-height: 1.25rem;
    }
}

@media (min-width:1200px) {
    .swtfe-cover-split__right .swtfe-big-cover__abstract {
        font-size: .875rem;
        line-height: 1.375rem;
    }
}


/* ------------------------------------------------------------
   5. Bottoni-tessera (CTA) con freccia.

   Sostituiscono le tessere con immagine nell'elenco delle
   tipologie di pubblicazione: testo a sinistra, freccia a
   destra, due varianti nei blu di FrameEditor.

   USO:
     <div class="swtfe-cta-tiles">
       <a class="swtfe-cta-tile swtfe-cta-tile--solid" href="...">
         <span class="swtfe-cta-tile__label">Testo</span>
         <svg class="swtfe-cta-tile__arrow" viewBox="0 0 24 24" ...>
       </a>
       ... variante --outline per il bottone vuoto ...
     </div>

   Disposizione: 6 su una riga sola dai 1200px, 4+2 fra 992 e
   1199px, 2 per riga sui tablet, 1 sotto i 576px. I bottoni
   sono sempre bandierati a sinistra e di pari altezza.

   Colori (colors.css):
     --link-color      #2C60F2  pieno e bordo a riposo
     --linkhover-color #003FEF  pieno di entrambi al passaggio
   ------------------------------------------------------------ */

.swtfe-cta-tiles {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    justify-content: start;
}

@media (min-width:576px) {
    .swtfe-cta-tiles {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 992-1199px: 4 bottoni sulla prima riga e 2 sulla seconda */
@media (min-width:992px) {
    .swtfe-cta-tiles {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Da 1200px: tutti e sei su una riga sola.
   Il contenitore e' largo 1140px, quindi con 12px di distanza
   restano 180px a bottone: per starci il bottone si accorcia
   (padding 14px invece di 18/20), il testo scende a 14px e la
   freccia a 20px. L'etichetta va a capo su due righe e i
   bottoni crescono in altezza di conseguenza, restando tutti
   allineati fra loro. */
@media (min-width:1200px) {
    .swtfe-cta-tiles {
        grid-template-columns: repeat(6, 1fr);
        gap: 12px;
    }

    .swtfe-cta-tile {
        max-width: none;
        padding: 14px;
        font-size: .875rem;
        line-height: 1.1875rem;
    }

    .swtfe-cta-tile__label {
        padding-right: 10px;
    }

    .swtfe-cta-tile__arrow {
        width: 20px;
        height: 20px;
    }
}

.swtfe-cta-tile {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    min-height: 64px;   /* altezza minima: con due righe cresce */
    max-width: 320px;
    padding: 18px 20px;
    border: 1px solid var(--link-color);
    border-radius: 6px;
    font-size: .9375rem;
    line-height: 1.3125rem;
    font-weight: 400;
    text-align: left;
    text-transform: none;
    text-decoration: none;
    -webkit-transition: background-color .25s ease, border-color .25s ease, color .25s ease;
    transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}

/* Bottone pieno */
.swtfe-cta-tile--solid {
    background-color: var(--link-color);
    color: #ffffff;
}

/* Bottone vuoto */
.swtfe-cta-tile--outline {
    background-color: #ffffff;
    color: var(--link-color);
}

/* Al passaggio del mouse entrambi diventano pieni nel blu piu'
   scuro e il testo va in bianco */
.swtfe-cta-tile:hover,
.swtfe-cta-tile:focus {
    background-color: var(--linkhover-color);
    border-color: var(--linkhover-color);
    color: #ffffff;
    text-decoration: none;
}

.swtfe-cta-tile:focus-visible {
    outline: 2px solid var(--title-color);
    outline-offset: 2px;
}

/* L'etichetta occupa lo spazio disponibile e resta allineata a
   sinistra: il testo parte dal bordo del bottone anche quando
   va a capo, la freccia resta a destra sulla prima riga. */
.swtfe-cta-tile__label {
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding-right: 16px;
    text-align: left;
}

/* La freccia eredita il colore del testo (stroke: currentColor
   nell'SVG), quindi cambia da sola in bianco o blu */
.swtfe-cta-tile__arrow {
    display: block;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transition: -webkit-transform .25s ease;
    transition: transform .25s ease;
}

/* Piccolo zoom della freccia al passaggio del mouse */
.swtfe-cta-tile:hover .swtfe-cta-tile__arrow,
.swtfe-cta-tile:focus .swtfe-cta-tile__arrow {
    -webkit-transform: scale(1.15);
    transform: scale(1.15);
}

/* Con le animazioni di sistema disattivate lo zoom resta, ma
   scatta subito invece di essere animato: e' la transizione a
   dover sparire, non l'effetto. */
@media (prefers-reduced-motion:reduce) {
    .swtfe-cta-tile,
    .swtfe-cta-tile__arrow {
        -webkit-transition: none;
        transition: none;
    }
}


/* ------------------------------------------------------------
   6. Titolo di sezione in formato ridotto.

   USO: aggiungere "swtfe-section-head__title--h2-small" accanto
   alle classi gia' presenti sull'<h2>:

     <h2 class="swtfe-section-head__title
                swtfe-section-head__title--h2
                swtfe-section-head__title--h2-small">

   Valori standard di style.css: 24px/30px fino a 991px,
   40px/45px da 992px in su. Qui diventano 20px/26px e 28px/34px,
   con il rapporto interlinea/corpo di ~1,21 dei titoli.
   ------------------------------------------------------------ */

.swtfe-section-head__title--h2-small {
    font-size: 1.25rem;
    line-height: 1.625rem;
}

@media (min-width:992px) {
    .swtfe-section-head__title--h2-small {
        font-size: 1.75rem;
        line-height: 2.125rem;
    }
}


/* ------------------------------------------------------------
   7. Angoli arrotondati su tutti i bottoni del sito.

   E' l'unica regola del foglio che non introduce una classe
   nuova ma ritocca quella esistente (.btn): serve proprio
   perche' valga ovunque, su ogni pagina e su ogni variante.
   style.css resta invariato: qui si sovrascrive per posizione
   il suo "border-radius: 0", dato che questo foglio va incluso
   per ultimo. Stesso raggio dei bottoni-tessera.
   ------------------------------------------------------------ */

.btn {
    border-radius: 6px;
}

/* Bottoni piu' alti e piu' larghi.
   Standard di style.css: padding .375rem .875rem (6px/14px),
   cioe' circa 36px di altezza. Qui 12px/24px, quindi ~48px di
   altezza e 20px di larghezza in piu': misura comoda anche come
   area di tocco sui dispositivi mobili.

   .btn-sm e .btn-lg sono esclusi: hanno un padding proprio che
   li definisce, e questo foglio, arrivando per ultimo, glielo
   sovrascriverebbe.

   Restano fuori anche i bottoni con un padding proprio piu'
   specifico (dropdown, campo di ricerca della copertina, cta
   delle domande e risposte): sono casi allineati ad altri
   elementi, dove l'altezza in piu' romperebbe l'allineamento. */
.btn:not(.btn-sm):not(.btn-lg) {
    padding: .75rem 1.5rem;
}


/* ------------------------------------------------------------
   8. Sezioni che sotto i 768px devono spaziare come a schermo
   intero.

   USO: "swtfe-gruppo--sopra" sulla sezione che sta sopra,
   "swtfe-gruppo--sotto" su quella che sta sotto.

   IL PROBLEMA
   .swtfe-section-generic ha due valori diversi in style.css:

     riga 15170   padding: 65px 0    (regola base)
     riga 15281   padding: 0px 0     dentro @media (min-width:768px)

   Quindi a schermo intero quelle sezioni non hanno padding
   verticale - il titolo resta attaccato alla copertina e i due
   gruppi di bottoni sono vicini - mentre sotto i 768px tornano
   i 65px della regola base e si aprono due vuoti: ~73px fra
   copertina e titolo, ~134px fra i due gruppi.

   LA REGOLA
   Sotto i 768px queste due sezioni riprendono il comportamento
   che hanno sopra: padding verticale azzerato.

     - sopra il titolo: 0, esattamente come a schermo intero.
       Lo spazio che resta e' quello del <div style="margin-
       bottom:2%"> scritto nella pagina, lo stesso elemento che
       lo produce a schermo intero.

     - fra i due gruppi: 8px + 8px = 16px, la stessa distanza
       che separa due bottoni fra loro e la stessa che i due
       gruppi hanno a schermo intero (dove nasce dall'1% del
       <div> divisorio). Quel margine in percentuale vale 4px su
       un telefono e 19px su un monitor: azzerarlo e mettere due
       valori fissi e' l'unico modo di avere la stessa distanza
       a ogni larghezza. E' inline nell'HTML, da qui !important.

   Il lato sotto della seconda sezione non e' toccato: li' i
   65px restano, come separazione dalla sezione seguente.
   ------------------------------------------------------------ */

@media (max-width:767.98px) {
    .swtfe-gruppo--sopra {
        padding-top: 0;
        padding-bottom: 8px;
    }

    .swtfe-gruppo--sopra + div[style] {
        margin-bottom: 0 !important;
    }

    .swtfe-gruppo--sotto {
        padding-top: 8px;
    }
}


/* ------------------------------------------------------------
   9. Bottoni-tessera in versione discreta, tutti su una riga.

   Variante leggera dei bottoni del punto 5, per un secondo
   elenco che non deve competere con il primo: niente riquadro,
   niente sfondo, solo l'etichetta con la sua freccia, in fila.

   USO: "swtfe-cta-tiles--quiet" sul contenitore e
   "swtfe-cta-tile--quiet" su ogni link, al posto di --solid o
   --outline:

     <div class="swtfe-cta-tiles swtfe-cta-tiles--quiet">
       <a class="swtfe-cta-tile swtfe-cta-tile--quiet" href="...">

   Il contenitore passa da griglia a fila flessibile: le voci si
   dispongono una accanto all'altra e vanno a capo solo quando
   non ci stanno. Con sei etichette a 13px e 24px di distanza
   servono ~1060px, quindi da 1200px in su stanno su una riga
   sola; sotto, la fila si spezza da se'.

   Ogni voce non va mai a capo al proprio interno
   (white-space: nowrap): a spezzarsi sono gli spazi fra una
   voce e l'altra, non le etichette.

   Va in coda al punto 5: ne sovrascrive per posizione riquadro,
   sfondo e misure, comprese quelle dei suoi media query.
   ------------------------------------------------------------ */

.swtfe-cta-tiles--quiet {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 10px 24px;
}

.swtfe-cta-tile--quiet {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    min-height: 0;
    max-width: none;
    padding: 2px 0;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    color: var(--link-color);
    font-size: .8125rem;
    line-height: 1.25rem;
    white-space: nowrap;
}

.swtfe-cta-tile--quiet:hover,
.swtfe-cta-tile--quiet:focus {
    background-color: transparent;
    border-color: transparent;
    color: var(--linkhover-color);
    text-decoration: underline;
}

.swtfe-cta-tile--quiet .swtfe-cta-tile__label {
    padding-right: 6px;
}

/* Freccia piu' piccola, in tono con il testo ridotto. Lo zoom
   al passaggio del mouse resta quello del punto 5. */
.swtfe-cta-tile--quiet .swtfe-cta-tile__arrow {
    width: 16px;
    height: 16px;
}

/* Su schermo stretto le voci vanno in colonna, allineate a
   sinistra come il resto */
@media (max-width:575.98px) {
    .swtfe-cta-tiles--quiet {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
        gap: 12px;
    }
}


/* ------------------------------------------------------------
   10. Titolo di sezione in formato minimo.

   USO: "swtfe-section-head__title--h2-mini" accanto alle classi
   gia' presenti sull'<h2>, al posto di --h2-small.

   Serve per un elenco secondario, dove il titolo fa da
   etichetta e non deve pesare come un vero titolo di sezione.

   Standard di style.css: 24px/30px (40px/45px da 992px) e
   margin-bottom 24px. Qui 0,95rem a ogni larghezza, tutto
   maiuscolo, interlinea in proporzione, e 6px sotto invece di
   24: il titolo resta attaccato all'elenco che introduce.
   ------------------------------------------------------------ */

.swtfe-section-head__title--h2-mini {
    font-size: .95rem;
    line-height: 1.35rem;
    margin-bottom: 6px;
    text-transform: uppercase;
}