/* ! ------------------------------- GENERALI MODAL -----------------------------------  */
      html {
        scroll-behavior: smooth; }
     
     .modal-images-container {
         overflow: auto; 
       }
       
       /* ! -------------------------------------  MODAL ------------------------------------------*/
       .modal {
         display: none;
         position: fixed;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background: rgba(0, 0, 0, 0.9);
         justify-content: center;
         align-items: center;
         z-index: 9999;
       }
       
       .modal.active {
         display: flex;
       }
       
       .modal-body {
         display: flex;
       }
       
       .modal-content {
         padding-top: 0px;
         margin: 0 auto;
         display: flex;
         width: 98vw;       
         height: 95vh;  
         align-items: flex-start;
       overflow-x: auto;
       position: relative;
        padding: 0;
       }
       
       .modal-description-container {
         font-size: 17px !important;
         color: white !important;
         text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
         line-height: 1.5;
         position: absolute;
         bottom: 20px;
         left: 15px;
         width: 50%;
         height: auto;
         margin-right: 10px !important;
         padding: 0px;  
         box-sizing: border-box;
         opacity: 1;
         z-index: 1001;
         overflow-x: auto; 
       }
       
       .modal-images-container {
         display: flex;         
         flex-wrap: nowrap;     
         overflow-x: hidden;
         overflow-y: hidden;
         padding: 0;
         padding-top: 30px;
         align-items: flex-start;
         touch-action: none;
       }
       
       .modal-images-container img {
         max-height: 700px;
         height: auto;    
         max-width: 100%;  
         object-fit: contain;   
         margin: 0 10px;
         margin-bottom: 0px !important;
       }
       
     .modal-close {
         position: absolute;
         top: 0px; 
         right: 5px;
         background: transparent;
         border: none;
         color: white;
         font-size: 60px;
         cursor: pointer;
         z-index: 1001;
         transform: translateY(-20px); /* Rimuove qualsiasi traslazione verticale */
     }
       
       body.modal-open {
         overflow: hidden;
       }
     
     /* ! -------------------------------------  CLASSES CSS POUR TEXTE DESCRIPTION ------------------------------------------*/
       .style-link {
        text-decoration: underline;
     }
     
       .style-italic {
        font-style: italic;
     }
     
       .style-bold {
        font-style: bold;
     }
     
       .style-titre {
       font-size: 27px;
        font-weight: 800;
     }
     
     @media (max-width: 768px) {
       .style-titre {
       font-size: 21px;
       font-style: bold;
     }
     }
     
       /****************************************** MOBILE *******************************************/
       @media (max-width: 768px) {
         .modal-content {
           display: flex;
           justify-content: start; 
            height: 100vh; 
         }
       
     .modal-images-container {
         display: flex;
         flex-direction: row;
         position: absolute;
         top: 60px;
         bottom: 5px;
         width: 100%;
         overflow-x: auto;
         overflow-y: hidden;
         align-items: start;
         gap: 10px;
         padding-top: 80px;
         margin: 0px;
         height: 900px;
     }
     
     .modal-images-container img {
         max-height: 100%;
         width: auto;
         max-width: none;
         object-fit: contain; /* Taglia l'immagine in altezza, partendo dall'alto */
         object-position: top; /* Mantiene la parte superiore, taglia sotto */
         display: block;
         align-self: start;
     }
       }
       
       /* ! -----------------------------------  MENU A SCOMPARSA DESCRIZIONE MOBILE -------------------------------------*/
       @media (max-width: 768px) {
         .modal-description-container {
           max-height: 50px; /* Nasconde il testo */
           overflow: hidden;
           padding-top: 0;
           transition: max-height 0.5s ease, padding 0.5s ease;
           position: fixed;
           top: 10px;
           width: 85%;
           font-size: 17px !important;
         }
       
         /* Espande il contenuto quando la classe 'expanded' viene aggiunta */
         .modal-description-container.expanded {
           max-height: 500px;
           padding-top: 10px;
         }
       
         .modal-description-container::before {
         content: "";
         position: absolute;
         bottom: 0;
         left: 0;
         width: 100%;
         height: 40px;
         background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.9));
         pointer-events: none;
         }
     
     .modal-description-container.expanded::before {
         opacity: 0;
     }
     .modal-description-container:not(.expanded)::before {
         transition-delay: 0.5s;
     }
/* ! -----------------------------------------------------------------------*/

     /* Sfondo nero trasparente su tutta la modale */
     .modal:has(.modal-description-container.expanded)::before {
         content: "";
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         /*background: rgba(0, 0, 0, 0.8); */ /* Sfondo nero trasparente */
          -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
         opacity: 1;
         transition: opacity 0.5s ease;
         z-index: 999; /* Assicura che sia sopra le immagini */
     }
     
     /* Nasconde lo sfondo quando il testo è chiuso */
     .modal::before {
         opacity: 0;
         transition: opacity 0.5s ease;
     }
     
         .modal-images-container {
           display: flex;
           flex-direction: row;
           overflow-x: auto; 
         }
       
         .modal-images-container img {
           max-width: 100%;
           flex-shrink: 0;
           margin: 0px;
           margin-left: 10px;
         }
     
         .modal-close {
           position: fixed;
         top: 10px; 
         right: 10px; 
          padding: 0;
         margin: 0;
         transform: translateY(-30px); 
       }
       }