/* ==========================================================================
   LAB — Archivo
   Todos los proyectos en una retícula, de más reciente a más antiguo. La
   función principal es el filtro, bajo el menú: lo que coincide queda al 100 % y el resto
   se vela. Al pasar por encima de una imagen visible aparece su ficha debajo.
   Diseño: Figma "CODEX — Tokens (pruebas)", página Playground (Desktop - 3).
   ========================================================================== */

.lab-archive {
  /* Lado largo de cada imagen: ≈137px a 1440 (160px en Figma, reducido). Si se gradúa, a tokens.css. */
  --tile: 9.5vw;
  --tile-ratio: 0.762; /* mismo formato que el carrusel de la home */
  --columns: 6;
  --demo-delay: 1.2s; /* demostración de los filtros: espera antes de empezar */
  --demo-step: 1.8s;  /* y tiempo que se queda cada filtro */
  display: grid;
  grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
  row-gap: max(calc(var(--tile) * 0.6), var(--space-16));
  padding: calc(var(--space-32) + var(--space-12)) var(--space-6) calc(var(--space-32) + var(--space-8));
}

.lab-archive__item {
  display: grid;
  place-items: center;
  height: var(--tile);
}

.lab-archive__link { position: relative; display: block; }
.lab-archive__link:focus-visible { outline-offset: var(--space-1); }

.lab-archive__media {
  display: block;
  width: var(--tile);
  height: calc(var(--tile) * var(--tile-ratio));
  background: var(--color-bg-subtle);
  overflow: hidden;
  transition: opacity var(--duration-base) var(--ease-fade);
}
.lab-archive__item[data-orientation="v"] .lab-archive__media {
  width: calc(var(--tile) * var(--tile-ratio));
  height: var(--tile);
}
.lab-archive__media img { width: 100%; height: 100%; object-fit: cover; }

/* Ficha bajo la imagen: no ocupa sitio en la retícula */
.lab-archive__info {
  position: absolute;
  top: 100%;
  left: 0;
  display: grid;
  width: max-content;
  max-width: calc(var(--tile) * 1.6);
  padding-top: var(--space-1); /* 4px hasta la imagen */
  opacity: 0;
  translate: 0 var(--motion-rise);
  pointer-events: none;
  transition: opacity var(--duration-fast) var(--ease-fade),
              translate var(--duration-fast) var(--ease-move);
}
.lab-archive__year { margin-top: var(--space-1); } /* con el interlineado, 8px a la vista entre título y año */
/* El resumen, en el mismo gris que la descripción de la página de proyecto */
.lab-archive__info .is-muted { color: var(--color-text-ghost); }

/* ---------- Filtro ----------
   Lo que queda fuera del filtro se vela. Con GSAP (archivo.js) el cambio va
   imagen a imagen, en el orden de la retícula; sin él, todas a la vez con
   esta transición. */
.lab-archive.has-filter .lab-archive__item:not(.is-match) .lab-archive__media {
  opacity: var(--reveal-rest-opacity);
}
.lab-archive.is-sequenced .lab-archive__media { transition: none; } /* la opacidad la anima GSAP */

/* Ficha: con hover, en las imágenes que están al 100 % */
@media (hover: hover) {
  .lab-archive:not(.has-filter) .lab-archive__link:is(:hover, :focus-visible) .lab-archive__info,
  .lab-archive.has-filter .is-match .lab-archive__link:is(:hover, :focus-visible) .lab-archive__info {
    opacity: 1;
    translate: 0 0;
  }
}
/* En táctil no hay hover: con un filtro activo, las fichas de lo filtrado se ven siempre */
@media (hover: none) {
  .lab-archive.has-filter .is-match .lab-archive__info { opacity: 1; translate: 0 0; }
}

/* Lo que queda fuera del filtro no se puede abrir */
.lab-archive.has-filter .lab-archive__item:not(.is-match) .lab-archive__link { pointer-events: none; }

/* ---------- Tablet y móvil ---------- */
@media (max-width: 1199.98px) {
  .lab-archive { --columns: 4; --tile: 14.5vw; padding-inline: var(--page-margin); }
}
@media (max-width: 599.98px) {
  /* En táctil la ficha se ve siempre al filtrar: la separación entre filas le deja sitio */
  .lab-archive { --columns: 3; --tile: 21vw; row-gap: calc(var(--space-24) + var(--space-8)); padding-top: calc(var(--space-24) + var(--space-8)); }
  .lab-archive__info { max-width: calc(100vw / 3 - var(--space-2)); }
  /* La tercera columna crece hacia la izquierda para no salirse de la pantalla */
  .lab-archive__item:nth-child(3n) .lab-archive__info { left: auto; right: 0; text-align: right; justify-items: end; }
}