/* ----------------------------------------------------------------------- INDEX ----------------------------------------------------------------- */

#index {
    width: 100%; /* Assicura che la sezione riempia l'intera larghezza */
    margin-left: 0; /* Rimuove eventuali margini a sinistra */
    margin-right: 0; /* Rimuove eventuali margini a destra */
    padding-left: 0; /* Rimuove eventuali padding a sinistra */
    padding-right: 0; /* Rimuove eventuali padding a destra */
    box-sizing: border-box; /* Assicura che il padding non influenzi la larghezza */
}

/* Media query per dispositivi con larghezza massima di 320px */
@media (max-width: 320px) {
    #index {
        width: 100%; /* La sezione riempie ancora l'intera larghezza */
        margin-left: 0; /* Elimina qualsiasi margine laterale */
        margin-right: 0;
        padding-left: 0; /* Elimina qualsiasi padding laterale */
        padding-right: 0;
    }
}

/* ------------------------------------------------------------------------ GALLERY ------------------------------------------------------------------ */

/* STILE GENERALE PER LA GALLERIA */
#gallery-items {
    display: grid; /* Utilizza CSS Grid per una disposizione automatica */
    gap: 20px; /* Spazio tra gli elementi */
    padding: 0; /* Padding laterale per evitare che i video tocchino i bordi del contenitore */
    justify-content: center; /* Centra il contenuto della griglia */
    width: 100%; /* Assicura che il contenitore utilizzi tutta la larghezza disponibile */
    box-sizing: border-box; /* Include il padding e il bordo nella larghezza totale */
}

/* STILE PER OGNI ELEMENTO DELLA GALLERIA */
.cbp-item {
    background-color: #fff; /* Colore di sfondo per i box */
    border: 1px solid #ddd; /* Bordo leggero */
    border-radius: 8px; /* Angoli arrotondati */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Ombra leggera */
    display: flex; /* Usa flexbox per centrare il contenuto */
    flex-direction: column; /* Centra il testo sotto il video */
    align-items: center; /* Allinea il testo al centro */
    text-align: center; /* Allinea il testo al centro */
    padding: 10px; /* Padding interno per il contenuto */
    width: 100%; /* Assicura che il contenuto non esca dal box */
    max-width: 100%; /* Evita che l'elemento superi la larghezza del contenitore */
    box-sizing: border-box; /* Include il padding e il bordo nella larghezza totale */
}

/* STILE PER L'IMMAGINE NEL CONTAINER */
.iframe-container {
    position: relative;
    width: 100%;
    padding-top: 60%; /* Ridotto rispetto al 56.25% per una dimensione leggermente più piccola */
    margin-bottom: 10px; /* Spazio sotto il video */
}

.iframe-container img,
.iframe-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Adatta l'immagine senza distorcerla */
}

/* STILI PER I TESTI */
.title {
    font-size: 0.8vw; /* Dimensione del font per i titoli */
    text-decoration: none; /* Rimuove la sottolineatura */
    color: #333; /* Colore del testo */
    display: block;
    margin: 10px 0; /* Margini sopra e sotto */
}

.description {
    font-size: 0.7vw; /* Dimensione del font per la descrizione */
    color: #666; /* Colore del testo */
    margin: 0; /* Margine */
}

/* Dispositivo molto piccolo (smartphone in verticale) */
@media (max-width: 374px) {
    #gallery-items {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Colonne flessibili per tablet */
    }

    .iframe-container {
        padding-top: 60%; /* Maggiore altezza per una visualizzazione migliore su schermi molto piccoli */
    }
}

/* Dispositivo piccolo (smartphone medio) */
@media (min-width: 375px) and (max-width: 599px) {
    #gallery-items {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Colonne flessibili per tablet */
    }

    .iframe-container {
        padding-top: 60%; /* Maggiore altezza per una visualizzazione migliore su schermi molto piccoli */
    }
}

/* Dispositivo medio (tablet) */
@media (min-width: 600px) and (max-width: 899px) {
    #gallery-items {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Colonne flessibili per tablet */
    }

    .iframe-container {
        padding-top: 60%; /* Ridotto per una dimensione più piccola su tablet */
    }
}

/* Laptop (standard) */
@media (min-width: 900px) and (max-width: 1199px) {
    #gallery-items {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Colonne flessibili per laptop */
    }

    .iframe-container {
        padding-top: 60%; /* Maggiore altezza per una visualizzazione migliore su schermi molto piccoli */
    }
}

/* Laptop grande e desktop */
@media (min-width: 1200px) {
    #gallery-items {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Colonne flessibili per desktop e laptop grande */
    }

    .iframe-container {
        padding-top: 60%; /* Maggiore altezza per una visualizzazione migliore su schermi molto piccoli */
    }
}

/* ----------------------------------------------------------------------------- NAVBAR ------------------------------------------------------------------------------- */

#navigation .nav-menu {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

/* Navbar toggler button */
.navbar-toggler {
    display: none; /* Hide by default */
    background: transparent;
    border: none;
    cursor: pointer;
}

/* Navbar menu items */
.nav-menu ul {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Dropdown menu */
.nav-menu .dropdown-menu {
    display: none; /* Hide dropdowns by default */
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    border: 1px solid #ddd;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Dropdown items */
.nav-menu .dropdown:hover .dropdown-menu {
    display: block; /* Show dropdown on hover */
}

/* Navbar toggler icon */
.navbar-toggler-icon {
    display: block;
    width: 30px;
    height: 3px;
    background-color: #000;
    position: relative;
}

.navbar-toggler-icon::before,
.navbar-toggler-icon::after {
    content: "";
    position: absolute;
    width: 30px;
    height: 3px;
    background-color: #000;
}

.navbar-toggler-icon::before {
    top: -8px;
}

.navbar-toggler-icon::after {
    top: 8px;
}

/* Collapsed menu styles */
.nav-menu.collapsed {
    display: none; /* Hide menu by default when collapsed */
}

/* Collapsed menu styles for mobile and tablet */
@media only screen and (max-width: 1024px) {
    .navbar-toggler {
        display: block; /* Show toggler button on mobile and tablets */
    }

    .nav-menu.collapsed {
        display: none; /* Hide menu by default when collapsed */
    }

    .nav-menu.expanded {
        display: block; /* Show menu when toggled */
    }

    .nav-menu ul {
        flex-direction: column;
        width: 100%;
    }

    .nav-menu ul li {
        width: 100%;
    }
}