/* ═══════════════════════════════════════════════════════════════
   EXPOSICIONES CSS — pegar en Cargo > Page CSS de esta página
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. Override Cargo ── */
.page,
.page-layout,
.page-content {
  padding: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  overflow: visible !important;
  height: auto !important;
  contain: none !important;
  transform: none !important;
  will-change: auto !important;
  filter: none !important;
}

bodycopy {
  contain: none !important;
  overflow: visible !important;
  height: auto !important;
}

/* ── 2. Página ── */
#jgp-exposiciones {
  --color-text:  #000;
  --color-muted: #888;
  --pad:         20px;
  font-family: var(--font-body);
  color: var(--color-text);
  background: #fff;
  padding-top: calc(var(--nav-height, 70px) + 8px);
}

/* ── 3. Fila de exposición ── */
.jgp-exp-row {
  margin-bottom: 20px;
}
.jgp-exp-row:last-child {
  margin-bottom: 12px;
}

/* ── 4. Tira de fotos ──
   El título vive DENTRO de este wrapper (position:relative) para
   poder superponerse a la tira con position:absolute. */
.jgp-exp-strip-wrap {
  position: relative;
}

/* Blanco + mix-blend-mode:difference = el título se auto-invierte
   según lo que tenga debajo: negro sobre fondos claros, blanco sobre
   oscuros — siempre legible sin importar la foto. Centrado en la
   tira (no arriba a la izquierda). */
.jgp-exp-title-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.2;
  color: #fff;
  mix-blend-mode: difference;
  pointer-events: none;
  white-space: nowrap;
  text-align: center;
}
.jgp-exp-title-overlay .jgp-exp-year {
  margin-left: 8px;
  font-weight: 400;
  opacity: 0.85;
}

/* Scroll horizontal continuo, en ambas direcciones (loop infinito
   armado en JS clonando .jgp-exp-track dos veces más). Para bajar de
   una exposición a la siguiente está el botón "Siguiente proyecto"
   (ver sección 6), no el wheel. Sin scrollbar visible — el gesto es
   wheel/touch, no arrastrar una barra. */
.jgp-exp-strip {
  display: flex;
  width: 100%;
  height: 55vh;
  min-height: 320px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  background: #000;
}
.jgp-exp-strip::-webkit-scrollbar { display: none; }

.jgp-exp-track {
  display: flex;
  flex-shrink: 0;
  height: 100%;
}

/* Fotos sin espacio entre sí (flex sin gap), cada una con su propia
   proporción real vía --ratio (inline, por foto) — no se recortan. */
.jgp-exp-photo {
  height: 100%;
  flex-shrink: 0;
  
  overflow: hidden;
}

/* ── 5. Texto curatorial — misma grilla de 12 columnas y mismo
   padding lateral (--pad = 20px) que el nav y que Proyecto Individual.
   ES y EN ocupan el mismo ancho (6 columnas cada uno) — antes EN
   quedaba el doble de ancho que ES (alineado a la columna 5 del nav,
   "About") pero se ve mejor parejo. Con columnas iguales hace falta
   gap para separarlas, ya que no van pegadas una a la otra. */
.jgp-exp-text {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
  padding: 8px var(--pad) 16px;
}
.jgp-exp-col.lang-es { grid-column: 1 / 7; }
.jgp-exp-col.lang-en { grid-column: 7 / 13; }
.jgp-exp-col p {
  margin: 0;
  font-size: 14px;
  line-height: 1.07;
}
.jgp-exp-col p + p {
  margin-top: 1.07em;
}
.jgp-exp-col .lang-label {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 12px;
  color: var(--color-muted);
  display: block;
  margin-bottom: 8px;
}
.jgp-exp-col.lang-es .lang-label {
  color: var(--color-text);
}
.jgp-exp-col.lang-es p {
  font-weight: 500;
}
.jgp-exp-col.lang-en p {
  font-weight: 300;
}

/* Colapsado a 4 líneas por default (texto real puede ser un ensayo
   largo) — el botón "Leer más" lo expande. El botón se muestra solo
   si el texto real mide más de 4 líneas (ver JS); con el placeholder
   corto actual queda oculto. */
.jgp-exp-col-content {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.jgp-exp-text.expanded .jgp-exp-col-content {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}
.jgp-exp-readmore {
  display: block;
  margin: -8px var(--pad) 16px;
  padding: 0;
  background: none;
  border: none;
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-muted);
  cursor: pointer;
  text-decoration: underline;
}
.jgp-exp-readmore:hover {
  color: var(--color-text);
}
.jgp-exp-readmore[hidden] {
  display: none;
}

/* ── 6. Botón "Siguiente proyecto" — baja a la exposición de abajo
   (ver JS). Se oculta solo en la última fila: como usa :last-child,
   se ajusta automáticamente si se agregan o sacan exposiciones, sin
   tener que tocar el botón a mano en cada una. */
.jgp-exp-next {
  display: block;
  margin: 0 var(--pad) 0;
  padding: 10px 0;
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-text);
  text-decoration: none;
}
.jgp-exp-next:hover {
  opacity: 0.6;
}
.jgp-exp-row:last-child .jgp-exp-next {
  display: none;
}

/* ── 7. Mobile ── */
@media (max-width: 768px) {
  .jgp-exp-strip {
    height: 32vh;
    min-height: 220px;
  }
  .jgp-exp-text {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .jgp-exp-col.lang-es,
  .jgp-exp-col.lang-en { grid-column: 1 / 2; }
  .jgp-exp-row {
    margin-bottom: 48px;
  }
}

/* Fotos: alto fijo de la tira; el ancho sale de la proporción real de cada foto. */
.jgp-exp-photo { min-width: 260px; }
.jgp-exp-photo img { display: block; height: 100%; width: auto; max-width: none; pointer-events: none; }