/* assets/css/style.css */

/* Impostazioni Base */
html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', sans-serif;
}

/* 
 * Logica della Galleria (Pure CSS, No JavaScript) 
 */
.gallery-container {
    position: relative;
    width: 100%;
}

.gallery-wrapper {
    position: relative;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 1 / 1; 
}

.gallery-slides {
    display: flex;
    width: 400%; /* 100% per 4 immagini */
    height: 100%;
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.gallery-slide {
    width: 25%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gallery-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Transizioni in base all'input radio selezionato */
#slide1:checked ~ .gallery-wrapper .gallery-slides { transform: translateX(0%); }
#slide2:checked ~ .gallery-wrapper .gallery-slides { transform: translateX(-25%); }
#slide3:checked ~ .gallery-wrapper .gallery-slides { transform: translateX(-50%); }
#slide4:checked ~ .gallery-wrapper .gallery-slides { transform: translateX(-75%); }

/* Stile per le miniature (thumbnails) */
.gallery-thumbs label {
    width: 64px;
    height: 64px;
    opacity: 0.6;
    transition: all 0.2s ease-in-out;
}

.gallery-thumbs label img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery-thumbs label:hover {
    opacity: 1;
}

/* Stato Attivo per le Miniature */
#slide1:checked ~ .gallery-thumbs label[for="slide1"],
#slide2:checked ~ .gallery-thumbs label[for="slide2"],
#slide3:checked ~ .gallery-thumbs label[for="slide3"],
#slide4:checked ~ .gallery-thumbs label[for="slide4"] {
    border-color: #047857; /* green-700 Tailwind */
    opacity: 1;
    box-shadow: 0 0 0 1px #047857;
}

/* Personalizzazione Amazon Style Reviews */
.review-block {
    word-wrap: break-word;
}