/* =====================================================================
   KOMUNA v3 - portfolio kategorija (Film i TV). Tokeni i komponente: v3.css
===================================================================== */

/* ============================ 1. SPICA ============================ */
/* spica je flex kolona: naslov gore, traka plakata gura se na dno - nikad preko naslova/brojki (Ivan 25.09) */
.ph{position:relative;z-index:2;display:flex;flex-direction:column;min-height:max(100svh,640px);overflow:hidden;background:var(--ink);--ph-h:min(40svh,500px);--ph-w:calc(var(--ph-h) * var(--arn,.6667));--ph-g:16px}
.ph.is-sq{--ph-h:min(31svh,380px)}
.ph_amb{position:absolute;inset:0;pointer-events:none;opacity:0}
.ph_amb img{position:absolute;left:50%;top:50%;width:80vw;height:90vh;object-fit:cover;transform:translate(-50%,-50%);filter:blur(110px) saturate(1.5);opacity:.5}
.ph_top{position:relative;z-index:3;padding-top:calc(var(--head-h) + 3vh)}
.ph_crumb{display:flex;align-items:center;gap:12px;color:var(--cream-3)}
.ph_crumb a{color:var(--cream-2)}
.ph_crumb a:hover{color:var(--cream)}
.ph_crumb i{font-style:normal;color:var(--red-hi)}
.ph_crumb span{color:var(--cream)}
.ph_head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:24px 6vw;margin-top:clamp(18px,2.4vh,32px)}
.ph_h1{font-stretch:82%;font-weight:600;font-size:clamp(52px,min(8.4vw,14svh),156px);line-height:.92;letter-spacing:-.025em;max-width:11ch}
.ph_meta{display:flex;gap:clamp(24px,3vw,56px);padding-bottom:.6em}
.ph_meta dt{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--cream-3);margin-bottom:8px}
.ph_meta dd{font-stretch:82%;font-weight:560;font-size:clamp(20px,1.7vw,28px);line-height:1.1;white-space:nowrap}
.ph_meta div:first-child dd{color:var(--red-hi)}

/* karusel: drag (mis/prst) + strelice, portfolio.js */
.ph_view{position:relative;flex:none;margin-top:auto;height:var(--ph-h);z-index:2}
.ph_top{flex:none;padding-bottom:clamp(28px,4svh,48px)}
.ph_row{display:flex;gap:var(--ph-g);width:max-content;height:100%;padding:0 var(--pad);will-change:transform}
.ph_it{position:relative;flex:none;height:100%;width:var(--ph-w)}
.ph_it.is-key{z-index:3}
.ph_p{-webkit-user-drag:none}
.ph_p img{pointer-events:none}
.ph_bot{position:relative;flex:none;padding-top:clamp(18px,2.6svh,28px);padding-bottom:clamp(18px,3svh,32px);z-index:3;display:flex;justify-content:space-between;align-items:center;gap:16px}
.ph_ctl{display:flex;gap:8px}
.ph_arr{width:48px;height:48px;display:grid;place-content:center;font-size:18px;box-shadow:inset 0 0 0 1px var(--line);transition:background-color .35s var(--ease-out),color .35s,box-shadow .35s,opacity .35s}
.ph_arr:hover{background:var(--cream);color:var(--ink);box-shadow:inset 0 0 0 1px var(--cream)}
.ph_arr:disabled{opacity:.3;pointer-events:none}
.ph_p{position:relative;display:block;height:100%;background:var(--ink-3)}
.ph_p img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease-out)}
.ph_it:not(.is-key) .ph_p{overflow:hidden}
.ph_it:not(.is-key) .ph_p:hover img{transform:scale(1.05)}
.ph_it.is-key .ph_p{box-shadow:0 40px 90px -30px rgba(0,0,0,.95)}
.ph_it.is-key .ph_p::before,.ph_it.is-key .ph_p::after{border-color:var(--red-hi);transition:opacity .4s}
.ph.is-zoom .ph_it.is-key .ph_p::before,.ph.is-zoom .ph_it.is-key .ph_p::after{opacity:0} /* uglove preuzima kadar izdvojenih */
.ph_cap{position:absolute;left:0;right:-40%;top:100%;padding-top:12px;display:flex;gap:10px;align-items:baseline;white-space:nowrap;opacity:0;transform:translateY(-6px);transition:opacity .4s,transform .6s var(--ease-out);pointer-events:none}
.ph_cap b{font-stretch:82%;font-weight:560;font-size:16px}
.ph_p:hover .ph_cap,.ph_p:focus-visible .ph_cap{opacity:1;transform:none}
.ph_now{display:flex;align-items:center;gap:10px;color:var(--cream-2)}
.ph_now i{width:7px;height:7px;border-radius:50%;background:var(--red-hi);animation:phRec 1.6s ease-in-out infinite}
@keyframes phRec{50%{opacity:.2}}

/* ======================= 2. IZDVOJENI NASLOVI ======================= */
.fx{position:relative;z-index:1;background:var(--ink);--fx-h:min(74svh,800px,calc(40vw / var(--arn,.6667)))}
/* desktop + pin: izdvojeni stoje ispod spice, pa uvecani plakat spice prelazi u prvi kadar (portfolio.js) */
.fx.is-under{margin-top:calc(-1 * max(100svh,680px) - 20svh)}
.fx_grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,120px)}
.fx_stage{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px}
.fx_amb{position:absolute;top:0;bottom:0;left:calc(-1 * var(--pad));width:100vw;z-index:-1;pointer-events:none;overflow:hidden}
.fx_amb img{position:absolute;left:25%;top:50%;width:60vw;height:80vh;object-fit:cover;transform:translate(-50%,-50%);filter:blur(120px) saturate(1.5);opacity:0;transition:opacity 1.4s ease}
.fx_amb img.on{opacity:.34}
.fx_scr{position:relative;height:var(--fx-h);aspect-ratio:var(--arn,.6667);background:var(--ink-3);box-shadow:0 60px 120px -40px rgba(0,0,0,.95)}
.fx_scr img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;clip-path:inset(100% 0 0 0);transform:scale(1.18);transition:clip-path 0s 1.2s,transform 0s 1.2s}
.fx_scr img.on{clip-path:inset(0 0 0 0);transform:none;transition:clip-path 1.1s var(--ease-io),transform 1.6s var(--ease-out)}
.fx_cnt{display:flex;align-items:center;gap:10px;color:var(--cream-3);width:calc(var(--fx-h) * var(--arn,.6667))}
.fx_cnt b{font-weight:500;color:var(--cream)}
.fx_bar{flex:1;height:1px;background:var(--line);margin-left:12px;position:relative}
.fx_bar i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--red-hi);transition:width .8s var(--ease-out)}
.fx_list{position:relative;z-index:1}
.fx_head{padding-top:clamp(80px,12vh,140px)}
.fx_it{min-height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:60px 0;transition:opacity .8s var(--ease-out)}
.fx_it:first-of-type{min-height:calc(100svh - 160px)}
.fx_mob{display:none;aspect-ratio:var(--arn,.6667)}
.fx_no{font-size:13px;color:var(--red-hi)}
.fx_t{font-stretch:82%;font-weight:600;font-size:clamp(44px,5.2vw,96px);line-height:.98;letter-spacing:-.02em;margin:16px 0 36px;max-width:12ch}
.fx_t.is-long{font-size:clamp(38px,4vw,72px);max-width:15ch}
.fx_t a{transition:color .3s}
.fx_t a:hover{color:#fff}
.fx_cr{width:100%;max-width:560px;border-top:1px solid var(--line)}
.fx_cr div{display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;padding:13px 0;border-bottom:1px solid var(--line)}
.fx_cr dt{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--cream-3);padding-top:4px}
.fx_cr dd{font-size:17px;line-height:1.4}
.fx_p{margin:30px 0 28px;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.v3-js .fx_it.is-dim{opacity:.22}

/* ========================== 3. O OBLASTI ========================== */
.ab_in{display:flex;flex-direction:column;gap:clamp(28px,3vw,48px)}
.ab_txt{font-stretch:82%;font-weight:560;font-size:clamp(30px,4.6vw,84px);line-height:1.08;letter-spacing:-.02em;max-width:29ch;color:var(--ink-on-paper)}
.ab_w{transition:color .4s}
.v3-js .ab_txt:not(.is-done) .ab_w{color:rgba(26,24,21,.16)}
.v3-js .ab_txt .ab_w.on{color:var(--ink-on-paper)}
.ab_chip{display:inline-block;width:2em;height:.8em;border-radius:var(--r-pill);overflow:hidden;vertical-align:-.02em;background:var(--paper-2);transition:transform .5s var(--ease-out)}
.ab_chip img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.ab_chip:hover{transform:scale(1.08) rotate(-3deg)}

/* ========================== 4. SVI NASLOVI ========================== */
.ix_head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:clamp(40px,5vw,80px)}
.ix_head .v3-lab{margin-bottom:18px}
.ix_ctl{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px}
.ix_flt{display:flex;flex-wrap:wrap;gap:8px}
.ix_flt button{height:44px;padding:0 18px;border-radius:var(--r-pill);box-shadow:inset 0 0 0 1px var(--line);font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--cream-2);transition:color .35s,background-color .35s,box-shadow .35s}
.ix_flt sup{margin-left:6px;font-size:10px;vertical-align:.5em;color:var(--red-hi)}
.ix_flt button:hover{color:var(--cream);box-shadow:inset 0 0 0 1px var(--cream-3)}
.ix_flt button.is-on{color:var(--cream);box-shadow:inset 0 0 0 1px var(--cream)}
.ix_it.is-out,.ix_it.is-cut{display:none}
.ix_tog{position:relative;display:inline-flex;padding:4px;border:1px solid var(--line);border-radius:var(--r-pill);isolation:isolate}
.ix_tog button{position:relative;z-index:1;min-width:110px;height:44px;padding:0 20px;font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--cream-2);border-radius:var(--r-pill);transition:color .4s}
.ix_tog button.is-on{color:var(--ink)}
.ix_tog button:not(.is-on):hover{color:var(--cream)}
.ix_tog i{position:absolute;z-index:0;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:var(--r-pill);background:var(--cream);transition:transform .6s var(--ease-out)}
.ix_tog.is-list i{transform:translateX(100%)}

.ix_list[data-view="list"]{border-bottom:1px solid var(--line)}
.ix_list[data-view="list"] .ix_it{border-top:1px solid var(--line)}
.ix_list[data-view="list"] .ix_a{display:grid;grid-template-columns:64px minmax(0,1fr) auto 90px 40px;align-items:center;gap:24px;padding:clamp(16px,1.6vw,26px) 0;transition:opacity .45s}
.ix_list[data-view="list"] .ix_th{display:none}
.ix_no{color:var(--cream-3)}
.ix_t{font-stretch:82%;font-weight:560;font-size:clamp(30px,3.6vw,64px);line-height:1.02;letter-spacing:-.02em;transition:transform .7s var(--ease-out),color .3s}
.ix_m{color:var(--cream-3)}
.ix_y{text-align:right;color:var(--cream-2)}
.ix_go{justify-self:end;font-size:22px;color:var(--red-hi);opacity:0;transform:translateX(-14px);transition:opacity .4s,transform .6s var(--ease-out)}
.ix_list[data-view="list"] .ix_a:hover .ix_t,.ix_list[data-view="list"] .ix_a:focus-visible .ix_t{transform:translateX(22px);color:#fff}
.ix_list[data-view="list"] .ix_a:hover .ix_go,.ix_list[data-view="list"] .ix_a:focus-visible .ix_go{opacity:1;transform:none}
@media (hover:hover){.ix_list[data-view="list"]:hover .ix_a:not(:hover){opacity:.28}}

.ix_list[data-view="wall"]{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(36px,3.4vw,56px) clamp(16px,1.6vw,28px)}
.ix_list[data-view="wall"] .ix_a{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px}
.ix_list[data-view="wall"] .ix_th{flex:0 0 100%;position:relative;aspect-ratio:var(--arn,.6667);overflow:hidden;background:var(--ink-3);margin-bottom:10px}
.ix_th{container-type:inline-size}
.ix_th img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-out),filter .6s}
.ix_list[data-view="wall"] .ix_no,.ix_list[data-view="wall"] .ix_m,.ix_list[data-view="wall"] .ix_go{display:none}
/* zapis bez slike: tipografski plakat (datum/godina, naslov, KOMUNA) - isti jezik kao .pr-tposter */
.ix_tp{position:absolute;inset:0;display:flex;flex-direction:column;padding:9cqi;background:radial-gradient(120% 70% at 100% 0,rgba(226,37,63,.16),transparent 60%),linear-gradient(170deg,var(--ink-3),var(--ink-2));box-shadow:inset 0 0 0 1px var(--line);transition:transform 1.2s var(--ease-out)}
.ix_tp i{font:500 max(9px,6.2cqi)/1.3 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--red-hi)}
.ix_tp b{margin-top:auto;font-stretch:70%;font-weight:680;font-size:12.5cqi;line-height:.94;letter-spacing:-.01em;text-transform:uppercase;overflow-wrap:break-word;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.ix_tp em{margin-top:7cqi;padding-top:6cqi;border-top:1px solid var(--line);font:500 max(9px,8cqi)/1 var(--f-mark);font-style:normal;letter-spacing:.04em;color:var(--cream-2)}
.ix_list[data-view="wall"] .ix_a:hover .ix_tp{transform:scale(1.04)}
.ix_list[data-view="list"] .ix_tp i,.ix_list[data-view="list"] .ix_tp em{display:none}
/* muzika: gusci zid kvadratnih omota, izvodjac iznad naslova */
.ix_list.is-dense[data-view="wall"]{grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(28px,2.6vw,44px) clamp(14px,1.3vw,22px)}
.ix_list.has-by[data-view="wall"] .ix_m{display:block;order:-1;flex:0 0 100%;font-size:11px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ix_list[data-view="wall"] .ix_th{order:-2}
.ix_list.is-dense[data-view="wall"] .ix_t{font-size:clamp(16px,1.15vw,19px)}.ix_list[data-view="wall"] .ix_t{font-size:clamp(18px,1.4vw,22px);line-height:1.2;letter-spacing:-.005em;word-spacing:.1em;font-stretch:88%;flex:1 1 auto;min-width:0}
.ix_list[data-view="wall"] .ix_y{font-size:11px}
.ix_list[data-view="wall"] .ix_a:hover .ix_th img{transform:scale(1.06)}
.ix_list[data-view="wall"] .ix_th::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--red-hi);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease-out)}
.ix_list[data-view="wall"] .ix_a:hover .ix_th::after{transform:scaleX(1)}

/* plakat koji prati kursor (samo desktop, lista) */
.ix_pv{position:fixed;left:0;top:0;z-index:60;width:clamp(220px,17vw,300px);aspect-ratio:var(--arn,.6667);pointer-events:none}
.ix_pv_in{position:absolute;inset:0;overflow:hidden;clip-path:inset(50% 50% 50% 50%);transition:clip-path .6s var(--ease-out);box-shadow:0 40px 80px -20px rgba(0,0,0,.9)}
.ix_pv.is-on .ix_pv_in{clip-path:inset(0 0 0 0)}
.ix_pv img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;clip-path:inset(100% 0 0 0);transition:clip-path .55s var(--ease-io)}
.ix_pv img.on{clip-path:inset(0 0 0 0);z-index:1}

/* ========================= 5. OSTALE OBLASTI ========================= */
.nx{padding:var(--sec) 0 clamp(64px,8vw,120px)}
.nx_head{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;margin-bottom:clamp(32px,4vw,56px)}
.nx_list{border-bottom:1px solid rgba(26,24,21,.2)}
.nx_list li{border-top:1px solid rgba(26,24,21,.2)}
.nx_a{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto 150px 48px;align-items:center;gap:28px;padding:clamp(18px,2vw,30px) 16px;isolation:isolate;transition:color .5s var(--ease-out)}
.nx_a::before{content:"";position:absolute;inset:0;background:var(--ink-on-paper);transform:scaleY(0);transform-origin:bottom;transition:transform .7s var(--ease-out);z-index:-1}
.nx_a:hover,.nx_a:focus-visible{color:var(--cream)}
.nx_a:hover::before,.nx_a:focus-visible::before{transform:scaleY(1)}
.nx_n{font-stretch:78%;font-weight:640;font-size:clamp(40px,6.4vw,118px);line-height:.96;letter-spacing:-.02em;transition:transform .7s var(--ease-out)}
.nx_a:hover .nx_n{transform:translateX(18px)}
.nx_shots{display:flex;gap:8px}
.nx_shots img{height:clamp(70px,7vw,110px);aspect-ratio:2/3;object-fit:cover;opacity:0;transform:translateY(24px) rotate(4deg);transition:opacity .4s,transform .7s var(--ease-out)}
.nx_a:hover .nx_shots img{opacity:1;transform:none}
.nx_a:hover .nx_shots img:nth-child(2){transition-delay:.06s}
.nx_a:hover .nx_shots img:nth-child(3){transition-delay:.12s}
.nx_c{color:var(--mute-on-paper)!important;transition:color .5s}
.nx_a:hover .nx_c{color:var(--cream-2)!important}
.nx_go{font-size:30px;justify-self:end;color:var(--red);transition:transform .6s var(--ease-out),color .5s}
.nx_a:hover .nx_go{color:var(--red-hi)}
.nx_all{color:var(--ink-on-paper)}
.nx_a:hover .nx_go{transform:translateX(8px)}
.nx_all{margin-top:clamp(36px,4vw,56px)}

/* ============================ reduced motion ============================ */
.v3-rm .ph_now i{animation:none}
.v3-rm .fx_scr img{transition:none}

/* ============================ MOBILNI ============================ */
@media (max-width:1024px){
  .ph{height:auto;min-height:0;padding-bottom:48px;--ph-h:340px}
  .ph.is-sq{--ph-h:280px}
  .ph_head{grid-template-columns:1fr;gap:28px}
  .ph_view{position:relative;bottom:auto;height:auto;margin-top:40px}
  .ph_row{gap:12px;padding-bottom:68px}
  .ph_it{height:var(--ph-h)}
  .ph_it:not(.is-key) .ph_p{overflow:visible} /* natpis ispod plakata se inace secao */
  .ph_cap{opacity:1;transform:none;right:0;white-space:normal;flex-direction:column;gap:2px}
  .ph_bot{position:static;justify-content:flex-end}
  /* bez uvecanja na skrol: kljucni plakat ide na kraj karusela, da izdvojeni (01 Underground) ne dodju odmah posle istog naslova */
  .ph_it.is-key{order:1}
  .ph_now{display:none}
  .ph_arr{width:44px;height:44px}

  .fx_grid{grid-template-columns:1fr;gap:0}
  .fx_stage{display:none}
  .fx_head{padding-top:var(--sec)}
  .fx_it,.fx_it:first-of-type{min-height:0;padding:56px 0 24px}
  .fx_mob{display:block;width:min(100%,420px);margin-bottom:28px}
  .v3-js .fx_it.is-dim{opacity:1}

  .ix_list[data-view="wall"]{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ix_list.is-dense[data-view="wall"]{grid-template-columns:repeat(4,minmax(0,1fr))}
  .ix_pv{display:none}
  .nx_a{grid-template-columns:minmax(0,1fr) auto 40px}
  .nx_shots{display:none}
}
@media (max-width:760px){
  .ph{--ph-h:300px}
  .ph.is-sq{--ph-h:230px}
  .ph_h1{font-size:clamp(46px,13.4vw,64px)}
  .ph_meta{gap:22px;flex-wrap:wrap}
  .ph_meta dd{font-size:19px}
  .fx_t{font-size:clamp(40px,11vw,56px);margin:12px 0 26px}
  .fx_cr div{grid-template-columns:96px minmax(0,1fr)}
  .fx_cr dd{font-size:16px}
  .ab_txt{font-size:clamp(28px,8vw,40px)}
  .ix_tog button{min-width:0;padding:0 18px}
  .ix_list[data-view="list"] .ix_a{grid-template-columns:56px minmax(0,1fr) auto;gap:16px;padding:12px 0}
  .ix_list[data-view="list"] .ix_th{display:block;position:relative;width:56px;aspect-ratio:var(--arn,.6667);overflow:hidden;background:var(--ink-3)}
  .ix_list[data-view="list"] .ix_no,.ix_list[data-view="list"] .ix_m,.ix_list[data-view="list"] .ix_go{display:none}
  .ix_t{font-size:clamp(24px,7vw,32px)}
  .ix_list[data-view="wall"]{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 14px}
  .ix_list.is-dense[data-view="wall"]{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 10px}
  .ix_list.is-dense[data-view="wall"] .ix_t{font-size:14px;line-height:1.25}
  .ix_list.is-dense[data-view="wall"] .ix_y{display:none}
  .ix_list.has-by[data-view="wall"] .ix_m{font-size:9px}
  .ix_list.is-dense[data-view="wall"] .ix_th{margin-bottom:6px}
  .ix_flt{flex-wrap:nowrap;overflow-x:auto;max-width:calc(100vw - 2 * var(--pad));scrollbar-width:none}
  .ix_flt button{flex:none;padding:0 14px}
  .nx_a{grid-template-columns:minmax(0,1fr) 32px;gap:6px 14px;padding:22px 4px}
  .nx_c{grid-column:1;grid-row:2}
  .nx_go{grid-column:2;grid-row:1/3;font-size:24px}
  .nx_n{font-size:clamp(34px,10vw,48px)}
  .nx_head .v3-btn{width:100%}
}