@charset "UTF-8";

/* @import "print.css";
@import "sponsor.css"; */

:root {
  --base1: #EA3E5C;
  --base2: #00ACBA;
  --bg: #e9e9e9;
}


/* TESTATA */

#sp-title {background-image: linear-gradient(45deg, var(--base1) 0%, var(--bg) 100%);}

#sp-header > .container {
  max-width: 1320px !important;
}

.offcanvas-menu .offcanvas-inner .sp-contact-info {
  font-size: inherit !important;
}

.offcanvas-menu .social-icons {font-size: 1.6rem !important;}

.sp-megamenu-parent > li > a, .sp-megamenu-parent > li > span, .sp-megamenu-parent .sp-dropdown li.sp-menu-item > a {
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #000000;
  line-height: 1.5;
  text-decoration: none;
}

.scroller-widget p {font-family: 'Campton Bold' !important;}
/* ==========================================================================
   CAMBIO COLORE LOGO (BIANCO IN CIMA, NERO ALLO SCROLL)
   ========================================================================== */

/* 1. Rendiamo il passaggio di colore morbido e fluido */
#sp-header .logo-image {
    transition: filter 0.3s ease;
}

/* 2. Quando l'header NON è sticky (siamo in cima alla pagina) inverte il nero in bianco */
#sp-header:not(.header-sticky) .logo-image {
    filter: invert(1) brightness(100) !important; 
    /* brightness(100) assicura che il bianco sia puro e brillante */
}

/* 3. Quando l'header diventa sticky (durante lo scroll) togliamo il filtro */
#sp-header.header-sticky .logo-image {
    filter: none;
}


/* ==========================================================================
   ALLINEAMENTO CONTENUTO SLIDER (VERSO IL BASSO)
   ========================================================================== */

/* Spostiamo il contenuto (titolo e bottone) in basso */
.sp-slider-content-align-center {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important; /* Spinge tutto verso il basso */
    align-items: center !important; /* Mantiene il testo centrato orizzontalmente */
    height: 100% !important; /* Assicura che il contenitore occupi tutta l'altezza della slide */
    
    /* Spazio dal bordo inferiore. 
       Aumentalo se il testo copre i pallini di navigazione (es. 150px) */
    padding-bottom: 220px !important; 
}

/* Assicuriamoci che i contenitori genitori trasmettano l'altezza corretta */
.sppb-addon-sp-slider .sppb-container,
.sppb-addon-sp-slider .sppb-row,
.sppb-addon-sp-slider .sppb-col-sm-12 {
    height: 100% !important;
}

/* ==========================================================================
   STILE TESTO SLIDER E LEGGIBILITÀ
   ========================================================================== */

/* Titolo bianco con ombra per leggibilità perfetta su sfondi chiari o foto */
.sppb-sp-slider-title {
    color: #ffffff !important;
    /* Un'ombra doppia: la prima definisce i contorni, la seconda crea un alone scuro di fondo */
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.8), 0px 0px 25px rgba(0, 0, 0, 0.6) !important;
    text-align: center;
}


/* ==========================================================================
   STILE BOTTONE SLIDER (Bianco, arrotondato e largo)
   ========================================================================== */

.sppb-sp-slider-button .sp-slider-btn-text {
    color: #000000 !important;          /* Scritta nera */
    background-color: #ffffff !important; /* Sfondo bianco */
    border-radius: 50px !important;     /* Bordo arrotondato stile "pillola" */
    
    /* Il padding regola le dimensioni: 12px sopra/sotto, 45px a destra/sinistra */
    padding: 12px 45px !important;      
    
    font-size: 16px !important;
    font-weight: bold !important;       /* Grassetto opzionale per renderlo più leggibile */
    display: inline-block !important;   
    transition: all 0.3s ease;
}

/* Un piccolo effetto quando ci passi sopra con il mouse (opzionale ma consigliato) */
.sppb-sp-slider-button:hover .sp-slider-btn-text {
    background-color: #f0f0f0 !important; /* Diventa un bianco leggermente grigio */
    transform: scale(1.05); /* Si ingrandisce appena */
}


/* ==========================================================================
   RESPONSIVE SLIDER: ALLINEAMENTO IN ALTO SU SMARTPHONE
   ========================================================================== */

@media (max-width: 767px) {

    
    /* Su mobile rimpiccioliamo leggermente l'ombra del titolo per non "sporcare" troppo lo schermo piccolo */
    .sppb-sp-slider-title {
        text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.8) !important;
    }
}

@media (max-width: 991.98px) {
  #sppb-addon-wrapper-c1a826d8-b8af-44a9-bd73-01da145685f4 {
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 368px !important;
    margin-left: 0px;
  }
}


/* FOOTER */
@media (min-width: 767px) {
.creative-home #sp-footer #sp-footer1 {
  width: 40% !important;
}
}

/* ==========================================================================
   STACCO ELEGANTE DEL FOOTER
   ========================================================================== */

#sp-footer {
    padding-top: 100px !important; /* Il tuo ottimo spazio di respiro */
	margin-top: 100px !important;
    position: relative;
    
    /* Assicurati che il footer abbia un colore di fondo solido, 
       altrimenti l'ombra non farà contrasto. Modificalo se il tuo footer è scuro */
    background-color: #ffffff; 
    
    /* 1. LINEA DI ACCENTO: Uno stacco netto e colorato */
    border-top: 4px solid var(--color-secondary);
    
    /* 2. EFFETTO 3D: Un'ombra leggerissima proiettata verso l'alto */
    /* I valori sono: spostamento-X spostamento-Y(negativo=su) sfocatura colore(con trasparenza al 4%) */
    box-shadow: 0 -15px 40px rgba(0, 0, 0, 0.04);
}

/* ==========================================================================
   PERSONALIZZAZIONE FOOTER
   ========================================================================== */

/* 1. Allineamento verticale tra la colonna del logo e quella dei testi */
#sp-footer .row {
    display: flex;
    align-items: center !important; /* Centra verticalmente gli elementi delle due colonne */
    flex-wrap: wrap; /* Mantiene la compatibilità per schermi piccoli */
}

/* 2. Layout colonna destra (Contatti, Social, Copyright) */
#sp-footer2 .sp-column {
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* Spinge tutto il contenuto verso destra */
    justify-content: center;
    text-align: right;
    font-size: 16px; /* Dimensione base a 16px, il font-family viene ereditato dal body */
    gap: 15px; /* Crea uno spazio ordinato tra contatti, social e copyright */
}

/* Rimuoviamo i pallini e i margini di default dalle liste nel footer */
#sp-footer2 ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* 3. Stile informazioni di contatto (telefono e mail) */
.sp-contact-info {
    display: flex;
    flex-direction: column; /* Mette telefono ed email su due righe. Usa 'row' se li vuoi affiancati */
    gap: 8px;
}

.sp-contact-info li a {
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.sp-contact-info li a:hover {
    opacity: 0.7; /* Piccolo effetto al passaggio del mouse */
}

/* 4. Stile barra dei Social */
.social-icons {
    display: flex;
    gap: 20px; /* Distanza tra un'icona social e l'altra */
    align-items: center;
}

/* Ingrandimento specifico per le icone social a 1.6rem */
.social-icons li a span {
    font-size: 1.6rem; 
    transition: transform 0.3s ease, color 0.3s ease;
}

.social-icons li a:hover span {
    transform: scale(1.1); /* Piccolo effetto di ingrandimento al passaggio del mouse */
}

/* 5. Stile del Copyright */
.sp-copyright {
    font-size: 16px; 
    color: inherit; 
    opacity: 0.8; /* Rende il copyright leggermente più delicato visivamente */
}

/* ==========================================================================
   MEDIA QUERIES FOOTER (PER CELLULARI E TABLET)
   ========================================================================== */
@media (max-width: 991px) {
    #sp-footer2 .sp-column {
        align-items: center; /* Su schermi piccoli, allinea tutto al centro anziché a destra */
        text-align: center;
        margin-top: 30px; /* Crea spazio sotto al logo quando le colonne si impilano */
    }
    
    .sp-contact-info {
        align-items: center;
    }
}

/* ==========================================================================
   OFFSET PER SOMMARIO STATUTO (COMPENSAZIONE MENÙ STICKY)
   ========================================================================== */

.sppb-addon-content h4[id] {
    scroll-margin-top: 120px !important; 
}

/* Opzionale: se non hai già lo scorrimento fluido sul sito, 
   questo rende l'effetto molto più elegante al click */
html {
    scroll-behavior: smooth;
}




/* STORIA */

.sppb-addon-timeline .sppb-addon-timeline-wrapper .timeline-movement .timeline-item .timeline-panel .details {font-size: inherit !important;}


/* ==========================================================================
   1. IMPORTAZIONE DEI FONT LOCALI (@font-face)
   ========================================================================== */

/* Campton Bold Demo per i Titoli */
@font-face {
    font-family: 'Campton Bold';
    src: url('../fonts/camptonbold-webfont.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap; /* Aiuta a caricare il sito più velocemente */
}

/* Roboto Regular per il testo normale */
@font-face {
    font-family: 'Roboto';
    src: url('../fonts/roboto-regular-webfont.woff') format('woff');
    font-weight: normal; /* equivalente a 400 */
    font-style: normal;
    font-display: swap;
}

/* Roboto Light */
@font-face {
    font-family: 'Roboto';
    src: url('../fonts/roboto-light-webfont.woff') format('woff');
    font-weight: 300; /* 300 indica il peso 'Light' */
    font-style: normal;
    font-display: swap;
}

/* Roboto Italic */
@font-face {
    font-family: 'Roboto';
    src: url('../fonts/roboto-italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

/* Roboto Light Italic */
@font-face {
    font-family: 'Roboto';
    src: url('../fonts/roboto-lightitalic-webfont.woff') format('woff');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

/* ==========================================================================
   2. ASSEGNAZIONE DEI FONT E DELLE DIMENSIONI
   ========================================================================== */

body {
    font-family: 'Roboto', sans-serif !important;
}



/* Assegnazione font a tutti i titoli */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Campton Bold', sans-serif;
    font-weight: bold;
    margin-bottom: 0.5em; /* Spazio sotto ogni titolo */
}

/* Dimensioni specifiche dei titoli */
/* Nota: uso l'unità di misura "rem" perché è elastica e si adatta meglio ai dispositivi mobili. 
   1rem equivale alla dimensione base del body (16px). Quindi 2rem = 32px. */

h1 {
    font-size: 2.5rem; /* ~40px */
}

h2 {
    font-size: 2rem;   /* ~32px */
}

h3 {
    font-size: 1.75rem; /* ~28px */
}

h4 {
    font-size: 1.5rem;  /* ~24px */
}

h5 {
    font-size: 1.25rem; /* ~20px */
}

h6 {
    font-size: 1rem;    /* ~16px */
}

/* ==========================================================================
   3. MEDIA QUERIES (Adattamento dei font per dispositivi mobili)
   ========================================================================== */

/* Questa regola si attiva solo su schermi larghi 767px o meno (smartphone) */
@media (max-width: 767px) {
    
    /* Il testo normale a 16px (1rem) va benissimo sui cellulari per la leggibilità.
       Andiamo invece a rimpicciolire i titoli per fare spazio. */

    h1 {
        font-size: 2rem; /* ~32px (ridotto da 40px) */
    }

    h2 {
        font-size: 1.625rem; /* ~26px (ridotto da 32px) */
    }

    h3 {
        font-size: 1.375rem; /* ~22px (ridotto da 28px) */
    }

    h4 {
        font-size: 1.25rem; /* ~20px (ridotto da 24px) */
    }

    h5 {
        font-size: 1.125rem; /* ~18px (ridotto da 20px) */
    }

    h6 {
        font-size: 1rem; /* ~16px (rimane uguale, per non confondersi con il testo normale) */
    }
}


/* EDIZIONI */
/* ==========================================================================
   4. STILE LISTA EDIZIONI E COPERTINE (VERSIONE PULITA E DEFINITIVA)
   ========================================================================== */

/* 1. Contenitore principale (affianca copertina e descrizione) */
.edizioni .sppb-dynamic-content-collection__item {
    display: flex;
    flex-direction: row;
    align-items: stretch !important; /* FONDAMENTALE: le colonne diventano alte uguali */
    gap: 30px;
    margin-bottom: 40px;
    padding: 20px;
    background-color: #ffffff;
    border: 1px solid #eeeeee;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
}

/* --- COLONNA 1: COPERTINA --- */
.edizioni .sppb-dynamic-content-collection__item > .sppb-addon-wrapper:first-child {
    flex: 0 0 150px;
    max-width: 150px;
}

.edizioni .copertina img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 2 / 3;
    object-fit: cover !important;
    border-radius: 4px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

/* --- COLONNA 2: DESCRIZIONE --- */

/* Il wrapper invisibile di SP Page Builder: deve trasmettere l'altezza! */
.edizioni .sppb-dynamic-content-collection__item > .sppb-addon-wrapper:last-child {
    flex: 1;
    display: flex; /* Trasformiamo anche questo in un contenitore flessibile */
    flex-direction: column;
}

/* La tua classe descrizione */
.edizioni .descrizione {
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Si espande riempiendo tutta l'altezza fornita dalla copertina */
    width: 100%;
}

.edizioni .descrizione h4 {
    margin-top: 0;
    margin-bottom: 15px;
}


/* ==========================================================================
   5. ETICHETTE DINAMICHE E BOTTONE
   ========================================================================== */

/* Nascondi il blocco se il campo è vuoto */
.edizioni .autore:empty, 
.edizioni .editore:empty {
    display: none !important;
}

/* Aggiungi il testo "Autore: " e "Editore: " */
.edizioni .autore::before {
    content: "Autore: ";
    font-weight: bold;
    color: #333333;
}

.edizioni .editore::before {
    content: "Editore: ";
    font-weight: bold;
    color: #333333;
}

.edizioni .autore, 
.edizioni .editore {
    margin-bottom: 5px;
    font-size: 0.95rem;
}

/* TRUCCO PER IL BOTTONE IN BASSO */
/* Ora che la .descrizione si allunga correttamente, possiamo spingere giù l'ultimo elemento! */
/* 1. Il wrapper nascosto di SP Page Builder deve diventare elastico */
.edizioni .sppb-dynamic-content-collection__item > .sppb-addon-wrapper:last-child {
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
}

/* 2. La tua classe descrizione deve occupare tutta l'altezza disponibile */
.edizioni .descrizione {
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
    height: 100% !important;
}

/* 3. L'ottimo suggerimento: margin-block-start per spingere giù l'ultimo elemento! */
.edizioni .descrizione > .sppb-addon-wrapper:last-child {
    margin-block-start: auto !important; 
    margin-top: auto !important; /* Fallback di sicurezza per browser più vecchi */
    padding-top: 15px !important; 
}


/* ==========================================================================
   6. MEDIA QUERIES (SEMPRE IN FONDO AL FILE!)
   ========================================================================== */

@media (max-width: 767px) {
    .edizioni .sppb-dynamic-content-collection__item {
        flex-direction: column; 
        align-items: center !important; 
        text-align: center;
        gap: 15px; 
    }
    
    .edizioni .sppb-dynamic-content-collection__item > .sppb-addon-wrapper:first-child {
        flex: 1 1 auto;
        max-width: 100%;
    }

    .edizioni .copertina img {
        width: 180px !important; 
    }
    
    /* Disabilitiamo il margin-top automatico su mobile per evitare spazi vuoti strani */
    .edizioni .descrizione > .sppb-addon-wrapper:last-child {
        margin-top: 15px !important;
    }
}

/* ==========================================================================
   7. LAYOUT SCHEDA DETTAGLIO LIBRO (Corretto)
   ========================================================================== */

/* --- NASCONDI CAMPI VUOTI --- */
.edizioni .autore:empty, 
.edizioni .editore:empty,
.edizioni .pagine:empty,
.edizioni .uscita:empty,
.edizioni .dettaglio:empty {
    display: none !important;
}

/* --- ETICHETTE DINAMICHE --- */
.edizioni .autore::before { content: "Autore: "; font-weight: bold; color: #333333; }
.edizioni .editore::before { content: "Editore: "; font-weight: bold; color: #333333; }
.edizioni .pagine::before { content: "Pagine: "; font-weight: bold; color: #333333; }
.edizioni .uscita::before { content: "Data di uscita: "; font-weight: bold; color: #333333; }


/* --- GRUPPO 1: TITOLO, AUTORE, EDITORE --- */
.edizioni .titolo {
    margin-top: 0 !important;
    margin-bottom: 15px !important; /* Spazio sotto il titolo */
}

.edizioni .autore, 
.edizioni .editore {
    margin-bottom: 8px !important; /* Molto vicini tra loro */
    font-size: 1.1rem;
    color: #444444;
}


/* --- GRUPPO 2: INFO TECNICHE (LO STACCO EVIDENTE) --- */
/* Aggiungiamo una linea e molto spazio sopra le "pagine" per staccarle dall'editore */
.edizioni .pagine {
    margin-top: 35px !important; /* Lo stacco netto verso l'alto */
    padding-top: 20px !important; /* Spazio tra la linea e il testo */
    border-top: 1px solid #e0e0e0; /* Riga grigia elegante */
    margin-bottom: 8px !important;
    font-size: 0.95rem; /* Testo leggermente più piccolo per le info tecniche */
    color: #666666;
}

.edizioni .uscita {
    margin-bottom: 0 !important;
    font-size: 0.95rem;
    color: #666666;
}


/* --- GRUPPO 3: DETTAGLIO DEL LIBRO (ex Descrizione) --- */
/* Creiamo un altro stacco prima del testo lungo */
.edizioni .dettaglio {
    margin-top: 35px !important; /* Spazio sopra il dettaglio */
    padding-top: 25px !important; /* Spazio tra la linea e il paragrafo */
    border-top: 1px solid #e0e0e0; /* Seconda riga grigia per chiudere la scheda tecnica */
    line-height: 1.8; /* Migliora tantissimo la leggibilità dei testi lunghi */
    color: #333333;
}

/* --- GRUPPO 4: PREZZO --- */

/* Nascondiamo il blocco se il campo prezzo è vuoto */
.edizioni .prezzo:empty {
    display: none !important;
}

/* Anteponiamo il simbolo dell'Euro con uno spazio */
.edizioni .prezzo::before {
    content: "€ ";
    font-weight: bold;
}

/* Rendiamo il prezzo bello evidente e staccato dal resto */
.edizioni .prezzo {
    font-size: 1.5rem !important; /* Testo bello grande (circa 24px) */
    font-weight: bold !important; /* In grassetto */
}

/* ==========================================================================
   8. BOX COORDINATE BANCARIE MULTI-COPIA (Con bottoni Page Builder)
   ========================================================================== */

/* Il box principale */
.edizioni .coordinate-bancarie {
    background-color: #f8f9fa; 
    padding: 20px 25px;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    margin-top: 35px;
    margin-bottom: 35px;
}

/* Ogni singola riga */
.edizioni .riga-copia {
    display: flex;
    align-items: center;
    flex-wrap: wrap; 
    gap: 12px;
    padding-bottom: 15px;
    margin-bottom: 15px;
    border-bottom: 1px solid #eeeeee; 
}

.edizioni .riga-copia:last-child {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

/* Le etichette di testo */
.edizioni .etichetta-banca {
    font-weight: bold;
    color: #555555;
}

.edizioni .testo-extra {
    color: #666666;
    font-size: 0.95rem;
}

/* Il testo che verrà copiato */
.edizioni .valore-copia {
    background-color: #ffffff;
    padding: 5px 10px;
    border: 1px dashed #cccccc;
    border-radius: 4px;
    font-weight: bold;
    color: #111111;
}

.edizioni .iban-font {
    font-family: 'Courier New', Courier, monospace;
    letter-spacing: 1px;
}

/* --- CLASSE EXTRA PER IL BOTTONE PAGE BUILDER --- */
.edizioni .btn-copia-custom {
    margin-left: auto !important; /* Spinge il bottone tutto a destra */
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
}

/* Sovrascriviamo il colore di Page Builder SOLO quando viene cliccato con successo */
.edizioni .btn-copia-custom.copiato-successo {
    background-color: #07C971 !important; 
    color: #ffffff !important;
    border-color: #07C971 !important;
}

/* Il messaggio in basso */
.edizioni .messaggio-copia {
    color: #07C971;
    font-weight: bold;
    font-size: 0.95rem;
    margin-top: 15px;
    text-align: right;
}



/* VISIT BRESCIA */
@media (max-width: 767px) {
.image-layout-preset-style-overlap .sppb-image-layout-title {font-size: 32px;}
}



/* ==========================================================================
   ARCHIVIO EVENTI - STILE LISTA E LAYOUT
   ========================================================================== */

/* 1. Contenitore principale (affianca immagine e descrizione) */
.archivio-eventi .sppb-dynamic-content-collection__item {
    display: flex;
    flex-direction: row;
    align-items: stretch !important; /* Pareggia le altezze delle due colonne */
    gap: 30px;
    margin-bottom: 40px;
    padding: 20px;
    background-color: #ffffff;
    border: 1px solid #eeeeee;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
	width: 100%;
}

/* --- COLONNA 1: IMMAGINE DELL'EVENTO --- */
.archivio-eventi .sppb-dynamic-content-collection__item > .sppb-addon-wrapper:first-child {
    flex: 0 0 200px; /* Larghezza fissa per l'immagine dell'evento (modificala se serve) */
    max-width: 200px;
}

.archivio-eventi .immagine img {
    width: 100% !important;
    height: auto !important;
    /* aspect-ratio: 1 / 1; Se vuoi forzare le immagini quadrate, togli il commento a questa riga */
    object-fit: cover !important;
    border-radius: 4px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

/* --- COLONNA 2: DESCRIZIONE DELL'EVENTO --- */

/* Il wrapper di SP Page Builder deve trasmettere l'altezza alla descrizione */
.archivio-eventi .sppb-dynamic-content-collection__item > .sppb-addon-wrapper:last-child {
    flex: 1;
    display: flex !important;
    flex-direction: column !important;
}

/* Il tuo contenitore della descrizione evento */
.archivio-eventi .descrizione-evento {
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
    height: 100% !important;
    width: 100%;
}

/* Stili per il testo dell'evento (Titolo e Data) */
.archivio-eventi .descrizione-evento h2 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1.4rem; /* Dimensione del titolo dell'evento */
    color: #333333;
}

.archivio-eventi .descrizione-evento p {
    margin-bottom: 15px;
    color: #666666; /* Colore più tenue per la data */
    font-style: italic;
}

/* --- TRUCCO PER IL PULSANTE IN BASSO --- */
/* L'ultimo wrapper dentro la descrizione (che contiene il bottone) viene spinto in fondo */
.archivio-eventi .descrizione-evento > .sppb-addon-wrapper:last-child {
    margin-top: auto !important; 
    padding-top: 15px !important;
}


/* ==========================================================================
   MEDIA QUERIES PER DISPOSITIVI MOBILI
   ========================================================================== */

@media (max-width: 767px) {
    .archivio-eventi .sppb-dynamic-content-collection__item {
        flex-direction: column; 
        align-items: center !important; 
        text-align: center;
        gap: 20px; 
    }
    
    .archivio-eventi .sppb-dynamic-content-collection__item > .sppb-addon-wrapper:first-child {
        flex: 1 1 auto;
        max-width: 100%;
    }

    .archivio-eventi .immagine img {
        width: 250px !important; /* Su mobile facciamo l'immagine un po' più grande */
    }
    
    /* Il bottone su mobile non ha bisogno di essere spinto forzatamente in fondo */
    .archivio-eventi .descrizione-evento > .sppb-addon-wrapper:last-child {
        margin-top: 20px !important;
    }
}
/* --- STILE PERSONALIZZATO PULSANTE "DETTAGLI" --- */
.archivio-eventi .descrizione-evento .sppb-btn {
    background-color: var(--bg) !important;
    color: var(--color-secondary) !important;
    border-color: var(--bg) !important; /* Allineiamo il bordo allo sfondo */
    transition: all 0.3s ease; /* Rende morbido l'effetto al passaggio del mouse */
}

/* Effetto al passaggio del mouse (Hover) */
.archivio-eventi .descrizione-evento .sppb-btn:hover {
    opacity: 0.85 !important; /* Rende il bottone leggermente trasparente al passaggio del mouse */
    color: var(--color-secondary) !important; /* Mantiene il colore del testo */
}