/* ═══════════════════════════════════════════════════════════
   ZID „PRIJE" — zabilješka sa terena
   Boka Academy · dizajn sistem „Zaliv"

   Fotografije stanja prije radova su tople, izblijedjele i snimljene
   telefonom. Ne pokušavamo to da sakrijemo. Kartica ih drži kao
   razvijenu fotografiju zalijepljenu trakom na zid: bijeli rub, blagi
   nagib, traka u boji i rukom pisana zabilješka ispod. Boju na stranicu
   donosi okvir, ne filter preko slike.

   Učitava se poslije site.css, prije mobile.css.
   ═══════════════════════════════════════════════════════════ */

/* Zid. Mreža sa tri kolone i dva reda, popunjena po kolonama - zato je
   redoslijed u markupu po parovima (kolona 1: prve dvije kartice, itd).
   CSS kolone bi ovdje bile prirodnije, ali Chromium u njima duplira
   apsolutno pozicioniranu traku preko granice fragmenta. Na telefonu
   mobile.js stavlja .mrail (display:flex) i mreža prestaje da važi. */
.zid{
  margin-top:38px;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  grid-template-rows:repeat(2,auto);
  grid-auto-flow:column;
  align-items:start;
  gap:34px 28px;
}

.zc{
  position:relative;
  margin:var(--dy,0) 0 0;
  background:var(--krecnjak);
  padding:12px 12px 0;
  border-radius:4px;
  box-shadow:0 1px 1px rgba(23,50,46,.07), 0 18px 34px -24px rgba(23,50,46,.55);
  transform:rotate(calc(var(--rot,0deg) * var(--rk,1)));
  transition:transform .55s var(--ease), box-shadow .55s var(--ease);
}
.zc:hover,
.zc:focus-within{
  transform:rotate(0deg) translateY(-6px) scale(1.012);
  box-shadow:0 2px 4px rgba(23,50,46,.08), 0 32px 56px -24px rgba(23,50,46,.6);
  z-index:3;
}

/* Traka. Poluprovidna, sa dijagonalnim vlaknima i blago iskošenim
   krajevima — ravan pravougaonik odmah izgleda kao nalijepljen oblik. */
.zc-tape{
  position:absolute; z-index:2;
  top:-11px; left:var(--tx,50%);
  width:98px; height:26px;
  transform:translateX(-50%) rotate(var(--trot,-6deg));
  background:
    repeating-linear-gradient(118deg, rgba(255,255,255,.30) 0 3px, rgba(255,255,255,0) 3px 8px),
    var(--t, var(--sunce));
  opacity:.74;
  clip-path:polygon(3% 3%, 100% 0, 97% 100%, 0 96%);
  box-shadow:0 3px 7px -3px rgba(23,50,46,.4);
}

.zc-ph{position:relative; line-height:0}
.zc-ph img{display:block; width:100%; height:auto; border-radius:2px}

/* Pečat. Govori šta fotografija jeste, da se ne miješa sa fotografijama
   gotovog prostora kad one jednom stignu. */
.zc-zig{
  position:absolute; left:11px; bottom:11px;
  font-family:var(--display); font-weight:700;
  font-size:.66rem; letter-spacing:.2em; text-transform:uppercase;
  color:#FFFCF6; line-height:1;
  background:rgba(23,50,46,.68);
  border:1.5px solid rgba(255,252,246,.55);
  border-radius:999px;
  padding:5px 11px 4px;
  transform:rotate(-2.5deg);
}

.zc-cap{
  display:flex; align-items:flex-end; justify-content:space-between; gap:14px;
  padding:9px 2px 13px;
}
.zc-cap b{
  font-family:"Caveat", var(--display), cursive;
  font-weight:600; font-size:1.34rem; line-height:1.14;
  color:var(--noc); letter-spacing:.2px;
}
.zc-dat{
  flex:none; padding-bottom:4px;
  font-size:.64rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--kamen);
  font-variant-numeric:tabular-nums;
}

/* Potpis ispod zida — ko je i kad snimio. */
.zid-nota{
  margin-top:4px; font-size:.84rem; color:var(--kamen);
  display:flex; gap:9px; align-items:center;
}
.zid-nota svg{width:16px; height:16px; flex:none; color:var(--duboko)}

/* Ulaz u kadar. site.css gasi transform na .reveal.in, što bi oborilo
   nagib — zato kartice nose svoj par pravila veće specifičnosti. */
.js .zid .zc.reveal{transform:rotate(calc(var(--rot,0deg) * var(--rk,1))) translateY(20px)}
.js .zid .zc.reveal.in{transform:rotate(calc(var(--rot,0deg) * var(--rk,1)))}

@media (prefers-reduced-motion: reduce){
  .js .zid .zc.reveal,
  .js .zid .zc.reveal.in{transform:rotate(calc(var(--rot,0deg) * var(--rk,1)))}
}

@media (max-width:980px){
  .zid{grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(3,auto); gap:28px 22px}
}
@media (max-width:760px){
  /* u traci nagib ostaje, ali blaži — na uskom ekranu jak nagib odsiječe ugao */
  .zc{--rk:.55; margin-top:0}
  .zc-cap b{font-size:1.24rem}
  .zid-nota{margin-top:14px}
}