/*
Theme Name: Tema Custom PHP
Author: Tuo Nome
Version: 1.0
*/

/* --- Stile Sezione Box Homepage --- */

/* Assicura che i margini e i padding non sballino le misure */
.boxes-section * {
    box-sizing: border-box;
}

/* Spaziatura generale della sezione */
.boxes-section {
    padding: 60px 0;
    background-color: #f9f9f9; /* Grigio chiarissimo di sfondo */
}

/* Il contenitore che tiene tutto al centro */
.boxes-section .container {
    max-width: 1200px; /* Larghezza massima del sito */
    margin: 0 auto;    /* Centra il blocco nella pagina */
    padding: 0 20px;   /* Margine laterale di sicurezza per mobile */
}

/* La griglia flessibile */
.boxes-section .row {
    display: flex;
    flex-wrap: wrap;   /* Permette ai box di andare a capo su mobile */
    gap: 30px;         /* Spazio tra i box */
    justify-content: center; /* Centra i box se ne metti meno di 3 */
}

/* Il singolo Box */
.single-box {
    background: #ffffff;
    border-radius: 10px;        /* Angoli arrotondati */
    overflow: hidden;           /* Assicura che l'immagine rispetti i bordi */
    box-shadow: 0 4px 15px rgba(0,0,0,0.1); /* Ombreggiatura leggera */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Animazione */
    
    /* Calcolo larghezza: 3 colonne - lo spazio del gap */
    width: calc(33.333% - 20px); 
    
    /* Impedisce che diventino troppo piccoli */
    min-width: 280px; 
}

/* Effetto al passaggio del mouse */
.single-box:hover {
    transform: translateY(-5px); /* Si alza leggermente */
    box-shadow: 0 10px 25px rgba(0,0,0,0.15); /* L'ombra aumenta */
}

/* Stile dell'immagine */
.box-image img {
    width: 100%;
    height: 200px;       /* Altezza fissa per allinearli tutti */
    object-fit: cover;   /* Taglia l'immagine se le proporzioni non sono giuste */
    display: block;      /* Rimuove spazi bianchi fastidiosi sotto l'immagine */
}

/* Contenuto testuale */
.box-content {
    padding: 25px;
    text-align: center; /* Testo centrato */
}

.box-content h3 {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.5rem;  /* Grandezza titolo */
    color: #333;        /* Colore scuro */
}

.box-content p {
    font-size: 1rem;
    color: #666;        /* Colore grigio per il testo */
    line-height: 1.6;   /* Interlinea leggibile */
    margin: 0;
}
/* --- STILE CATALOGO / BENTO GRID --- */

/* Impostazione altezza griglia su Desktop */
@media (min-width: 768px) {
    .bento-grid-container {
        height: 600px; /* Altezza totale del mosaico */
    }
    .h-md-100 {
        height: 100% !important;
    }
    .h-md-50 {
        height: 50% !important;
    }
}

/* Altezza minima su mobile per non schiacciare i box */
.bento-item {
    position: relative;
    border-radius: 16px; /* Arrotondamento angoli */
    overflow: hidden;    /* Maschera l'immagine che esce durante lo zoom */
    min-height: 250px;   /* Altezza minima su cellulare */
    width: 100%;
}

/* Immagine di sfondo con effetto Zoom */
.bento-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.7s ease; /* Durata animazione */
    z-index: 1;
}

.bento-item:hover .bento-bg {
    transform: scale(1.1); /* Effetto zoom al passaggio del mouse */
}

/* Gradiente scuro sopra l'immagine (per leggere il testo) */
.bento-overlay {
    position: absolute;
    inset: 0; /* Copre tutto */
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 60%);
    z-index: 2;
    transition: opacity 0.3s;
}

.bento-item:hover .bento-overlay {
    opacity: 0.9; /* Diventa leggermente più scuro all'hover */
}

/* Contenuto testuale */
.bento-content {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 24px;
    z-index: 3;
    width: 100%;
    color: white;
}

.bento-tag {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
    color: #e2e8f0; /* Grigio chiaro */
}

.bento-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    line-height: 1.2;
}

.bento-desc {
    font-size: 0.9rem;
    color: #d1d5db; /* Grigio molto chiaro */
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Taglia il testo dopo 2 righe */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- Adattamento per Cellulari (Responsive) --- */
@media (max-width: 768px) {
    .single-box {
        width: 100%; /* Su mobile occupano tutta la larghezza */
        margin-bottom: 20px;
    }
    
    .boxes-section .row {
        gap: 20px; /* Riduciamo un po' lo spazio su mobile */
    }
}