/*-------------------------------------------------------------------
    * web site: .... VILLAGGIO INTERNAZIONALE
    * content:  .... stili lo slider minimale per gli eventi
    * author :  .... Poggi Donato 2025
    -------------------------------------------------------------------*/

    .eventi-gallery-wrapper {
        max-width: 1400px;
        margin: auto;
        padding: 15px 0px;
      }
      
      .titolo-eventi {
        text-align: center;
        text-transform: uppercase;
        font-size: 1.8rem;
        font-weight: bold;
        margin: 0 0 15px 0;
        padding:0 0 15px 0;

      }
      
      .gallery-container {
        max-width: 1400px;
        margin: 20px auto;
        padding: 30px 15px;
        border: 1px solid #bdbdbd;
        border-radius: 10px;
      }

      .gallery-wrapper {
        position: relative;
      }
      
      .horizontal-gallery {
        display: flex;
        overflow-x: auto;
        gap: 20px;
        padding-bottom: 10px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
      }
      
      .card-evento {
        flex: 0 0 auto;
        width: 300px;
        margin: 0 4px;
        scroll-snap-align: start;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
      }
      
      .card-evento img {
        width: 100%;
        height: auto;
        border-radius: 10px;
        object-fit: cover;
        aspect-ratio: 16 / 9;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
      }
      
      .titolo-card {
        margin-top: 10px;
        font-size: 0.95rem;
        font-weight: 500;
        color: #333;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
      }
      
      /* Pulsanti di scorrimento */
      .myslider-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px; /* spazio tra pulsanti e slider */
      }
      
      .myslider-button {
        background: none;
        border: none;
        font-size: 1.8rem;
        cursor: pointer;
        color: #333;
      }
      
      .myslider-button:focus {
        outline: none;
      }
      
      .myslider-button:hover {
        color: #000;
      }
      
      
      @media (max-width: 768px) {
        .myslider-button {
          display: none;
        }
      }