/*
 * galeria-en-grilla.css — plan-segmentacion.md §2.15. Solo en `proyecto-detalle`. 3×4 = 12
 * celdas, columna 531px, gutter ~66-72px (P18, aceptado como medida definitiva). Las 12 celdas
 * reciclan solo 5 fotos de stock distintas (P18/hallazgo Fase 0, confirmado 2026-08-17 con los
 * mismos xrefs ya usados en las 6 tarjetas de `proyectos`) — no hay 12 fotos reales, es el mismo
 * bloqueante de siempre (CLAUDE.md §0).
 */

/* Convertido a `.row`/`col-lg-4` de Bootstrap (auditoría 2026-08-18, hallazgo 7 — sin overflow
   real, limpieza de arquitectura, mismo criterio que las otras grillas de 3 columnas del sitio).
   Bootstrap 5.3 soporta gutter Y vía la misma variable `--bs-gutter-y`, visible solo cuando el
   `row` wrappea por debajo de `lg` (992px). */
.gyo-galeria-en-grilla {
  --bs-gutter-x: 72px; /* columna, medido ~70px, normalizado */
  --bs-gutter-y: 64px; /* fila, medido ~63-70px, normalizado */
}

.gyo-galeria-en-grilla__celda {
  position: relative;
  /* Sin `width` propio (corregido 2026-08-18, mismo bug que `.gyo-tarjeta-proyecto`): la celda ES
     la columna de Bootstrap (`col-12 col-lg-4` en el markup) — un `width:100%` pisaba el `width`
     en % de `.col-lg-4` y colapsaba las 3 columnas a una sola. */
  height: 516px; /* medido: alto de fila, 3 filas confirmadas en 516px cada una */
  overflow: hidden;
  cursor: zoom-in; /* "Haz clic en cada imagen para ampliarla" — sin lightbox real todavía */
}

.gyo-galeria-en-grilla__celda img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}