/* ═══════════════════════════════════════════════════════════════════
   LOOKBOOK — la cuadrícula del mosaico
   ───────────────────────────────────────────────────────────────────
   La comparten la página pública y el panel, para que lo que se ve al
   editar sea exactamente lo que verá la novia. Aquí vive solo la
   geometría: doce columnas y qué columnas ocupa cada foto según sus
   ajustes (data-ancho, data-posicion, data-bajar). El aire, el fondo y
   la animación los pone cada hoja por su cuenta.

   Las filas no se declaran: la colocación automática del navegador va
   poniendo cada foto a continuación de la anterior y salta de fila
   cuando la columna pedida queda por detrás del cursor. Así dos «mitad»
   seguidas comparten fila, una «entera» abre otra, y una «tercio» a la
   derecha tras otra a la izquierda deja el centro vacío.

   Los nombres de los ajustes viven en includes/lookbook.php; si allí se
   añade un ancho o una posición, aquí hay que darle sus columnas. Y
   lookbook_sizes() describe estas mismas anchuras al navegador.
   ═══════════════════════════════════════════════════════════════════ */

.lookbook {
  --look-bajar: clamp(2.5rem, 6vw, 6rem);

  list-style: none;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: start;
}

.lookbook-pieza { min-width: 0; }

.lookbook-pieza[data-ancho="entera"] { grid-column: 1 / 13; }

.lookbook-pieza[data-ancho="dos-tercios"][data-posicion="izquierda"] { grid-column: 1 / 9; }
.lookbook-pieza[data-ancho="dos-tercios"][data-posicion="centro"]    { grid-column: 3 / 11; }
.lookbook-pieza[data-ancho="dos-tercios"][data-posicion="derecha"]   { grid-column: 5 / 13; }

.lookbook-pieza[data-ancho="mitad"][data-posicion="izquierda"] { grid-column: 1 / 7; }
.lookbook-pieza[data-ancho="mitad"][data-posicion="centro"]    { grid-column: 4 / 10; }
.lookbook-pieza[data-ancho="mitad"][data-posicion="derecha"]   { grid-column: 7 / 13; }

.lookbook-pieza[data-ancho="tercio"][data-posicion="izquierda"] { grid-column: 1 / 5; }
.lookbook-pieza[data-ancho="tercio"][data-posicion="centro"]    { grid-column: 5 / 9; }
.lookbook-pieza[data-ancho="tercio"][data-posicion="derecha"]   { grid-column: 9 / 13; }

.lookbook-pieza[data-bajar="1"] { margin-top: var(--look-bajar); }

/* ─── Móvil ───
   Un tercio de 390 px no enseña nada, así que las «tercio» pasan a mitad
   y las «dos tercios» a entera. Formato y encuadre se respetan: solo
   cambia cuánto ocupan. */
@media (max-width: 720px) {
  .lookbook { --look-bajar: clamp(1.5rem, 8vw, 3rem); }

  .lookbook-pieza[data-ancho="dos-tercios"] { grid-column: 1 / 13; }

  .lookbook-pieza[data-ancho="tercio"][data-posicion="izquierda"] { grid-column: 1 / 7; }
  .lookbook-pieza[data-ancho="tercio"][data-posicion="centro"]    { grid-column: 4 / 10; }
  .lookbook-pieza[data-ancho="tercio"][data-posicion="derecha"]   { grid-column: 7 / 13; }
}