/* Impostazioni globali e Sfondo */
body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-family: Arial, sans-serif; /* Un font semplice e leggibile */
    color: #ffffff; /* Testo bianco, leggibile sullo sfondo */
    
    /* Impostazioni per l'immagine di sfondo */
    background-image: url('img/background.webp');
    background-size: cover; /* Copre tutto lo spazio */
    background-position: center center; /* Centra l'immagine */
    background-attachment: fixed; /* L'immagine sta ferma quando scorri */
    background-color: #333; /* Colore di riserva se l'immagine non carica */
}

/* Contenitore principale */
.container {
    width: 90%;
    max-width: 1100px; /* Larghezza massima per schermi grandi */
    margin: 0 auto; /* Centra il contenitore */
    padding: 20px;
    /* Aggiungiamo uno sfondo semi-trasparente al contenuto per leggibilità */
    background-color: rgba(0, 0, 0, 0.4); 
    min-height: 100vh; /* Alto almeno quanto lo schermo */
    box-shadow: 0 0 15px rgba(0,0,0,0.5);
}

/* Intestazione e Logo */
header {
    text-align: center;
    padding: 20px 0;
}

.logo {
    max-width: 250px; /* Dimensione massima del logo */
    height: auto;
}

/* Sezioni principali */
main {
    text-align: center;
}

main h3 {
    font-size: 1.8rem;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.7); /* Ombra per leggibilità */
}

/* Immagini cliccabili (locandina e sedi) */
.thumbnail {
    max-width: 90%; /* Massima larghezza dentro il suo contenitore */
    height: auto;
    border: 3px solid #fff;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
    cursor: pointer; /* Il mouse diventa una manina */
    transition: transform 0.3s ease; /* Effetto zoom al passaggio */
}

.thumbnail:hover {
    transform: scale(1.03); /* Leggero ingrandimento */
}

/* Sezione specifica della Locandina */
.poster-section {
    margin-bottom: 40px;
}

.poster-section .thumbnail {
    max-width: 400px; /* Dimensione specifica per la locandina */
}

/* Sezione Sedi (Galleria) */
.locations-section {
    margin-bottom: 40px;
}

.gallery {
    display: flex; /* Mette le immagini in riga */
    flex-wrap: wrap; /* Permette di andare a capo se non c'è spazio */
    justify-content: space-around; /* Spazio equo tra le immagini */
    gap: 20px; /* Spazio tra gli elementi */
}

.gallery .thumbnail {
    /* Su desktop, ognuna occupa circa un terzo dello spazio */
    flex-basis: 300px; 
    max-width: 300px; /* Dimensione fissa per le sedi quadrate */
}

/* ▼▼▼ NUOVO STILE PER I CONTATTI ▼▼▼
*/
.contact-section {
    margin-bottom: 40px;
    text-align: center;
}

.contact-section p {
    font-size: 1.2rem; /* Testo più grande per leggibilità */
    margin: 10px 0;
    line-height: 1.6;
}

.contact-section a {
    color: #ffffff;
    text-decoration: none; /* Niente sottolineatura */
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.7);
}

.contact-section a:hover {
    text-decoration: underline; /* Sottolinea solo al passaggio */
}
/* --- Fine nuovo stile --- */


/* Footer (Piè di pagina) */
footer {
    text-align: center;
    padding: 30px 10px;
    border-top: 1px solid #777;
    margin-top: 40px;
    font-size: 0.9rem;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
}

.copyright {
    margin-bottom: 20px;
}

/* Icone social */
.social-icons {
    margin-bottom: 20px;
}

.social-icons a {
    color: #ffffff;
    font-size: 2.2rem; /* Icone grandi e facili da cliccare (mobile) */
    margin: 0 12px;
    transition: color 0.3s ease;
    
    /* ▼▼▼ AGGIUNTA ▼▼▼ (Rimuove la linea/sottolineatura) */
    text-decoration: none; 
}

.social-icons a:hover {
    color: #f0f0f0; /* Leggero cambio colore al passaggio */
    transform: scale(1.1);
}

/* Firma */
.signature {
    font-size: 0.8rem;
    color: #ccc;
}

.signature a {
    color: #fff;
    text-decoration: none;
    font-weight: bold;
}

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

/* --- Stile per il Modal (Popup) --- */
/* (Questa parte rimane invariata) */

.modal {
    display: none; /* Nascosto di default */
    position: fixed; /* Rimane fisso sullo schermo */
    z-index: 1000; /* Sta sopra a tutto */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* Permette lo scorrimento se l'immagine è enorme */
    background-color: rgba(0, 0, 0, 0.85); /* Sfondo nero semi-trasparente */
}

.modal-content {
    margin: auto;
    display: block;
    max-width: 90%; /* Massimo 90% della larghezza schermo */
    max-height: 90vh; /* Massimo 90% dell'altezza schermo */
    /* Centramento verticale (trucchetto) */
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.close-btn {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s ease;
}

.close-btn:hover,
.close-btn:focus {
    color: #bbb;
    text-decoration: none;
}


/* --- RESPONSIVE (per mobile) --- */
/* (Questa parte rimane invariata) */

@media (max-width: 768px) {
    .container {
        width: 100%; /* Occupa tutto lo spazio su mobile */
        padding: 10px;
        box-shadow: none;
    }
    
    main h3 {
        font-size: 1.5rem;
    }

    /* Le immagini della galleria (sedi) si incolonnano */
    .gallery {
        flex-direction: column; /* Cambia la direzione in verticale */
        align-items: center; /* Centra gli elementi */
    }

    .gallery .thumbnail {
        max-width: 90%; /* Le immagini occupano più spazio in larghezza */
        flex-basis: auto; /* Resetta la base */
    }

    .poster-section .thumbnail {
        max-width: 90%;
    }

    .social-icons a {
        font-size: 2rem; /* Leggermente più piccole su schermi stretti */
        margin: 0 10px;
    }
}