/* ============================================================================

   TRAVEL.CSS - STILE COMPLETO PAGINA VIAGGIO

============================================================================ */



/* -------------------- RESET BASE -------------------- */

body {

    margin: 0;

    padding: 0;

    font-family: 'Segoe UI', sans-serif;

    background: #fdfdfd;

    color: #333;

}


/* -------------------- CONTENITORE PRINCIPALE -------------------- */



/* -------------------------------------------------------------------------------- */
/* CLASSE: .container */
/* Utilizzata in: elenco_viaggi.php, travel.php */
/* -------------------------------------------------------------------------------- */


.container {

    max-width: 1200px;

    margin: auto;

    padding: 15px;

}


/* -------------------- TITOLO VIAGGIO -------------------- */

/* -------------------------------------------------------------------------------- */
/* CLASSE: .title-container */
/* Utilizzata in: travel.php, travel.php */
/* -------------------------------------------------------------------------------- */


.title-container {

    background-color: #ffa500;

    padding: 10px 0;

    text-align: center;

    margin-bottom: 20px;

}


.title-container h2.title {

    font-size: 22px;

    margin: 0;

    color: #002d49;

  	font-family: 'Comic Sans MS', cursive, sans-serif;  /* font Comic Sans */

    font-weight: bold;  /* peso normale, "solido" */

}

/* ============================================================================

   SLIDER IMMAGINI

============================================================================ */

/* -------------------------------------------------------------------------------- */
/* CLASSE: .slider-container */
/* Utilizzata in: travel.php, travel.php, travel.php, travel.php, travel.php, travel.php */
/* -------------------------------------------------------------------------------- */


.slider-container {

    position: relative;

    overflow: hidden;

    border-radius: 8px;

     width: 100%;              /* assicurarsi che prenda tutta la larghezza disponibile */

    max-width: 1200px;        /* stessa max-width del container principale */

    margin: 0 auto 15px auto; /* centrato con margine sotto */

}

/* -------------------------------------------------------------------------------- */
/* CLASSE: .slider-wrapper */
/* Utilizzata in: travel.php, travel.php */
/* -------------------------------------------------------------------------------- */


.slider-wrapper {

    width: 100%;

    overflow: hidden;

}


/* -------------------------------------------------------------------------------- */
/* CLASSE: .slider */
/* Utilizzata in: travel.php, travel.php */
/* -------------------------------------------------------------------------------- */


.slider {

    display: flex;

    transition: transform 0.5s ease;

    width: 100%;

}

/* -------------------------------------------------------------------------------- */
/* CLASSE: .slide */
/* Utilizzata in: travel.php, travel.php, travel.php, travel.php, travel.php, travel.php, travel.php, travel.php */
/* -------------------------------------------------------------------------------- */


.slide {

    flex: 0 0 100%;

    position: relative;

}


/* -------------------------------------------------------------------------------- */
/* SLIDE MEDIA - Allineamento foto e video */
/* Utilizzata in: travel.php */
/* -------------------------------------------------------------------------------- */

.slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;           /* Mostra tutta la foto senza tagliarla */
    display: block;
    border-radius: 6px;
    background-color: #4d6a79;     /*   opzionale: sfondo sotto , oppure : background-color: transparent; */
	}

.slide video,
.slide iframe {
    width: 100%;
    height: 100%;
    object-fit: cover;             /* Per i video manteniamo full screen */
    display: block;
    border-radius: 6px;
}


/* -------------------------------------------------------------------------------- */
/* CLASSE: .slide */
/* Utilizzata in: travel.php, travel.php, travel.php, travel.php, travel.php, travel.php, travel.php, travel.php */
/* -------------------------------------------------------------------------------- */



.slide {
  aspect-ratio: 16 / 9;   /* oppure 3/2 o 4/3 a tuo gusto */
  height: auto;
}

/* -------------------- OVERLAY TITOLO SU SLIDE -------------------- */

/* -------------------------------------------------------------------------------- */
/* CLASSE: .overlay-title */
/* Utilizzata in: travel.php */
/* -------------------------------------------------------------------------------- */


.overlay-title {

    position: absolute;

    bottom: 20px;

    left: 10px;

    background-color: transparent; /* sfondo trasparente */

    color: white;

    font-size: 14px;

    padding: 4px 8px;

    border-radius: 4px;

    font-family: 'Comic Sans MS', cursive, sans-serif;  /* font Comic Sans */

    font-weight: bold;  /* peso normale, "solido" */

}

@media (max-width: 768px) {
	
	.overlay-title {
	
	bottom: -5px;	}
	
	}


/* -------------------- FRECCE SLIDER -------------------- */

.slider-container .prev,

.slider-container .next {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    background-color: rgba(0,0,0,0.4);

    color: white;

    border: none;

    font-size: 22px;

    padding: 10px;

    cursor: pointer;

    z-index: 10;

    border-radius: 50%;

}


.slider-container .prev {

    left: 10px;

}


.slider-container .next {

    right: 10px;

}


/* ===================================================================================
   NUOVE REGOLE PER FRECCE SLIDER (TRAVEL.PHP) - MOBILE
   =================================================================================== */
   
@media (max-width: 768px) {
	
.slider-container .prev,
.slider-container .next {
    /* Riduci drasticamente la dimensione del carattere (simbolo della freccia) */
    font-size: 16px !important; 
    
    /* Riduci lo spazio interno (la dimensione del cerchio) */
    padding: 0px !important; 
    
       
    /* Se vuoi renderle un po' più trasparenti per vedere di più la foto */
    background-color: rgba(0,0,0,0.0) !important;
	
	top: 30%;
}

/* Regola specifica per la freccia sinistra */
.slider-container .prev {
    left: -140px !important;
}

/* Regola specifica per la freccia destra */
.slider-container .next {
    right: -140px !important;
}


}


/* -------------------- PALLINI SLIDER -------------------- */

/* -------------------------------------------------------------------------------- */
/* CLASSE: .slider-dots */
/* Utilizzata in: travel.php, travel.php, travel.php */
/* -------------------------------------------------------------------------------- */


.slider-dots {

    text-align: center;

    margin-top: 10px;

}


.slider-dots .dot {

    height: 10px;

    width: 10px;

    margin: 0 4px;

    background-color: #bbb;

    border-radius: 50%;

    display: inline-block;

    cursor: pointer;

    transition: background-color 0.3s;

}


.slider-dots .dot.active {

    background-color: #333;

}


/* ============================================================================

   MAPPA GOOGLE

============================================================================ */

/* -------------------------------------------------------------------------------- */
/* CLASSE: .map-container */
/* Utilizzata in: travel.php, travel.php */
/* -------------------------------------------------------------------------------- */


.map-container {

    width: 100%; 

    margin: 30px 0;

    border: 2px solid #ccc;

    border-radius: 6px;

    overflow: hidden;

  /*  height: 550px; */
	
	height: clamp(300px, 60vh, 550px);

}

.map-container iframe {

    width: 100%;

    height: 100%;

    border: none;

}

/* ============================================================================

   GALLERIA GRIGLIA + LIGHTGALLERY

============================================================================ */

/* -------------------------------------------------------------------------------- */
/* CLASSE: .grid-gallery */
/* Utilizzata in: travel.php, travel.php */
/* -------------------------------------------------------------------------------- */


.grid-gallery {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));

    gap: 12px;

    margin-bottom: 20px;

}

/* -------------------------------------------------------------------------------- */
/* CLASSE: .grid-item */
/* Utilizzata in: travel.php, travel.php, travel.php, travel.php */
/* -------------------------------------------------------------------------------- */


.grid-item {

    position: relative;

    border-radius: 6px;

    overflow: hidden;

    background: #fff;

    box-shadow: 0 2px 6px rgba(0,0,0,0.1);

    transition: transform 0.3s;

}

.grid-item:hover {

    transform: scale(1.03);

}

.grid-item img,

.grid-item video {

    width: 100%;

    height: 130px;

    object-fit: cover;

    display: block;

}

/* -------------------- TITOLO SU MINIATURA -------------------- */

/* -------------------------------------------------------------------------------- */
/* CLASSE: .thumb-title */
/* Utilizzata in: travel.php */
/* -------------------------------------------------------------------------------- */


.thumb-title {

    position: absolute;

    bottom: 0;

    background-color: transparent; /* sfondo trasparente */

    color: white;

    width: 100%;

    font-size: 8px;

    padding: 5px;

    text-align: center;

    box-sizing: border-box;
	
	font-family: 'Comic Sans MS', cursive, sans-serif;  /* font Comic Sans */

    font-weight: bold;  /* peso normale, "solido" */

}


/* ------------------------------------------------------------------ */
/* CLASSE: .play-icon-overlay */
/* Overlay con simbolo Play sulle miniature dei video                 */
/* Utilizzata in: travel.php                                         */
/* ------------------------------------------------------------------ */

.play-icon-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 40px;
    color: white;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

/* ============================================================================
   PAGINAZIONE GALLERIA
============================================================================ */

/* -------------------------------------------------------------------------------- */
/* CLASSE: .window-navigation */
/* Utilizzata in: travel.php, travel.php, travel.php, travel.php */
/* -------------------------------------------------------------------------------- */


.window-navigation {

    text-align: center;

    margin-top: 20px;

}

.window-navigation .nav-button {

    display: inline-block;

    background-color: #eee;

    color: #333;

    border: 1px solid #ccc;

    padding: 6px 10px;

    margin: 0 4px;

    border-radius: 4px;

    text-decoration: none;

    transition: background-color 0.3s;

}

.window-navigation .nav-button:hover {

    background-color: #ddd;

}

.window-navigation .nav-button.active {

    background-color: #ffa500;

    color: white;

    font-weight: bold;

}

/* ============================================================================
   RESPONSIVE
============================================================================*/
	
/* ------------------------------------------------------------

In mobile porta l’altezza della slide a 'auto' per evitare buchi.
------------------------------------------------------------ */

@media (max-width: 768px) {
	
	.grid-item img,
  .grid-item video {
    height: 160px; /* da 130 */
  }
	
	
	
  .slide {
    height: auto; /* lascia adattare alla media interna */
  }

  .slide img,
  .slide video,
  .slide iframe {
    max-height: 350px;
  }

/* -------------------------------------------------------------------------------- */
/* CLASSE: .grid-gallery */
/* Utilizzata in: travel.php, travel.php */
/* -------------------------------------------------------------------------------- */

    .grid-gallery {

        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));

    }
	
/* ------------------------------------------------------------
Nasconde "Visualizza Mappa" solo su mobile
------------------------------------------------------------ */
@media (max-width: 768px) {
  .card-mappa {
    display: none !important;   /* Nasconde completamente il testo */
  }
}

}