/* Rejilla de proyectos.
 *
 * Salió del boceto de /proyectos/, pero ya la usan también las páginas de
 * área y los archivos de término. Vive aparte para que cualquier página
 * pueda cargarla sin arrastrar los 30 KB del boceto entero.
 */

/* grid */
/* Tres por fila, todas iguales: el ritmo irregular del boceto (anchas,
   normales, estrechas) dejaba cada fila de un ancho distinto. */
.pgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:clamp(28px,4vw,48px)}
/* Cada tarjeta entra con el scroll (scroll.js → --p): sube, se endereza y se enfoca.
   --dim es el atenuado de las hermanas al pasar el ratón; se multiplica con la entrada. */
.pj{position:relative;border-radius:6px;overflow:hidden;background:var(--paper-2);color:inherit;text-decoration:none;display:flex;flex-direction:column;isolation:isolate;
  --q:var(--p,1);--dim:1;opacity:calc(var(--q)*var(--dim));
  transform:translateY(calc((1 - var(--q))*72px)) scale(calc(.92 + var(--q)*.08));
  transition:transform .3s linear,opacity .3s linear;will-change:transform}
.pgrid{perspective:1400px}
.pj .img img{filter:blur(calc((1 - var(--q,1))*6px))}

.pj.hide{display:none}
.pj .img{position:relative;aspect-ratio:16/10;flex:none;overflow:hidden;background:var(--paper-2)}
.pj .img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.1s var(--ease),filter .5s}
.pj:hover .img img{transform:scale(1.045)}
.pj:hover .cap,.pj:focus-visible .cap{border-top-color:var(--orange)}
.pgrid:hover .pj:not(:hover){--dim:.7}
.pj.type .img .big{transition:opacity .4s}
.pj .cap{padding:14px 16px 16px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;align-items:start;background:var(--paper);border-top:1px solid var(--line)}
.pj .cap b{font-weight:600;font-size:1rem;letter-spacing:-.01em}
.pj .cap .k{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--steel);white-space:nowrap;padding-top:4px}
.pj .cap .tags{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.pj .cap .tags span{font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--graphite);padding:4px 7px;border:1px solid var(--line-strong);border-radius:3px}
/* typographic tile (no image) */
.pj.type .img{display:flex;align-items:flex-end;padding:18px;background:var(--ink);color:var(--paper);min-height:150px}
.pj.type .img .big{font-family:var(--display);font-variation-settings:'wdth' 118;font-weight:600;font-size:clamp(1.8rem,3.2vw,2.8rem);letter-spacing:-.03em;line-height:.95;text-wrap:balance}
.pj.type .img .big i{font-style:normal;color:var(--orange)}
.pj.type .img::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(246,246,244,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(246,246,244,.06) 1px,transparent 1px);background-size:24px 24px}
.pj.type .img .ph{position:absolute;top:14px;left:18px;font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--steel)}
.pj .award{position:absolute;top:12px;left:12px;z-index:2;font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;background:var(--paper);color:var(--ink);padding:6px 9px;border-radius:3px;display:inline-flex;align-items:center;gap:6px}
.pj .award::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--orange)}
.empty{display:none;padding:60px 0;text-align:left;color:var(--steel);border-top:1px solid var(--line)}
.empty.on{display:block}

@media (max-width:1000px){
  .pgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pj .img{aspect-ratio:4/3;flex:none}
  .pgrid:hover .pj:not(:hover){opacity:1}
}
@media (max-width:560px){.pgrid{grid-template-columns:1fr}}

/* Variante regular.
 *
 * El ritmo irregular del boceto funciona con 46 proyectos; con cinco parece
 * un descuido. En las páginas de área la rejilla va a tercios iguales.
 */
.pgrid.regular{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:auto}
.pgrid.regular .pj,.pgrid.regular .pj.w,.pgrid.regular .pj.s{grid-column:span 1;grid-row:auto}
.pgrid.regular .pj .img{aspect-ratio:4/3;flex:none}
@media (max-width:1000px){.pgrid.regular{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.pgrid.regular{grid-template-columns:1fr}}