/* assets/css/projets-grid.css */

/* --- GRIGLIA EDITORIALE DEFINITIVA (12 Colonne) --- */
.karozen-all-projects-grid .wp-block-post-template {
    display: grid  ;
    grid-template-columns: repeat(12, 1fr)  ;
    grid-auto-rows: 300px  ;
    gap: 20px  ;
    max-width: 1900px  ;
    margin: 40px auto  ;
    list-style: none  ;
    padding: 0  ;
}

.karozen-all-projects-grid .wp-block-post-template li {
    position: relative;
    overflow: hidden;
    margin: 0  ;
    background: #ffffff;
    display: flex  ;
    height: 100%  ;
}

/* REGOLE SOLO PER DESKTOP (> 768px) */
@media (min-width: 769px) {
    /* RIGA 1 (Immagini 1, 2, 3) */
    .karozen-all-projects-grid .wp-block-post-template li:nth-child(10n+1) { grid-column: span 5  ; }
    .karozen-all-projects-grid .wp-block-post-template li:nth-child(10n+2) { grid-column: span 3  ; }
    .karozen-all-projects-grid .wp-block-post-template li:nth-child(10n+3) { grid-column: span 4  ; }

    /* RIGA 2 (Immagini 4, 5, 6, 7) */
    .karozen-all-projects-grid .wp-block-post-template li:nth-child(10n+4) { grid-column: span 3  ; }
    .karozen-all-projects-grid .wp-block-post-template li:nth-child(10n+5) { grid-column: span 2  ; }
    .karozen-all-projects-grid .wp-block-post-template li:nth-child(10n+6) { grid-column: span 3  ; }
    .karozen-all-projects-grid .wp-block-post-template li:nth-child(10n+7) { grid-column: span 4  ; }

    /* RIGA 3 (Immagini 8, 9, 10) */
    .karozen-all-projects-grid .wp-block-post-template li:nth-child(10n+8) { grid-column: span 4  ; }
    .karozen-all-projects-grid .wp-block-post-template li:nth-child(10n+9) { grid-column: span 5  ; }
    .karozen-all-projects-grid .wp-block-post-template li:nth-child(10n+10) { grid-column: span 3  ; }

    /* LOGICA SMART FILL PER TUTTI I PROGETTI (Riempie l'ultima riga) */
    /* Se l'ultimo è il solo della riga */
    .karozen-all-projects-grid .wp-block-post-template li:last-child:nth-child(3n+1),
    .karozen-all-projects-grid .wp-block-post-template li:last-child:nth-child(10n+4),
    .karozen-all-projects-grid .wp-block-post-template li:last-child:nth-child(10n+8) {
        grid-column: span 12  ;
    }

    /* Se ne mancano 2 per finire la riga */
    .karozen-all-projects-grid .wp-block-post-template li:nth-last-child(2):nth-child(10n+1),
    .karozen-all-projects-grid .wp-block-post-template li:last-child:nth-child(10n+2),
    .karozen-all-projects-grid .wp-block-post-template li:nth-last-child(2):nth-child(10n+4),
    .karozen-all-projects-grid .wp-block-post-template li:last-child:nth-child(10n+5),
    .karozen-all-projects-grid .wp-block-post-template li:nth-last-child(2):nth-child(10n+8),
    .karozen-all-projects-grid .wp-block-post-template li:last-child:nth-child(10n+9) {
        grid-column: span 6  ;
    }
}

/* FORZA L'IMMAGINE A COPRIRE TUTTO IL BOX (Desktop & Mobile) */
.karozen-all-projects-grid li .wp-block-post-featured-image,
.karozen-all-projects-grid li .wp-block-post-featured-image a,
.karozen-all-projects-grid li .wp-block-post-featured-image img,
.karozen-all-projects-grid li figure {
    position: absolute  ;
    top: 0; left: 0;
    width: 100%  ;
    height: 100%  ;
    object-fit: cover  ;
    display: block  ;
    margin: 0  ;
    padding: 0  ;
}

/* OVERLAY TITOLO (Centrato sopra l'immagine) */
.karozen-all-projects-grid .wp-block-post-title {
    position: absolute  ;
    top: 0;
    left: 0;
    width: 100%  ;
    height: 100%  ;
    display: flex  ;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.2);
    backdrop-filter: blur(2px);
    color: white  ;
    margin: 0  ;
    opacity: 0;
    transition: all 0.6s ease;
    z-index: 20;
    font-family: var(--font-display)  ;
    font-size: 24px  ;
    text-align: center;
    padding: 20px;
    pointer-events: none;
}

/* REGOLE SOLO PER MOBILE (<= 768px) */
@media (max-width: 768px) {
    .karozen-all-projects-grid {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    .karozen-all-projects-grid .wp-block-post-template {
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-auto-rows: auto !important;
        gap: 20px !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;
        margin-top: 20px !important;
        margin-bottom: 20px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .karozen-all-projects-grid .wp-block-post-template li {
        grid-column: 1 / -1 !important;
        aspect-ratio: 3 / 2 !important;
        height: auto !important;
        width: 100% !important;
        margin: 0 0 15px 0 !important;
        box-sizing: border-box !important;
    }

    .karozen-all-projects-grid .wp-block-post-title {
        opacity: 1 !important;
        background: rgba(0,0,0,0.3) !important;
        font-size: 18px !important;
        backdrop-filter: none !important;
    }
}

.karozen-all-projects-grid li:hover .wp-block-post-title {
    opacity: 1;
}

/* --- GRIGLIA PROGETTI HOMEPAGE DINAMICA (Query Loop 3+2) --- */
.karozen-homepage-projects-grid .wp-block-post-template,
.wp-block-query.karozen-homepage-projects-grid .wp-block-post-template {
    display: grid  ;
    grid-template-columns: repeat(12, 1fr)  ;
    grid-auto-rows: 300px  ;
    gap: 20px  ;
    max-width: 1900px  ;
    list-style: none  ;
}

.karozen-homepage-projects-grid .wp-block-post-template li,
.wp-block-query.karozen-homepage-projects-grid .wp-block-post-template li {
    position: relative  ;
    overflow: hidden  ;
    margin: 0  ;
    display: block  ;
    height: 100%  ;
}

/* Forza l'immagine a coprire tutto il box */
.karozen-homepage-projects-grid li .wp-block-post-featured-image,
.karozen-homepage-projects-grid li .wp-block-post-featured-image a,
.karozen-homepage-projects-grid li .wp-block-post-featured-image img,
.karozen-homepage-projects-grid li figure {
    position: absolute  ;
    top: 0; left: 0;
    width: 100%  ;
    height: 100%  ;
    object-fit: cover  ;
    display: block  ;
    margin: 0  ;
    padding: 0  ;
}

/* Overlay Titolo Dinamico (Forzato sopra l'immagine) */
.karozen-homepage-projects-grid .wp-block-post-title,
.karozen-homepage-projects-grid .wp-block-post-title a {
    position: absolute  ;
    top: 0  ;
    left: 0  ;
    width: 100%  ;
    height: 100%  ;
    display: flex  ;
    align-items: center  ;
    justify-content: center  ;
    background: rgba(0,0,0,0.2)  ;
    backdrop-filter: blur(2px)  ;
    color: white  ;
    margin: 0  ;
    opacity: 0;
    transition: all 0.6s ease  ;
    z-index: 30  ;
    font-family: var(--font-display)  ;
    font-size: 24px  ;
    text-align: center  ;
    padding: 20px  ;
    text-decoration: none  ;
}

.karozen-homepage-projects-grid li:hover .wp-block-post-title,
.karozen-homepage-projects-grid li:hover .wp-block-post-title a {
    opacity: 1  ;
}

/* REGOLE DESKTOP (> 768px) */
@media (min-width: 769px) {
    /* RIGA 1 (Primi 3 progetti) */
    .karozen-homepage-projects-grid .wp-block-post-template li:nth-child(1) { grid-column: span 5  ; }
    .karozen-homepage-projects-grid .wp-block-post-template li:nth-child(2) { grid-column: span 3  ; }
    .karozen-homepage-projects-grid .wp-block-post-template li:nth-child(3) { grid-column: span 4  ; }

    /* RIGA 2 (Progetti 4 e 5) */
    .karozen-homepage-projects-grid .wp-block-post-template li:nth-child(4) { grid-column: span 6  ; }
    .karozen-homepage-projects-grid .wp-block-post-template li:nth-child(5) { grid-column: span 6  ; }

    /* SMART FILL HOMEPAGE DINAMICA */
    .karozen-homepage-projects-grid .wp-block-post-template li:nth-child(4):last-child {
        grid-column: span 12  ;
    }
    .karozen-homepage-projects-grid .wp-block-post-template li:first-child:nth-last-child(2),
    .karozen-homepage-projects-grid .wp-block-post-template li:first-child:nth-last-child(2) ~ li {
        grid-column: span 6  ;
    }
    .karozen-homepage-projects-grid .wp-block-post-template li:only-child {
        grid-column: span 12  ;
    }
}

/* REGOLE MOBILE (<= 768px) */
@media (max-width: 768px) {
    .karozen-homepage-projects-grid,
    .wp-block-query.karozen-homepage-projects-grid {
        display: block  ;
        opacity: 1  ;
        visibility: visible  ;
    }
    .karozen-homepage-projects-grid .wp-block-post-template,
    .wp-block-query.karozen-homepage-projects-grid .wp-block-post-template {
        display: grid  ;
        grid-template-columns: 1fr  ;
        gap: 5px  ;
        padding: 0 5px  ;
        margin: 0  ;
        list-style: none  ;
    }
    .karozen-homepage-projects-grid .wp-block-post-template li,
    .wp-block-query.karozen-homepage-projects-grid .wp-block-post-template li {
        width: 100%  ;
        aspect-ratio: 3 / 2  ;
        margin-bottom: 10px  ;
        position: relative  ;
        display: block  ;
        overflow: hidden  ;
        height: auto  ;
    }
    /* Titoli sempre visibili su mobile */
    .karozen-homepage-projects-grid .wp-block-post-title,
    .karozen-homepage-projects-grid .wp-block-post-title a {
        position: absolute  ;
        top: 0  ;
        left: 0  ;
        width: 100%  ;
        height: 100%  ;
        display: flex  ;
        align-items: center  ;
        justify-content: center  ;
        opacity: 1  ;
        background: rgba(0,0,0,0.4)  ;
        font-size: 20px  ;
        pointer-events: auto  ;
        visibility: visible  ;
        z-index: 999  ;
        backdrop-filter: none  ;
    }
}


/* --- GALLERIA PROGETTO (Editorial Grid Re-used) --- */
.wp-block-gallery.karozen-project-gallery {
    display: grid  ;
    grid-template-columns: repeat(12, 1fr)  ;
    gap: 20px  ;
    max-width: 1900px  ;
    margin: 20px auto  ;
    padding: 0  ;
}

.karozen-project-gallery .wp-block-image,
.karozen-project-gallery .wp-block-image figure,
.karozen-project-gallery .wp-block-image a {
    position: relative  ;
    overflow: hidden  ;
    margin: 0  ;
    display: block  ;
    width: 100%  ;
    height: 100%  ;
    max-height: 300px  ;
}

.karozen-project-gallery .wp-block-image img {
    width: 100%  ;
    height: 100%  ;
    object-fit: cover  ;
    display: block  ;
}

/* No hover effects (no blur, no title) */
.karozen-project-gallery .wp-block-image img {
    transition: none;
}

/* REGOLE DESKTOP (> 768px) - Stessa logica della griglia principale */
@media (min-width: 769px) {
    .karozen-project-gallery .wp-block-image:nth-child(10n+1) { grid-column: span 5; aspect-ratio: 5 / 4; }
    .karozen-project-gallery .wp-block-image:nth-child(10n+2) { grid-column: span 3; }
    .karozen-project-gallery .wp-block-image:nth-child(10n+3) { grid-column: span 4; }

    .karozen-project-gallery .wp-block-image:nth-child(10n+4) { grid-column: span 3; aspect-ratio: 3 / 3; }
    .karozen-project-gallery .wp-block-image:nth-child(10n+5) { grid-column: span 2; }
    .karozen-project-gallery .wp-block-image:nth-child(10n+6) { grid-column: span 3; }
    .karozen-project-gallery .wp-block-image:nth-child(10n+7) { grid-column: span 4; }

    .karozen-project-gallery .wp-block-image:nth-child(10n+8) { grid-column: span 4; aspect-ratio: 4 / 4; }
    .karozen-project-gallery .wp-block-image:nth-child(10n+9) { grid-column: span 5; }
    .karozen-project-gallery .wp-block-image:nth-child(10n+10) { grid-column: span 3; }
}

/* REGOLE MOBILE (<= 768px) */
@media (max-width: 768px) {
    .wp-block-gallery.karozen-project-gallery {
        display: block  ;
        padding: 0 10px  ;
    }
    .karozen-project-gallery .wp-block-image {
        width: 100%  ;
        aspect-ratio: 3 / 2  ;
        margin-bottom: 5px  ;
    }
}