/* RESET E BASE */
* { box-sizing: border-box; }
body { 
    margin: 0; 
    padding: 0; 
    font-family: Verdana, sans-serif; 
    background: #f5f5f5; /* Sfondo grigino chiaro */
}

/* HEADER E TITOLI */
#top_container {
    text-align: center;
    padding: 30px 15px;
    background: #fff;
    border-bottom: 1px solid #ddd;
}
#top_container h1 { 
	margin: 0; 
	font-size: 24px; 
}
#top_container .description { margin: 0; color: #666; font-size: 14px; }

/* 1. Contenitore esterno (bordo rosso) */
#folders_container {
    width: 100% !important;
	/* prima era così 
    display: block !important; /* Torna a block per gestire i margini auto del figlio */
	flex-grow: 1;          /* Occupa tutto lo spazio disponibile tra header e footer */
    display: flex !important;       /* Diventa a sua volta un flexbox */
    align-items: center;    /* Centra verticalmente il suo contenuto (le foto) */
    justify-content: center; /* Centra orizzontalmente il suo contenuto */
    /* border: 2px solid red; */
}

/* 2. La lista (Il blocco delle foto) */
.folders {
    display: grid !important;
    /* Crea colonne fisse da 212px (196px foto + 16px margini) */
    grid-template-columns: repeat(auto-fit, 212px); 
    /* Questo centra l'INTERO blocco della griglia nella pagina */
    justify-content: center; 
    /* Ma allinea le singole icone a sinistra all'interno delle loro celle */
    justify-items: center; 
    width: 100% !important;
    max-width: 1200px !important; /* Limita la larghezza su schermi grandi */
    margin: 0 auto !important;    /* Centra il contenitore max-width */
    padding: 0 !important;
    list-style: none !important;
}

/* 3. Le singole foto (LI) */
.folders li {
    width: 196px !important;
    height: 240px !important; /* Altezza fissa della cornice bianca per mantenere l'allineamento orizzontale */
    margin: 8px 0 !important; 
    display: flex !important;
    flex-direction: column;
    justify-content: space-between;
    background: #fff; /* Aiuta a vedere i bordi delle celle */
    border-radius: 5px;
    padding: 5px; /* crea spazio tra contenuto e bordo cornice bianca */
	transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    will-change: transform; /* Aiuta il browser a rendere l'animazione più fluida */
}

.folders li:hover { 
	transform: scale(1.03); 
	box-shadow: 0 4px 10px rgba(0,0,0,0.1); 
}

.folders li a {
    text-decoration: none;
    color: #333;
    display: block;
}

/* L'IMMAGINE DENTRO LA CARTELLA */
.folders li img {
    width: 180px;
    height: 180px;
    object-fit: cover;
    border-radius: 3px;
    display: block;
    margin: 0 auto; /* centratura foto */
}

/* STILE COMUNE PER ENTRAMBI I TESTI */
.folders li span {
    display: block;
    text-align: center;
    line-height: 1.2;
    padding: 0;
}

/* LA DATA SOPRA (Piccola e discreta) */
.folder-date {
    font-size: 12px;
	font-weight: bold;
    color: #333;        
    margin: 3px;   /* Spazio tra data e foto */
    /* text-transform: uppercase; /* Tutto maiuscolo (opzionale) */
}
/* LA DATA SOPRA (più grande e sottile) */
.folder-date2 {
    font-size: 16px;
	font-weight: normal;
    color: #333;        
    margin: 4px;   /* Spazio tra data e foto */
    /* text-transform: uppercase; /* Tutto maiuscolo (opzionale) */
}

/* LA DESCRIZIONE SOTTO (Più evidente) */
.folder-desc {
    font-size: 12px;
    font-weight: bold;
    color: #222;          /* Nero/Grigio scuro */
    margin-top: 3px;      /* Spazio tra foto e descrizione */
    height: 2.4em;        /* Blocca l'altezza a 2 righe */
    overflow: hidden;     /* Taglia se troppo lungo */
	/* AGGIUNGI QUESTE RIGHE PER IL CENTRAGGIO */
    display: flex !important;
    flex-direction: column !important;   /* Mantiene il testo nel verso giusto */
    justify-content: center;  /* CENTRA VERTICALMENTE lo span */
    align-items: center;      /* CENTRA ORIZZONTALMENTE lo span */
    text-align: center;
}


/* ELIMINA I VECCHI CLEAR CHE DANNO NOIA */
.clear { display: none !important; }