/* ==========================================================================
   LAB — Carrusel de proyectos de la home
   Swipe vertical, un proyecto por gesto. El anterior y el siguiente asoman
   velados por arriba y por abajo. Ancho común: cada imagen, vertical u
   horizontal, escala hasta ocupar ese ancho y su alto sale de su formato
   (--ratio, en línea en el HTML). El ancho es proporcional al de la ventana,
   pero nunca tanto que la imagen activa no quepa entera en alto. Diseño: Figma "CODEX — Tokens (pruebas)",
   página Playground (Desktop - 1 y Desktop - 2).
   Sin JS se ve como una lista normal de proyectos.
   ========================================================================== */

.lab-home {
  /* Valores propios del experimento. Si se gradúan, pasan a tokens.css. */
  --carousel-min-ratio: 0.762;  /* la vertical de Figma (604.5 × 793.5); una imagen más alta se recorta a este formato */
  --carousel-idle: 6s;      /* sin actividad durante este tiempo, el carrusel avanza solo */
  --carousel-autoplay: 4s;  /* y pasa al siguiente proyecto con esta cadencia */
  --carousel-gutter: calc(var(--lab-nav-h) + var(--space-6)); /* aire mínimo arriba y abajo: la imagen activa nunca pasa bajo el menú */
  --carousel-width: min(
    42vw,                                                                        /* 604.5 / 1440 [figma] */
    calc((100svh - 2 * var(--carousel-gutter)) * var(--carousel-min-ratio))      /* que la más alta quepa */
  );
}

/* ---------- Sin JS: lista de proyectos ---------- */
.lab-carousel__track {
  display: grid;
  justify-items: center;
  gap: var(--space-16);
  padding: var(--space-24) var(--page-margin);
}
.lab-slide { width: min(100%, var(--carousel-width)); }
.lab-slide__media { display: block; aspect-ratio: max(var(--ratio), var(--carousel-min-ratio)); background: var(--color-bg-subtle); overflow: hidden; }
.lab-slide__media img { width: 100%; height: 100%; object-fit: cover; }
.lab-slide__info { padding-top: var(--space-2); }
.lab-slide__description { color: var(--color-text-muted); }

/* ---------- Con JS: carrusel ---------- */
.lab-home.is-ready { overflow: hidden; overscroll-behavior: none; }

.is-ready .lab-carousel {
  position: relative;
  height: 100svh;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
}
.is-ready .lab-carousel:active { cursor: grabbing; }
.is-ready .lab-carousel__stage { position: absolute; inset: 0; overflow: hidden; }
.is-ready .lab-carousel__track { display: block; padding: 0; height: 100%; }
.is-ready .lab-slide {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--carousel-width);
  will-change: transform, opacity;
}
.is-ready .lab-slide__info { display: none; }

/* Textos del proyecto activo: una caja del tamaño de la imagen activa
   (--active-h lo pone el JS), con el año arriba a la derecha y la
   disciplina, el título y la descripción alineados con el pie de la imagen. */
.lab-info {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--carousel-width);
  height: var(--active-h, 50svh);
  translate: -50% -50%;
  pointer-events: none;
}
.lab-info[hidden] { display: none; }
.lab-info__discipline {
  position: absolute;
  bottom: 0;
  right: calc(100% + var(--space-2)); /* separada de la imagen; el fondo, solo detrás del texto */
  white-space: nowrap;
  background: var(--color-bg-active); /* la disciplina, marcada como etiqueta */
}
.lab-info__side {
  position: absolute;
  top: 0;
  left: 100%;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: calc((100vw - var(--carousel-width)) / 2);
  padding-inline: var(--space-2);
}
.lab-info__description { color: var(--color-text-ghost); } /* el mismo gris que en la página de proyecto */

/* ---------- Diseño apilado: textos debajo ----------
   Es el de móvil y la variante B de escritorio. El JS pone .is-stack en el
   body en móvil (< 768px) o con ?layout=b. Los textos van abajo, alineados
   con los bordes del carrusel y sin fondo de bloque, para que las imágenes
   sigan pasando por debajo. La imagen activa se centra en el hueco que queda
   entre el nav y los textos. */
.lab-home.is-stack {
  --info-h: 7.5rem; /* alto reservado para el bloque de textos */
  --carousel-width: min(
    calc(100vw - 2 * var(--space-12)),
    42vw,
    calc((100svh - var(--info-h) - 2 * var(--carousel-gutter)) * var(--carousel-min-ratio))
  );
}
@media (max-width: 767.98px) {
  /* En móvil el carrusel ocupa el ancho, menos un margen (también sin JS) */
  .lab-home { --carousel-width: calc(100vw - 2 * var(--space-12)); }
  .lab-home.is-stack {
    --carousel-width: min(
      calc(100vw - 2 * var(--space-12)),
      calc((100svh - var(--info-h) - 2 * var(--carousel-gutter)) * var(--carousel-min-ratio))
    );
  }
}

/* El escenario ocupa toda la pantalla; la pista sube la mitad del bloque de
   textos para que la imagen activa quede centrada en el hueco de encima. */
.is-stack.is-ready .lab-carousel__track { translate: 0 calc(var(--info-h) / -2); }

.is-stack .lab-info {
  top: auto;
  bottom: 0;
  left: 0;
  width: 100%;
  height: var(--info-h);
  translate: none;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto 1fr;
  align-content: start;
  column-gap: var(--space-4);
  row-gap: 0; /* disciplina, título y descripción, sin separación */
  padding: var(--space-3) calc((100vw - var(--carousel-width)) / 2) var(--space-6);
}
.is-stack .lab-info__discipline,
.is-stack .lab-info__side { position: static; width: auto; padding: 0; }
.is-stack .lab-info__side { display: contents; }
.is-stack .lab-info__discipline { grid-column: 1; grid-row: 1; }
.is-stack .lab-info__year { grid-column: 2; grid-row: 1; justify-self: end; }
.is-stack .lab-info__head { grid-column: 1 / -1; grid-row: 2; display: grid; justify-items: start; align-content: start; }
/* Cada texto lleva el fondo de la página, solo lo que ocupa: se lee sobre
   las imágenes y entre líneas siguen viéndose */
.is-stack .lab-info__discipline,
.is-stack .lab-info__year,
.is-stack .lab-info__title,
.is-stack .lab-info__description { width: fit-content; background: var(--color-bg); }
.is-stack .lab-info__discipline { background: var(--color-bg-active); } /* la disciplina, marcada como etiqueta */
/* Todos con la misma talla, la de la página de proyecto en móvil */
.is-stack .lab-info__discipline,
.is-stack .lab-info__year,
.is-stack .lab-info__title,
.is-stack .lab-info__description { font: var(--type-md-label); letter-spacing: var(--tracking-md); }
.is-stack .lab-info__description { color: var(--color-text-ghost); } /* como en la página de proyecto, sobre su fondo crema */

/* ---------- Selector de variante (solo del lab, solo en escritorio) ---------- */
.lab-variant {
  position: fixed;
  right: var(--page-margin);
  bottom: var(--page-margin);
  z-index: 10;
  display: flex;
  gap: var(--space-1);
}
.lab-variant a { padding: 2px var(--space-1); color: var(--color-text-ghost); transition: color var(--duration-fast) var(--ease-fade); }
.lab-variant a:hover { color: var(--lab-menu-hover); }
.lab-variant a[aria-current="true"] { color: var(--color-text); }
@media (max-width: 767.98px) { .lab-variant { display: none; } }