/*--------------------------------------------------------------
# Stili per il Plugin Galleria Personalizzata
--------------------------------------------------------------*/

/* --- Wrapper Principale --- */
.galleria-plugin-wrapper {
    margin: 2em 0;
}

/* --- Menu di Filtraggio --- */
.galleria-filtri {
    list-style: none;
    padding: 0;
    margin: 0 0 2em 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}

.galleria-filtri .filtro-btn {
    background-color: transparent;
    border: none;
    padding: 8px 16px;
    cursor: pointer;
    font-size: 16px;
    color: #555;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.galleria-filtri .filtro-btn:hover {
    background-color: #f0f0f0;
    color: #111;
}

.galleria-filtri .filtro-btn.active {
    background-color: #111;
    color: #fff;
}

/* --- Contenitore della Griglia (CSS Grid) --- */
.galleria-custom-container {
    display: grid;
    gap: 20px; /* Spazio tra le card */
}

/* Regole per il numero di colonne basate sulla classe PHP */
.galleria-custom-container.columns-2 { grid-template-columns: repeat(2, 1fr); }
.galleria-custom-container.columns-3 { grid-template-columns: repeat(3, 1fr); }
.galleria-custom-container.columns-4 { grid-template-columns: repeat(4, 1fr); }


/* --- Stile della singola Card ("galleria-item") --- */
.galleria-item {
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.galleria-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.1);
}

.galleria-item-immagine img {
    width: 100%;
    height: auto;
    display: block; /* Rimuove lo spazio extra sotto l'immagine */
}

.galleria-item-info {
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.galleria-item-info h3 {
    margin: 0;
    font-size: 1.2em;
}

.galleria-item-info p {
    margin: 0;
    font-size: 0.9em;
    color: #666;
}

.galleria-item-info .categoria-tag {
    align-self: flex-start; /* Allinea a sinistra */
    background-color: #f5f5f5;
    color: #777;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.8em;
    margin-top: 10px;
}
/* --- Controllo altezza descrizione per card uniformi --- */
.galleria-item-info .descrizione {
    /* Impostiamo un'altezza minima per dare spazio anche a descrizioni brevi */
    min-height: 54px; /* Circa 3 righe di testo (18px * 3) */
    
    /* Impostiamo un'altezza massima, il valore chiave! */
    max-height: 54px; /* Corrisponde all'altezza minima */
    
    /* Nascondiamo il testo che fuoriesce dall'altezza massima */
    overflow: hidden;
    
    /* Opzionale: aggiunge "..." se il testo viene tagliato bruscamente. 
       Richiede un set di proprietà per funzionare su più righe. */
    display: -webkit-box;
    -webkit-line-clamp: 3; /* Numero di righe da mostrare */
    -webkit-box-orient: vertical;
}

/* Assicuriamoci che gli altri paragrafi non siano influenzati */
.galleria-item-info .meta {
    min-height: auto;
    max-height: none;
    overflow: visible;
}

/* --- Responsive Design (Media Queries) --- */

/* Per Tablet (es. fino a 768px) */
@media (max-width: 768px) {
    /* Forziamo sempre 2 colonne */
    .galleria-custom-container.columns-3,
    .galleria-custom-container.columns-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Per Smartphone (es. fino a 480px) */
@media (max-width: 480px) {
    /* Forziamo sempre 1 colonna */
    .galleria-custom-container,
    .galleria-custom-container.columns-2,
    .galleria-custom-container.columns-3,
    .galleria-custom-container.columns-4 {
        grid-template-columns: 1fr;
    }
}
/* --- Stili per la Lightbox Personalizzata (Fancybox) --- */

/* 1. Contenitore principale */

.fancybox__container {
    --f-html-bg: #000 !important;
}

.lightbox-custom-content {
    display: flex !important;
    box-sizing: border-box;
    width: 90vw;
    height: 80vh;
    max-width: 1400px;
    padding: 0;
    /* Rimuoviamo lo sfondo bianco da qui */
}

/* 2. Parte sinistra (immagine) */
.lightbox-image {
    flex: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #000; /* MODIFICA: Sfondo nero per l'area immagine */
    padding: 10px;
    box-sizing: border-box;
}

.lightbox-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* 3. Parte destra (informazioni) */
.lightbox-info {
    flex: 1;
    padding: 40px; /* Aumentiamo un po' il padding */
    background: #000; /* MODIFICA: Sfondo nero per l'area info */
    color: #fff;      /* MODIFICA: Testo bianco */
    overflow-y: auto;
    box-sizing: border-box;
}

.lightbox-info h2 {
    margin-top: 0;
    font-size: 2.2em; /* Un po' più grande */
    color: #fff; /* Assicuriamoci che anche i titoli siano bianchi */
}

.lightbox-info h3 {
    margin-top: 2em; /* Più spazio sopra "About this work" */
    color: #fff;
    border-bottom: 1px solid #444; /* Aggiungiamo un separatore sottile */
    padding-bottom: 10px;
    font-size: 1.2em;
}

.lightbox-info p {
    color: #ccc; /* Usiamo un grigio chiaro per il testo, meno stancante del bianco puro */
    line-height: 1.6; /* Aumentiamo l'interlinea per una migliore leggibilità */
}

.lightbox-info p strong {
    color: #fff; /* Rendiamo le etichette (Year, Medium) in bianco puro per contrasto */
}

/* 4. Responsive */
@media (max-width: 768px) {
    .lightbox-custom-content {
        flex-direction: column;
        height: 90vh;
        width: 95vw;
    }
    .lightbox-info {
        flex-grow: 1; /* Permette alla sezione info di occupare lo spazio rimanente */
    }
}
/* --- Stile per il pulsante nella Lightbox --- */
.lightbox-button {
    display: inline-block;
    margin-top: 2em;
    padding: 12px 24px;
    background-color: #fff;
    color: #000;
    border: 1px solid #fff;
    text-decoration: none;
    font-weight: bold;
    border-radius: 5px;
    transition: all 0.3s ease;
}

.lightbox-button:hover {
    background-color: transparent;
    color: #fff;
}