/* =====================================================================
   KOMUNA v3 - svi projekti (/portfolio). Ide UZ portfolio.css (ph_*, ix_*, nx_* dolaze odatle).
===================================================================== */

/* ============================ 1. SPICA ============================ */
.pj{position:relative;z-index:2;display:flex;flex-direction:column;min-height:max(100svh,720px);overflow:hidden;background:var(--ink)}
.pj .ph_top{position:relative;z-index:3;padding-top:calc(var(--head-h) + 3vh);padding-bottom:clamp(28px,4svh,48px)}
.pj .ph_h1.pj_h1{max-width:none;font-size:clamp(64px,min(13vw,24svh),236px);line-height:.86}
.pj_side{display:flex;flex-direction:column;gap:clamp(20px,3vh,32px);padding-bottom:.4em;max-width:460px}
.pj_side .ph_meta{padding-bottom:0}
.pj_lead{color:var(--cream-2);font-size:clamp(16px,1.15vw,19px);line-height:1.55}
/* dve beskrajne trake arhive: sadrzaj je dupliran u view-u, pomak -50% = tacno jedan krug */
.pj_reel{margin-top:auto;display:flex;flex-direction:column;gap:14px;padding-bottom:clamp(24px,4svh,48px);--rh:min(26svh,300px)}
.pj_row{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.pj_row ul{display:flex;width:max-content;animation:pjRoll 100s linear infinite}
.pj_row--b ul{animation-direction:reverse;animation-duration:130s}
.pj_row:hover ul{animation-play-state:paused}
.pj_row li{flex:none;height:var(--rh);width:calc(var(--rh) * .6667);margin-right:14px}
.pj_row li.sq{width:var(--rh)}
.pj_row a{display:block;height:100%;overflow:hidden;background:var(--ink-3)}
.pj_row img{width:100%;height:100%;object-fit:cover;filter:grayscale(.4) brightness(.8);transition:filter .6s,transform 1.2s var(--ease-out)}
.pj_row a:hover img{filter:none;transform:scale(1.05)}
@keyframes pjRoll{to{transform:translate3d(-50%,0,0)}}
.v3-rm .pj_row ul{animation:none}

/* ============================ 3. ARHIVA ============================ */
.pj_flt{display:flex;flex-direction:column;gap:12px;margin-top:calc(-1 * clamp(8px,2vw,36px));margin-bottom:clamp(44px,5vw,80px)}
.pj_flt_r{display:grid;grid-template-columns:120px minmax(0,1fr);align-items:center;gap:16px}
.pj_flt_r > .v3-mono{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--cream-3)}
.ix_flt--sm button{height:36px;padding:0 14px;font-size:11px}
/* omot (kvadrat) u 2:3 kadru mesovite arhive: matiran, kao eksponat */
.ix_list[data-view="wall"] .ix_th img.is-sq{object-fit:contain;padding:0 9%;filter:drop-shadow(0 18px 24px rgba(0,0,0,.55))}
.pj_more{display:flex;justify-content:center;margin-top:clamp(48px,5vw,88px)}
.pj_more b{font-weight:500;color:var(--red-hi)}
.pj_more [hidden]{display:none}

/* ============================ MOBILNI ============================ */
@media (max-width:1024px){
  .pj{min-height:0}
  .pj_reel{--rh:200px;margin-top:36px}
}
@media (max-width:760px){
  .pj .ph_h1.pj_h1{font-size:22vw}
  .pj_reel{--rh:150px;gap:10px}
  .pj_row li{margin-right:10px}
  .pj_flt{margin-top:0}
  .pj_flt_r{grid-template-columns:1fr;gap:8px}
}