/* --- REGOLE DESKTOP: GRIGLIA HERO --- */
#works.grid {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    /* Spinge giù il blocco hero per evitare che l'header fisso lo copra */
    margin-top: 36px !important; 
}

/* Banner principale in alto a tutta larghezza */
#works figure.hero-main-block {
    width: 100% !important;
    float: none;
    margin: 0;
}

/* I 4 blocchi secondari affiancati esattamente al 25% ciascuno */
#works figure.hero-sub-block {
    width: 25% !important;
    float: left !important;
    margin: 0;
    box-sizing: border-box;
}

/* Immagini responsive e adattate */
#works figure img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}


/* --- REGOLE RESPONSIVE (MOBILE - sotto i 768px) --- */
@media (max-width: 768px) {
    #works.grid {
        display: block;
        /* Aumenta leggermente lo spazio su mobile per compensare l'altezza dell'header/menu a comparsa */
        margin-top: 20px !important; 
    }
    
    /* Rendi fluido anche il blocco principale su mobile e azzera margini anomali */
    #works figure.hero-main-block {
        width: 100% !important;
        height: auto !important;
    }

    #works figure.hero-main-block img {
        height: auto !important;
        max-height: none !important;
    }

    /* Uniforma il posizionamento del titolo principale su mobile esattamente come gli altri blocchi */
    #works figure.hero-main-block h2 {
        margin-top: 15% !important;
        margin-bottom: 0 !important;
    }
    
    /* Su mobile i blocchi secondari diventano a colonna singola (100%) */
    #works figure.hero-sub-block {
        width: 100% !important;
        float: none !important;
        display: block;
    }
    
    /* Gestione uniforme dei titoli per tutti i blocchi su mobile */
    #works figure h2 {
        margin-top: 12% !important;
        font-size: 1.5rem !important; 
    }
    
    /* Rende i box delle manifestazioni a colonna singola ma centrati e con margine laterale (non full width) */
    .experience-grid {
        margin-bottom: -50px;
    }
    .experience-grid > div {
        width: 85% !important;
        margin-left: auto !important;
        margin-right: 2em !important;
        float: none !important;
    }
    /* Centratura perfetta del titolo e del testo della sezione contatti */
    #contact h2 {
        text-align: center !important;
        width: 100%;
    }
    #contact .contactform {
        text-align: center !important;
        padding-left: 15px;
        padding-right: 15px;
    }
}


/* --- SFONDO PARALLASSE FULL WIDTH & ALTEZZA PERSONALIZZATA --- */
.highlight-info {
    position: relative;
    width: 100vw !important;
    height: 300px; /* Aumentato per dare più altezza al box */
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    background-size: cover;
    background-position: center;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Aumenta l'altezza del box modificando il padding verticale e l'altezza dell'overlay */
.highlight-info .overlay {
    width: 100% !important;
    height: 300px !important; /* Aumentato in proporzione */
    margin: 0 !important;
    padding-top: 105px !important;  /* Aumentato per centrare verticalmente il testo nel nuovo spazio */
    padding-bottom: 105px !important;
}


/* Scrollbar standard a comparsa al passaggio del mouse */
.custom-scroll {
    overflow-y: auto;
}
.custom-scroll::-webkit-scrollbar {
    width: 5px;
}
.custom-scroll::-webkit-scrollbar-track {
    background: transparent;
}
.custom-scroll::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0);
    border-radius: 4px;
    transition: background 0.3s;
}
.custom-scroll:hover::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.2);
}

/* Classi per mostrare/nascondere dinamicamente le frecce di scorrimento */
.scroll-up-btn, .scroll-down-btn {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.scroll-up-btn.visible, .scroll-down-btn.visible {
    opacity: 1;
    visibility: visible;
}


/* Effetto transizione hover per le icone social nel footer */
.footer .social-icons a {
    color: #fff;
    transition: opacity 0.3s ease, color 0.3s ease;
    margin: 0 8px;
}
.footer .social-icons a:hover {
    color: #e0e0e0; /* Leggero viraggio chiaro o opacità ridotta */
    opacity: 0.7;
}