/* ==========================================================================
   GALERÍA "ALL WORK" (gallery.html)
   ========================================================================== */
.g-loop { padding-top: 0.5rem; }

.g-project { padding-bottom: 4rem; }

/* Cabecera de cada proyecto: se queda fija bajo el header hasta que llega el siguiente proyecto */
.g-head {
    position: sticky;
    top: var(--header-h, 3rem);
    z-index: 40;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gap);
    align-items: start;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    font-size: var(--fs);
    line-height: var(--lh);
    color: var(--header-ink);
    mix-blend-mode: difference;   /* mismo efecto que el header sobre las imágenes */
}

.g-head a, .g-head a:visited { color: var(--header-ink); }

.g-head p:first-child { display: none; }          /* número oculto; quita esta línea para mostrarlo */
.g-desc { grid-column: 2 / span 2; padding-right: 2rem; }
.g-link { display: flex; justify-content: flex-end; }
.g-head p > a:not(.pill):hover { text-decoration: underline; text-underline-offset: 0.2em; }

/* Cuatro columnas con alturas libres: gallery.js coloca cada pieza.
   Verticales = 1 columna. Horizontales = 2 columnas (1-2 o 3-4). */
.g-grid { position: relative; }

.g-item {
    position: absolute;
    display: block;
    aspect-ratio: var(--r);
    border-radius: var(--radius);
    overflow: hidden;
    background-color: var(--surface);
}

.g-item img,
.g-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


.home-header .pill.is-current,
.home-header .pill.is-current:visited { background-color: var(--header-ink); color: #101010; }

@media (max-width: 768px) {
    :root { --g-cols: 2; }
    .g-head { grid-template-columns: 1fr 1fr; row-gap: 0.25rem; }
    .g-desc { grid-column: 1 / -1; padding-right: 0; order: 3; }
}