/* ==========================================================================
   LAB — Página de proyecto
   Arriba, la información del proyecto: título y descripción a la izquierda,
   disciplina y año a la derecha. Se queda fija mientras las imágenes pasan
   por debajo; cada texto lleva el fondo de la página para leerse encima.
   Debajo, la galería en módulos según el formato de cada pieza (los elige
   build.py) y, al final, los créditos. La página acaba justo donde acaban.
   Diseño: Figma "CODEX — Tokens (pruebas)", Desktop - 4.
   ========================================================================== */

.lab-project {
  /* Lado corto de una pieza centrada: 5 de las 12 columnas [figma: 598px a 1440] */
  --project-short: calc(100vw * 5 / 12);
  --project-pair-ratio: 0.762; /* las dos piezas de un par se recortan igual: el formato del carrusel */
  --project-head-top: calc(var(--lab-nav-h) + var(--space-12));
}

/* ---------- Información: fija ---------- */
.lab-project__head {
  position: sticky;
  top: var(--project-head-top);
  z-index: 5;
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 0; /* sin hueco entre columnas: el fondo de la izquierda llega hasta la disciplina */
  margin-block: var(--project-head-top) var(--space-6);
  pointer-events: none; /* entre los textos, las imágenes siguen siendo de la galería */
  font: var(--type-xl-label);
  letter-spacing: var(--tracking-xl);
}
.lab-project__main,
.lab-project__side { display: grid; }
.lab-project__main { flex: 1; min-width: 0; } /* llena hasta la disciplina: un texto corto ocupa lo suyo y uno largo baja de línea al tocarla */
.lab-project__side { flex-shrink: 0; justify-items: end; text-align: right; white-space: nowrap; }
.lab-project__head :is(h1, p) {
  width: fit-content;
  background: var(--color-bg);
  pointer-events: auto;
  font: inherit;
  letter-spacing: inherit;
}
.lab-project__head :is(.lab-project__title, .lab-project__description) { width: auto; }
.lab-project__description { color: var(--color-text-ghost); }
.lab-project__discipline { background: var(--color-bg-active) !important; } /* la disciplina, marcada como etiqueta */

/* ---------- Galería ---------- */
.lab-project__gallery {
  display: flex;
  flex-direction: column; /* los módulos van pegados, sin hueco entre ellos */
}
.lab-project__media { margin: 0; overflow: hidden; }
.lab-project__media :is(img, video) { display: block; width: 100%; height: auto; }

/* full: a sangre, con su formato */
.lab-project__module--full .lab-project__media { width: 100%; }

/* pair: dos verticales, mismo recorte */
.lab-project__module--pair {
  display: grid;
  grid-template-columns: 1fr 1fr; /* sin hueco entre las dos */
}
.lab-project__module--pair .lab-project__media { aspect-ratio: var(--project-pair-ratio); }
.lab-project__module--pair :is(img, video) { height: 100%; object-fit: cover; }

/* center: sola y centrada, con aire. El lado corto mide --project-short */
.lab-project__module--center {
  display: flex;
  justify-content: center;
  padding-block: var(--space-32);
}
.lab-project__module--center .lab-project__media { width: var(--project-short); max-width: 100%; }
.lab-project__module--center .lab-project__media[data-orientation="h"] {
  width: calc(var(--project-short) * var(--ratio));
}

/* ---------- Créditos: cierran la página ---------- */
.lab-project__credits {
  margin-top: var(--space-32);
  font: var(--type-xl-label);
  letter-spacing: var(--tracking-xl);
}
.lab-project__credits :is(h2, p) { font: inherit; letter-spacing: inherit; }
.lab-project__credits-names { color: var(--color-text-ghost); }

/* ---------- Móvil ----------
   Los textos mantienen el mismo layout que en escritorio, a 18px (entre los
   24 de escritorio y los 15 del menú) para que la cabecera fija no tape la
   pantalla. Las piezas centradas van pegadas a los módulos vecinos, sin aire. */
@media (max-width: 767.98px) {
  .lab-project { --project-short: calc(100vw * 2 / 3); }
  .lab-project__head,
  .lab-project__credits { font: var(--type-md-label); letter-spacing: var(--tracking-md); }
  .lab-project__module--center { padding-block: 0; }
}