/* =====================================================================
   BERLUTTI — Portfólio dinâmico (página de projeto + lightbox)
   Depende dos tokens de berlutti.css
   ===================================================================== */

/* links dentro do mosaico ocupam a figura inteira */
.mos figure > a{position:absolute;inset:0;display:block}
.mos figure > a:focus-visible{outline-offset:-4px}
.mos figcaption{pointer-events:none}
.filters[hidden]{display:none}

/* ---------- PÁGINA DE PROJETO ---------- */
.pj-meta{display:flex;flex-wrap:wrap;gap:.6rem 2.2rem;margin-top:clamp(1.2rem,2.6vw,2rem);
  border-top:1px solid var(--line);padding-top:1.1rem}
.pj-meta div{display:flex;flex-direction:column;gap:.25rem}
.pj-meta dt{font-family:var(--f-mono);font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-35)}
.pj-meta dd{font-size:.98rem}

.pj-cover{position:relative;overflow:hidden;background:var(--cream-dk);aspect-ratio:21/9}
.pj-cover img{width:100%;height:100%;object-fit:cover}
@media(max-width:820px){.pj-cover{aspect-ratio:4/3}}

.pj-body{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(1.5rem,3vw,3.5rem)}
.pj-body > *{min-width:0}
.pj-text p{font-size:clamp(1rem,1.2vw,1.14rem);line-height:1.72;color:var(--ink-70);max-width:62ch}
.pj-text p + p{margin-top:1.1em}
.pj-text p:first-child{font-family:var(--f-display);font-weight:300;font-size:var(--t-d3);
  line-height:1.25;letter-spacing:-.015em;color:var(--ink)}
.pj-body .pj-text{grid-column:5 / span 8}
@media(max-width:820px){.pj-body{grid-template-columns:1fr}.pj-body .pj-text{grid-column:1 / -1}}
.pj-title{font-size:var(--t-d1);max-width:18ch}
.pj-next__img{display:block;overflow:hidden;background:var(--cream-dk)}
.pj-next__img img{width:100%;height:100%;object-fit:cover}
@media(max-width:820px){.pj-next{grid-template-columns:1fr}.pj-next > *{grid-column:1 / -1}}

.pj-gal figure{cursor:zoom-in}
.pj-gal figcaption{opacity:1;transform:none;background:linear-gradient(180deg,rgba(26,31,23,0),rgba(26,31,23,.55))}
.pj-gal figcaption:empty{display:none}

.pj-next{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(1rem,2vw,2rem);align-items:center;
  border-top:1px solid var(--line);padding-top:clamp(2rem,4vw,3rem)}
.pj-next > *{min-width:0}
.pj-empty{padding-block:clamp(3rem,10vh,7rem);text-align:center}

/* esqueleto enquanto carrega */
.pj-skel{background:linear-gradient(90deg,var(--cream-dk) 0%,var(--cream-lt) 50%,var(--cream-dk) 100%);
  background-size:200% 100%;animation:pjSkel 1.4s linear infinite}
@keyframes pjSkel{to{background-position:-200% 0}}

/* ---------- LIGHTBOX ---------- */
.lbx{position:fixed;inset:0;z-index:9600;background:rgba(20,24,18,.94);display:grid;
  grid-template-rows:auto 1fr auto;opacity:0;pointer-events:none;transition:opacity .35s}
.lbx.on{opacity:1;pointer-events:auto}
.lbx__top,.lbx__bot{display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:1rem var(--gut);color:rgba(240,234,223,.7);font-family:var(--f-mono);font-size:.62rem;
  letter-spacing:.16em;text-transform:uppercase}
.lbx__stage{position:relative;display:grid;place-items:center;min-height:0;padding-inline:var(--gut)}
.lbx__stage img{max-width:100%;max-height:100%;object-fit:contain}
.lbx button{color:var(--cream);border:1.5px solid rgba(240,234,223,.25);border-radius:100px;
  min-width:44px;height:44px;padding-inline:1rem;transition:background .3s,border-color .3s}
.lbx button:hover{background:rgba(240,234,223,.12);border-color:rgba(240,234,223,.6)}
.lbx__nav{display:flex;gap:.5rem}