body { margin: 0; font-family: 'Segoe UI', sans-serif; overflow-x: hidden; }
hr {
    border: 0;
    height: 1px;
    background: #eee;
    margin: 15px 0;
}    
    
    /* NAVBAR FISSA */
.navbar {
    position: fixed; top: 0; width: 100%; background-color: white;
    display: flex; flex-direction: column; /* Dispone gli elementi dall'alto in basso */
    z-index: 1000; box-shadow: 0 2px 10px rgba(0,0,0,0.15);
    height: auto; /* L'altezza ora si adatta al contenuto */
}
/* RIGA SUPERIORE */
.nav-top {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 30px; width: 100%; box-sizing: border-box;
}

/* RIGA INFERIORE (MENU) */
.nav-bottom {
    background-color: #002368; border-top: 1px solid #eee;
    display: flex; justify-content: center; padding: 10px 0;
}    
    .logo-container { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
    .logo-container img { height: 80px; border-radius: 4px; }

    /* Titolo centrale (nascosto su schermi piccoli) */
    .nav-title { font-size: 0.85rem; color:  #002368; max-width: 200px; text-align: center; font-weight: 500; }

    /* MENU LINKS */
    
    /* Allinea la Home a sinistra */
		.home-link {
    margin-right: auto; /* Questa è la riga magica! */
    margin-left: 0 !important;
}
    .nav-links { list-style: none; display: flex; margin: 0; padding: 0; }
    .nav-links li{ margin-left: 20px; }
    .nav-links a { color: white; text-decoration: none; font-weight: bold; font-size: 0.95rem; transition: 0.3s; }
    .nav-links a:hover { color: #3498db; }
		/* Responsive: su mobile la Home torna in colonna con gli altri */
		@media (max-width: 1024px) {
    .home-link {
        margin-right: 0;
        margin-bottom: 15px; /* Spazio sotto la home nel menu mobile */
    }
}    

    /* SOCIAL E HAMBURGER */
    .nav-right { display: flex; align-items: center; gap: 20px; }
    .nav-socials { display: flex; gap: 12px; border-left: 1px solid  #002368; padding-left: 15px; }
    .nav-socials a { color:  #002368; font-size: 1.1rem; }

    /* ICONA HAMBURGER (nascosta di default) */
    .menu-toggle { display: none; font-size: 1.8rem; cursor: pointer; color: #216ecc; }

    /* HERO SECTION */
		.hero {
		    margin-top: 160px; /* Spazio per la nuova navbar a due righe */
		    width: 100%;
		    position: relative;
		}

		.hero-image-container {
		    position: relative;
		    width: 100%;
		    line-height: 0; /* Rimuove spazi bianchi sotto l'immagine */
		}

		.hero-img {
		    width: 100%;
		    height: auto; /* Mantiene le proporzioni originali del banner */
		    display: block;
		}

		/* Se vuoi scrivere del testo SOPRA l'immagine */
		.hero-overlay-text {
		    position: absolute;
		    top: 50%;
		    left: 50%;
		    transform: translate(-50%, -50%);
		    text-align: center;
		    color: white;
		    text-shadow: 2px 2px 10px rgba(0,0,0,0.7);
		    width: 90%;
		}
/* Centra il testo e i loghi verticalmente */
.nav-title-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px; /* Spazio tra scritta e loghi */
    text-align: center;
    flex: 1; /* Permette alla sezione di occupare lo spazio centrale */
}

.title-text {
    font-size: 1.5rem;
    font-weight: 500;
    color: #002368;
}

/* Griglia per i 4 loghi */
.sub-logos {
    display: flex;
    justify-content: center;
    gap: 15px; /* Distanza tra i loghi */
}

.sub-logos img {
    height: 50px; /* Altezza contenuta per non ingigantire la navbar */
    width: auto;
    object-fit: contain;
}
		.hero-overlay-text h1 { font-size: 3rem; margin: 0; }
		/* Adattamento per schermi piccoli */
		@media (max-width: 768px) {
		    .hero { margin-top: 130px; }
		    .hero-overlay-text h1 { font-size: 1.8rem; }
		}
    /* RESPONSIVE: TABLET E SMARTPHONE */
		@media (max-width: 1024px) {
    .nav-bottom { display: none; } /* Nascondiamo la barra grigia su mobile */
    .nav-title-main { font-size: 0.9rem; }
    .nav-links {
        position: absolute; top: 100%; right: -100%; width: 100%; 
        height: calc(100vh - 100px); background: white; 
        flex-direction: column; align-items: center; justify-content: center;
    }
    .nav-links.active { right: 0; display: flex; }
}
				    /* STILE FOOTER */
				.footer {
				    background-color: #002368;
				    color: white;
				    padding: 40px 20px;
				    text-align: center;
				}
				.footer-container {
				    display: flex;
				    justify-content: space-around;
				    flex-wrap: wrap;
				    max-width: 1200px;
				    margin: 0 auto;
				}
				.footer-section h3 { margin-bottom: 15px; }
				.social-links a {
				    color: white;
				    font-size: 1.5rem;
				    margin: 0 10px;
				    transition: 0.3s;
				}
				.social-links a:hover { color: #3498db; }
				.footer-bottom {
				    margin-top: 20px;
				    border-top: 1px solid #555;
				    padding-top: 20px;
				    font-size: 0.8rem;
		}
/* Container principale */
.main-content {
    max-width: 1200px;
    margin: 50px auto;
    padding: 0 20px;
    text-align: center;
}

/* Titolo e testo introduttivo */
.intro-header {
    margin-bottom: 50px;
}
.intro-header h2 {
    color: #002A7E;
    font-size: 2.2rem;
    margin-bottom: 15px;
}
.intro-header p {
    font-size: 1.3rem;
    color: #555;
    max-width: 1000px;
    margin: auto;
    text-align: justify;
    margin-bottom: 25px; /* Puoi aumentare o diminuire questo valore (es. 30px o 40px) */
    line-height: 1.6;    /* Migliora la leggibilità dando respiro alle righe */
}
/* Rimuove lo spazio dall'ultimo paragrafo per non sbilanciare la sezione */
.intro-header p:last-child {
    margin-bottom: 0;
    hyphens: auto; /* attiva la sillabazione automatica*/
}

/* Griglia a 4 colonne */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
}

/* Singola Card (Stile simile a quello di prima) */
.feature-card {
    background: #fff;
    padding: 30px 20px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    border-bottom: 4px solid #002A7E; /* Barra colorata in basso */
    transition: transform 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-10px); /* Effetto sollevamento */
}

.feature-card i {
    font-size: 2.5rem;
    color: #216ecc;
    margin-bottom: 20px;
}

.feature-card h3 {
    color: #002A7E;
    margin-bottom: 15px;
    font-size: 1.3rem;
}

.feature-card p {
    font-size: 0.95rem;
    color: #666;
    line-height: 1.5;
    text-align: justify;
}

/* Responsive: su smartphone i box si incolonnano */
@media (max-width: 768px) {
    .intro-header h2 { font-size: 1.8rem; }
}
@media (max-width: 768px) {
    /* 1. Rendiamo la navbar flessibile in altezza */
    .navbar {
        position: relative; /* Cambia da fixed a relative per evitare sovrapposizioni iniziali */
        height: auto;
        display: block;
    }

    /* 2. Incolonniamo i loghi principali, i loghi piccoli e il menu */
    .nav-top {
        flex-direction: column; /* Gli elementi vanno uno sotto l'altro */
        padding: 15px;
        gap: 15px;
    }

    /* 3. Evitiamo che i loghi escano dallo schermo */
    .logo-container {
        justify-content: center;
        width: 100%;
    }
    .logo-container img {
        height: 50px; /* Riduciamo la dimensione su mobile */
        max-width: 45%; /* Due loghi affiancati */
    }

    /* 4. Il titolo occupa troppo spazio: lo rimpiccioliamo o nascondiamo */
    .title-text {
        font-size: 0.9rem;
        line-height: 1.2;
        margin-bottom: 10px;
    }

    /* 5. Le icone MobilityMed, ecc. devono stare su una riga o due */
    .sub-logos {
        flex-wrap: wrap; /* Se non ci stanno, vanno a capo */
        justify-content: center;
        gap: 10px;
    }
    .sub-logos img {
        height: 35px; /* Icone più piccole */
    }

    /* 6. Spostiamo l'hamburger in una posizione visibile */
    .nav-right {
        width: 100%;
        justify-content: center;
        padding-top: 10px;
        border-top: 1px solid #eee;
    }
    
    .menu-toggle {
        display: block !important; /* Forza la visibilità dell'hamburger */
    }

    /* 7. Sistemiamo il margine del banner (Hero) */
    .hero {
        margin-top: 0 !important; /* Poiché la navbar ora è 'relative', non serve il margine fisso */
    }
}
/* COOKIE BAR STILE */
.cookie-banner {
    position: fixed;
    bottom: -100px; /* Nasconde inizialmente */
    left: 0;
    width: 100%;
    background-color: rgba(0, 35, 104, 0.95); /* Blu EnergyMed leggermente trasparente */
    color: white;
    padding: 15px 20px;
    z-index: 9999;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.3);
    transition: bottom 0.5s ease;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cookie-banner.show {
    bottom: 0; /* Fa scivolare la barra verso l'alto */
}

.cookie-content {
    max-width: 1200px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.cookie-content p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.4;
}

.cookie-content a {
    color: #3498db;
    text-decoration: underline;
}

.cookie-btn {
    background-color: #2ecc71; /* Verde per l'accettazione */
    color: white;
    border: none;
    padding: 8px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    transition: 0.3s;
}

.cookie-btn:hover {
    background-color: #27ae60;
}

/* Adattamento mobile */
@media (max-width: 768px) {
    .cookie-content {
        flex-direction: column;
        text-align: center;
    }
}
.page-header {
    padding: 100px 20px 60px;
    text-align: center;
    color: white;
    background-color: #002368; /* Colore base */
    margin-top: 140px; /* Per saltare la navbar fissa */
}

/* Colori personalizzati per settore (opzionale) */



.content-section {
    max-width: 900px;
    margin: 50px auto;
    padding: 0 20px;
    line-height: 1.8;
}

.topic-list {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 40px;
}

.topic-list li {
    background: #f4f4f4;
    padding: 15px;
    border-radius: 8px;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 10px;
}
/* SIDEBAR STYLE CON LOGHI BIANCHI */
.side-nav {
    position: fixed;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    z-index: 2000;
    background: #002368; /* Il blu scuro di EnergyMed */
    border-radius: 0 10px 10px 0;
    box-shadow: 2px 0 15px rgba(0,0,0,0.3);
    padding: 10px 0;
}

.side-item {
    display: flex;
    align-items: center;
    padding: 15px;
    text-decoration: none;
    transition: background 0.3s ease;
}

/* TRUCCO PER I LOGHI BIANCHI */
.side-item img, 
.side-item i {
    width: 35px;
    height: 35px;
    object-fit: contain;
    /* Rende l'immagine completamente bianca */
    filter: brightness(0) invert(1); 
    transition: filter 0.3s ease, transform 0.3s ease;
}

/* EFFETTO HOVER */
.side-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.side-item:hover img, 
.side-item:hover i {
    /* Torna ai colori originali e si ingrandisce leggermente */
    filter: none; 
    transform: scale(1.2);
}

/* TESTO CHE APPARE */
.side-item span {
    max-width: 0;
    overflow: hidden;
    color: white;
    font-size: 0.9rem;
    font-weight: 600;
    transition: max-width 0.4s ease, margin-left 0.4s ease;
    white-space: nowrap;
    margin-left: 0;
}

.side-item:hover span {
    max-width: 180px;
    margin-left: 15px;
}

/* NASCONDI SU MOBILE */
@media (max-width: 768px) {
    .side-nav { display: none; }
}
/* Forza il colore bianco per l'icona Home ed evita il viola dei link visitati */
.side-item.home i, 
.side-item.home:visited i {
    color: white !important;
    filter: none; /* Le icone font-awesome non hanno bisogno di filtri */
    transition: 0.3s;
}

/* Colore al passaggio del mouse (Hover) */
.side-item.home:hover i {
    color: #3498db !important; /* Diventa azzurro o il colore che preferisci */
    transform: scale(1.2);
}
/* Sfondo specifico per EnerEfficiency (sfumatura verso il verde) */
.efficiency-bg {
    background: linear-gradient(rgba(230, 126, 34, 0.85), rgba(0, 35, 104, 0.85)), 
                url('../images/bg-efficiency.jpg'); 
    background-color: #e67e22; /* Arancione EnerEfficiency */
}

/* Colore specifico per le icone di questa pagina */
.efficiency-bg + .main-content .feature-card i {
    color: #e67e22;
}

.efficiency-bg + .main-content .feature-card {
    border-bottom: 4px solid #e67e22;
}

/* Effetto hover per le card di questa pagina */
.efficiency-bg + .main-content .feature-card:hover {
    box-shadow: 0 8px 25px rgba(230, 126, 34, 0.2);
}
/* Sfondo specifico per Circular Economy (sfumatura verso il verde) */
.circular-bg {
    background: linear-gradient(rgba(39, 174, 96, 0.85), rgba(0, 35, 104, 0.85)), 
                url('../images/bg-circular.jpg'); 
    background-color: #27ae60; /* Verde smeraldo */
}

/* Colore specifico per le icone e la barra inferiore delle card in questa pagina */
.circular-bg + .main-content .feature-card i {
    color: #27ae60;
}

.circular-bg + .main-content .feature-card {
    border-bottom: 4px solid #27ae60;
}

/* Effetto hover specifico */
.circular-bg + .main-content .feature-card:hover {
    box-shadow: 0 8px 25px rgba(39, 174, 96, 0.85);
}

/* Applica il colore alle icone e ai bordi delle card in questa pagina */
.mobility-bg {
    background: linear-gradient(rgba(52, 152, 219, 0.85), rgba(0, 35, 104, 0.85)), 
                url('../images/bg-mobility.jpg'); 
    background-color: #3498db; 
}

.mobility-bg + .main-content .feature-card i {
    color: #3498db;
}

.mobility-bg + .main-content .feature-card {
    border-bottom: 4px solid #3498db;
}
/* Effetto hover specifico */
.mobility-bg + .main-content .feature-card:hover {
    box-shadow: 0 8px 25px rgba(52, 152, 219, 0.85);
}
/* Sfondo specifico per Automation (Sfumatura Tech) */
.automation-bg {
    background: linear-gradient(rgba(44, 62, 80, 0.85), rgba(0, 35, 104, 0.85)), 
                url('../images/bg-automation.jpg'); 
    background-color: #2c3e50; /* Grigio Blu Tech */
}

/* Colore specifico per le icone e la barra inferiore in questa pagina */
.automation-bg + .main-content .feature-card i {
    color: #2c3e50;
}

.automation-bg + .main-content .feature-card {
    border-bottom: 4px solid #2c3e50;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Effetto hover specifico per Automation */
.automation-bg + .main-content .feature-card:hover {
    box-shadow: 0 8px 25px rgba(44, 62, 80, 0.2);
}
/* STILE GRIGLIA EDIZIONI */
/* Affianca i pulsanti se ce n'è più di uno */
.feature-card .btn-archive {
    display: inline-block;
    width: calc(50% - 10px); /* Due pulsanti per riga con un po' di spazio */
    text-align: center;
    margin: 5px 2px;
    font-size: 0.75rem; /* Riducendo leggermente il font stanno meglio affiancati */
    padding: 10px 5px;
}

/* Su mobile tornano a larghezza piena per essere cliccabili */
@media (max-width: 600px) {
    .feature-card .btn-archive {
        width: 100%;
        margin: 5px 0;
    }
}


.editions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 50px;
}

.edition-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease;
    border-top: 5px solid #002368;
}

.edition-card:hover {
    transform: translateY(-5px);
}

.edition-year {
    background: #f8f9fa;
    padding: 20px;
    font-size: 2.2rem; /* Leggermente più grande */
    font-weight: 900;
    color: #002368;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    justify-content: space-between; /* Se vuoi aggiungere una piccola icona accanto all'anno */
}

.edition-card.latest {
    border-top-color: #e67e22; /* Evidenzia l'ultima edizione con l'arancio */
}

.edition-info {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.edition-info h3 {
    margin: 0 0 10px 0;
    font-size: 1.1rem;
    color: #555;
}

.edition-info p {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 20px;
    text-align: left !important; /* Allineamento a sinistra per i testi lunghi */
}

.btn-archive {
    display: inline-block;
    padding: 8px 15px;
    background: #002368;
    color: white !important;
    text-decoration: none;
    border-radius: 5px;
    font-size: 0.85rem;
    font-weight: bold;
    transition: 0.3s;
    align-self: flex-start;
}

.btn-archive:hover {
    background: #3498db;
}

.editions-bg {
    background-color: #002368;
    background-image: linear-gradient(rgba(0,35,104,0.9), rgba(0,35,104,0.9)), url('../images/bg-history.jpg');
}
/* Contenitore statistiche interno alla card */
.edition-stats {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Due colonne */
    gap: 15px;
    margin: 20px 0;
    padding-top: 15px;
    border-top: 1px solid #eee;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.stat-item i {
    color: #002368; /* Blu EnergyMed */
    font-size: 1rem;
    width: 20px; /* Allinea le icone verticalmente */
    text-align: center;
}

.stat-item span {
    font-size: 0.85rem;
    font-weight: 600;
    color: #444;
}

/* Effetto al passaggio del mouse sulla card */
.edition-card:hover .stat-item i {
    color: #3498db; /* Schiarisce l'icona al passaggio del mouse */
    transform: scale(1.1);
    transition: 0.3s;
}
/* Stile specifico per i pulsanti nelle card delle edizioni */
.btn-archive {
    margin-top: 15px;
    display: inline-block;
    padding: 10px 20px;
    background-color: #002368;
    color: white !important;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    font-size: 0.85rem;
    transition: background 0.3s;
}

.btn-archive:hover {
    background-color: #3498db;
}

/* Sfondo della testata per la cronologia */
.editions-bg {
    background: linear-gradient(rgba(0, 35, 104, 0.85), rgba(0, 35, 104, 0.85));
    background-color: #002368;
}

/* Se vuoi che i 15 box siano leggermente più piccoli per stare meglio in griglia */
.editions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}
/* Regole specifiche solo per la sezione Pilastri della Home */

/* Base per tutte le card della home */
.pilastri-home .feature-card {
    transition: all 0.3s ease;
    border: 2px solid transparent; /* Rimuove il bordo laterale/superiore */
    border-bottom: 4px solid #eee; /* Barretta grigia di base */
}

/* 1. Mobility (Azzurro) */
.pilastri-home .feature-card:nth-child(1):hover {
    border-bottom-color: #3498db;
    transform: translateY(-10px);
}
.pilastri-home .feature-card:nth-child(1):hover i { color: #3498db; }

/* 2. Ener Efficiency (Arancione) */
.pilastri-home .feature-card:nth-child(2):hover {
    border-bottom-color: #e67e22;
    transform: translateY(-10px);
}
.pilastri-home .feature-card:nth-child(2):hover i { color: #e67e22; }

/* 3. Circular Economy (Verde) */
.pilastri-home .feature-card:nth-child(3):hover {
    border-bottom-color: #2ecc71;
    transform: translateY(-10px);
}
.pilastri-home .feature-card:nth-child(3):hover i { color: #2ecc71; }

/* 4. Automatio (Grigio) */
.pilastri-home .feature-card:nth-child(4):hover {
    border-bottom-color: #2c3e50;
    transform: translateY(-10px);
}
.pilastri-home .feature-card:nth-child(4):hover i { color: #2c3e50; }

/* Ottimizzazione leggibilità paragrafi nelle card della Home */
.pilastri-home .feature-card p {
    max-width: 90%;      /* Evita che il testo tocchi i bordi della card */
    margin: 0 auto;       /* Centra il blocco di testo nella card */
    line-height: 1.6;     /* Aumenta l'interlinea per dare respiro */
    text-align: center;   /* Se preferisci un look più moderno e centrato */
    /* text-align: justify; */ /* Togli il commento se preferisci il testo allineato ai lati */
    font-size: 0.95rem;   /* Dimensione bilanciata */
    color: #555;          /* Grigio scuro per meno contrasto rispetto al nero puro */
}

/* Spazio tra titolo e paragrafo */
.pilastri-home .feature-card h3 {
    margin-bottom: 15px;
}
/* Stile per i loghi dentro le card */
.pilastri-home .card-logo {
    height: 60px;          /* Altezza fissa per uniformità */
    width: auto;           /* Mantiene le proporzioni */
    margin-bottom: 20px;   /* Spazio sotto il logo */
    object-fit: contain;   /* Evita distorsioni */
    transition: transform 0.3s ease;
    filter: grayscale(100%); /* Opzionale: loghi grigi di base */
    opacity: 0.8;
}

/* Effetto Hover: il logo torna a colori e si ingrandisce leggermente */
.pilastri-home .feature-card:hover .card-logo {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.1);
}

/* --- Manteniamo le barrette colorate che abbiamo creato prima --- */
.pilastri-home .feature-card:nth-child(1):hover { border-bottom-color: #3498db; }
.pilastri-home .feature-card:nth-child(2):hover { border-bottom-color: #e67e22; }
.pilastri-home .feature-card:nth-child(3):hover { border-bottom-color: #2ecc71; }
.pilastri-home .feature-card:nth-child(4):hover { border-bottom-color: #2c3e50; }

/* Contenitore dei numeri dell'edizione */
.edition-details {
    margin: 15px 0;
    padding: 15px 0;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee; /* Crea una sezione distinta nella card */
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Riga del singolo dato */
.detail-row {
    display: flex;
    justify-content: space-between; /* Etichetta a sinistra, valore a destra */
    align-items: center;
    font-size: 0.9rem;
}

/* Etichetta (es. "Espositori:") */
.detail-row .label {
    color: #777;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 0.75rem; /* Leggermente più piccolo per far risaltare il valore */
    letter-spacing: 0.5px;
}

/* Valore (es. "150+") */
.detail-row .value {
    color: #002368; /* Blu istituzionale */
    font-weight: 700;
    font-size: 0.95rem;
}

/* Effetto al passaggio del mouse sulla card */
.edition-card:hover .value {
    color: #e67e22; /* Il numero si accende con l'arancio EnergyMed al passaggio */
    transition: color 0.3s ease;
}
/* Riduce gli h3 solo all'interno della pagina edizioni */
.page-content .feature-card h3 {
    font-size: 1.1rem; /* Regola questo valore per la grandezza desiderata */
    margin-bottom: 5px;
    color: #002368;
    line-height: 1.3;
}
/* Manteniamo l'effetto hover per coerenza */
.page-content .feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.12);
}

/* Se vuoi differenziare il secondo h3 (quello della data) */
.page-content .feature-card h3:nth-of-type(2) {
    font-size: 0.95rem;
    color: #666; /* Un grigio per staccare dal titolo principale */
    font-weight: 500;
}
/* Griglia base a 3 colonne */
.page-content .features-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr); /* Usiamo 6 frazioni per gestire meglio i pesi 2 e 3 */
    gap: 25px;
    align-items: flex-start;
}

/* Le prime due card occupano 3 frazioni ciascuna (metà riga ciascuna) */
.page-content .card-top {
    grid-column: span 3;
    background-color: #ffffff; /* Leggera distinzione cromatica */
}

/* Tutte le altre card occupano 2 frazioni ciascuna (un terzo di riga ciascuna) */
.page-content .feature-card:not(.card-top) {
    grid-column: span 2;
}

/* Responsive: su tablet e mobile tornano a disposizione standard */
@media (max-width: 1024px) {
    .page-content .features-grid { grid-template-columns: repeat(2, 1fr); }
    .page-content .card-top, 
    .page-content .feature-card:not(.card-top) { grid-column: span 1; }
}

@media (max-width: 768px) {
    .page-content .features-grid { grid-template-columns: 1fr; }
}
/* Contenitore loghi in alto nella card */
.card-logo-header {
    display: flex;
    justify-content: center; /* Centra i loghi */
    align-items: center;
    gap: 15px; /* Spazio tra i due loghi */
    margin-bottom: 15px;
    height: 50px; /* Altezza fissa per mantenere l'allineamento */
}

/* Stile per i singoli loghi */
.mini-logo {
    height: 100%; /* Si adatta all'altezza del contenitore */
    width: auto;
    object-fit: contain;
}

/* Opzionale: nelle card top (2025/24) i loghi possono essere un filo più grandi */
.card-top .card-logo-header {
    height: 60px;
}

/* Riduciamo leggermente il margine dell'h3 per stare vicini ai loghi */
.feature-card h3 {
    margin-top: 5px;
}
/* Contenitore per i pulsanti (se ne hai più di uno) */
.feature-card .buttons-container {
    display: flex;
    gap: 10px; /* Spazio tra i due pulsanti */
    margin-top: auto; /* Spinge i pulsanti in fondo alla card */
    padding-top: 15px;
}

/* Stile per i pulsanti piccoli affiancati */
.page-content .btn-archive {
    flex: 1; /* Forza i pulsanti ad avere la stessa larghezza */
    padding: 8px 5px; /* Più stretti e bassi */
    font-size: 0.75rem; /* Font ridotto per farli stare bene */
    text-align: center;
    white-space: nowrap; /* Evita che il testo vada a capo nel pulsante */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Responsive: su smartphone tornano uno sotto l'altro per facilitare il tocco */
@media (max-width: 480px) {
    .feature-card .buttons-container {
        flex-direction: column;
    }
    .page-content .btn-archive {
        width: 100%;
    }
}
/* Centra il contenitore e limita la larghezza del singolo pulsante */
.buttons-container.center-btn {
    justify-content: center; /* Centra il contenuto orizzontalmente */
    width: 100%;
}

.buttons-container.center-btn .btn-archive {
    flex: 0 1 auto; /* Impedisce al pulsante di allargarsi a tutta la card */
    min-width: 160px; /* Gli dà una dimensione minima elegante */
    padding: 10px 20px; /* Un po' più di respiro laterale */
}

/* Mantieni l'allineamento degli altri (quelli con 2 pulsanti) */
.buttons-container:not(.center-btn) {
    display: flex;
    gap: 10px;
}
/* Rendi la card un blocco cliccabile senza stili da link */
.pilastri-home .feature-card {
    text-decoration: none; /* Rimuove sottolineatura */
    display: flex;
    flex-direction: column;
    align-items: center;
    color: inherit; /* Mantiene il colore del testo originale */
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Assicurati che l'h3 non diventi blu link */
.pilastri-home .feature-card h3 {
    color: #002368; 
    margin-top: 15px;
}

/* L'effetto hover che abbiamo creato prima funzionerà ancora perfettamente */
.pilastri-home .feature-card:hover {
    transform: translateY(-10px);
    /* Le barrette colorate che abbiamo configurato prima rimangono attive */
}