@charset "utf-8";

/* --- Layout Generale --- */

body { 
    margin: 0; 
    font-family:Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif"; 
    background-color: #1a3c34; /* Il verdone scuro concordato */
    color:#ECDFBE; 
}

.container { 
    max-width: 1100px; 
    margin: 0 auto; 
    padding: 0 20px; 
}

/* --- Header --- */
header { 
    background-color: transparent; 
    padding: 20px 0; 
}

.header-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Logo sinistro rotondo */
.logo-left img {
    max-height: 125px;
    border-radius: 50%;
    object-fit: cover;
}

/* Logo destro */
.logo-right img {
    max-height: 125px;
    object-fit: contain; 
}

/* Blocco centrale (Titolo + Menu) */
.header-center {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.titolo h1 {
    font-size: 50px;
    margin: 0;
    color: #ECDFBE;
    text-align: center;
}

.titolo p {
    font-size: 30px;
    margin: 15px 0 30px 0;
    font-style: italic;
    color: #ECDFBE;
    text-align: center;
}

/* --- Menu Orizzontale --- */
.navbar {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 30px;
    position: relative;
    z-index: 100;
}

.navbar a {
    color:#ECDFBE ;
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
}

.navbar a:hover { text-decoration: underline; }

/* Dropdown */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #4a1f1f;
    min-width: 180px;
    box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
    z-index: 9999;
    border-radius: 4px;
    top: 100%;
    left: 0;
}

.dropdown-content a {
    color: white;
    padding: 10px 12px;
    text-decoration: none;
    display: block;
    text-align: left;
    font-size: 13px;
}

.dropdown-content a:hover { background-color: #6b2e2e; }
.dropdown:hover .dropdown-content { display: block; }

/* --- Slider Hero --- */
.hero { padding: 40px 0; }

.slider-container {
    position: relative;
    max-width: 900px;
    height: 400px;
    margin: 0 auto;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    background-color: #f5deb3;
}

.slider { position: relative; width: 100%; height: 100%; }

.slider img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background-color: #F9E8BC;
    animation: dissolvenza 12s infinite;
    opacity: 0;
}

.slider img:nth-child(1) { animation-delay: 0s; }
.slider img:nth-child(2) { animation-delay: 4s; }
.slider img:nth-child(3) { animation-delay: 8s; }
.slider img:nth-child(4) { animation-delay: 10s; }

@keyframes dissolvenza {
    0% { opacity: 0; }
    10% { opacity: 1; }
    33% { opacity: 1; }
    43% { opacity: 0; }
    100% { opacity: 0; }
}

/* --- Sezione San Nicola (In Evidenza) --- */
.san-nicola-highlight {
    padding: 50px 0;
    background-color: transparent;
}

.highlight-box {
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
}

/* Ridimensionamento Foto Basilica */
.highlight-box .image-wrapper img {
    width: 100%;
    max-width: 550px; /* Ridotta per eleganza */
    height: auto;
    border-radius: 12px;
    border: 4px solid white;
    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
}

.highlight-box h2 {
    font-family: 'Georgia', serif;
    color: #e0c097; /* Color Oro */
    font-size: 2.5rem;
    margin-top: 25px;
}

.link-italic {
    font-style: italic;
    color: #f9e8bc;                /* Colore oro chiaro/sabbia */
    text-decoration: none;         /* Rimuove la sottolineatura blu brutta */
    border-bottom: 1px solid rgba(224, 192, 151, 0.4); /* Sottolineatura elegante e sottile */
    transition: all 0.3s ease;
}

.link-italic:hover {
    color: #ffffff;                /* Diventa bianco quando ci passi sopra */
    border-bottom: 1px solid #ffffff;
}

/* Forza il colore del link sotto la Basilica */
.link-italic, 
.link-italic:link, 
.link-italic:visited {
    font-style: italic;
    color: #e0c097 !important;     /* Oro/Sabbia */
    text-decoration: none !important;
    border-bottom: 1px solid rgba(224, 192, 151, 0.4);
    display: inline-block;
    margin-top: 10px;
}



/* --- Griglia News/Features --- */
.grid {
    display: flex;
    justify-content: center; /* Cambiato da space-around a center */
    gap: 20px;               /* Ridotto leggermente lo spazio tra i box */
    padding: 40px 20px;
}

.feature-item {
    flex: 1;
    text-align: center;
    padding: 25px;
    background-color: rgba(255, 255, 255, 0.05); /* Sfondo semi-trasparente */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    transition: transform 0.3s ease;
	/* Aggiungi questa riga per limitare la larghezza massima di ogni singola card */
    max-width: 150px;
	
}

.feature-item:hover {
    transform: translateY(-5px);
}

.feature-item h2, .feature-item h3 {
    color: #e0c097;
    margin-bottom: 10px;
    font-size: 1.1rem; /* Riduce la dimensione del carattere del titolo */
}

.feature-item img {
    width: 100%;
    max-width: 180px; /* Forza l'immagine a non superare questa larghezza */
    height: auto;
    border-radius: 8px;
    margin-bottom: 10px;
}
/* --- Bottoni --- */
.btn-leggi {
    display: inline-block;
    padding: 10px 20px;
    background-color: #4a1f1f;
    color: #ECDFBE;          
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    margin-top: 10px;
    transition: background 0.3s;
}

.btn-leggi:hover {
    background-color: #6b2e2e;
}

/* --- Box del Pensiero (Avana) - Versione Compatta --- */
.newsletter-section {
    padding: 40px 0; /* Ridotto lo spazio esterno */
}

.newsletter-box {
    background-color: #E2D1B3 !important; 
    padding: 25px 30px !important;       /* Spazio interno più equilibrato */
    border-radius: 20px !important;
    text-align: center !important;
    
    /* Ridimensionamento del Box più stretto */
    max-width: 500px !important;         
    margin: 30px auto !important;        
    
    box-shadow: 0 8px 25px rgba(0,0,0,0.2) !important;
    border: 1px solid #c5b395 !important;
}

.newsletter-box h2 {
    color: #4a1f1f !important;           
    font-family: 'Georgia', serif !important;
    font-size: 1.6rem !important;        /* Titolo più proporzionato */
    margin-bottom: 12px !important;
}

.pensiero-testo p {
    color: #5d4037 !important;           
    font-style: italic !important;
    font-size: 1.2rem !important;        /* Testo leggibile ma non gigante */
    line-height: 1.5 !important;
    margin: 0 !important;
}

/* --- Newsletter --- */
.newsletter-section { padding: 50px 0; }
.newsletter-box {
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 30px;
    border-radius: 15px;
    text-align: center;
    color: #4A1F1F;
}
.newsletter-box h3 { 
	color: #4a1f1f;
	margin-bottom: 10px;
}

.newsletter-form {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}
.newsletter-form input {
    padding: 10px;
    border-radius: 5px;
    border: none;
    width: 300px;
}
.newsletter-form button {
    padding: 10px 20px;
    background-color: #4a1f1f;
    color: #e0c097;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
}


/* --- Contatti --- */
.contact-section { padding: 50px 0; }
.section-title { text-align: center; color: #e0c097; margin-bottom: 30px; font-size: 2rem; }

.contact-grid {
    display: flex;
    gap: 30px;
}
.contact-card {
    flex: 1;
    background-color: white; /* Card bianca per far risaltare il form come nello screen */
    padding: 25px;
    border-radius: 12px;
    color: #333; /* Testo scuro dentro la card bianca */
}
.contact-card h3 { color: #4a1f1f; text-align: center; margin-bottom: 15px; }

/* Stile Campi Form */
.contact-card label { display: block; margin-top: 10px; font-weight: bold; }
.contact-card input, .contact-card textarea {
    width: 100%;
    padding: 10px;
    margin-top: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box; /* Evita che escano dai bordi */
}
.btn-invia {
    width: 100%;
    margin-top: 20px;
    padding: 12px;
    background-color: #5c7c64; /* Verde per il tasto invia */
    color: white;
    border: none;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
}

/* Mappa */
.map-container {
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #ddd;
}

/* --- Footer --- */
.footer {
    background-color: #4a1f1f;
    color: white;
    text-align: center;
    padding: 30px 20px;
    margin-top: 50px;
    font-size: 13px;
    border-top: 5px solid #333;
}

.footer a { color: #ffd700; text-decoration: none; }

#backToTop:hover {
    background-color: #B54D22 !important; 
    color: #E2D1B3 !important;
    transform: scale(1.1); /* Si ingrandisce leggermente quando ci passi sopra */
}


.reading-container {
    background-color: #E2D1B3;
    color: #333;
    max-width: 850px;
    margin: 40px auto; /* <-- Fondamentale: 'auto' lo centra perfettamente */
    padding: 50px;
    border-radius: 15px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.4);
}

.boxuno-box {
    background-color: #fdfaf3;
    border: 2px solid #c5b395;
    padding: 40px;
    max-width: 700px;
    margin: 0 auto; /* <-- Aggiungi questo per centrarlo */
    border-radius: 15px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    position: relative;
}

.titolo-boxuno {
    font-family: 'Georgia', serif;
    color: #4a1f1f;
    text-align: left;
    font-size: 2.2rem;
    margin-bottom: 30px;
    border-bottom: 1px solid #e2d1b3;
    padding-bottom: 10px;
}

.testo-preghiera p {
    font-family: 'Georgia', serif;
    font-size: 1.2rem;
    line-height: 1.8;
    color: #2c1a1a;
    text-align: justify;
    margin-bottom: 20px;
}

.devozione-finale {
    text-align: center;
    font-style: italic;
    color: #5d4037;
    margin: 30px 0;
    font-size: 1.1rem;
}


CSS
.approvazione-boxuno {
    text-align: right;          /* Riportato a destra */
    font-family: sans-serif;
    font-size: 0.95rem;         /* Una via di mezzo per la leggibilità */
    color: #777;
    line-height: 1.5;
    border-top: 1px inset #eee;
    padding-top: 20px;
    margin-top: 30px;
}

.approvazione-boxuno strong {
    color: #4a1f1f;
    font-size: 1.3rem;          /* Nome grande come richiesto */
    font-style: italic;         /* Tutto in corsivo */
    display: block;             /* Nome su riga separata */
    margin-bottom: 2px;
    font-family: 'Georgia', serif; /* Il corsivo in Georgia è molto più elegante */
}

.firma-fra-mario {
    text-align: right;
    margin-top: 30px;
    font-family: 'Georgia', serif;
    color: #4a1f1f;
    font-size: 1.4rem;
    font-style: italic; /* Il corsivo che ti piaceva */
}

.firma-fra-mario span {
    font-size: 1.1rem;
    color: #5d4037;
    display: block;
    font-weight: normal;
}

/* Rimuoviamo eventuali margini enormi che spingono tutto in basso */
.article-image {
    padding-top: 0 !important;
    text-align: center !important;
}

.article-image img {
    display: block !important;
    margin: 0 auto 30px auto !important; /* Centra e dà spazio sotto */
    
    width: auto !important;             /* Togliamo il 30% che la rendeva troppo piccola */
    max-width: 100% !important;         /* Impedisce di uscire dal box */
    max-height: 400px !important;        /* Regola questa altezza come preferisci */
    
    border: 4px solid white !important;
    border-radius: 8px !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2) !important;
}


.testo-testimonianza {
    background-color: #fdfaf3;
    /* Riduciamo il primo valore (sopra/sotto) e teniamo il secondo (destra/sinistra) */
    padding: 15px 25px; 
    margin-bottom: 15px; /* Riduciamo anche il margine tra una e l'altra */
    border-radius: 10px;
    border-left: 5px solid #4a1f1f;
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
    font-family: 'Georgia', serif;
    font-style: italic;
    font-size: 1.1rem;
    color: #333;
    line-height: 1.5; /* Leggermente più compatto */
}

/* Titolo principale "Testimonianze" */
.article-header h1.titolo-biografia {
    font-size: 3rem !important; /* Molto più grande */
    margin-bottom: 10px;
    color: #4a1f1f;
}

/* Sottotitolo "I pensieri di chi..." */
.article-header p {
    font-size: 1.5rem !important; /* Ingrandito */
    font-family: 'Georgia', serif;
    color: #5d4037;
    margin-top: 0;
}

/* Se vuoi che tutto il blocco avana sia meno largo nella pagina Testimonianze */
.reading-container {
    max-width: 750px; /* Era 850px, lo stringiamo un po' */
    margin: 40px auto;
}

/*Link correlati*/

#nuovgalery {
    width: 85%; /* Larghezza fluida */
    max-width: 700px; /* Larghezza massima */
    list-style: none;
    margin: auto;
    padding: 10px;
    display: flex;
    flex-wrap: wrap; /* Permette il wrap */
    justify-content: center; /* Centra gli elementi */
    gap: 15px; /* Spazio tra gli elementi */
}



#nuovgalery li {
    display: block;
    margin: 0; /* Rimuovi margini esterni */
    padding: 0;
    height: auto; /* Altezza automatica */
    flex: 1 1 280px; /* Ogni elemento occupa almeno 280px, si adatta */
    max-width: 250px; /* Larghezza massima */
}

#nuovgalery li a {
    color: #530D0D;
    font-size: 16px;
    display: flex; /* Flexbox per allineamento interno */
    flex-direction: column; /* Impila immagine e testo */
    align-items: center; /* Centra gli elementi */
    width: 100%;
    height: auto; /* Altezza automatica */
    padding: 15px;
    font-weight: bold;
    border-radius: 10px;
    box-sizing: border-box;
    text-align: center; /* Centra il testo */
    background-color: #fefefe;
    border: 1px solid #ddd;
}

#nuovgalery li a img {
    display: block;
    border: 3px rgba(218,135,62,0.9) solid;
    margin: 0 0 15px 0; 
    border-radius: 10px;
    width: 100%;          /* Fa sì che la foto occupi tutta la larghezza della scheda */
    max-width: 150px;     /* Imposta un limite per non farle diventare troppo giganti */
    height: auto;         /* Mantiene le proporzioni originali (verticali o orizzontali) */
    box-shadow: 3px 3px 10px rgba(0,0,0,0.1);
    object-fit: contain;  /* Protezione extra contro le deformazioni */
}

#nuovgalery li a span {
    font-size: 16px;
    color: #AB410A;
    display: block;
    margin-top: 0; /* Rimuovi margine superiore, già gestito sopra */
}

#nuovgalery li a:hover, #pixlinks li a.active {
    color: #F4EFD2;
    background-color: rgba(210,105,30,0.8);
    text-decoration: none;
    border-radius: 10px;
}

#nuovgalery li a:hover img, #pixlinks li a.active img {
    border-color: #F4EFD2;
    font-weight: bold;
    border-radius: 10px;
}


















































/* ============================================================
   MEDIA QUERIES - RESPONSIVE DESIGN
   ============================================================ */

/* --- TABLET (Schermi sotto i 992px) --- */
@media (max-width: 992px) {
    .header-flex {
        flex-direction: column; /* Incolonna i loghi e il titolo */
        gap: 20px;
    }

    .logo-left img, .logo-right img {
        max-height: 100px; /* Rimpicciolisce leggermente i loghi */
    }

    .titolo h1 { font-size: 40px; }
    .titolo p { font-size: 24px; }

    .grid {
        flex-wrap: wrap; /* Le card delle news vanno a capo */
        justify-content: center;
    }

    .feature-item {
        flex: 0 0 40%; /* Due card per riga su tablet */
        max-width: 200px;
    }

    .contact-grid {
        flex-direction: column; /* Form e Mappa uno sotto l'altro */
    }
}

/* --- SMARTPHONE (Schermi sotto i 600px) --- */
@media (max-width: 600px) {
    /* Header e Titoli */
    .titolo h1 { font-size: 32px; }
    .titolo p { font-size: 18px; margin-bottom: 15px; }

    /* Nascondiamo i loghi laterali o li rendiamo molto piccoli per far spazio al menu */
    .header-flex {
        padding: 10px;
    }
    
    .logo-left img, .logo-right img {
        max-height: 80px;
    }

    /* Menu Navigazione su Mobile */
    .navbar {
        flex-direction: column; /* Menu verticale */
        gap: 10px;
        align-items: center;
    }

    .dropdown-content {
		background-color: #4a1f1f;
        position: static; /* I sottomenu appaiono sotto la voce principale senza fluttuare */
        box-shadow: none;
        
        text-align: center;
    }

    /* Slider Hero */
    .slider-container {
        height: 250px; /* Più basso su cellulare */
    }

    /* Box Avana del Pensiero */
    .newsletter-box {
        padding: 20px !important;
        margin: 20px 10px !important;
    }

    .pensiero-testo p {
        font-size: 1.3rem !important;
    }

    /* Griglia News */
    .feature-item {
        flex: 0 0 85%; /* Una card quasi a tutta larghezza per riga */
        max-width: none;
    }

    /* Newsletter e Form */
    .newsletter-form {
        flex-direction: column;
        align-items: center;
    }

    .newsletter-form input {
        width: 100%;
        max-width: 280px;
    }

    /* Basilica Image */
    .highlight-box .image-wrapper img {
        max-width: 90%;
    }

    .highlight-box h2 {
        font-size: 1.8rem;
    }
}










/* Stili globali per la pagina Notizie (specifici per .news-page) */
/* Stili globali per la pagina Notizie (specifici per .news-page) */


/* Sfondo beige per il contenuto principale */


/* Stili per la lista di articoli */
.news-page .articles-list {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

/* Stili per ogni singolo articolo di notizia */
.news-page .news-article {
    background-color: #fff;
    padding: 35px 35px;
    margin-bottom: 15px;
    margin-top: 15px;
    border-radius: 6px;
    box-shadow: 0 5px 10px rgba(0,0,0,1);
    border: 1px solid #eee;
    display: flex;
    flex-direction: column; /* Per default, impila testo e immagine */
    align-items: flex-start;
    /* AGGIUNGI O VERIFICA: */
    width: 100%; /* Assicura che l'articolo prenda tutta la larghezza disponibile del suo contenitore */
    box-sizing: border-box;
}

/* Stili per articoli con immagine */
.news-page .news-article.with-image {
    flex-direction: row; /* Su schermi più grandi, affianca immagine e testo */
    gap: 20px;
    align-items: flex-start;
}

.news-page .article-text {
    flex: 1;
}

/* Inizio del blocco di codice modificato per lo zoom */

.news-page .news-article.with-image .article-image {
    flex-shrink: 0;
    width: 120px; /* La dimensione piccola rimane tale al riposo */
    height: auto;
    border-radius: 4px;
    /* overflow: visible !important;  <-- Assicurati che NON sia hidden */
    position: relative; 
    z-index: 1;
    cursor: zoom-in;
}

.news-page .news-article.with-image .article-image img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1); /* Zoom fluido e dinamico */
    position: relative;
    z-index: 1;
}


.news-page .news-article.with-image .article-image:hover img {
    transform: scale(1.1); /* Ingrandisce del 10% */
}

/* Fine del blocco di codice modificato */

/* ... (CSS precedente per .news-page .article-image e .news-page .article-image img) ... */

/* AGGIUNGI QUESTE REGOLE PER L'INGRANDIMENTO */
.news-page .article-image {
    position: relative; /* Necessario per posizionare l'immagine ingrandita se la si volesse fuori dal contenitore */
   /* overflow: hidden; /* Fondamentale: nasconde le parti dell'immagine che fuoriescono dal contenitore */
    cursor: zoom-in; /* Cambia il cursore per indicare che è ingrandibile */
    /* Assicurati che l'immagine all'interno abbia una transizione per un effetto fluido */
}

.news-page .article-image img {
    /* ... (regole esistenti: max-width: 100%; height: auto; display: block; border-radius: 4px;) ... */
    transition: transform 0.3s ease; /* Aggiungi la transizione per l'ingrandimento */
    transform-origin: center center; /* Definisce il punto da cui l'ingrandimento ha origine */
}

.notizia {
    background-color: #f4eecd; /* Usa il codice colore esatto che hai per lo sfondo del sito */
    padding: 20px;
    border: 1px solid #dcd0a6; /* Un bordo leggermente più scuro per definirlo */
    border-radius: 8px; /* Arrotonda leggermente gli angoli per un look moderno */
    box-shadow: 2px 2px 5px rgba(0,0,0,0.1); /* Una leggera ombra per dare profondità */
}

/* Regole per l'ingrandimento al passaggio del mouse (solo su schermi più grandi di 768px) */
@media (min-width: 769px) { /* Applica l'effetto solo su schermi desktop/tablet ampi */
    .news-page .article-image:hover img {
        transform: scale(1.1); /* Ingrandisce l'immagine del 10% */
    }
}

@media (min-width: 769px) {
    .news-page .news-article.with-image .article-image:hover img {
        transform: scale(1.8); /* Ingrandimento deciso */
        z-index: 9999;
        box-shadow: 0 10px 30px rgba(0,0,0,0.5);
        position: relative;
    }
}

/* Per disabilitare l'effetto "zoom-in" del cursore su schermi piccoli */
@media (max-width: 768px) {
    .news-page .article-image {
        cursor: default; /* Cursore normale su mobile */
    }
}

/* Stili per il pulsante "Leggi di più" */
.news-page .article-read-more {
    display: inline-block; /* Fondamentale per applicare padding, margini, ecc. */
    background-color: #AB410A; /* Colore di sfondo del bottone */
    color: #fff; /* Colore del testo */
    padding: 10px 20px; /* Padding interno, per dare 'spessore' al bottone */
    border-radius: 5px; /* Angoli arrotondati */
    text-decoration: none; /* Rimuove la sottolineatura di default del link */
    font-size: 0.95em; /* Dimensione del testo */
    font-weight: bold; /* Testo in grassetto per renderlo più visibile */
    transition: background-color 0.3s ease, transform 0.2s ease; /* Transizione fluida per hover/active */
    cursor: pointer; /* Indica che è cliccabile */
    border: none; /* Rimuove il bordo di default se fosse un <button> o un input type="submit" */
    text-align: center; /* Centra il testo all'interno del bottone */
    white-space: nowrap; /* Impedisce al testo di andare a capo */
}

.news-page .article-read-more:hover {
    background-color: #530D0D; /* Colore al passaggio del mouse */
    transform: translateY(-2px); /* Un leggero effetto di sollevamento al hover */
    box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* Ombra per l'effetto di sollevamento */
}

.news-page .article-read-more:active {
    background-color: #3e0b0b; /* Colore quando viene cliccato */
    transform: translateY(0); /* Torna alla posizione normale */
    box-shadow: none; /* Rimuove l'ombra */
}

/* Regola per centrare il bottone su schermi piccoli (già presente, ma ricontrolla) */
@media (max-width: 768px) {
    .news-page .article-read-more {
        margin: 15px auto 0 auto; /* Centra il bottone e aggiunge spazio sopra */
        display: block; /* Fa sì che il bottone occupi la sua riga e possa essere centrato con margin: auto */
    }
}
/* ... (Il resto degli stili per i vari elementi di testo, read-more, ecc. sono OK come li avevamo definiti) ... */

/* ----------------------------------------------------------- */
/* MEDIA QUERIES SPECIFICHE PER LA RESPONSIVITA' DELLA PAGINA NEWS */
/* ----------------------------------------------------------- */

/* Schermi piccoli (sotto i 768px) */
@media (max-width: 768px) {
    .news-page .container.news-content-wrapper {
        padding: 15px;
        margin: 15px auto;
    }

    .news-page .news-article.with-image {
        flex-direction: column; /* Reimposta l'impilamento su mobile */
        align-items: center; /* Centra l'immagine e il testo */
    }

    .news-page .article-image {
        width: 100%; /* L'immagine occupa tutta la larghezza */
        max-width: 250px; /* Limita la larghezza massima per non farla troppo grande */
        margin-bottom: 15px;
    }

    .news-page .article-text {
        text-align: center;
    }

    .news-page .article-heading,
    .news-page .article-date,
    .news-page .article-description {
        text-align: center;
    }

    .news-page .article-read-more {
        margin: 0 auto;
    }
}

.news-page .container.news-content-wrapper {
    /* ... i tuoi stili esistenti ... */
    overflow: visible !important; /* Questo è vitale: permette alla foto di uscire dai bordi beige */
}

.news-page .news-article {
    /* ... i tuoi stili esistenti ... */
    overflow: visible !important; /* Permette alla foto di uscire dai bordi bianchi dell'articolo */
}

/* Media query per schermi ancora più piccoli (es. smartphone in verticale) */
@media (max-width: 480px) {
    .news-page .news-article {
        padding: 10px 15px;
    }

    .news-page h1 {
        font-size: 1.8em;
    }

    .news-page .article-heading {
        font-size: 1.1em;
    }
}
@media screen and (min-width: 601px) {
    .news-page .news-article.with-image .article-image:hover img {
        /* Ingrandisce l'immagine di 2.8 volte rispetto all'originale */
        transform: scale(3.5) translateX(-10%); 
        
        z-index: 99999 !important;
        box-shadow: 0 30px 70px rgba(0,0,0,0.7); /* Ombra più scura per dare profondità */
        position: relative;
        cursor: zoom-out; /* Cambia cursore per indicare che si può rimpicciolire */
    }
}

@media (max-width: 600px) {
    .news-page .news-article.with-image {
        flex-direction: column; /* Testo sotto la foto */
        align-items: center;
    }

    .news-page .article-image {
        width: 100% !important;
        max-width: 280px; /* Foto un po' più grande su mobile per leggibilità */
        margin: 0 auto 15px auto;
    }

    /* Zoom ridotto per il touch su mobile */
    .news-page .news-article.with-image .article-image:hover img {
        transform: scale(1.05); 
        z-index: 10;
    }
}

/* Applica questo a tutti i livelli della pagina news */
.news-page .container.news-content-wrapper,
.news-page .articles-list,
.news-page .news-article {
    overflow: visible !important;
    z-index: auto; /* Permette agli elementi figli di volare sopra */
}