/*
 * ************* PROJECTES *****************
 * Graella de categories ([projectes_categories_grid]) i galeria del projecte ([projecte_galeria]).
 * Les graelles de categories s'estilen dins d'un contenidor amb classe:
 *   .projectesPage  -> pàgina de Projectes (2 columnes)
 *   .menuProjectes  -> menú desplegable de Projectes (4 columnes)
 */

/* Graella de Categories de Projectes */
.projectesPage .projectes-categories-grid,
.menuProjectes .projectes-categories-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.menuProjectes .projectes-categories-grid {
    grid-template-columns: repeat(4, 1fr);
}

.projectesPage .projectes-categories-grid__item,
.menuProjectes .projectes-categories-grid__item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    text-decoration: none;
}

.projectesPage .projectes-categories-grid__imatge,
.menuProjectes .projectes-categories-grid__imatge {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.4s ease;
}

/* Vetlla de foscor perquè el títol es llegeixi bé sobre qualsevol foto */
.projectesPage .projectes-categories-grid__item::after,
.menuProjectes .projectes-categories-grid__item::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 1;
}

.projectesPage .projectes-categories-grid__titol,
.menuProjectes .projectes-categories-grid__titol {
    position: relative;
    z-index: 2;
    margin: 0;
    padding: 0 16px;
    text-align: center;
    color: #fff;
    font-size: 24px;
    font-weight: 600;
    font-family: Raleway, sans-serif;
    text-transform: uppercase;
}

/* Petita animació d'hover */
.projectesPage .projectes-categories-grid__item:hover .projectes-categories-grid__imatge,
.menuProjectes .projectes-categories-grid__item:hover .projectes-categories-grid__imatge {
    transform: scale(1.05);
}

/* Mòbil: 1 sola columna */
@media (max-width: 767px) {
    .projectesPage .projectes-categories-grid,
    .menuProjectes .projectes-categories-grid {
        grid-template-columns: 1fr;
    }
}

/* Galeria d'imatges del Projecte */
.projecte-galeria-grid {
    display: grid;
    width: 100%;
    gap: 12px;
}

.projecte-galeria-grid__item {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background-color: #E2DCCE;
}

.projecte-galeria-grid__item img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    object-fit: contain !important; /* mai es retalla; si sobra espai, es veu el fons */
    display: block !important;
}

/* Tauleta: 2 columnes (!important per guanyar a l'estil inline del shortcode) */
@media (max-width: 1024px) {
    .projecte-galeria-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Mòbil: 1 columna */
@media (max-width: 600px) {
    .projecte-galeria-grid {
        grid-template-columns: 1fr !important;
    }
}