/* ── 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. Variables ── */
#jgp-proyecto {
  --color-text:   #000;
  --color-muted:  #888;
  --border-width: var(--jgp-border-width);
  --pad:          20px;
  font-family: var(--font-body);
  color: var(--color-text);
  background: #fff;
}

/* ── 3. Volver a Proyectos ── */
#jgp-proyecto .jgp-back {
  display: block;
  padding: 12px var(--pad);
  font-family: var(--font-heading);
  font-size: 14px;
  line-height: 1.07;
  color: var(--color-text);
  text-decoration: none;
}
#jgp-proyecto .jgp-back:hover { opacity: 0.6; }

/* ── 4. Tira de fotos — mismas reglas que la tira de Exposiciones ──
   Alto fijo; el ancho de cada foto sale de aspect-ratio: --ratio
   (proporción real, medida en vivo en el html vía shadow DOM), así
   que ninguna se recorta ni se deforma. Scroll horizontal común con
   tope natural en ambos extremos, sin scrollbar visible — el gesto
   es wheel/touch. */
.jgp-proy-strip-wrap {
  position: relative;
}

.jgp-proy-strip {
  display: flex !important;
  flex-direction: row;
  flex-wrap: nowrap;
  width: 100%;
  height: 70vh;
  min-height: 380px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  background: #fff;
}
.jgp-proy-strip::-webkit-scrollbar { display: none; }

.jgp-proy-track {
  display: flex !important;
  flex-direction: row;
  flex-wrap: nowrap;
  flex-shrink: 0;
  height: 100%;
}

.jgp-proy-photo {
  height: 100%;
  flex-shrink: 0;
  
  overflow: hidden;
}

/* ── 5. Título ── */
/* Título del proyecto: 1.5rem (24px), más grande que cualquier otra
   medida de la página (cuerpo 14px, labels/nav 12px). Mismo tamaño en
   escritorio y móvil. */
#jgp-proyecto .jgp-title {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.05;
  text-wrap: balance;
  padding: 28px var(--pad) 12px;
  margin: 0;
}
#jgp-proyecto .jgp-year {
  color: var(--color-muted);
  margin-left: 8px;
  font-size: 14px;
}

/* ── 6. Texto curatorial — dos columnas del MISMO ancho, con gutter ──
   Misma grilla de 12 columnas y mismo padding lateral que el nav
   (--pad = 20px en ambos) y mismo orden que el nav: ES desde la
   columna 1 y EN desde la columna 5 (la de "About"), 4 columnas cada
   una. El gutter (24px, el mismo de Exposiciones) va como padding-right
   dentro de cada columna y NO como gap de la grilla: un gap correría el
   inicio de EN respecto a la columna 5 del nav. Las dos llevan el mismo
   padding, así el texto de ES y el de EN miden exactamente lo mismo. */
#jgp-proyecto .jgp-curatorial {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  padding: 8px var(--pad) 32px;
}
#jgp-proyecto .jgp-curatorial-col.lang-es { grid-column: 1 / 5; padding-right: 24px; }
#jgp-proyecto .jgp-curatorial-col.lang-en { grid-column: 5 / 9; padding-right: 24px; }
#jgp-proyecto .jgp-curatorial-col p {
  margin: 0;
  font-size: 14px;
  line-height: 1.07;
}
#jgp-proyecto .jgp-curatorial-col p + p {
  margin-top: 1.07em;
}
#jgp-proyecto .jgp-curatorial-col .lang-label {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 12px;
  color: var(--color-muted);
  display: block;
  margin-bottom: 8px;
}
#jgp-proyecto .jgp-curatorial-col.lang-es .lang-label {
  color: var(--color-text);
}
#jgp-proyecto .jgp-curatorial-col.lang-es p {
  font-weight: 500;
}
#jgp-proyecto .jgp-curatorial-col.lang-en p {
  font-weight: 300;
}

/* ── 7. Mobile ── */
@media (max-width: 768px) {
  .jgp-proy-strip { height: 62vh; min-height: 340px; }
  #jgp-proyecto .jgp-curatorial { grid-template-columns: 1fr; gap: 24px; }
  #jgp-proyecto .jgp-curatorial-col.lang-es,
  #jgp-proyecto .jgp-curatorial-col.lang-en { grid-column: 1 / 2; padding-right: 0; }
}

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