/* style.css */

body {
    font-family: 'Afacad', sans-serif; /* Applica Afacad ai testi */
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    color: #333;
}
h1, h2, h3 {
    font-family: 'Tangerine', cursive; /* Applica Tangerine ai titoli */
    font-weight: 700; /* Rende Tangerine più leggibile come titolo */
    color: #000; /* Puoi mantenere il colore verde Chianti per i titoli */
    margin-bottom: 10px;
}
h1 {
    font-size:2.8em;
}
h2 {
    font-size:2.4em;
}
h3 {
    font-size:2.1em;
}
header {
    background-color: #fff; /* Ora il background dell'header è bianco */
    color: black; /* Il testo dell'header è nero per contrasto */
    padding: 1.5rem 0;
    display: flex; /* Attiva Flexbox */
	height:100px;
    justify-content: center; /* Centra orizzontalmente il contenuto */
    align-items: center; /* Centra verticalmente il contenuto */
    gap: 30px; /* Spazio tra il logo e il titolo H1 */
}
header img.logo {
    height: 130px; /* Altezza del logo, come hai impostato */
    width: auto; /* Mantiene le proporzioni */
}
header h1 {
    margin: 0; /* Rimuove i margini predefiniti dell'H1 */
}
nav ul {
    padding: 0;
    list-style: none;
    text-align: center;
    background-color: #ffffff; /* Sfondo bianco */
    padding: 0.5rem 0;
    border-top: 1px solid #5a8d5f; /* Riga verde sottile superiore */
    border-bottom: 1px solid #5a8d5f; /* Riga verde sottile inferiore */
}
nav ul li {
    display: inline;
    margin-right: 20px;
}
nav ul li a {
    color: #333; /* Testo nero */
    text-decoration: none;
    font-weight: normal; /* Rimuovi il grassetto */
    font-size:0.9em;
	text-transform: uppercase;
}
/* Container principale per il contenuto */
.container {
    width: 80%;
    margin: auto;
    overflow: hidden;
    padding: 20px 0;
}

/* Rivedi il tuo .container se lo usi anche per gli elementi esterni */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
}





/* Sezione generale per i blocchi di contenuto */
.content-section {
    background-color: white;
    padding: 20px;
    margin-top: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

/* Stili per il Carosello (Solo per index.html) */
.carousel-container {
    width: 100%;
    height: 400px;
    position: relative;
    overflow: hidden;
    margin-bottom: 20px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    border-radius: 8px;
}
.carousel-slide {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
}
.carousel-slide.active {
    opacity: 1;
}
.carousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.carousel-text {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    font-size: 2.2em; /* Potrebbe essere un po' piccolo per un testo di impatto, potresti voler aumentare */
    text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
    z-index: 10;
    text-align: center;
    font-family: 'Tangerine', cursive;
    font-weight: 700;
}

/* *** INIZIO STILI PER LA PAGINA STRUTTURA *** */

/* Stili per la card della singola camera */
.room-card.single-room { /* Ho mantenuto .room-card e aggiunto .single-room per specificità */
    background-color: white; /* Già definito in content-section, ma può essere utile per override */
    padding: 20px;
    margin-bottom: 20px; /* Spazio sotto la card */
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: row; /* Immagine e testo affiancati su desktop */
    align-items: flex-start; /* Allinea il contenuto all'inizio */
    gap: 20px; /* Spazio tra immagine principale e blocco di testo */
    flex-wrap: wrap; /* Permette il wrap su schermi più piccoli */
}

/* Immagine principale della singola camera */
.room-card.single-room .main-room-img {
    width: 40%; /* Larghezza per l'immagine principale */
    height: auto; /* Importante per mantenere le proporzioni */
    border-radius: 8px;
    object-fit: cover;
    box-shadow: 0 0 5px rgba(0,0,0,0.1); /* Ombra per l'immagine principale */
}

/* Contenuto testuale della singola camera */
.room-card.single-room .text-content {
    width: 55%; /* Larghezza per il testo della singola camera */
    flex-grow: 1; /* Permette al testo di occupare lo spazio rimanente */
    display: flex; /* Utilizza flexbox anche per il contenuto del testo */
    flex-direction: column; /* Organizza gli elementi interni in colonna */
    justify-content: flex-start;
    align-items: flex-start;
}

/* GALLERIA DETTAGLI SOTTO LA DESCRIZIONE DELLA CAMERA */
.room-details-gallery {
    display: flex; /* Utilizza flexbox per affiancare le immagini */
    flex-wrap: wrap; /* Permette alle immagini di andare a capo */
    gap: 10px; /* Spazio tra le immagini */
    margin-top: 15px;
    justify-content: flex-start; /* Allinea le immagini a sinistra */
    width: 100%; /* Assicurati che il contenitore occupi tutta la larghezza disponibile */
}

.room-details-gallery img {
    /* Per ottenere 3 immagini per riga, dobbiamo calcolare la larghezza tenendo conto del gap.
       Totale 2 gap (10px * 2 = 20px) su 100% di larghezza. Quindi (100% - 20px) / 3 immagini.
       Oppure più semplice: 33.33% - un po' meno del gap. */
    width: calc(33.33% - 7px); /* Tre immagini per riga, meno il gap per non farle sporgere */
    height: 120px; /* Altezza fissa per le immagini dei dettagli della camera */
    object-fit: cover; /* Ritaglia l'immagine per coprire lo spazio senza distorcerla */
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0,0,0,0.1);
}


/* Stili per la griglia dei servizi */
.services-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: 20px; /* Spazio tra gli elementi servizio */
    margin-top: 20px;
}
.service-item {
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    text-align: center;
    width: calc(33.33% - 14px); /* Tre elementi per riga, meno il gap */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    box-sizing: border-box; /* Include padding e border nella larghezza */
    transition: transform 0.2s ease-in-out; /* Aggiungi una transizione per un effetto hover */
	overflow: hidden;
}
.service-item:hover {
    transform: translateY(-5px); /* Sposta leggermente in alto all'hover */
}

.service-item img.service-icon {
    width: 250px; /* Aumentiamo la larghezza da 80px a 100px */
    height: 250px; /* Aumentiamo l'altezza da 80px a 100px */
    object-fit: cover;
    /* Rimuovi border-radius: 50%; per avere angoli quadrati o arrotondati */
    border-radius: 10px; /* Imposta angoli arrotondati, puoi aumentare o diminuire questo valore */
    margin-bottom: 10px;
    box-shadow: 0 0 5px rgba(0,0,0,0.1); /* Aggiungi una leggera ombra per farle risaltare */
}
.service-item h3 {
    margin-top: 0;
    font-size: 2em;
    color: #000; /* Verde Chianti per i titoli servizio */
}
.service-item p {
    font-size: 0.9em;
}


/* *** FINE STILI PER LA PAGINA STRUTTURA *** */


/* Stili per la pagina Contatti */
.contact-section {
    background-color: white;
    padding: 20px;
    margin-top: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.contact-section ul {
    list-style: none;
    padding: 0;
}
.contact-section ul li {
    margin-bottom: 10px;
}
.contact-section a {
    color: #000;
    text-decoration: none;
}
.contact-section a:hover {
    text-decoration: underline;
}
.map-container {
    margin-top: 20px;
    text-align: center;
}
.map-container iframe {
    width: 100%;
    height: 450px;
    border: 0;
    border-radius: 8px;
}
.contact-image {
    width: 100%;
    max-height: 300px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}



/* Media Query per Responsiveness - AGGIORNATO */
@media (max-width: 768px) {
    header img.logo {
        height: 60px; /* Logo più grande anche su schermi piccoli (da 40px) */
    }
    header h1 {
        font-size: 2.2em; /* Titolo più grande su schermi piccoli (da 1.8em) */
    }
    header {
        padding: 1rem 0; /* Un po' meno padding su schermi piccoli */
        gap: 15px; /* Meno spazio tra logo e titolo su schermi piccoli */
    }

    .carousel-container {
        height: 300px; /* Altezza ridotta per il carosello su schermi medi */
    }
    .carousel-text {
        font-size: 1.8em;
    }
    .image-gallery img {
        width: 48%; /* Due immagini per riga su schermi medi */
    }

    /* Struttura camera singola */
    .room-card.single-room {
        flex-direction: column; /* Impila immagine e testo su schermi medi */
        align-items: center;
    }
    .room-card.single-room .main-room-img,
    .room-card.single-room .text-content {
        width: 100%; /* Occupano tutta la larghezza */
    }
    /* Galleria dettagli camera su schermi medi */
    .room-details-gallery {
        justify-content: center; /* Centra le immagini */
    }
    .room-details-gallery img {
        width: calc(48% - 5px); /* Due immagini per riga */
        height: 100px;
    }

    /* Griglia Servizi */
    .services-grid {
        flex-direction: column; /* Impila gli elementi servizio */
        align-items: center;
    }
    .service-item {
        width: 90%; /* Occupa quasi tutta la larghezza */
    }

    /* Galleria completa della struttura */
    .image-gallery.full-gallery img {
        width: calc(50% - 15px); /* Due immagini per riga su schermi medi */
        height: 180px;
    }
}

@media (max-width: 480px) {
    .carousel-container {
        height: 250px; /* Altezza ancora più ridotta per il carosello su schermi piccoli */
    }
    .carousel-text {
        font-size: 1.4em;
    }
    .image-gallery img {
        width: 95%; /* Una immagine per riga su schermi piccoli */
    }

    /* Galleria dettagli camera su smartphone */
    .room-details-gallery img {
        width: 95%; /* Una immagine per riga */
        height: 100px;
    }

    /* Galleria completa della struttura */
    .image-gallery.full-gallery img {
        width: 95%; /* Una immagine per riga su schermi piccoli */
        height: 150px;
    }
}


.cta-button {
    display: inline-block; /* Permette di impostare padding e margini come un blocco, ma rimane sulla stessa riga */
    background-color: #339933; /* Il tuo Verde Chianti */
    color: ffffff;
    padding: 12px 25px 12px 25px;
    text-decoration: none; /* Rimuove la sottolineatura tipica dei link */
    border-radius: 5px; /* Angoli leggermente arrotondati */
    /*font-weight: bold;*/
    transition: background-color 0.3s ease, transform 0.2s ease; /* Transizione per effetto hover */
    margin-top: 15px; /* Spazio sopra il pulsante */
    font-size: 1.1em;
}

.cta-button:hover {
    background-color: #33CC33; /* Una tonalità leggermente più scura al passaggio del mouse */
    transform: translateY(-2px); /* Un leggero movimento verso l'alto per feedback */
}


/* Stili per la Lightbox */
#lightbox-modal {
    display: none; /* Inizialmente nascosto */
    position: fixed; /* Posizione fissa rispetto alla finestra del browser */
    z-index: 1000; /* Assicurati che sia sopra tutti gli altri elementi */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* Abilita lo scroll se l'immagine è troppo grande */
    background-color: rgba(0,0,0,0.9); /* Sfondo nero semi-trasparente */
    justify-content: center; /* Centra orizzontalmente l'immagine */
    align-items: center; /* Centra verticalmente l'immagine */
    flex-direction: column; /* Organizza il contenuto in colonna (immagine + didascalia) */
}

#lightbox-modal.lightbox-visible {
    display: flex; /* Mostra la lightbox quando ha questa classe */
}

.lightbox-content {
    margin: auto;
    display: block;
    max-width: 90%; /* Larghezza massima dell'immagine ingrandita */
    max-height: 80%; /* Altezza massima dell'immagine ingrandita */
    object-fit: contain; /* Adatta l'immagine mantenendo le proporzioni */
    border-radius: 8px; /* Mantieni gli angoli arrotondati */
}

.close-button {
    position: absolute;
    top: 20px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
    cursor: pointer;
    z-index: 1001; /* Sopra l'immagine della lightbox */
}

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

#lightbox-caption {
    margin-top: 10px;
    text-align: center;
    color: #f1f1f1;
    font-size: 1.2em;
    padding: 8px 0;
}




/* --- Sezione Galleria Immagini "La struttura in immagini" --- */

/* Stili per il contenitore della galleria */
.image-gallery.full-gallery {
    display: grid; /* Abilita il layout a griglia */
    /* Crea colonne che si adattano, con una dimensione minima di 280px.
       Su schermi più grandi, tenderà a creare 3 colonne se lo spazio lo consente. */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 15px; /* Spazio tra le immagini della griglia */
    padding: 0; /* Assicurati che non ci sia padding indesiderato */
    margin-top: 20px; /* Spazio superiore dalla sezione precedente */
    margin-bottom: 40px; /* Spazio inferiore */
}

/* Stili per il link <a> che avvolge ogni immagine nella galleria */
.image-gallery.full-gallery a {
    display: block; /* Il link occupa tutto lo spazio della sua cella nella griglia */
    width: 100%; /* Il link prende la larghezza disponibile nella sua cella */
    height: 220px; /* Altezza fissa per ogni miniatura della galleria. Regola a tuo piacimento. */
    overflow: hidden; /* Nasconde qualsiasi parte dell'immagine che fuoriesce dall'altezza fissa */
    border-radius: 8px; /* Mantieni gli angoli arrotondati */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Leggera ombra per un effetto visivo */
    position: relative; /* Necessario se volessi aggiungere overlay o testi in futuro */
}

/* Stili per l'immagine <img> all'interno del link <a> nella galleria */
.image-gallery.full-gallery a img {
    width: 100%; /* L'immagine riempie la larghezza del suo contenitore (il tag <a>) */
    height: 100%; /* L'immagine riempie l'altezza del suo contenitore */
    object-fit: cover; /* **Fondamentale**: Adatta l'immagine coprendo l'intero spazio del contenitore, tagliando se necessario.
                                   Questo impedisce la distorsione e le immagini allungate.
                                   Alternativa: `object-fit: contain;` se preferisci vedere l'intera immagine (con barre nere se le proporzioni non combaciano) */
    display: block; /* Rimuove lo spazio extra che i browser a volte aggiungono sotto le immagini */
    transition: transform 0.3s ease-in-out; /* Animazione leggera all'hover */
    cursor: pointer; /* Indica che l'immagine è cliccabile */
}

/* Effetto hover per le immagini della galleria */
.image-gallery.full-gallery a img:hover {
    transform: scale(1.05); /* Piccolo zoom all'hover per indicare interattività */
}

/* --- Media Queries per la Responsiveness (da verificare/aggiungere) --- */

@media (max-width: 992px) { /* Tablet orizzontale e schermi medi */
    .image-gallery.full-gallery {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* 2-3 colonne */
        gap: 10px;
    }
    .image-gallery.full-gallery a {
        height: 200px; /* Altezza leggermente inferiore */
    }
}

@media (max-width: 768px) { /* Tablet verticale e schermi piccoli */
    .image-gallery.full-gallery {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); /* 1-2 colonne */
        gap: 10px;
    }
    .image-gallery.full-gallery a {
        height: 160px; /* Altezza ancora inferiore */
    }
}

@media (max-width: 480px) { /* Smartphone */
    .image-gallery.full-gallery {
        grid-template-columns: 1fr; /* Una singola colonna per la massima leggibilità */
        gap: 10px;
        padding: 0 15px; /* Aggiungi un po' di padding laterale per non far toccare i bordi */
    }
    .image-gallery.full-gallery a {
        height: 250px; /* Altezza maggiore su una singola colonna */
    }
}


/* Stili per la galleria di immagini (da verificare/aggiungere nel tuo style.css) */

.image-gallery { /* O .gallery-grid, a seconda del nome che hai dato */
    display: grid;
    /* Puoi scegliere diverse configurazioni per la griglia */
    /* Esempio 1: 3 colonne fisse con dimensione minima e massima */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Crea colonne che si adattano */
    /* Esempio 2: colonne uguali (se preferisci un numero fisso su desktop) */
    /* grid-template-columns: repeat(3, 1fr); */
    gap: 15px; /* Spazio tra le immagini */
    padding: 0; /* Assicurati che non ci sia padding indesiderato qui */
    margin: 20px 0; /* Spazio sopra e sotto la galleria */
}

/* Stili per il contenitore del link che avvolge l'immagine */
.image-gallery a {
    display: block; /* Ogni link occupa lo spazio del proprio blocco nella griglia */
    width: 100%; /* Assicurati che il link riempia la sua cella */
    height: 200px; /* Altezza fissa per le immagini nella galleria, regola a tuo piacimento */
    overflow: hidden; /* Nasconde l'eccesso se l'immagine è più grande del contenitore */
    border-radius: 8px; /* Mantieni gli angoli arrotondati come gli altri elementi */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Leggera ombra per un effetto visivo */
}

/* Stili per le immagini all'interno dei link nella galleria */
.image-gallery a img {
    width: 100%; /* L'immagine prende tutta la larghezza del suo contenitore (il tag <a>) */
    height: 100%; /* L'immagine prende tutta l'altezza del suo contenitore */
    object-fit: cover; /* Adatta l'immagine coprendo completamente il contenitore, tagliando gli eccessi se necessario */
    /* object-fit: contain;  Alternativa: adatta l'immagine mantenendo le proporzioni ma lasciando spazio vuoto se le proporzioni non combaciano */
    display: block; /* Rimuove lo spazio extra sotto l'immagine */
    transition: transform 0.3s ease-in-out; /* Effetto zoom all'hover */
}

/* Effetto hover per le immagini della galleria */
.image-gallery a img:hover {
    transform: scale(1.05); /* Piccolo zoom all'hover */
}

/* Stili responsive (Media Queries) - Assicurati che siano già presenti o aggiungili */
@media (max-width: 992px) {
    .image-gallery {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Due colonne su tablet */
    }
}

@media (max-width: 768px) {
    .image-gallery {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* Adatta le colonne */
        gap: 10px;
    }
    .image-gallery a {
        height: 180px; /* Riduci l'altezza su schermi più piccoli */
    }
}

@media (max-width: 480px) {
    .image-gallery {
        grid-template-columns: 1fr; /* Una colonna su smartphone */
        padding: 0 10px; /* Piccolo padding laterale su mobile */
    }
    .image-gallery a {
        height: 200px; /* Altezza maggiore per una singola colonna */
    }
}









footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 1rem 0;
    margin-top: 20px;
}

footer {
    width: 100%; /* Occupa tutta la larghezza disponibile */
    box-sizing: border-box; /* Include padding nel calcolo della larghezza */
    position: relative; /* O absolute, a seconda del contesto, ma relative è più sicuro */
}

footer p {
}

/* Regole aggiuntive per la pagina per assicurare che il footer si estenda */
/* Assicurati che il body e html non abbiano restrizioni di larghezza */
html, body {
    width: 100%;
    overflow-x: hidden; /* Importante: nasconde lo scroll orizzontale non desiderato */
}


/* Se il tuo main ha un max-width, il footer non sarà influenzato se è fuori dal main.
   Tuttavia, assicurati che nessun genitore del footer lo stia limitando. */




.event-grid {
    display: grid;
    /* Due colonne su desktop per gli eventi */
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 25px; /* Spazio tra gli elementi della griglia */
    margin-top: 20px;
    margin-bottom: 40px;
}

.event-item {
    background-color: #fcfcfc;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 25px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08); /* Ombra più pronunciata per i box degli eventi */
    box-sizing: border-box;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.event-item:hover {
    transform: translateY(-5px); /* Leggero sollevamento all'hover */
    box-shadow: 0 6px 15px rgba(0,0,0,0.12);
}

.event-item h4 {
    font-family: 'Tangerine', cursive;
    font-size: 2em; /* Titolo più grande */
    color: #5a8d5f;
    margin-top: 0;
    margin-bottom: 10px;
    line-height: 1.2;
}

.event-item p {
    font-size: 1em;
    line-height: 1.6;
    margin-bottom: 10px;
    color: #333;
}

.event-item .event-details {
    font-size: 0.9em;
    color: #666;
    margin-top: 15px;
    line-height: 1.4;
}

.event-item .event-details strong {
    color: #444;
}

.event-item .event-details a {
    color: #007bff; /* Un colore link standard o il tuo colore primario */
    text-decoration: none;
    font-weight: bold;
    margin-top: 5px;
    display: inline-block; /* Per applicare margini/padding se necessario */
}

.event-item .event-details a:hover {
    text-decoration: underline;
    color: #0056b3; /* Colore più scuro all'hover */
}


/* Media Queries per la Responsiveness degli Eventi */
@media (max-width: 1024px) {
    .event-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Due colonne anche su schermi più piccoli */
        gap: 20px;
    }
    .event-item {
        padding: 20px;
    }
}

@media (max-width: 768px) {
    .event-grid {
        grid-template-columns: 1fr; /* Una colonna su tablet e smartphone */
        gap: 15px;
    }
    .event-item h4 {
        font-size: 1.8em;
    }
}

@media (max-width: 480px) {
    .event-item {
        padding: 15px;
    }
    .event-item h4 {
        font-size: 1.6em;
    }
    .event-item p {
        font-size: 0.9em;
    }
}


/* Style for the language flag in the navigation */
.lang-flag {
    width: 20px; /* Adjust as needed for desired size */
    height: auto; /* Maintain aspect ratio */
    vertical-align: middle; /* Align with text if other menu items are text */
    margin-left: 5px; /* Add some space if needed */
}

/* Optional: Adjustments for smaller screens (responsive) */
@media (max-width: 768px) {
    .lang-flag {
        width: 18px; /* Slightly smaller on mobile */
    }

    nav ul li a {
        padding: 8px 10px; /* Adjust padding for smaller screens if necessary */
    }
}

@media (max-width: 480px) {
    .lang-flag {
        width: 16px; /* Even smaller on very small screens */
    }
}