/* ==========================================================================
   croceverde.css - regole comuni a tutte le pagine pubbliche del sito.
   Va caricato DOPO responsive.css (e dopo style.css) perche' sovrascrive
   alcune regole del tema "Oberlin".
   ========================================================================== */

/* --------------------------------------------------------------------------
   Testata di pagina (la fascia blu con il titolo).
   Il tema usa 120px sopra e 160px sotto: troppo alta per questo sito.
   Qui la riduciamo a 70/70 su desktop e 50/50 su mobile, in modo che TUTTE
   le pagine abbiano la fascia della stessa altezza.
   -------------------------------------------------------------------------- */
.page-header {
    padding-top: 70px;
    padding-bottom: 70px;
}

@media (max-width: 767px) {
    .page-header {
        padding-top: 50px;
        padding-bottom: 50px;
    }
}

/* --------------------------------------------------------------------------
   L'onda in fondo alla testata e' un'immagine, non un colore CSS.
   Quella del tema (page-header-curv-dark-1-1.svg) e' colorata #F0F7F7:
   si vede uno scalino quando la sezione sotto e' bianca.
   Qui l'onda BIANCA diventa il comportamento predefinito, perche' quasi
   tutte le pagine hanno una sezione bianca subito sotto la testata.
   -------------------------------------------------------------------------- */
.page-header__dark::after {
    background-image: url(../images/svgs/page-header-curv-white-1-1.svg);
}

/* --------------------------------------------------------------------------
   Eccezione: le pagine in cui la sezione subito sotto la testata ha lo
   sfondo verdino #F0F7F7 (es. .service-one, .event-one, .blog-grid).
   Basta aggiungere la classe "cv-onda-tinta" alla <section> della testata
   per tornare all'onda originale del tema.
   -------------------------------------------------------------------------- */
.page-header__dark.cv-onda-tinta::after {
    background-image: url(../images/svgs/page-header-curv-dark-1-1.svg);
}

/* --------------------------------------------------------------------------
   Colore della testata: stesso verde dell'hover del menu (--thm-base,
   #5bb286) al posto del blu del tema.
   Ogni pagina ha una foto generica del tema come sfondo (style inline),
   coperta da .page-header::before (il velo scuro semitrasparente): e'
   quel velo a decidere il colore visibile, non lo sfondo della sezione.
   Opacita' portata a 1 (era 0.6) per avere il colore pieno, senza che
   la foto sotto lo sporchi: e' un verde piu' chiaro del blu originale,
   quindi anche una piccola trasparenza si nota di piu'.
   -------------------------------------------------------------------------- */
.page-header {
    background-color: var(--thm-base);
}

.page-header::before {
    background-color: var(--thm-base);
    opacity: 1;
}

/* Il nome della pagina corrente nel breadcrumb (es. "Contattaci") era
   verde (--thm-base): ora si confonderebbe con lo sfondo. Diventa giallo,
   lo stesso --thm-primary del pulsante "torna su" in basso a destra. */
.thm-breadcrumb li {
    color: var(--thm-primary);
}

/* --------------------------------------------------------------------------
   Slide della homepage (2026-09-04): il carosello e' passato da owl-carousel
   a dmxSwiper (vedi index.aspx). Il tema faceva comparire il riquadro di
   testo (.slider-one__content, opacity:0 di base) con un'animazione
   agganciata alla classe ".active" che metteva owl-carousel sulla slide
   corrente. Swiper usa un'altra classe per la slide attiva,
   ".swiper-slide-active": senza questo override il riquadro di testo
   resterebbe invisibile su ogni slide tranne il fallback statico (che ha
   opacity:1 inline, non essendo dentro il carosello).

   Animazione "fadeInUp" del tema sostituita il 2026-09-07 (richiesta di
   Marco: il riquadro deve entrare da destra verso sinistra, come se si
   "inserisse" sopra la foto) con la keyframe personalizzata qui sotto.
   Durata/fill-mode restano quelli gia' impostati dal tema su
   .slider-one__content (style.css, animation-duration: 3s, fill-mode: both):
   qui si cambia solo la traiettoria (animation-name). */
.slider-one__carousel .swiper-slide-active .slider-one__content {
    animation-name: cvSlideInDestra;
}

@keyframes cvSlideInDestra {
    0% {
        opacity: 0;
        transform: translateX(220px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* --------------------------------------------------------------------------
   Slide dinamiche in homepage: dmxSwiper (effect="fade" + auto-height) misura
   l'altezza della slide attiva (.swiper-slide.item) per dare l'altezza al
   carosello. Il riquadro di testo (.slider-one__content) pero' si sovrappone
   alla foto con un margin-bottom negativo di 135px (vedi style.css) - la
   misura automatica non lo considera per intero e il riquadro (in
   particolare il pulsante, l'ultima cosa in fondo) restava tagliato, mentre
   il fallback statico (fuori dal carosello, senza auto-height) e' sempre
   stato a posto. Diamo alla slide lo stesso margine di sicurezza che il
   tema usa gia' per lo stesso motivo su .slider-one__wrapper (169px), cosi'
   la misura risulta sempre abbastanza alta da contenere tutto il riquadro
   compresa la curva bianca sotto.
   -------------------------------------------------------------------------- */
.slider-one__carousel .swiper-slide.item {
    padding-bottom: 169px;
}


/* --------------------------------------------------------------------------
   Elenco documenti (download.aspx e homepage)
   -------------------------------------------------------------------------- */
/* Elenco documenti scaricabili: una riga per documento, dettaglio espandibile *//* Il tema disegna .portfolio-filter con pillole da 18px e 20/59 di padding,
           pensate per 3 parole: qui le etichette sono lunghe, quindi le riduciamo. */
.cv-doc-filter {
            margin-bottom: 26px;
            gap: 10px;
}

.cv-doc-filter li+li {
            margin-left: 0;
}

.cv-doc-filter li span {
            font-size: 14px;
            padding: 10px 22px;
            background-color: #fff;
            border: 1px solid #e0e7ee;
            color: #4a5768;
}

.cv-doc-filter li.active span,
        .cv-doc-filter li:hover span {
            background-color: #6AB978;
            border-color: #6AB978;
            color: #fff;
            box-shadow: 0 8px 18px rgba(106, 185, 120, .22);
}

@media (max-width: 575px) {
    .cv-doc-filter li span {
                font-size: 13px;
                padding: 8px 16px;
    }
}

.cv-doc-search {
            position: relative;
            max-width: 520px;
            margin: 0 auto 34px;
}

.cv-doc-search i {
            position: absolute;
            left: 18px;
            top: 50%;
            transform: translateY(-50%);
            color: #9aa4b2;
            pointer-events: none;
}

.cv-doc-search__input {
            width: 100%;
            height: 52px;
            padding: 0 18px 0 46px;
            border: 1px solid #e3e8ef;
            border-radius: 26px;
            background: #fff;
            font-size: 15px;
            color: #3d4a5c;
            outline: none;
            transition: border-color .15s ease, box-shadow .15s ease;
}

.cv-doc-search__input:focus {
            border-color: #6AB978;
            box-shadow: 0 0 0 4px rgba(106, 185, 120, .16);
}

.cv-doc-list {
            background: #fff;
            border: 1px solid #e6ebf1;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 6px 18px rgba(29, 44, 64, .05);
}

.cv-doc {
            background: #fff;
            border-bottom: 1px solid #eef1f6;
            padding: 18px 22px;
            transition: background .15s ease;
}

.cv-doc:last-child {
            border-bottom: none;
}

.cv-doc:hover {
            background: #f4f6f9;
}

.cv-doc__head {
            display: flex;
            align-items: center;
            gap: 18px;
}

.cv-doc__title {
            flex: 1 1 auto;
            min-width: 0;
            font-size: 19px;
            font-weight: 700;
            line-height: 1.45;
            margin: 0;
            color: var(--thm-black);
}

.cv-doc__cat {
            display: inline-block;
            vertical-align: middle;
            margin-left: 9px;
            padding: 3px 9px;
            font-size: 11px;
            font-weight: 600;
            line-height: 1.4;
            white-space: nowrap;
            border-radius: 10px;
            border: 1px solid transparent;
}

.cv-doc__cat--ist {
            background: #eaf1fb;
            border-color: #d3e2f6;
            color: #2f5f9e;
}

.cv-doc__cat--eco {
            background: #fdf1e3;
            border-color: #f6e0c4;
            color: #96601c;
}

.cv-doc__cat--utile {
            background: #eaf6ec;
            border-color: #d3ebd8;
            color: #3d7d4c;
}

.cv-doc__cat--vario {
            background: #f0f2f5;
            border-color: #e2e6ec;
            color: #5a6779;
}

.cv-doc__new {
            display: inline-block;
            vertical-align: middle;
            margin-left: 9px;
            padding: 3px 9px;
            font-size: 10px;
            font-weight: 700;
            line-height: 1.4;
            letter-spacing: .06em;
            text-transform: uppercase;
            color: #fff;
            background: #e8a33d;
            border-radius: 10px;
}

.cv-doc__btn {
            flex: 0 0 auto;
            display: inline-flex;
            align-items: center;
            gap: 7px;
            height: 34px;
            padding: 0 15px;
            font-size: 13px;
            font-weight: 600;
            line-height: 1;
            color: #fff;
            background: #6AB978;
            border-radius: 17px;
            text-transform: none;
            letter-spacing: 0;
            transition: background .15s ease;
}

.cv-doc__btn:hover,
        .cv-doc__btn:focus {
            background: #4f9c5d;
            color: #fff;
            text-decoration: none;
}

.cv-doc__btn i {
            font-size: 12px;
}

.cv-doc__more {
            margin-top: 8px;
}

.cv-doc__more>summary {
            cursor: pointer;
            list-style: none;
            font-size: 13px;
            font-weight: 600;
            color: #7a8698;
            display: inline-flex;
            align-items: center;
            gap: 6px;
}

.cv-doc__more>summary:hover {
            color: #6AB978;
}

.cv-doc__more>summary::-webkit-details-marker {
            display: none;
}

.cv-doc__more>summary::after {
            content: "\25BE";
            transition: transform .15s ease;
}

.cv-doc__more[open]>summary::after {
            transform: rotate(180deg);
}

.cv-doc__body {
            margin-top: 10px;
            padding-right: 120px;
}

.cv-doc__desc {
            font-size: 15px;
            color: #5a6779;
}

.cv-doc__desc :last-child {
            margin-bottom: 0;
}

.cv-doc__meta {
            list-style: none;
            margin: 12px 0 0;
            padding: 10px 0 0;
            border-top: 1px dashed #e6ebf1;
            display: flex;
            flex-wrap: wrap;
            gap: 8px 26px;
            font-size: 13px;
            color: #7a8698;
}

.cv-doc__meta li {
            display: inline-flex;
            align-items: center;
            gap: 7px;
}

.cv-doc__meta i {
            color: #9aa4b2;
}

.cv-doc__meta b {
            font-weight: 600;
            color: #5a6779;
            word-break: break-all;
}

.cv-doc-empty {
            text-align: center;
            padding: 40px 0;
            color: #7a8698;
            font-size: 16px;
}

/* Ultimi Download in homepage: stesse classi cv-doc* di download.aspx,
   ma righe piu' compatte per ospitare 10 elementi senza dilatare la sezione.
   Scopato su #home per non toccare l'elenco completo di download.aspx. */
#home .cv-doc {
            padding: 10px 20px;
}

#home .cv-doc__head {
            gap: 12px;
}

#home .cv-doc__title {
            font-size: 19px;
            line-height: 1.3;
}

#home .cv-doc__cat,
        #home .cv-doc__new {
            padding: 2px 7px;
            font-size: 10px;
            margin-left: 7px;
}

#home .cv-doc__btn {
            height: 28px;
            padding: 0 12px;
            font-size: 12px;
}

#home .cv-doc__more {
            margin-top: 4px;
}

#home .cv-doc__more>summary {
            font-size: 12px;
}

#home .cv-doc__body {
            margin-top: 6px;
}

@media (max-width: 575px) {
    .cv-doc {
                padding: 16px 14px;
    }
    .cv-doc__head {
                gap: 12px;
                align-items: flex-start;
    }
    .cv-doc__title {
                font-size: 16px;
    }
    .cv-doc__new {
                font-size: 9px;
                padding: 2px 7px;
                margin-left: 7px;
    }
    .cv-doc__btn {
                height: 32px;
                padding: 0 12px;
                font-size: 12px;
                margin-top: 1px;
    }
    .cv-doc__body {
                padding-right: 0;
    }
}

@media (max-width: 575px) {
    #home .cv-doc {
                padding: 8px 12px;
    }
    #home .cv-doc__title {
                font-size: 16px;
    }
}

@media (max-width: 359px) {
    .cv-doc__btn {
                padding: 0 11px;
    }
    .cv-doc__btn .cv-doc__btn-txt {
                display: none;
    }
    .cv-doc__btn i {
                font-size: 13px;
    }
}

/* --------------------------------------------------------------------------
   Griglia album fotografici (foto.aspx e homepage)
   -------------------------------------------------------------------------- */
/* Scheda album: copertina di altezza fissa + titolo e conteggio foto. */
.cv-album {
            display: block;
            margin-bottom: 30px;
            border-radius: 10px;
            overflow: hidden;
            background: #fff;
            box-shadow: 0 6px 18px rgba(29, 44, 64, .06);
            transition: box-shadow .18s ease, transform .18s ease;
}

.cv-album:hover {
            box-shadow: 0 14px 30px rgba(29, 44, 64, .13);
            transform: translateY(-3px);
            text-decoration: none;
}

.cv-album__image {
            display: block;
            position: relative;
            overflow: hidden;
            background: #eef3f6;
}

.cv-album__cover {
            display: block;
            width: 100%;
            height: 230px;
            object-fit: cover;
            transition: transform .4s ease;
}

.cv-album__cover--logo {
            object-fit: contain;
            padding: 30px;
            background: #fff;
}

.cv-album:hover .cv-album__cover {
            transform: scale(1.06);
}

.cv-album__lente {
            position: absolute;
            right: 14px;
            bottom: 14px;
            width: 42px;
            height: 42px;
            border-radius: 50%;
            background: #6AB978;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            opacity: 0;
            transform: translateY(8px);
            transition: opacity .2s ease, transform .2s ease;
}

.cv-album:hover .cv-album__lente {
            opacity: 1;
            transform: translateY(0);
}

.cv-album__info {
            display: block;
            padding: 18px 20px 20px;
}

.cv-album__titolo {
            display: block;
            font-family: var(--heading-font);
            font-size: 19px;
            font-weight: 700;
            line-height: 1.35;
            color: #1d2c40;
}

.cv-album__conta {
            display: block;
            margin-top: 6px;
            font-size: 14px;
            color: #7a8698;
}

.cv-album__conta i {
            color: #6AB978;
            margin-right: 5px;
}

@media (max-width: 767px) {
    .cv-album__cover {
                height: 200px;
    }
}

/* --------------------------------------------------------------------------
   Sezioni dinamiche della homepage (documenti e album).
   Il tema non ha una sezione "neutra": .blog-one e .event-two hanno 150px di
   padding e .faq-two ha lo sfondo blu. Qui ne definiamo una nostra.
   -------------------------------------------------------------------------- */
.cv-home-sezione {
    padding-top: 80px;
    padding-bottom: 80px;
}

.cv-home-sezione--tinta {
    background-color: #f0f7f7;
}

.cv-home-vuoto {
    color: #93959e;
    font-size: 16px;
    padding: 24px 0;
    margin: 0;
}

.cv-home-tutti {
    margin-top: 40px;
}

@media (max-width: 767px) {
    .cv-home-sezione {
        padding-top: 55px;
        padding-bottom: 55px;
    }
}

/* --------------------------------------------------------------------------
   Riquadri "eventi e notizie" in homepage (.event-two).
   Due correzioni al tema: il riquadro data e' 60x60 con il mese a 16px (il
   nome per esteso non ci sta) e le copertine caricate hanno proporzioni
   qualsiasi, quindi vanno riquadrate.
   -------------------------------------------------------------------------- */
#home .event-two {
    padding-top: 90px;
    padding-bottom: 90px;
}

#home .event-two__date {
    width: 66px;
    height: 66px;
}

#home .event-two__date .cv-mese {
    display: block;
    font-size: 10px;
    line-height: 1.15;
    margin-top: 3px;
    max-width: 60px;
}

#home .event-two__image {
    min-height: 230px;
}

#home .event-two__image > .cv-copertina {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#home .event-two__image > .cv-copertina--logo {
    object-fit: contain;
    padding: 26px;
    background: #fff;
}

#home .event-two__content {
    padding-top: 30px;
    padding-bottom: 30px;
    /* .event-two__content ha anche la classe Bootstrap d-flex (il markup e'
       <div class="event-two__content d-flex"><div class="my-auto">...),
       usata per centrare .my-auto verticalmente. Senza justify-content
       esplicito il default e' flex-start: .my-auto si restringe al
       contenuto (title/estratto) e resta appoggiato a sinistra, cosa che
       il text-align:center del tema (su .event-two__content) non puo'
       correggere perche' quello centra solo il testo dentro un box, non
       la posizione del box stesso in un contenitore flex. Invisibile con
       titolo/estratto lunghi (il box si allarga quasi a piena larghezza
       comunque); evidente con contenuto breve (2026-09-11, "News due").
       justify-content:center centra .my-auto come blocco quando e' piu'
       stretto della colonna; text-align:left resta sul <p> (vedi sotto)
       per allineare le righe fra loro dentro il blocco, non l'una sotto
       l'altra al proprio centro. */
    justify-content: center;
}

/* Stesso motivo del blocco .event-one qui sopra: mantiene i \n prodotti
   dall'estratto della descrizione. Il tema centra tutto .event-two__content
   (style.css): con un estratto lungo che va a capo da solo l'effetto
   centrato si nota poco, ma con testo scritto come righe brevissime (una
   parola a riga) ogni riga restava centrata per conto suo e sembra 'storta'.
   Richiesta di Marco (2026-09-11): il blocco del testo deve restare
   centrato nella colonna come fa il titolo, ma le righe al suo interno
   devono allinearsi a sinistra fra loro (non ciascuna al proprio centro).
   Si ottiene con inline-block invece di lasciare il <p> a piena larghezza:
   il paragrafo si restringe alla riga piu' lunga (quindi resta un blocco
   compatto) e viene centrato dal text-align:center ereditato dal tema su
   .event-two__content; text-align:left dentro il blocco allinea le righe
   fra loro. max-width:100% evita che un paragrafo lungo senza \n possa
   sporgere dalla colonna. */
#home .event-two__content p.cv-estratto {
    white-space: pre-line;
    display: inline-block;
    max-width: 100%;
    text-align: left;
}

/* Sotto i 1200px il tema manda i due riquadri a piena larghezza: l'immagine
   affiancata al testo diventa strettissima, meglio impilarli. */
@media (max-width: 575px) {
    #home .event-two__image,
    #home .event-two__content {
        flex: 0 0 100%;
        max-width: 100%;
    }

    #home .event-two__image {
        min-height: 190px;
    }
}

/* --------------------------------------------------------------------------
   Indicatore di caricamento dati (stesso stile della parte amministrativa).
   Nessuna GIF: e' una rotella disegnata in CSS, quindi non pesa nulla, resta
   nitida su ogni schermo e si puo' ricolorare.
   -------------------------------------------------------------------------- */
.cv-loading {
    text-align: center;
    padding: 46px 0;
    color: #93959e;
}

.cv-spinner {
    width: 44px;
    height: 44px;
    margin: 0 auto 14px;
    border: 4px solid rgba(106, 185, 120, .25);
    border-top-color: #6AB978;
    border-radius: 50%;
    animation: cv-spin .8s linear infinite;
}

.cv-loading-text {
    font-weight: 600;
    font-size: 15px;
    margin: 0;
}

@keyframes cv-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Chi ha chiesto al sistema operativo di ridurre le animazioni vede la rotella
   ferma invece che girare. */
@media (prefers-reduced-motion: reduce) {
    .cv-spinner {
        animation: none;
    }
}

/* --------------------------------------------------------------------------
   Fascia "Diventa un volontario oggi!" (.cta-one).
   Il tema le da' 187px di padding sopra e 200px sotto (piu' di un terzo di
   schermo) e come sfondo cta-bg-2-.jpg, che pero' nel pacchetto del tema e'
   solo un rettangolo grigio pieno: da qui l'effetto "lastrone".
   Qui la fascia viene ridotta e lo sfondo grigio sostituito con una sfumatura
   nei colori dell'associazione, con sopra la mappa gia' presente nel tema.
   Quando ci sara' una foto vera bastera' rimettere background-image sotto.
   -------------------------------------------------------------------------- */
.cta-one {
    padding-top: 72px;
    padding-bottom: 76px;
    background-color: #1f2f63;
    background-image: linear-gradient(115deg, #5bb286 0%, #2f7f8f 46%, #1f2f63 100%);
    background-attachment: scroll;
    background-position: center center;
    background-size: cover;
}

/* Il tema usa questo strato come velo nero al 60%: sopra la sfumatura non
   serve, cosi' lo riusiamo per il motivo decorativo. */
.cta-one::before {
    background-color: transparent;
    background-image: url(../images/svgs/event-bg-map-1.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    opacity: .14;
}

.cta-one h3 {
    font-size: 34px;
    line-height: 1.25;
}

.cta-one p {
    margin-top: 14px;
    margin-bottom: 28px;
    line-height: 27px;
}

.cta-one__btn {
    padding: 14px 42px;
    font-size: 15px;
}

@media (max-width: 767px) {
    .cta-one {
        padding-top: 52px;
        padding-bottom: 56px;
    }

    .cta-one h3 {
        font-size: 26px;
    }

    .cta-one__btn {
        padding: 12px 32px;
    }
}

/* --------------------------------------------------------------------------
   Foto nella colonna di destra della sezione "Volontari... e non solo"
   (.faq-two, cosa-facciamo.aspx). Il tema prevede qui un ritaglio di persona
   in PNG appoggiato in basso a destra: con una fotografia normale funziona
   meglio un riquadro arrotondato allineato al testo.
   -------------------------------------------------------------------------- */
.cv-faq-foto {
    width: 100%;
    padding-left: 30px;
}

.cv-faq-foto img {
    display: block;
    width: 100%;
    height: 480px;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: -24px 24px 40px 0px rgba(8, 16, 36, .35);
}

@media (max-width: 991px) {
    .cv-faq-foto {
        padding-left: 0;
        padding-bottom: 70px;
    }

    .cv-faq-foto img {
        height: 300px;
    }
}

/* --------------------------------------------------------------------------
   PROSSIMI APPUNTAMENTI (homepage, sezione .event-one.cv-prossimi)
   Il blocco "event-one" del tema Oberlin e' disegnato per due colonne: il
   riquadro bianco ha 53px di padding laterale e la data sborda in alto di
   40px. Qui le colonne sono tre, quindi paddings ridotti e copertine di
   altezza fissa (le foto caricate hanno proporzioni qualsiasi).
   -------------------------------------------------------------------------- */
/* 120px sopra erano l'eredita' del tema (che ne vuole 150) e sotto lo slider
   a tutta pagina si leggevano come una fascia vuota: la sezione comincia con
   la sola tinta e i puntini, senza niente da guardare. Dimezzati a 60.
   (Marco, 2026-09-10: "guarda quanto spazio vuoto c'e' in alto")
   Ancora troppo (Marco, 2026-09-25): dimezzato di nuovo, da 60 a 30px, poi
   sceso a 10px nella stessa giornata (richiesto di nuovo da Marco). Sotto
   questa soglia il titolo "Eventi e corsi" rischia di toccare la curva
   bianca dello slider sopra: non scendere oltre senza controllare da
   schermo, specie sui breakpoint piu' stretti. */
#home .cv-prossimi {
    padding-top: 10px;
    padding-bottom: 70px;
}

#home .cv-prossimi .event-one__content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Senza il quadrato della data che sbordava in alto, il riquadro bianco non ha
   piu' bisogno dei 58px di respiro in cima. */
#home .cv-prossimi .event-one__content-inner {
    margin-top: -80px;
    padding: 34px 28px 40px;
}

/* La descrizione arriva da Summernote come paragrafi/<br>: la conversione in
   testo semplice (App Connect, index.aspx) li trasforma in \n, che qui
   servono per andare a capo davvero nell'estratto della card. */
/* Come #home .event-two__content p sotto: il tema centra tutto
   .event-one__content-inner (style.css, la stessa proprieta' di
   eventi-notizie.aspx). display:inline-block invece di lasciare il <p> a
   piena larghezza: si restringe alla riga piu' lunga (resta un blocco
   compatto, centrato come il titolo) e text-align:left allinea le righe
   fra loro dentro il blocco invece di centrarle una per una (vedi
   [[croceverde-ritorni-a-capo-estratti]] per la storia completa). A
   differenza di eventi-notizie.aspx qui non serve nessun trucco sul
   contenitore: .event-one__content-inner non e' un contesto flex (a
   differenza di .event-two__content), quindi il text-align:center
   ereditato centra gia' correttamente il blocco da solo.
   IMPORTANTE - selettore scoped a .cv-estratto, non un generico "p": in
   questo contenitore ci sono anche <p class="cv-tipo">, <p class="cv-quando">
   e <p class="cv-mancano">. Un selettore bare "p" li trasformava anch'essi
   in inline-block, e senza il .text-center (con !important di Bootstrap)
   che li protegge in eventi-notizie.aspx, badge/data finivano sulla STESSA
   riga (come parole di una frase) invece che ciascuno sulla propria riga a
   piena larghezza: il gruppo veniva centrato come blocco unico, spostando
   il badge EVENTO fuori dal centro apparente rispetto alla pillola
   "DOMANI" sotto (che invece, andando a capo da sola, restava centrata per
   conto suo) - segnalato da Marco il 2026-09-11 ("non vedi imprecisioni
   nei badge e negli allineamenti?"). Percio' la classe .cv-estratto in
   index.aspx sul solo <p> dell'estratto, invece del selettore generico. */
#home .cv-prossimi .event-one__content-inner p.cv-estratto {
    white-space: pre-line;
    display: inline-block;
    max-width: 100%;
    text-align: left;
}

/* Pulsante "Leggi tutto" sotto l'estratto troncato, in entrambe le sezioni
   della homepage (richiesta di Marco, 2026-09-11 - stessa pillola gia' su
   eventi-notizie.aspx, .thm-btn del tema rimpicciolito). Qui NON serve
   l'override display:flex/width:fit-content usato la': in homepage il
   blocco del testo (e ora anche il pulsante) restano centrati come il
   titolo - e' il disegno gia' scelto per queste due sezioni - quindi
   .thm-btn resta inline-block cosi' com'e' e viene centrato dal
   text-align:center ereditato, esattamente come il titolo sopra di lui. */
#home .cv-leggi-tutto {
    /* display:block + width:fit-content + margin:auto invece di lasciare
       .thm-btn inline-block: cosi' com'era, il <p> (anch'esso inline-block,
       vedi sopra) e il pulsante potevano finire sulla STESSA riga quando
       insieme entravano nella larghezza disponibile, e text-align:center
       centrava allora l'insieme dei due invece del solo pulsante (misurato:
       scarto fino a 49px dal centro reale). display:block forza il
       pulsante sulla propria riga, margin:auto lo centra da solo,
       indipendentemente da cosa c'e' sopra. */
    display: block;
    width: fit-content;
    margin: 14px auto 0;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 20px;
    box-shadow: none;
}

#home .cv-leggi-tutto i {
    font-size: 12px;
    margin-left: 6px;
    margin-right: 0;
    top: 0;
    transition: transform 300ms;
}

#home .cv-leggi-tutto:hover i {
    transform: translateX(3px);
}

#home .cv-prossimi .event-one__image > .cv-copertina {
    display: block;
    width: 100%;
    height: 230px;
    object-fit: cover;
}

/* Le news senza immagine ricadono su nofoto.jpg, che e' il logo: va mostrato
   intero su fondo bianco, non ritagliato. */
#home .cv-prossimi .event-one__image > .cv-copertina--logo {
    object-fit: contain;
    padding: 26px;
    background: #fff;
}

/* Riga "quando": la data di svolgimento dell'evento, distinta dalla data di
   pubblicazione. Usata sia qui sia nelle schede di "Ultime novita'". */
#home .cv-quando {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 6px;
    font-size: 14px;
    font-weight: 700;
    color: #3d7d4c;
}

#home .cv-quando i {
    margin-right: 6px;
}

/* Il conto alla rovescia compare solo entro i 14 giorni: e' l'informazione che
   giustifica la presenza della sezione in homepage. */
#home .cv-prossimi .cv-mancano {
    /* inline-flex + align-items invece di inline-block: con inline-block il
       mezzo-interlinea del font (line-height di default) non si distribuisce
       in modo uguale sopra/sotto il testo, e il padding simmetrico (3px 3px)
       non basta a centrare davvero la scritta nella pillola - segnalato da
       Marco, 2026-09-07. Sfondo pieno invece del tono chiaro, testo piu'
       grande e ombra leggera per farla notare di piu' (richiesta di Marco,
       2026-09-08): prima era troppo simile a una scritta qualsiasi. */
    display: inline-flex;
    align-items: center;
    line-height: 1;
    margin: 0 0 12px;
    padding: 5px 16px;
    border-radius: 12px;
    background: #3d7d4c;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    box-shadow: 0 2px 6px rgba(61, 125, 76, .35);
}

/* L'evento di oggi e' il piu' urgente: colore diverso per distinguerlo a
   colpo d'occhio dagli altri conti alla rovescia ("Domani", "Tra N giorni").
   Classe aggiunta lato App Connect (index.aspx) e lato cv-calendario.js
   quando giornimancanti == 0. */
#home .cv-prossimi .cv-mancano--oggi {
    background: #d9534f;
    box-shadow: 0 2px 6px rgba(217, 83, 79, .35);
}

/* Pillola "Si svolge oggi" lampeggiante (2026-09-10, richiesta di Marco:
   prima provato un bordo pulsante su tutto il riquadro, scartato - "non mi
   convince" - e sostituito con questo, solo sulla pillola). Alterna sfondo
   pieno e sfondo piu' chiaro invece di sparire del tutto (mai opacity:0 o
   display:none): un vero lampeggio a scomparsa totale, a ~1 ciclo/secondo,
   e' sconsigliato per il rischio fotosensibilita' oltre che piu' fastidioso
   da guardare. */
#home .cv-prossimi .cv-mancano--oggi {
    animation: cvOggiLampeggio 1s step-end infinite;
}

@keyframes cvOggiLampeggio {
    0%, 100% {
        background: #d9534f;
        box-shadow: 0 2px 6px rgba(217, 83, 79, .35);
    }
    50% {
        background: #f0908c;
        box-shadow: 0 2px 6px rgba(217, 83, 79, .2);
    }
}


/* Sezione "Cosa facciamo" in homepage: il tema le da' 150px di padding-top
   di serie (.service-one, assets/css/style.css). Sommati ai 169px fissi
   dello slider (vedi sopra in questo file) quando "Prossimi appuntamenti" e
   "Ultime notizie" sono entrambe nascoste, restava una fascia di sfondo
   #f0f7f7 vuota di oltre 300px. Un primo tentativo condizionato via JS
   (classe aggiunta solo a sezioni vuote) non ha dato alcun cambiamento
   visibile in prova, quindi qui la riduzione e' incondizionata - vale
   sempre, anche quando la sezione sopra ha contenuti (2026-09-08,
   richiesta di Marco: "basta anche ridurla del 50%"). Circa meta' del
   valore del tema. */
#home .service-one__home-one {
    padding-top: 75px;
}

@media (max-width: 767px) {
    #home .service-one__home-one {
        padding-top: 50px;
    }
}

/* Stesso ragionamento per "Ultime notizie" (.event-two): se e' lei la prima
   sezione visibile dopo lo slider (perche' ci sono notizie ma non eventi in
   arrivo), i suoi 90px di padding-top (gia' ridotti dal tema una volta, vedi
   sopra) si sommano comunque ai 169px dello slider. Dimezzato anche questo. */
#home .event-two {
    padding-top: 45px;
}

@media (max-width: 767px) {
    #home .event-two {
        padding-top: 30px;
    }
}

/* I 45px di padding-top qui sotto erano rimasti fermi al primo giro di
   riduzione (2026-09-10) mentre il valore desktop qui sopra veniva ridotto
   altre due volte lo stesso giorno (2026-09-25, da 60 a 30 a 10px): sotto i
   991px finiva per essere PIU' largo di quello desktop, ed essendo lo
   schermo piu' piccolo si notava ancora di piu' (segnalato da Marco,
   2026-09-25: "soprattutto su mobile mi sembra esagerato"). Riallineato
   allo stesso 10px del desktop. */
@media (max-width: 991px) {
    #home .cv-prossimi {
        padding-top: 10px;
        padding-bottom: 40px;
    }

    #home .cv-prossimi .event-one__content-inner {
        padding-left: 36px;
        padding-right: 36px;
    }
}

/* --------------------------------------------------------------------------
   CALENDARIETTO EVENTI (homepage, accanto a "Gli eventi in arrivo")
   Componente indipendente da App Connect - vedi assets/js/cv-calendario.js -
   perche' App Connect non genera nativamente una griglia mese-per-mese.
   -------------------------------------------------------------------------- */
#home .cv-calendario-col {
    margin-bottom: 40px;
}

@media (min-width: 992px) {
    #home .cv-calendario-col {
        margin-bottom: 0;
    }
}

#home .cv-calendario {
    max-width: 360px;
    margin: 0 auto;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, .08);
    padding: 24px 20px;
}

@media (min-width: 992px) {
    #home .cv-calendario {
        max-width: none;
    }
}

#home .cv-cal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

#home .cv-cal-titolo {
    font-size: 16px;
    font-weight: 700;
    text-transform: capitalize;
    color: #16171b;
}

#home .cv-cal-nav {
    width: 30px;
    height: 30px;
    line-height: 28px;
    padding: 0;
    border: 1px solid #e7e7e7;
    border-radius: 50%;
    background: #fff;
    color: #3d7d4c;
    font-size: 18px;
    cursor: pointer;
}

#home .cv-cal-nav:hover {
    background: var(--thm-base);
    border-color: var(--thm-base);
    color: #fff;
}

#home .cv-cal-settimana,
#home .cv-cal-griglia {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    text-align: center;
}

#home .cv-cal-settimana {
    margin-bottom: 6px;
}

/* Un po' di respiro in piu' tra le righe della griglia (rispetto ai 4px
   condivisi con .cv-cal-settimana qui sopra), per lasciare posto alla
   scritta "Oggi" sotto il giorno corrente qualunque sia la riga in cui cade. */
#home .cv-cal-griglia {
    row-gap: 13px;
}

#home .cv-cal-settimana span {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: #8a8a8a;
}

#home .cv-cal-giorno {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    border: none;
    background: transparent;
    border-radius: 50%;
    font-size: 13px;
    color: #4a4a4a;
}

#home .cv-cal-giorno--vuoto {
    visibility: hidden;
}

#home .cv-cal-giorno--oggi {
    position: relative;
    border: 1px solid var(--thm-base);
    font-weight: 700;
}

/* Piccola scritta "Oggi" sotto il giorno corrente. Su ::before (non ::after,
   che e' gia' usato dal fumetto del tooltip qui sotto quando il giorno ha
   anche un evento - i due pseudo-elementi cosi' non entrano mai in
   conflitto). Lo spazio in piu' tra le righe (row-gap sulla griglia, vedi
   sotto) evita che si sovrapponga alla riga successiva, qualunque sia la
   settimana in cui cade oggi. */
#home .cv-cal-giorno--oggi::before {
    content: "Oggi";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 2px;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--thm-base);
    line-height: 1;
    white-space: nowrap;
}

#home button.cv-cal-giorno--evento {
    position: relative;
    background: #e8f4ea;
    color: #3d7d4c;
    font-weight: 700;
    cursor: pointer;
}

#home button.cv-cal-giorno--evento:hover,
#home button.cv-cal-giorno--evento.cv-cal-giorno--selezionato {
    background: var(--thm-base);
    color: #fff;
}

/* Tooltip col titolo dell'evento al passaggio del mouse (o focus da tastiera)
   su un giorno cliccabile. Puro CSS, nessuna dipendenza da Bootstrap tooltip/
   Popper, coerente con l'approccio "componente indipendente" del calendarietto.
   Il titolo arriva dall'attributo data-titolo scritto da cv-calendario.js
   (piu' eventi lo stesso giorno separati da "•"). */
#home button.cv-cal-giorno--evento::after {
    content: attr(data-titolo);
    position: absolute;
    bottom: calc(100% + 11px);
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    max-width: 220px;
    padding: 6px 10px;
    background: #16171b;
    color: #fff;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.3;
    text-align: center;
    border-radius: 4px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .15s ease;
    z-index: 20;
}

#home button.cv-cal-giorno--evento:hover::after,
#home button.cv-cal-giorno--evento:focus-visible::after {
    opacity: 1;
    visibility: visible;
}

/* 2026-09-07: il pannello con solo i titoli sotto il calendario e' stato
   sostituito dal riquadro di dettaglio a destra (stesse card di "Gli eventi
   in arrivo") - vedi .cv-calendario-dettaglio-col qui sotto. */

/* Cliccando un giorno con evento, il riquadro di dettaglio (sempre presente
   nel DOM, popolato da cv-calendario.js) prende il posto della griglia delle
   card generate da App Connect (#repeat_prossimi) - non si toccano mai gli
   elementi che App Connect possiede, si nasconde solo la colonna via CSS. */
#home .cv-prossimi-riga.cv-giorno-selezionato > .col-lg-8:not(.cv-calendario-dettaglio-col) {
    display: none;
}

#home .cv-calendario-dettaglio-col .event-one__single {
    height: 100%;
}

#home .cv-cal-errore {
    font-size: 13px;
    color: #8a8a8a;
    text-align: center;
    margin: 20px 0;
}

/* --------------------------------------------------------------------------
   Titoli di sezione centrati (.block-title.text-center)
   Il tema stacca il titolo dal contenuto con 47px, pensati per la coppia
   occhiello + titolo. Con il solo <h3> da 45px il respiro sotto risulta
   scarso e il titolo sembra appiccicato alle schede. Portato a 70px.
   Toccati solo i titoli CENTRATI, cioe' le testate di sezione: quelli
   .text-left stanno dentro una colonna di testo, dove 47px vanno bene.
   -------------------------------------------------------------------------- */
.block-title.text-center {
    padding-bottom: 70px;
}

@media (max-width: 767px) {
    .block-title.text-center {
        padding-bottom: 45px;
    }
}

/* --------------------------------------------------------------------------
   Sezioni "service-one" delle pagine interne (.service-one__service-page:
   cosa-facciamo, organigramma x2, sostienici)
   Il tema le stacca con 150px sopra e 90px sotto, misura pensata per una
   sezione che occupa da sola tutta la finestra. Qui sono blocchi corti di
   poche schede, e restavano galleggianti in mezzo al vuoto.
   La variante della homepage (.service-one__home-one) non e' toccata.
   -------------------------------------------------------------------------- */
.service-one__service-page {
    padding-top: 90px;
    padding-bottom: 60px;
}

/* Su organigramma due sezioni identiche si susseguono (Consiglio e Revisori):
   fra loro c'erano 240px di vuoto sullo stesso fondo verdino, che leggevano
   come una fascia spenta invece che come due gruppi vicini. Il ricciolo
   decorativo di .service-one::after e' dello stesso #f0f7f7, quindi
   avvicinandole non si vede alcuno stacco. */
.service-one__service-page + .service-one__service-page {
    padding-top: 30px;
}

@media (max-width: 767px) {
    .service-one__service-page {
        padding-top: 60px;
        padding-bottom: 40px;
    }

    .service-one__service-page + .service-one__service-page {
        padding-top: 20px;
    }
}

/* --------------------------------------------------------------------------
   LINK UTILI - griglia dei loghi degli enti, in fondo alla homepage
   Il tema Oberlin non ha un blocco "partner/brand": questo e' fatto su misura.
   Griglia ferma, loghi a colori, nessun carosello: si leggono tutti insieme.
   I file stanno in assets/images/link-utili/ e sono JPG quadrati 130x130 con
   lo sfondo gia' dentro l'immagine (non PNG trasparenti): due hanno il fondo
   azzurro, gli altri bianco. Per questo ogni logo sta in una piastrella
   bianca bordata e arrotondata, che uniforma i fondi diversi e fa sembrare
   voluto anche l'azzurro.
   -------------------------------------------------------------------------- */
.cv-link-utili {
    padding-top: 80px;
    padding-bottom: 80px;
    background-color: #f4f8f9;
}

/* Colonne fissate per fascia invece di auto-fit: con 11 loghi l'auto-fit
   lasciava ultime righe spaiate a seconda della larghezza. */
/* Flex e non grid: con 11 loghi la griglia lasciava l'ultima riga incollata
   a sinistra, mentre flex-wrap + justify-content:center la centra da sola,
   qualunque sia il numero di loghi. Le piastrelle sono a larghezza fissa
   perche' i file sono tutti 130x130 nativi: allargarle non aggiungerebbe
   nulla, li sgranerebbe soltanto. */
.cv-link-utili__grid {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 22px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* 130px e' la dimensione nativa dei file. Altezza fissa invece di
   aspect-ratio, che su browser vecchi collasserebbe la piastrella. */
.cv-link-utili__link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 130px;
    height: 130px;
    padding: 6px;
    background: #fff;
    border: 1px solid #e4ecef;
    border-radius: 12px;
    overflow: hidden;
    transition: transform 300ms ease, box-shadow 300ms ease, border-color 300ms ease;
}

/* Selettore su "a": finche' i loghi sono <span> non cliccabili l'effetto
   al passaggio del mouse resta spento, e si accende da solo quando
   diventeranno collegamenti. */
a.cv-link-utili__link:hover {
    transform: translateY(-4px);
    border-color: #cfe0e4;
    box-shadow: 0 10px 22px rgba(8, 16, 36, .10);
}

.cv-link-utili__link>img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

@media (max-width: 767px) {
    .cv-link-utili {
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .cv-link-utili__grid {
        gap: 14px;
    }

    .cv-link-utili__link {
        width: 100px;
        height: 100px;
        padding: 4px;
    }
}

/* --------------------------------------------------------------------------
   Sezione "service-one" della homepage (.service-one__home-one, "C'e' bisogno
   anche di te!"). Il tema le da' 150px sopra e 140px sotto: sommati ai 150px
   delle sezioni vicine diventavano fasce vuote larghe come mezzo schermo.
   Portata a 90/80, in linea con .service-one__service-page delle pagine
   interne (90/60), un filo piu' generosa perche' qui sotto c'e' il carosello.
   Sotto i 480px responsive.css imponeva 100/100: rimesso in riga anche li'.
   -------------------------------------------------------------------------- */
.service-one__home-one {
    padding-top: 90px;
    padding-bottom: 80px;
}

@media (max-width: 767px) {
    .service-one__home-one {
        padding-top: 60px;
        padding-bottom: 50px;
    }
}

@media (max-width: 480px) {
    .service-one__home-one {
        padding-top: 60px;
        padding-bottom: 50px;
    }
}

/* ===================================================================
   STRUTTURA DEI TITOLI  -  28 agosto 2026
   Il tema Oberlin non usava nessun h1: il titolo di pagina era un h2
   e i titoli di sezione degli h3. I tag sono stati alzati di un
   livello, cosi' ogni pagina ha un h1 solo e la scaletta e' corretta.
   Le regole qui sotto sono le stesse del tema riscritte per il nuovo
   tag: l'aspetto non cambia. Se un giorno si aggiorna il tema, questo
   blocco va tenuto.
   =================================================================== */

/* Titolo per i soli lettori di schermo e per i motori di ricerca.
   Serve in homepage: li' il titolo visibile sta dentro il carosello e
   cambia a ogni slide, quindi non puo' fare da h1. Non e' testo
   nascosto agli utenti: chi naviga con un lettore di schermo lo sente,
   ed e' coerente con il contenuto della pagina. */
.cv-solo-lettori {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* era .page-header h2 */
.page-header h1 {
    margin: 0;
    color: #fff;
    font-weight: 700;
    font-size: 45px;
    line-height: 1em;
    margin-bottom: 15px;
}

/* spaziature fra l'occhiello e il titolo, erano su p+h3 */
.block-title p + h2 {
    margin-top: 25px;
}

.block-title p.has-line + h2 {
    margin-top: 35px;
}

.testimonials-two__content .block-title p + h2 {
    margin-top: 33px;
}

/* era .block-title h3 */
.block-title h2 {
    margin: 0;
    color: var(--thm-black);
    font-size: 45px;
    font-weight: bold;
    line-height: 50px;
}

.contact-two__content .block-title h2 {
    color: #fff;
}

.history-one__content .block-title h2 {
    font-size: 30px;
    line-height: 1.2em;
}

.history-one__content .block-title p.has-line + h2 {
    margin-top: 15px;
}

.faq-one__block .block-title h2 {
    color: #fff;
}

.faq-three .faq-one__block .block-title h2 {
    color: var(--thm-black);
}

/* era .slider-one__content-inner h3 */
.slider-one__content-inner h2 {
    margin: 0;
    color: var(--thm-black);
    font-weight: bold;
    font-size: 38px;
    line-height: 42px;
    position: relative;
}

/* Titoli delle slide che vanno troppo spesso a capo (segnalato da Marco,
   2026-09-04): oltre a ridurre leggermente il font qui sopra (regola base,
   vale per tutte le larghezze e quindi aiuta anche da mobile), allarghiamo
   la scatola bianca e riduciamo il margine interno ai lati SOLO da tablet
   in su (min-width:626px, appena sopra il breakpoint 625px del tema): sotto
   quella soglia il tema riduce gia' apposta il padding a 30px (vedi
   responsive.css) e, siccome croceverde.css viene caricato dopo, una
   regola non condizionata qui vincerebbe comunque su quella: avrebbe
   tolto spazio da mobile invece di darne. */
@media (min-width: 626px) {
    .slider-one__content {
        max-width: 720px;
    }
    .slider-one__content-inner {
        padding-left: 50px;
        padding-right: 50px;
        /* Riquadro piu' basso (richiesto da Marco, 2026-09-04): meno
           spazio sopra/sotto al testo (il tema usa 85px/66px). */
        padding-top: 35px;
        padding-bottom: 22px;
    }
}

/* Il titolo continuava ad andare a capo troppo presto anche dopo la
   sistemazione del 2026-09-04 qui sopra (segnalato di nuovo da Marco,
   2026-09-25): allarghiamo ulteriormente la scatola bianca e stringiamo
   un po' il padding laterale, cosi' la riga di testo disponibile passa da
   circa 620px a circa 740px (+120px, quasi un 20% in piu') senza dover
   rimpicciolire ancora il font. Stessa soglia min-width:626px di sopra,
   per gli stessi motivi (sotto quella soglia comanda il breakpoint del
   tema a 625px). */
@media (min-width: 626px) {
    .slider-one__content {
        max-width: 820px;
    }
    .slider-one__content-inner {
        padding-left: 40px;
        padding-right: 40px;
    }
}

/* Fascia intermedia (tablet/telefoni grandi, sotto i 626px del tema ma sopra
   i 480px dove il tema stesso interviene): il font resta quello base (38px)
   ma il padding e' gia' quello stretto del tema (30px) - riduciamo ancora un
   po' il font qui, cosi' il titolo va a capo meno spesso anche in questa
   fascia. */
@media (max-width: 625px) {
    .slider-one__content-inner h2 {
        font-size: 32px;
        line-height: 1.15em;
    }

    /* Sotto i 626px .slider-one__content e' "width:100%" del tema (nessun
       max-width applicato finora), quindi il riquadro tocca da bordo a
       bordo della colonna: per restringerlo anche qui (richiesto da Marco,
       2026-09-04) serve un vincolo percentuale, non un px fisso, cosi'
       funziona a qualunque larghezza di telefono/tablet. Essendo allineato
       a destra (justify-content-end), si restringe "aprendo" la foto a
       sinistra. */
    .slider-one__content {
        max-width: 92%;
    }

    /* Riquadro piu' basso anche da mobile: qui il tema (responsive.css)
       parte gia' piu' stretto di suo (50px/33px) rispetto al desktop,
       riduciamo comunque un altro po'. */
    .slider-one__content-inner {
        padding-top: 18px;
        padding-bottom: 10px;
    }
}

@media (max-width: 1199px) {
    .appointment-one .block-title h2 br {
        display: none;
    }
}

@media (max-width: 767px) {
    .donation-one .block-title h2 br {
        display: none;
    }
}

@media (max-width: 480px) {
    .slider-one__content-inner h2 {
        font-size: 28px;
        line-height: 1.15em;
    }
}

/* ============================================================================
   PULSANTI DI CONDIVISIONE SOCIAL                                2026-09-03
   ----------------------------------------------------------------------------
   Un solo blocco .cv-condividi, identico in ogni pagina pubblica (statica o
   dinamica), sotto al contenuto principale. Il contenuto dei link lo scrive
   assets/js/theme.js al click (legge document.title e location.href), qui
   c'e' solo l'aspetto. Vedi [[croceverde-condivisione-social]] in memoria.
   ========================================================================== */
.cv-condividi {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 35px 0;
    padding-top: 25px;
    border-top: 1px solid #eaeef2;
}

.cv-condividi__etichetta {
    font-weight: 700;
    color: var(--thm-black);
    margin-right: 4px;
}

.cv-condividi__pulsante {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #f0f7f7;
    color: var(--thm-base);
    font-size: 15px;
    border: 0;
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}

.cv-condividi__pulsante:hover,
.cv-condividi__pulsante:focus {
    background: var(--thm-base);
    color: #fff;
}

.cv-condividi__pulsante--fatto,
.cv-condividi__pulsante--fatto:hover,
.cv-condividi__pulsante--fatto:focus {
    background: var(--thm-base);
    color: #fff;
}

/* Icona sopra le diciture "vuote" (nessun evento/foto/mezzo/documento ecc.),
   condivisa da tutte le pagine pubbliche con un elenco che puo' risultare
   vuoto - richiesta di Marco, 2026-09-08: "mettiamo sopra la scritta anche
   un'icona per accompagnare graficamente". Un solo blocco qui invece di
   ripeterlo in ogni pagina, perche' lo stile e' identico ovunque: cambia solo
   l'icona (fa-*) scelta caso per caso nell'HTML della pagina. */
.cv-stato-vuoto__icona {
    display: block;
    font-size: 40px;
    color: rgba(91, 178, 134, 0.45);
    margin-bottom: 15px;
}

/* --------------------------------------------------------------------------
   CORSI (2026-09-10)
   Il cliente ha chiesto una terza tipologia oltre a eventi e notizie. I corsi
   condividono lo spazio degli eventi (riquadro "Prossimi eventi e corsi" e
   calendarietto in homepage, elenco di eventi-notizie.aspx) e si distinguono
   solo per colore: verde = evento, ocra = corso.
   -------------------------------------------------------------------------- */

/* Etichetta di tipologia sulle schede. Le regole #home .cv-tipo* erano state
   tolte quando "Ultime notizie" ha smesso di contenere eventi: ora servono di
   nuovo, perche' il riquadro degli appuntamenti ospita due tipi diversi. */
#home .cv-tipo {
    margin: 0 0 8px;
}

#home .cv-tipo__badge {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    padding: 3px 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    border-radius: 11px;
}

#home .cv-tipo__badge--evento,
#eventi .cv-tipo__badge--evento {
    background: #e8f4ea;
    color: #3d7d4c;
}

#home .cv-tipo__badge--corso,
#eventi .cv-tipo__badge--corso {
    background: #fdf1e3;
    color: #96601c;
}

#home .cv-tipo__badge--news,
#eventi .cv-tipo__badge--news {
    background: #eaf1fb;
    color: #2f5f9e;
}

/* Calendarietto: il giorno resta cliccabile grazie a --evento (click, tooltip,
   cursore), i modificatori qui sotto cambiano solo il colore. Devono stare
   DOPO le regole di --evento per vincere a parita' di specificita'. */
#home button.cv-cal-giorno--corso {
    background: #fdf1e3;
    color: #96601c;
}

#home button.cv-cal-giorno--corso:hover,
#home button.cv-cal-giorno--corso.cv-cal-giorno--selezionato {
    background: #b8781f;
    color: #fff;
}

/* Giorno con eventi E corsi insieme: mezzo e mezzo, in diagonale. */
#home button.cv-cal-giorno--misto {
    background: linear-gradient(135deg, #e8f4ea 0 50%, #fdf1e3 50% 100%);
    color: #3d7d4c;
}

#home button.cv-cal-giorno--misto:hover,
#home button.cv-cal-giorno--misto.cv-cal-giorno--selezionato {
    background: var(--thm-base);
    color: #fff;
}

/* --------------------------------------------------------------------------
   Allineamento in alto delle schede affiancate (2026-09-10)
   Marco: "i contenuti dei box non sono allineati in alto, EVENTO non e' alla
   stessa altezza di CORSO".
   L'altezza stava sull'IMMAGINE (.cv-copertina). Basta che una foto sfugga a
   quella regola - non si carica, arriva con una classe diversa, e' costruita
   dal JS del calendario - perche' la sua altezza torni quella naturale, il
   riquadro bianco scivoli e i due badge finiscano a quote diverse. Riprodotto
   in laboratorio: 24px di scarto.
   Rimedio: l'altezza va sul CONTENITORE, e qualunque immagine ci stia dentro
   lo riempie. Cosi' due schede partono sempre alla stessa quota, comunque vada
   con le immagini.
   -------------------------------------------------------------------------- */
#home .cv-prossimi .event-one__image {
    height: 230px;
}

#home .cv-prossimi .event-one__image > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 767px) {
    #home .cv-prossimi .event-one__image {
        height: 200px;
    }
}

/* --------------------------------------------------------------------------
   Filigrana del tema al passaggio del mouse sui box "Sostienici / Servizio
   Civile Nazionale / Diventa un volontario / In caso di emergenza" in
   homepage (2026-09-25, segnalato da Marco).
   .service-one__carousel-two .service-one__content ha di serie (style.css,
   riga ~7036) uno sfondo decorativo assets/images/svgs/service-shape-1-1.svg,
   sempre presente ma invisibile a riposo perche' l'icona e' chiara su sfondo
   bianco. Al passaggio del mouse lo sfondo della card diventa rosso
   (.service-one__carousel-two .service-one__single:hover .service-one__content,
   sempre in style.css) e la stessa icona, chiara, diventa visibile sopra il
   rosso: e' quella la "filigrana" segnalata da Marco.
   Rimedio: tolta l'immagine di sfondo. Non era mai visibile a riposo, quindi
   nessun effetto sull'aspetto normale della card, solo sull'hover.
   -------------------------------------------------------------------------- */
.service-one__carousel-two .service-one__content {
    background-image: none;
}

/* --------------------------------------------------------------------------
   Box scorrevoli della homepage (Sostienici, Servizio Civile, Diventa un
   volontario, In caso di emergenza): tutto il riquadro e' cliccabile
   (2026-10-02). Il link del titolo si estende con un ::after su tutta la card
   (.service-one__content ha gia' position:relative nel tema).
   -------------------------------------------------------------------------- */
.service-one__carousel-two .service-one__content h3 a::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
}

.service-one__carousel-two .service-one__single {
    cursor: pointer;
}


/* Fascia certificazione ISO 9001:2015 in homepage (2026-10-05) */
/* Homepage: il tema stacca .about-three dalla sezione dopo con 150px di
   padding-bottom; seguita dalla fascia ISO resterebbe un buco di ~190px
   (2026-10-07, richiesta di Marco: "ridurre notevolmente"). */
#home .about-three { padding-bottom: 30px; }
.cv-iso-home { padding: 15px 0 20px; }
.cv-iso-home__box { display: flex; align-items: center; gap: 32px; padding: 26px 34px; background: #f4f8f6; border-left: 6px solid #6AB978; border-radius: 12px; color: #1d2c40; text-decoration: none; box-shadow: 0 4px 16px rgba(0, 0, 0, .06); transition: box-shadow .25s ease, transform .25s ease; }
.cv-iso-home__box:hover { box-shadow: 0 10px 28px rgba(0, 0, 0, .12); transform: translateY(-2px); color: #1d2c40; }
.cv-iso-home__icona { flex: 0 0 auto; line-height: 0; }
/* marchio ACCREDIA, logoCert.png (2026-10-07): 120px, in risalto su richiesta di Marco */
.cv-iso-home__icona img { display: block; width: 120px; height: auto; border-radius: 50%; background: #fff; box-shadow: 0 6px 18px rgba(0, 0, 0, .14); }
.cv-iso-home__testo { flex: 1 1 auto; display: block; font-size: 17px; }
.cv-iso-home__testo strong { display: block; font-size: 24px; margin-bottom: 6px; color: #3d7d4c; }
.cv-iso-home__freccia { flex: 0 0 auto; font-size: 26px; color: #6AB978; }
@media (max-width: 767px) { .cv-iso-home__box { flex-direction: column; text-align: center; gap: 16px; padding: 24px 20px; } .cv-iso-home__icona img { width: 100px; } .cv-iso-home__testo strong { font-size: 21px; } .cv-iso-home__freccia { display: none; } }