/* 
   STILE PAGINA BLOG
 */

/* Spazio generale della pagina */
#home {
    padding: 50px 0;
}

/* Stile comune dei titoli presenti nella pagina blog */
#home h1,
#home h2,
#home h3 {
    font-family: "Lora", serif;
    color: #1e3a5f;
}

#home h1 {
    font-size: 2.8rem;
    margin-bottom: 25px;
}

#home h2 {
    text-align: center;
    margin-top: 40px;
    margin-bottom: 20px;
}

/* Stile generale dei paragrafi dentro la pagina blog */
#home p {
    color: #4f6175;
    line-height: 1.7;
    font-size: 1.05rem;
}

/* Piccola scritta, alcuni titoli come "Cinema e immaginazione" */
.etichetta {
    color: #6c63ff;
    text-transform: uppercase; 
    letter-spacing: 2px; 
    font-size: 0.8rem;
    font-weight: bold;
}

/* 
   SEZIONE INIZIALE
*/

/* Riquadro iniziale del blog */
.hero-blog {
    background-color: #d7ecfb;
    border-radius: 25px;
    padding: 30px;
    box-shadow: 0 8px 20px rgba(30, 58, 95, 0.12); /* Crea un'ombra leggera sotto il riquadro */
    margin-bottom: 60px;
}

/* Titolo della sezione iniziale allineato a sinistra */
.hero-blog h1 {
    text-align: left;
}

/* Immagine della sezione iniziale */
.hero-blog img {
    width: 100%;
    max-height: 520px;
    object-fit: cover; /* Ritaglia l'immagine per riempire lo spazio senza deformarla */
    object-position: center; /* Mantiene il centro dell'immagine visibile */
    border-radius: 20px;
}



/* Imposta larghezza massima e centratura delle sezioni solo testuali */
.sezione-contenuto,
.titolo-sezione,
.sezione-finale {
    max-width: 850px;
    margin: 50px auto; /* Centra il blocco orizzontalmente */
    text-align: center;
}

/* 
   SEZIONE FILM
*/

/* Riquadro che contiene le schede dedicate ai film */
.sezione-nolan {
    background-color: #d7ecfb;
    border-radius: 25px;
    padding: 30px;
    box-shadow: 0 8px 20px rgba(30, 58, 95, 0.12);
    margin: 60px 0;
}

/* Singola scheda film */
.slide-film {
    background-color: #1e3a5f;
    color: white;
    border-radius: 20px;
    padding: 25px;
}

/* Testi dentro le schede film: sovrascrivono il colore generale dei paragrafi */
#home .slide-film h3,
#home .slide-film p {
    color: white;
}

/* Numero progressivo della scheda film */
.numero-film {
    color: #b9d5f0;
    font-weight: bold;
    letter-spacing: 2px;
    margin-bottom: 10px;
}

/* Spazio tra i bottoni dei film */
.bottoni-film {
    margin-top: 15px;
}

/* Prima regola per distanziare i link dei bottoni */
.bottoni-film a {
    margin-right: 8px;
    margin-bottom: 8px;
}

/* 
   SEZIONE PROGRAMMI
 */

/* Riquadro che contiene la descrizione e le schede dei programmi */
.sezione-programmi {
    background-color: #d7ecfb;
    border-radius: 25px;
    padding: 30px;
    box-shadow: 0 8px 20px rgba(30, 58, 95, 0.12);
    margin: 60px 0;
}

/* Schede dei programmi */
.programma {
    background-color: white;
    text-decoration: none;
    border-radius: 18px;
    padding: 18px;
    color: #1e3a5f;
    transition: 0.2s; /* Rende graduale l'effetto hover */
}

/* Effetto semplice quando passo sopra con il mouse */
.programma:hover {
    transform: translateY(-4px); /* Sposta leggermente la scheda verso l'alto */
    box-shadow: 0 6px 15px rgba(30, 58, 95, 0.15);
}

.programma span {
    color: #6c63ff;
    font-weight: bold;
}

.programma p {
    margin-bottom: 0;
}

/* 
   SEZIONE VIAGGI E MAPPA
*/

/* Riquadro della sezione viaggi */
.mappa-viaggi {
    background-color: #d7ecfb;
    border-radius: 25px;
    padding: 30px;
    box-shadow: 0 8px 20px rgba(30, 58, 95, 0.12);
    margin: 60px 0;
}

/* Titolo della sezione viaggi */
.mappa-viaggi h2 {
    text-align: left;
    margin-top: 8px;
}

/* Testo della sezione viaggi */
.mappa-viaggi p {
    color: #4f6175;
    line-height: 1.7;
}

/* Contenitore della mappa Leaflet */
#map {
    height: 450px; /* Altezza necessaria per rendere visibile la mappa */
    width: 100%;
    border-radius: 18px;
    border: 3px solid #b7d9f7;
}

/* Contenitore delle icone dei mezzi di viaggio */
.icone-viaggi {
    display: flex; /* Dispone le icone sulla stessa riga */
    justify-content: center; /* Centra le icone orizzontalmente */
    align-items: center; /* Allinea le icone verticalmente */
    gap: 12px; /* Distanza tra un'icona e l'altra */
    margin-bottom: -70px; /* Avvicina visivamente le icone al titolo */
}

/* Dimensione delle singole icone */
.icona-viaggio {
    width: 130px;
    height: auto;
}

/* Box finali con i temi principali del blog */
.box-finale {
    background-color: #d7ecfb;
    border-radius: 20px;
    padding: 25px;
    box-shadow: 0 8px 20px rgba(30, 58, 95, 0.12);
}

/* 
   BOTTONI DEI FILM
*/

.bottoni-film a {
    display: inline-block; /* inline-block mantiene l'elemento sulla stessa riga, ma permette di gestire larghezza, altezza e margini */
    text-decoration: none;
    color: white;
    padding: 10px 15px;
    border-radius: 20px;
    margin-top: 10px;
    margin-right: 8px;
    font-weight: bold;
    border: none;
    transition: 0.2s; /* Rende graduale il cambio colore al passaggio del mouse */
}

/* Bottone Trailer */
.bottoni-film .btn-primary {
    background-color: #6c63ff;
}

/* Bottone Scheda */
.bottoni-film .btn-outline-primary {
    background-color: #24c3aedf;
    color: white;
}

/* Effetto quando passo sopra con il mouse */
.bottoni-film a:hover {
    background-color: #d9d946;
    color: white;
}

/* 
   BISCOTTO DELLA FORTUNA
*/

/* Riquadro finale con frase casuale */
.biscotto-box {
    max-width: 450px;
    margin: 40px auto; /* Centra il riquadro nella pagina */
    padding: 25px;
    text-align: center;
    background-color: #cfac66;
    border-radius: 18px;
}

/* Frase mostrata nel biscotto della fortuna */
#frase-fortuna {
    font-style: italic;
    color: #3b2a1a;
}

/* Bottone che cambia la frase */
.btn-biscotto {
    padding: 10px 20px;
    border: none;
    border-radius: 20px;
    background-color: #da8f39;
    color: white;
    cursor: pointer; /* Fa comparire la manina sopra il bottone */
}

/* Colore del bottone quando passo sopra con il mouse */
.btn-biscotto:hover {
    background-color: #c48c54;
}