/* ==========================================================================
   OBRAS.CSS
   Galería de imágenes de referencia. La grilla se reacomoda sola: sumar
   o quitar una <figure class="obra"> en el HTML no requiere tocar esto.
   Las fotos viven en assets/img/obras/ (ver CREDITOS.txt de esa carpeta).
   ========================================================================== */

.obras__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-3);
}

.obra {
  position: relative;
  overflow: hidden;
  background: var(--color-navy);
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - var(--cut)),
    calc(100% - var(--cut)) 100%,
    0 100%
  );
}

.obra img {
  display: block;
  width: 100%;
  height: 240px;
  object-fit: cover;
  transition: transform var(--transition-base);
}

.obra:hover img {
  transform: scale(1.04);
}

.obra figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--space-3) var(--space-2) var(--space-2);
  font-family: var(--font-display);
  font-size: var(--fs-small);
  font-weight: 600;
  color: #ffffff;
  background: linear-gradient(
    to top,
    rgba(20, 33, 47, 0.85),
    rgba(20, 33, 47, 0)
  );
}

.obras__note {
  margin-top: var(--space-4);
  font-size: var(--fs-small);
  color: var(--color-slate);
}