/* ==========================================================================
   SATELLITE ext_cms - stile_sito.css   (impianto grafico rifatto)

   L'IDEA
   Un comitato sportivo pubblica due cose: notizie e moduli da scaricare.
   La pagina e' quindi un giornale, non una brochure. Da qui le tre scelte
   che tengono insieme tutto:

   1. APERTURA SCURA. Lo slider non e' piu' un riquadro chiaro con le foto
      dentro: e' una fascia scura a tutta larghezza, con la fotografia sotto
      un velo e il titolo grande sopra. E' la prima cosa che si vede e da'
      subito il tono; tutto il resto della pagina resta bianco e silenzioso.

   2. TRE CARATTERI, TRE MESTIERI. Nessun font esterno (si carica via FTP,
      niente CDN), quindi la personalita' viene dall'uso: il carattere di
      sistema in peso grosso e crenatura stretta per i titoli, un serif
      (Georgia, presente ovunque) per i testi lunghi degli articoli, il
      monospaziato per date, misure e etichette. Numeri e sigle in
      monospaziato sono il richiamo al cronometro e al pettorale.

   3. LA TARGHETTA. Il blocco pieno nella tinta del sito, con la data in
      monospaziato, che sborda dal bordo della fotografia. Torna sullo
      slider, sulle schede degli articoli e sui documenti: e' il segno
      riconoscibile del sito, e non e' decorazione - dice quando.

   Il colore forte e' uno solo, quello del sito, e compare poco. Le
   fotografie sportive sono gia' colorate: l'interfaccia deve tacere.

   COME SI CAMBIA SITO
   Si tocca solo il blocco :root qui sotto, due righe: --tinta e --tinta-rgb.
   La seconda serve per le velature (rgba), che non si possono ricavare da
   un colore esadecimale senza funzioni recenti.

   Punto 19 del piano operativo, seconda stesura.
   ========================================================================== */

:root {

    /* --- TINTA DEL SITO: le uniche due righe da cambiare -----------------
       Lodi        ambra  #b45309   ->  --tinta-rgb: 180, 83, 9
       Sondrio     blu    #1d4ed8   ->  --tinta-rgb: 29, 78, 216
       Lombardia   verde  #15803d   ->  --tinta-rgb: 21, 128, 61
       ------------------------------------------------------------------- */
    /* >>> CSEN Sondrio - blu <<< */
    --tinta: #1d4ed8;
    --tinta-rgb: 29, 78, 216;

    /* Versione scurita, per il passaggio del puntatore sui pulsanti. */
    --tinta-scura: #16389b;

    /* Velature ricavate dalla tinta: fondi tenui e bordi colorati senza
       dover dichiarare altri colori a mano. */
    --tinta-velo: rgba(var(--tinta-rgb), .08);
    --tinta-velo-forte: rgba(var(--tinta-rgb), .16);

    /* --- Neutri ---------------------------------------------------------
       Ardesia fredda: sta bene con qualsiasi tinta e non litiga con le
       fotografie. */
    --inchiostro: #0b1017;      /* fasce scure: apertura e piede */
    --inchiostro-2: #161f2a;    /* riquadri dentro le fasce scure */
    --titolo: #101821;
    --testo: #2c3540;
    --testo-tenue: #6b7684;
    --testo-chiaro: rgba(255, 255, 255, .72);

    --carta: #ffffff;
    --superficie: #f4f6f8;
    --bordo: #e3e8ed;
    --bordo-tenue: #eef1f4;

    --raggio: .4rem;
    --raggio-grande: .75rem;

    /* --- Caratteri ------------------------------------------------------
       Tutti presenti sui sistemi: niente da scaricare, niente CDN. */
    --carattere: system-ui, -apple-system, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    --carattere-lettura: Georgia, "Iowan Old Style", "Times New Roman", serif;
    --carattere-dati: ui-monospace, SFMono-Regular, "SF Mono", Menlo,
                      Consolas, "Liberation Mono", monospace;

    --ombra: 0 1px 2px rgba(11, 16, 23, .06);
    --ombra-alta: 0 18px 40px rgba(11, 16, 23, .14);

    /* --- Larghezza del testo --------------------------------------------
       --largo    e' la larghezza massima di tutta la pagina.
       --stretto  e' la larghezza della colonna di testo di articoli e
                  pagine fisse.

       Adesso vale 100%: il testo occupa tutta la pagina, come richiesto.
       Se un giorno le righe risultassero troppo lunghe da seguire, basta
       rimettere qui un valore fisso (per esempio 52rem) e tutte le pagine
       tornano a colonna stretta: non c'e' altro da toccare. */
    --largo: 76rem;
    --stretto: 100%;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--carattere);
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--testo);
    background: var(--carta);
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--tinta); text-underline-offset: .18em; }

h1, h2, h3, h4 {
    color: var(--titolo);
    font-weight: 800;
    letter-spacing: -.022em;
    line-height: 1.12;
    margin: 0;
    text-wrap: balance;      /* evita la parola solitaria in ultima riga */
}

/* Il fuoco della tastiera si deve vedere sempre: chi naviga senza mouse
   deve sapere dove si trova. */
:focus-visible {
    outline: 3px solid var(--tinta);
    outline-offset: 3px;
    border-radius: 2px;
}

/* Sulle fasce scure il contorno blu sparirebbe: li' diventa bianco. */
.testa-scura :focus-visible,
.slider :focus-visible,
.piede :focus-visible {
    outline-color: #fff;
}

/* Chi ha chiesto meno animazioni non ne vede nessuna. */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

.contenitore {
    width: 100%;
    max-width: var(--largo);
    margin: 0 auto;
    padding: 0 1.25rem;
}

/* Collegamento di servizio: invisibile finche' non lo si raggiunge con il
   tabulatore, poi compare in alto a sinistra. */
.salta-al-contenuto {
    position: absolute;
    top: -4rem;
    left: 1rem;
    z-index: 60;
    padding: .7rem 1.1rem;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    background: var(--inchiostro);
    border-radius: 0 0 var(--raggio) var(--raggio);
    transition: top .15s ease;
}

.salta-al-contenuto:focus { top: 0; color: #fff; }


/* ==========================================================================
   ETICHETTE E TITOLI DI SEZIONE

   L'etichetta in monospaziato spaziato e' la scritta del tabellone: dice a
   che sezione appartiene quello che segue, e non ruba spazio al titolo.
   ========================================================================== */

.etichetta-sezione {
    margin: 0 0 .5rem 0;
    font-family: var(--carattere-dati);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--tinta);
}

.etichetta-sezione::before {
    content: "";
    display: inline-block;
    width: 1.6rem;
    height: 2px;
    margin-right: .6rem;
    vertical-align: .22em;
    background: var(--tinta);
}

.titolo-sezione { font-size: clamp(1.6rem, 3.2vw, 2.1rem); }

.titolo-pagina {
    font-size: clamp(1.9rem, 4.4vw, 2.9rem);
    margin: 0 0 .8rem 0;
}

.sezione { padding: clamp(2.5rem, 6vw, 4.5rem) 0; }

/* Il testo che si legge davvero: colonna stretta, carattere serif. */
.testo-lungo {
    font-family: var(--carattere-lettura);
    font-size: 1.12rem;
    line-height: 1.75;
}

.testo-lungo p { margin: 0 0 1.15rem 0; }

.vuoto {
    margin: 0;
    padding: 2.5rem 1.5rem;
    text-align: center;
    color: var(--testo-tenue);
    background: var(--superficie);
    border-radius: var(--raggio-grande);
}


/* ==========================================================================
   PULSANTI
   ========================================================================== */

.pulsante {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .78rem 1.35rem;
    font-family: var(--carattere);
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: #fff;
    text-decoration: none;
    background: var(--tinta);
    border: 0;
    border-radius: var(--raggio);
    cursor: pointer;
    transition: background .18s ease, transform .18s ease;
}

.pulsante:hover { background: var(--tinta-scura); color: #fff; }
.pulsante:active { transform: translateY(1px); }

/* La freccia si sposta al passaggio: piccolo segnale che il collegamento
   porta avanti. */
.pulsante::after {
    content: "\2192";
    font-family: var(--carattere);
    transition: transform .18s ease;
}

.pulsante:hover::after { transform: translateX(.2rem); }

/* Versione da usare sopra le fotografie e le fasce scure. */
.pulsante-chiaro {
    color: var(--inchiostro);
    background: #fff;
}

.pulsante-chiaro:hover { color: var(--inchiostro); background: #e8ecf1; }


/* ==========================================================================
   TESTA E MENU

   Barra bianca sottile che resta in alto durante lo scorrimento. Su un sito
   di poche pagine il menu deve essere sempre a portata.
   ========================================================================== */

.testa {
    position: sticky;
    top: 0;
    z-index: 30;
    background: rgba(255, 255, 255, .94);
    backdrop-filter: saturate(150%) blur(10px);
    border-bottom: 1px solid var(--bordo);
}

.testa-dentro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 4.5rem;
}

/* --- Marchio -------------------------------------------------------------
   Il nome del sito viene dal pannello. "CSEN Lodi" si spezza in due: la
   sigla in nero pieno, la provincia sotto in monospaziato piccolo. E' il
   modo in cui il nome e' scritto sui documenti federali, e distingue i tre
   siti a colpo d'occhio.
   ------------------------------------------------------------------------ */

.marchio {
    display: flex;
    align-items: center;
    gap: .8rem;
    text-decoration: none;
    color: var(--titolo);
}

.marchio-logo {
    width: auto;
    height: 2.6rem;
    max-width: 8rem;
    object-fit: contain;
}

.marchio-testo { display: flex; flex-direction: column; line-height: 1.05; }

.marchio-sigla {
    font-size: 1.28rem;
    font-weight: 800;
    letter-spacing: -.03em;
}

.marchio-nome {
    margin-top: .18rem;
    font-family: var(--carattere-dati);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--tinta);
}

/* --- Voci del menu ------------------------------------------------------- */

.menu { display: flex; align-items: center; gap: .35rem; }

.menu a {
    position: relative;
    padding: .55rem .8rem;
    font-size: .95rem;
    font-weight: 600;
    color: var(--testo);
    text-decoration: none;
    border-radius: var(--raggio);
    transition: color .16s ease, background .16s ease;
}

.menu a:hover { color: var(--titolo); background: var(--superficie); }

/* La voce attiva porta il filetto nella tinta del sito: dice dove sei
   senza aggiungere un secondo colore. */
.menu a.attivo { color: var(--titolo); }

.menu a.attivo::after {
    content: "";
    position: absolute;
    left: .8rem;
    right: .8rem;
    bottom: .18rem;
    height: 2px;
    background: var(--tinta);
}

/* --- Pulsante del menu sul telefono --------------------------------------
   Prima le voci andavano a capo e la testa diventava alta il doppio. Ora
   sotto i 56rem il menu si apre e si chiude.
   ------------------------------------------------------------------------ */

.menu-tasto {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    color: var(--titolo);
    background: transparent;
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    cursor: pointer;
}

.menu-tasto span {
    position: relative;
    display: block;
    width: 1.15rem;
    height: 2px;
    background: currentColor;
}

/* Le altre due righe del simbolo sono fatte con i pseudo-elementi: nessun
   file di icone da caricare. */
.menu-tasto span::before,
.menu-tasto span::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: currentColor;
    transition: transform .18s ease;
}

.menu-tasto span::before { top: -.38rem; }
.menu-tasto span::after { top: .38rem; }

/* Menu aperto: le righe diventano una croce. */
.menu-tasto[aria-expanded="true"] span { background: transparent; }
.menu-tasto[aria-expanded="true"] span::before { transform: translateY(.38rem) rotate(45deg); }
.menu-tasto[aria-expanded="true"] span::after { transform: translateY(-.38rem) rotate(-45deg); }

@media (max-width: 56rem) {

    .menu-tasto { display: inline-flex; }

    /* Chiuso sparisce del tutto: cosi' non e' raggiungibile nemmeno con il
       tabulatore, che altrimenti porterebbe dentro un menu invisibile. */
    .menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: .5rem 1.25rem 1rem;
        background: var(--carta);
        border-bottom: 1px solid var(--bordo);
        box-shadow: var(--ombra-alta);
    }

    .menu.aperto { display: flex; }

    .menu a { padding: .85rem .4rem; border-bottom: 1px solid var(--bordo-tenue); }
    .menu a:last-child { border-bottom: 0; }
    .menu a.attivo::after { left: .4rem; right: auto; bottom: .5rem; width: 1.4rem; }

    /* Senza JavaScript il pulsante non aprirebbe niente: si nasconde lui e
       le voci restano tutte visibili, una sotto l'altra. La classe la toglie
       il primo script della pagina. */
    .senza-js .menu-tasto { display: none; }
    .senza-js .menu {
        display: flex;
        position: static;
        padding: 0 0 .8rem;
        box-shadow: none;
        border-bottom: 0;
    }
}


/* ==========================================================================
   APERTURA (slider)

   Fascia scura a tutta larghezza. La fotografia sta sotto un velo che
   scurisce verso il basso, cosi' il testo bianco si legge su qualsiasi
   immagine, anche chiara. Senza velo il titolo sparirebbe sopra la neve o
   sopra un palazzetto illuminato.

   La pista si sposta con transform: nessun contenitore scorrevole, quindi
   nessuna barra di scorrimento disegnata dal browser.
   ========================================================================== */

.slider {
    position: relative;
    background: var(--inchiostro);
    overflow: hidden;
}

.slider-pista { display: block; }   /* ripiego senza JavaScript: una sotto l'altra */

/* Da qui comanda il JavaScript: le slide si affiancano e scorrono. */
.slider-attivo .slider-pista {
    display: flex;
    flex-wrap: nowrap;
    will-change: transform;
}

.slide {
    position: relative;
    flex: 0 0 100%;
    min-height: clamp(24rem, 62vh, 34rem);
    display: flex;
    align-items: flex-end;
}

/* La fotografia si vede quasi pulita: era troppo spenta. */
.slide-immagine {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .95;
}

/* Il velo, ora molto piu' leggero: quasi nullo in alto, dove c'e' la
   fotografia da guardare, e concentrato in fondo, dove sta il testo bianco.
   Un velo serve comunque: senza, il titolo sparirebbe su una foto di neve o
   su un cielo chiaro come quello del karate al tramonto. */
.slide::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(11, 16, 23, 0) 0%,
        rgba(11, 16, 23, .08) 40%,
        rgba(11, 16, 23, .58) 78%,
        rgba(11, 16, 23, .82) 100%
    );
}

.slide-testo {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: var(--largo);
    margin: 0 auto;
    padding: 3rem 1.25rem clamp(3rem, 6vw, 4.5rem);
}

.slide-categoria {
    display: inline-block;
    margin: 0 0 1rem 0;
    padding: .3rem .6rem;
    font-family: var(--carattere-dati);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #fff;
    background: var(--tinta);
    border-radius: 2px;
}

/* L'ombra e' la rete di sicurezza: con il velo piu' leggero il testo
   bianco poggia su fotografie che non conosciamo in anticipo, e su un punto
   chiaro sparirebbe. L'ombra e' larga e tenue, non si nota. */
.slide-titolo {
    max-width: 22ch;
    margin: 0;
    font-size: clamp(2rem, 5.4vw, 3.6rem);
    letter-spacing: -.035em;
    color: #fff;
    text-shadow: 0 2px 18px rgba(11, 16, 23, .55);
}

.slide-sottotitolo {
    max-width: 46ch;
    margin: .9rem 0 0 0;
    font-size: clamp(1rem, 1.9vw, 1.18rem);
    color: rgba(255, 255, 255, .92);
    text-shadow: 0 1px 12px rgba(11, 16, 23, .6);
}

.slide-testo .pulsante { margin-top: 1.6rem; }

/* --- Comandi dello slider ------------------------------------------------ */

.slider-freccia {
    position: absolute;
    top: 50%;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.9rem;
    height: 2.9rem;
    margin-top: -1.45rem;
    font-size: 1rem;
    color: #fff;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 50%;
    cursor: pointer;
    transition: background .18s ease;
}

.slider-freccia:hover { background: rgba(255, 255, 255, .28); }

.slider-indietro { left: 1rem; }
.slider-avanti { right: 1rem; }

/* I pallini non sono pallini ma trattini: quello attivo si allunga nella
   tinta del sito. Si capisce a colpo d'occhio a che punto si e'. */
.slider-pallini {
    position: absolute;
    z-index: 3;
    left: 50%;
    bottom: 1.1rem;
    transform: translateX(-50%);
    display: flex;
    gap: .4rem;
}

.slider-pallino {
    width: 1.6rem;
    height: 3px;
    padding: 0;
    background: rgba(255, 255, 255, .38);
    border: 0;
    border-radius: 2px;
    cursor: pointer;
    transition: width .2s ease, background .2s ease;
}

.slider-pallino.attivo { width: 2.8rem; background: var(--tinta); }

/* Sul telefono le frecce coprirebbero il testo: restano solo i trattini. */
@media (max-width: 46rem) {
    .slider-freccia { display: none; }
    .slide { min-height: 26rem; }
}


/* ==========================================================================
   SCHEDE DEGLI ARTICOLI

   Il primo articolo occupa tutta la riga, con fotografia a sinistra e testo
   a destra: sulla pagina iniziale la notizia piu' recente e' anche la piu'
   importante, e la griglia deve dirlo.
   ========================================================================== */

.testa-sezione {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 2rem;
}

.griglia-articoli {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    gap: 1.6rem;
}

.scheda-articolo { min-width: 0; }

.scheda-collegamento {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: inherit;
    text-decoration: none;
    background: var(--carta);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio-grande);
    overflow: hidden;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.scheda-collegamento:hover {
    border-color: rgba(var(--tinta-rgb), .45);
    box-shadow: var(--ombra-alta);
    transform: translateY(-3px);
}

.scheda-immagine-riquadro {
    position: relative;
    aspect-ratio: 16 / 10;
    background: var(--superficie);
    overflow: hidden;
}

/* object-fit: cover ritaglia l'immagine per riempire il riquadro senza
   deformarla. position absolute perche' l'altezza del riquadro la decide
   sempre il riquadro (aspect-ratio o height), mai l'immagine dentro. */
.scheda-immagine {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}

.scheda-collegamento:hover .scheda-immagine { transform: scale(1.045); }

/* Quando l'articolo non ha copertina non si lascia un buco bianco: si mette
   una velatura nella tinta del sito, cosi' la griglia resta regolare. */
.scheda-senza-immagine {
    display: block;
    width: 100%;
    height: 100%;
    background:
        repeating-linear-gradient(
            135deg,
            var(--tinta-velo) 0 12px,
            transparent 12px 24px
        ),
        var(--superficie);
}

/* --- La targhetta della data ---------------------------------------------
   Blocco pieno incastrato nell'angolo in basso a sinistra della fotografia:
   giorno grande, mese piccolo, tutto in monospaziato. Torna identico sullo
   slider e sui documenti: e' il segno riconoscibile del sito, e non e'
   decorazione - dice quando.
   ------------------------------------------------------------------------ */

.scheda-targhetta {
    position: absolute;
    left: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: .5rem .75rem .55rem;
    font-family: var(--carattere-dati);
    color: #fff;
    background: var(--tinta);
    border-radius: 0 var(--raggio) 0 0;
}

.targhetta-giorno {
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.03em;
}

.targhetta-mese {
    margin-top: .12rem;
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    opacity: .88;
}

.scheda-corpo {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 1.15rem 1.25rem 1.35rem;
}

.scheda-titolo {
    font-size: 1.16rem;
    line-height: 1.28;
    margin: 0 0 .5rem 0;
}

.scheda-sommario {
    margin: 0 0 1.1rem 0;
    font-size: .95rem;
    color: var(--testo-tenue);
}

/* "Leggi" resta in fondo alla scheda anche quando i sommari hanno lunghezze
   diverse: le schede di una riga finiscono tutte allineate. */
.scheda-invito {
    margin-top: auto;
    font-family: var(--carattere-dati);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--tinta);
}

.scheda-invito::after {
    content: " \2192";
    display: inline-block;
    transition: transform .18s ease;
}

.scheda-collegamento:hover .scheda-invito::after { transform: translateX(.25rem); }

/* --- Articolo in evidenza ------------------------------------------------ */

@media (min-width: 52rem) {

    .scheda-evidenza { grid-column: 1 / -1; }

    .scheda-evidenza .scheda-collegamento {
        flex-direction: row;
        align-items: stretch;
    }

    /* ALTEZZA DEFINITA, NON min-height.
       Qui il riquadro e' un elemento flessibile in riga: la sua altezza la
       deciderebbe il contenuto, quindi height:100% sull'immagine non
       troverebbe niente a cui agganciarsi e l'immagine tornerebbe alla
       propria dimensione naturale. Un logo quadrato largo 680 pixel
       diventerebbe alto 680 pixel e spingerebbe fuori schermo tutto il
       resto. Con un'altezza dichiarata il ritaglio funziona sempre,
       qualunque forma abbia l'immagine caricata. */
    .scheda-evidenza .scheda-immagine-riquadro {
        flex: 0 0 52%;
        aspect-ratio: auto;
        height: clamp(17rem, 26vw, 22rem);
    }

    .scheda-evidenza .scheda-corpo {
        justify-content: center;
        padding: 2.2rem 2.4rem;
    }

    .scheda-evidenza .scheda-titolo {
        font-size: clamp(1.5rem, 2.6vw, 2rem);
        margin-bottom: .7rem;
    }

    .scheda-evidenza .scheda-sommario { font-size: 1.03rem; }
}


/* ==========================================================================
   IMPIANTO A DUE COLONNE (articoli + colonna social)

   Gli articoli restano i padroni della pagina: la colonna di fianco e'
   stretta e fissa, e si accoda sotto appena lo schermo si restringe. Prima
   dei 62rem non ci sta: due colonne strette non aiutano nessuno.
   ========================================================================== */

@media (min-width: 62rem) {

    .impianto-due-colonne {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 20rem;
        gap: 2.6rem;
        align-items: start;
    }

    /* minmax(0, 1fr) e non 1fr: senza il minimo a zero la griglia dentro la
       colonna non potrebbe restringersi sotto la larghezza delle schede e
       sborderebbe a destra. */

    /* La colonna resta in vista mentre si scorrono gli articoli: e' corta e
       non ha senso che scompaia dopo il primo schermo. */
    .colonna-lato {
        position: sticky;
        top: 5.5rem;
    }
}

.colonna-principale { min-width: 0; }

/* Con la colonna social a fianco le schede vanno a due per riga: a tre
   diventerebbero strette e i titoli si spezzerebbero su quattro righe. */
.impianto-due-colonne .griglia-articoli {
    grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
}

.colonna-lato { display: flex; flex-direction: column; gap: 1.2rem; }

@media (max-width: 61.99rem) {
    /* Sotto le due colonne la parte social viene dopo gli articoli, con un
       po' di aria in mezzo. */
    .colonna-lato { margin-top: 2.5rem; }
}

/* --- I riquadri --------------------------------------------------------- */

.riquadro-social {
    padding: 1.2rem 1.25rem 1.35rem;
    background: var(--carta);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio-grande);
}

.social-testa {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: .9rem;
}

.social-segno {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.4rem;
    height: 2.4rem;
    color: var(--tinta);
    background: var(--tinta-velo);
    border-radius: var(--raggio);
}

.social-segno svg { width: 1.25rem; height: 1.25rem; display: block; }

.social-nome { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }

.social-rete {
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--titolo);
}

/* Il nome del profilo in monospaziato: e' un identificativo, non una frase.
   Stessa lingua delle date e dei pesi dei file. */
.social-utente {
    margin-top: .1rem;
    font-family: var(--carattere-dati);
    font-size: .72rem;
    letter-spacing: .06em;
    color: var(--testo-tenue);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.social-nota {
    margin: 0 0 1rem 0;
    font-size: .88rem;
    line-height: 1.5;
    color: var(--testo-tenue);
}

.social-invito .pulsante { width: 100%; justify-content: center; }

/* A post caricati l'avviso sui cookie non serve piu': resta solo il
   pulsante, che ora serve a tornare indietro. */
.social-invito-ridotto .social-nota { display: none; }
.social-invito-ridotto .pulsante {
    margin-bottom: 1rem;
    color: var(--testo);
    background: var(--superficie);
}
.social-invito-ridotto .pulsante:hover { background: var(--bordo); color: var(--titolo); }

.social-riquadro:empty { display: none; }

.social-riquadro-pieno {
    /* Il riquadro di Meta arriva con una cornice sua: qui si ritaglia
       negli angoli tondi del nostro. */
    overflow: hidden;
    border-radius: var(--raggio);
}

.social-riquadro iframe {
    display: block;
    width: 100%;
    min-height: 38rem;
    border: 0;
}

.social-piede {
    margin: 1rem 0 0 0;
    font-family: var(--carattere-dati);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.social-piede a { color: var(--tinta); text-decoration: none; }
.social-piede a:hover { text-decoration: underline; }

.social-piede a::after {
    content: " \2197";   /* freccia obliqua: porta fuori dal sito */
    display: inline-block;
}

/* La colonna non si stampa: sono collegamenti, su carta non servono. */
@media print {
    .colonna-lato { display: none; }
}


/* ==========================================================================
   DOCUMENTI

   Righe, non riquadri: un elenco di moduli si scorre con l'occhio. Il peso
   del file sta a destra in monospaziato, perche' chi scarica da telefono
   vuole saperlo prima.
   ========================================================================== */

.titolo-gruppo {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin: 2.6rem 0 .9rem;
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: .01em;
    text-transform: uppercase;
    color: var(--testo-tenue);
}

.titolo-gruppo::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--bordo);
}

.conteggio-gruppo {
    order: 3;
    font-family: var(--carattere-dati);
    font-size: .78rem;
    font-weight: 700;
    color: var(--tinta);
}

.elenco-documenti { margin: 0; padding: 0; list-style: none; }

.documento + .documento { border-top: 1px solid var(--bordo-tenue); }

.documento-collegamento {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    padding: 1.1rem .9rem;
    color: inherit;
    text-decoration: none;
    border-radius: var(--raggio);
    transition: background .16s ease;
}

.documento-collegamento:hover { background: var(--superficie); }

/* Il segno PDF: velatura della tinta, che al passaggio diventa piena. */
.documento-segno {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3.4rem;
    font-family: var(--carattere-dati);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--tinta);
    background: var(--tinta-velo);
    border: 1px solid var(--tinta-velo-forte);
    border-radius: var(--raggio);
    transition: background .16s ease, color .16s ease;
}

.documento-collegamento:hover .documento-segno {
    color: #fff;
    background: var(--tinta);
    border-color: var(--tinta);
}

.documento-testo { display: flex; flex-direction: column; min-width: 0; }

.documento-titolo {
    font-size: 1.03rem;
    font-weight: 700;
    color: var(--titolo);
    letter-spacing: -.012em;
}

.documento-descrizione {
    margin-top: .15rem;
    font-size: .92rem;
    color: var(--testo-tenue);
}

.documento-peso {
    margin-top: .3rem;
    font-family: var(--carattere-dati);
    font-size: .74rem;
    letter-spacing: .06em;
    color: var(--testo-tenue);
}

/* Freccia di scarico a destra, disegnata con i bordi: nessuna icona da
   caricare. Compare piena solo al passaggio. */
.documento-freccia {
    flex: 0 0 auto;
    margin-left: auto;
    font-family: var(--carattere-dati);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--tinta);
    opacity: 0;
    transition: opacity .16s ease;
}

.documento-collegamento:hover .documento-freccia,
.documento-collegamento:focus-visible .documento-freccia { opacity: 1; }

@media (max-width: 40rem) {
    .documento-freccia { display: none; }
    .documento-collegamento { gap: .8rem; padding: .9rem .3rem; }
}


/* ==========================================================================
   ARTICOLO E PAGINE FISSE
   ========================================================================== */

.briciole {
    margin: 0 0 1.4rem 0;
    font-family: var(--carattere-dati);
    font-size: .74rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--testo-tenue);
}

.briciole a { color: var(--testo-tenue); text-decoration: none; }
.briciole a:hover { color: var(--tinta); }
.briciole span { margin: 0 .45rem; }

.articolo { padding: clamp(2rem, 5vw, 3.5rem) 0 clamp(3rem, 7vw, 5rem); }

.articolo-testa { max-width: var(--stretto); }

.articolo-data {
    display: inline-block;
    margin-bottom: 1.1rem;
    font-family: var(--carattere-dati);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .12em;
    color: var(--tinta);
}

/* La copertina esce dalla colonna del testo: e' l'unico elemento largo
   della pagina, e da' respiro fra il titolo e il corpo. */
.articolo-copertina {
    width: 100%;
    height: clamp(16rem, 34vw, 26rem);
    object-fit: cover;
    margin: 2rem 0;
    border-radius: var(--raggio-grande);
}

.articolo-sommario {
    max-width: var(--stretto);
    margin: 0 0 1.8rem 0;
    padding-left: 1.1rem;
    font-family: var(--carattere-lettura);
    font-size: 1.22rem;
    line-height: 1.6;
    color: var(--titolo);
    border-left: 3px solid var(--tinta);
}

/* Testo a piena larghezza: la colonna la decide --stretto, in cima al
   foglio. Un valore solo da cambiare se un giorno si volesse restringere. */
.articolo-testo, .pagina-testo {
    max-width: 100%;
    font-family: var(--carattere-lettura);
    font-size: 1.12rem;
    line-height: 1.78;
}

.articolo-testo > p, .pagina-testo > p,
.articolo-testo > ul, .pagina-testo > ul,
.articolo-testo > ol, .pagina-testo > ol,
.articolo-testo > h2, .pagina-testo > h2,
.articolo-testo > h3, .pagina-testo > h3 {
    max-width: var(--stretto);
}

.articolo-testo p, .pagina-testo p { margin: 0 0 1.25rem 0; }

.articolo-testo h2, .pagina-testo h2 {
    margin: 2.4rem 0 .8rem;
    font-family: var(--carattere);
    font-size: 1.45rem;
}

.articolo-testo h3, .pagina-testo h3 {
    margin: 1.8rem 0 .6rem;
    font-family: var(--carattere);
    font-size: 1.12rem;
}

.articolo-testo a, .pagina-testo a { color: var(--tinta); }

.articolo-testo ul, .pagina-testo ul { padding-left: 1.3rem; margin: 0 0 1.25rem; }

.articolo-testo li, .pagina-testo li { margin-bottom: .5rem; }


/* ==========================================================================
   SCHEDE, NUMERI E RIQUADRI

   Sono i blocchi che si scrivono dal pannello con i segnaposto [schede],
   [numeri] e [evidenza]: li costruisce sito_blocchi.php.

   Perche' esistono: una pagina "Chi siamo" fatta di soli paragrafi si legge
   una volta e non si torna. Le schede spezzano il muro di testo e danno un
   punto d'appoggio all'occhio; i numeri dicono in tre cifre quello che un
   paragrafo direbbe in dieci righe.
   ========================================================================== */

.griglia-schede {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
    gap: 1.1rem;
    margin: 2rem 0 2.6rem;
}

.scheda-valore {
    padding: 1.6rem 1.5rem;
    background: var(--carta);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio-grande);
    transition: border-color .18s ease, box-shadow .18s ease;
}

/* Non sono collegamenti, quindi non si sollevano al passaggio: cambia solo
   il bordo, appena. Un riquadro che si muove senza essere cliccabile e' una
   promessa che non viene mantenuta. */
.scheda-valore:hover {
    border-color: rgba(var(--tinta-rgb), .4);
    box-shadow: var(--ombra);
}

/* L'icona sta in un quadrato velato della tinta del sito: e' il segno che
   tiene insieme le schede quando i testi hanno lunghezze diverse. */
.scheda-icona {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.9rem;
    height: 2.9rem;
    margin-bottom: 1.1rem;
    color: var(--tinta);
    background: var(--tinta-velo);
    border-radius: var(--raggio);
}

.scheda-icona svg { width: 1.45rem; height: 1.45rem; display: block; }

.scheda-valore-titolo {
    margin: 0 0 .5rem 0;
    font-family: var(--carattere);
    font-size: 1.08rem;
    letter-spacing: -.015em;
}

.scheda-valore-testo {
    margin: 0;
    font-family: var(--carattere);
    font-size: .97rem;
    line-height: 1.6;
    color: var(--testo-tenue);
}

/* --- Numeri in evidenza --------------------------------------------------
   Fascia chiara con le cifre in monospaziato: e' la stessa lingua delle
   targhette delle date e dei pesi dei file. Su un sito sportivo i numeri
   sono un contenuto, non un ornamento.
   ------------------------------------------------------------------------ */

.numeri {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 1rem;
    margin: 2.2rem 0 2.6rem;
    padding: 1.8rem 1.6rem;
    background: var(--superficie);
    border-radius: var(--raggio-grande);
}

.numero { text-align: center; }

.numero-valore {
    display: block;
    font-family: var(--carattere-dati);
    font-size: clamp(1.8rem, 4vw, 2.4rem);
    font-weight: 700;
    letter-spacing: -.04em;
    line-height: 1.1;
    color: var(--tinta);
}

.numero-etichetta {
    display: block;
    margin-top: .35rem;
    font-family: var(--carattere-dati);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--testo-tenue);
}

/* --- Riquadro in evidenza ------------------------------------------------
   Per un avviso, una scadenza, un recapito. Filetto pieno a sinistra e
   nessun angolo tondo: con un bordo su un lato solo gli angoli arrotondati
   si vedono storti.
   ------------------------------------------------------------------------ */

.evidenza {
    max-width: var(--stretto);
    margin: 2rem 0 2.4rem;
    padding: 1.4rem 1.6rem;
    background: var(--tinta-velo);
    border-left: 3px solid var(--tinta);
    border-radius: 0;
}

.evidenza p { margin: 0 0 .8rem 0; font-size: 1.05rem; }
.evidenza p:last-child { margin-bottom: 0; }

.evidenza-titolo {
    font-family: var(--carattere);
    font-weight: 800;
    font-size: 1.02rem;
    letter-spacing: -.015em;
    color: var(--titolo);
}

/* Chiusura dell'articolo: una riga sottile e il ritorno all'elenco. */
.articolo-ritorno {
    max-width: var(--stretto);
    margin: 2.8rem 0 0;
    padding-top: 1.8rem;
    border-top: 1px solid var(--bordo);
}

.pagina-fissa { padding: clamp(2rem, 5vw, 3.5rem) 0 clamp(3rem, 7vw, 5rem); }


/* ==========================================================================
   PIEDE

   Fascia scura come l'apertura: la pagina si chiude con lo stesso tono con
   cui si e' aperta, e il bianco del contenuto resta un blocco solo.
   ========================================================================== */

.piede {
    margin-top: clamp(3rem, 8vw, 6rem);
    color: var(--testo-chiaro);
    background: var(--inchiostro);
    border-top: 3px solid var(--tinta);
}

.piede a { color: var(--testo-chiaro); text-decoration: none; }
.piede a:hover { color: #fff; text-decoration: underline; }

.piede-dentro {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr;
    gap: 2.5rem;
    padding-top: clamp(2.5rem, 5vw, 3.5rem);
    padding-bottom: clamp(2rem, 4vw, 3rem);
}

@media (max-width: 48rem) {
    .piede-dentro { grid-template-columns: 1fr; gap: 1.8rem; }
}

.piede-nome {
    margin: 0 0 .6rem 0;
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -.02em;
    color: #fff;
}

.piede-testo { margin: 0; font-size: .95rem; }

.piede-etichetta {
    margin: 0 0 .8rem 0;
    font-family: var(--carattere-dati);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .45);
}

.piede-elenco { margin: 0; padding: 0; list-style: none; }
.piede-elenco li { margin-bottom: .5rem; font-size: .95rem; }

.piede-riga {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding-top: 1.2rem;
    padding-bottom: 1.6rem;
    border-top: 1px solid rgba(255, 255, 255, .12);
}

.piede-riga p {
    margin: 0;
    font-family: var(--carattere-dati);
    font-size: .76rem;
    letter-spacing: .06em;
    color: rgba(255, 255, 255, .5);
}


/* ==========================================================================
   STAMPA
   Chi stampa un modulo o un articolo non vuole il menu ne' il piede scuro.
   ========================================================================== */

@media print {
    .testa, .piede, .slider, .salta-al-contenuto, .pulsante { display: none; }
    body { font-size: 11pt; color: #000; }
    .articolo-testo, .pagina-testo { max-width: none; }
}