/* Base */

body {

    background: #ffffff;

    border-top: 15px solid #adc9f9;

    padding: 20px;

    font-family: Arial Unicode MS, Arial, Helvetica, sans-serif;

    color: #808080;

}



/* Paragrafi */

p {

    font-size: 16px;

	font-family: Arial Unicode MS, Arial, Helvetica, sans-serif;

}



/* Menu */

#menu {

    width: 100%;

    text-align: center;

}



#menu a {

    color: #0455C8;

    font-size: 18px;

    text-decoration: none;

	font-family: Arial Unicode MS, Arial, Helvetica, sans-serif;

}



#menu a:hover {

    color: #ADC9F9;

}



.menu-items {

    list-style: none;

    padding: 0;

    display: flex;

    justify-content: center;

}



.menu-items li {

    margin: 0 10px;

}



/* -------------------------------------------------- */

/* LOGO                                                */

/* -------------------------------------------------- */



.logo img {

  max-width: 100%;

  height: auto;

  display: block;

  margin: 0 auto 20px auto;

}



#libri {

    max-width: 1100px;

    margin: 50px auto;

    padding: 20px;

}



/* --- STILI TESTO (Sostituiscono h2 e h3) --- */



.titolo-sezione {

    font-size: 24px;

    text-align: center;

    margin-bottom: 10px;

    font-weight: normal; /* Decidi tu se metterlo bold o no */

}



.intro {

    text-align: center;

    margin-bottom: 40px;

    color: #666;

}



/* --- GRIGLIA LIBRI --- */



.books-grid {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 40px 30px;

}

.titolo-libro {

    font-size: 18px;

    margin: 0 0 5px 0;

    color: #333;

}



.genere {

    color: #808080;

    margin-bottom: 15px;

}



/* --- CARD LIBRO --- */

.book {

    display: flex;

    align-items: flex-start;

    gap: 20px;

    padding: 15px;

    transition: all 0.3s ease;

}



.book:hover {

    transform: translateY(-8px);

    background-color: #ffffff;

    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);

    border-radius: 12px;

}





.book img {

    width: 150px;

    height: auto;

    border-radius: 6px;

    flex-shrink: 0;

}

.genere {

    color: #808080;

    font-size: 0.9em;

    margin-bottom: 15px;

}



.desc {

    text-decoration: none;

    color: #0455C8;

    font-weight: normal;

    transition: color 0.3s ease; /* Opzionale: rende il cambio colore fluido */

}

/* Effetto hover: quando passi il mouse sopra la card (.book), il link (.desc) cambia colore */

.book:hover .desc {

    color: #ADC9F9;

}

	

	

/* --- CARD LIBRO --- */

.book {

    display: flex;

    align-items: flex-start;

    gap: 20px;

    padding: 15px;

    transition: all 0.3s ease;

}



.book:hover {

    transform: translateY(-8px);

    background-color: #ffffff;

    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);

    border-radius: 12px;

}



.book img {

    width: 150px;

    height: auto;

    border-radius: 6px;

    flex-shrink: 0;

}

.genere {

    color: #808080;

    font-size: 0.9em;

    margin-bottom: 15px;

}







/* ---------------------- */

/*  SMARTPHONE: LIBRI     */

/* ---------------------- */



@media (max-width: 768px) {



    /* Introduzione allineata a sinistra su smartphone */

    .intro {

        text-align: left !important;

    }



    /* Se vuoi anche il titolo-sezione a sinistra */

    .titolo-sezione {

        text-align: left !important;

    }





    #libri {

        max-width: 100%;

        margin: 20px auto;

        padding: 10px 15px;

    }



    /* Una sola colonna */

    .books-grid {

        grid-template-columns: 1fr;

        gap: 25px;

    }



    /* Card libro in colonna */

    .book {

        display: flex;

        flex-direction: column;

        align-items: flex-start;

        gap: 12px;

        padding: 15px 10px;

    }



    .book img {

        width: 70%;

        max-width: 220px;

        height: auto;

        border-radius: 6px;

        flex-shrink: 0;

        margin: 0 auto 10px auto; /* immagine centrata */

    }



    /* Testo allineato a sinistra */

    .titolo-libro,

    .genere,

    .desc {

        text-align: left;

    }



    /* Se hai un contenitore di testo tipo .book-text */

    .book-text {

        text-align: left;

        width: 100%;

    }





div[align="center"] img {

   max-width: 100%; 

   height: auto; 

   

   }	



}