/* ==========================================================================
   martamarino.es v2 — retícula de obra
   --------------------------------------------------------------------------
   REGLA QUE MANDA SOBRE TODO: las obras no se recortan. Nunca.

   Las 284 obras medidas van de una proporción de 0,09 (once veces más alta que
   ancha) a 13,67 (trece veces más ancha que alta). Con ese rango, las celdas
   cuadradas quedan descartadas —recortarían más de la mitad— y el masonry por
   columnas también: una obra de ratio 13,67 en una columna estrecha se
   convierte en una raya ilegible.

   La solución es la del propio sector, verificada leyendo el CSS de White Cube,
   Marian Goodman y Hauser & Wirth: NO se fija la proporción del hueco, se fija
   una ALTURA MÁXIMA y se deja el ancho libre. Así un cuadrado y un apaisado
   extremo topan a la misma altura y la fila lee ordenada aunque sus formas no
   tengan nada que ver, sin recortar ni un píxel.

   El segundo acuerdo del sector, y cuesta una línea: las obras de una fila se
   alinean por el BORDE INFERIOR. Es la línea de suelo de una pared de galería.
   ========================================================================== */

/* Regla de gobierno, tomada de Sprüth Magers: `contain` es el comportamiento
   POR DEFECTO de toda imagen del sitio. Así el no-recorte es un estado del
   sistema y no una decisión suelta que alguien pueda romper sin darse cuenta. */
img { object-fit: contain; }

.obras {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hueco, 2rem);
  /* Alineadas por el pie, como cuadros colgados en una pared. */
  align-items: flex-end;
  list-style: none;
  margin: 0;
  padding: 0;
}

.obra { margin: 0; }

/* El ancho lo decide la propia imagen a partir de su altura tope. Nada de
   aspect-ratio en el hueco ni de anchos calculados: la obra manda. */
.obra img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: var(--alto-obra, clamp(15rem, 42vh, 30rem));
  height: auto;
}

/* Reserva del hueco antes de que cargue la imagen, para que no salte la
   maquetación. Usa la proporción REAL del cuadro, así que no recorta:
   simplemente describe la forma que va a ocupar. */
.obra__marco {
  display: flex;
  align-items: flex-end;
}

/* --- Ficha técnica -------------------------------------------------------- */

.obra__datos {
  margin-top: .75rem;
  max-width: 34ch;
}

/* --- Móvil ----------------------------------------------------------------
   Una obra por fila, a lo ancho de la pantalla y con su proporción intacta:
   una obra muy apaisada se ve baja y ancha, que es como es en realidad. */

@media (max-width: 720px) {
  .obra { flex: 0 0 100%; }
  .obra img { width: 100%; max-height: none; }
}

@media (min-width: 721px) and (max-width: 1100px) {
  .obra { --alto-obra: clamp(12rem, 34vh, 22rem); }
}

/* --- Obras claras sobre fondo claro ---------------------------------------
   Buena parte de la obra de Marta —las ceras sobre papel, la serie Nubes— es
   muy clara y se disuelve contra el papel de la página. Un filete de un píxel
   define el borde del cuadro sin añadir marco ni sombra, que es como se resuelve
   en los catálogos impresos. No toca la imagen: solo la delimita. */

.obra img,
.serie img {
  box-shadow: 0 0 0 1px rgb(26 26 24 / 8%);
}