.ddc-gallery { width: 100%; }

/* Filtros */
.ddc-filtros { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.ddc-filtro { padding: 6px 16px; border: 1px solid #ccc; background: #fff; cursor: pointer; border-radius: 3px; transition: all 0.2s; font-size: 14px; }
.ddc-filtro--activo, .ddc-filtro:hover { background: #333; color: #fff; border-color: #333; }

/* Grid (CSS grid, no Isotope) */
.ddc-grid { display: grid; gap: 16px; align-items: start; }
/* align-items:start evita que las tarjetas se estiren a la altura de la
   obra más alta de su fila (clave con obras horizontales + verticales). */
.ddc-grid[data-columnas="2"] { grid-template-columns: repeat(2, 1fr); }
.ddc-grid[data-columnas="3"] { grid-template-columns: repeat(3, 1fr); }
.ddc-grid[data-columnas="4"] { grid-template-columns: repeat(4, 1fr); }

/* Masonry (Isotope-driven): Isotope absolutely positions items, so the
   container must NOT be display:grid, and each item needs an explicit
   percentage width (Isotope percentPosition:true reads it). */
.ddc-grid.ddc-masonry-active { display: block; }
/* Isotope's masonry.gutter (16px) is added on top of each item's own width
   when it works out how many columns fit, so the percentage width must
   leave room for it: width = 100%/n - gutter*(n-1)/n. */
.ddc-grid.ddc-masonry-active[data-columnas="2"] .ddc-obra-item { width: calc(50% - 8px); }
.ddc-grid.ddc-masonry-active[data-columnas="3"] .ddc-obra-item { width: calc(33.3333% - 10.6667px); }
.ddc-grid.ddc-masonry-active[data-columnas="4"] .ddc-obra-item { width: calc(25% - 12px); }
/* Isotope's gutter only separates columns horizontally; vertical spacing
   must come from the item's own bottom margin (Isotope measures outer
   height including margins when stacking). */
.ddc-grid.ddc-masonry-active .ddc-obra-item { margin-bottom: 16px; }

/* Items hidden by the plain-grid filter (no Isotope involved) */
.ddc-grid:not(.ddc-masonry-active) .ddc-obra-item.ddc-oculto { display: none; }

/* Obra item */
.ddc-obra-item { overflow: hidden; }
.ddc-obra-img { width: 100%; height: auto; display: block; }
.ddc-obra-img.lazy { opacity: 0; transition: opacity 0.3s; }
.ddc-obra-img.loaded { opacity: 1; }

/* Meta */
.ddc-obra-meta { padding: 8px 0; }
.ddc-obra-meta p { margin: 2px 0; font-size: 13px; }
.ddc-obra-titulo { font-weight: 600; }
.ddc-obra-tecnica, .ddc-obra-anio, .ddc-obra-dim { color: #666; }
.ddc-obra-precio { color: #333; font-weight: 500; }

/* Carrusel */
.ddc-swiper { width: 100%; }

/* Responsive */
@media (max-width: 768px) {
    .ddc-grid[data-columnas="3"],
    .ddc-grid[data-columnas="4"] { grid-template-columns: repeat(2, 1fr); }

    .ddc-grid.ddc-masonry-active[data-columnas="3"] .ddc-obra-item,
    .ddc-grid.ddc-masonry-active[data-columnas="4"] .ddc-obra-item { width: calc(50% - 8px); }
}
@media (max-width: 480px) {
    .ddc-grid { grid-template-columns: 1fr !important; }

    .ddc-grid.ddc-masonry-active .ddc-obra-item { width: 100% !important; }
}