/* portfolio.css
   Siatka realizacji z suwakiem porównania „przed / po”.
   Lucifer's Garage */

.works{display:grid; grid-template-columns:repeat(auto-fit,minmax(322px,1fr)); gap:20px}
.work{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-md); overflow:hidden; transition:.2s;
}
.work:hover{border-color:var(--brass); transform:translateY(-3px)}
.work__body{padding:20px 22px 24px}
.work__meta{
  display:flex; gap:14px; font-family:var(--f-mono); font-size:10px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--dim); margin-bottom:10px;
}
.work__meta span:first-child{color:var(--brass)}
.work__t{font-family:var(--f-display); font-size:25px; font-weight:700; text-transform:uppercase; line-height:1.05}
.work__d{font-size:14px; color:var(--dim); margin-top:9px}

/* ---------- kadr ---------- */
.shot{position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--surface-2)}
.shot__img{width:100%; height:100%; object-fit:cover; display:block; user-select:none}

/* ---------- wzór zastępczy do czasu wgrania zdjęć ---------- */
.shot__ph{
  position:absolute; inset:0; display:grid; place-items:center;
  background:
    repeating-linear-gradient(
      -58deg,
      var(--brass-soft) 0 14px,
      transparent 14px 40px
    );
  background-position:var(--shift,0) 0;
}
.shot__ph::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 40%, var(--surface));
  opacity:.75;
}
.shot__ph span{
  position:relative; z-index:1; font-family:var(--f-display); font-weight:700;
  font-size:34px; letter-spacing:.1em; color:var(--line-2);
}

/* ---------- suwak przed / po ---------- */
.shot--cmp{cursor:ew-resize; touch-action:none; user-select:none}

/* Warstwa „przed” ma pełną szerokość kadru i jest tylko PRZYCINANA.
   Zwężanie jej szerokości ściskałoby zdjęcie razem z maską, więc oba
   ujęcia rozjeżdżałyby się przy każdym ruchu suwaka. */
.shot__before{position:absolute; inset:0; clip-path:inset(0 50% 0 0)}

/* Obrazki nie łapią wskaźnika: bez tego przeglądarka zaczyna własne
   przeciąganie obrazka i gubi zdarzenia pointermove. */
.shot--cmp .shot__img{pointer-events:none; -webkit-user-drag:none}
.shot__handle{
  position:absolute; top:0; bottom:0; left:50%; width:2px;
  background:var(--brass); transform:translateX(-1px); pointer-events:none;
}
.shot__handle::after{
  content:""; position:absolute; top:50%; left:50%; width:34px; height:34px;
  transform:translate(-50%,-50%); border-radius:50%;
  border:2px solid var(--brass); background:rgba(0,0,0,.45);
  backdrop-filter:blur(3px);
}
.shot__lab{
  position:absolute; bottom:11px; z-index:2; padding:3px 9px; border-radius:100px;
  font-family:var(--f-mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase;
  background:rgba(0,0,0,.55); color:#EDF2EF; pointer-events:none;
}
.shot__lab--l{left:11px}
.shot__lab--r{right:11px}

.shot--cmp:focus-visible{outline:2px solid var(--brass); outline-offset:-2px}

/* ---------- podgląd zdjęć w panelu ---------- */
.gprev{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.gprev__i{position:relative; aspect-ratio:16/10; border:1px dashed var(--line-2);
  border-radius:var(--r-sm); overflow:hidden; background:var(--bg-2)}
.gprev__i img{width:100%; height:100%; object-fit:cover; display:block}
.gprev__i img:not([src]), .gprev__i img.is-bad{visibility:hidden}
.gprev__i span{
  position:absolute; left:8px; bottom:7px; padding:2px 8px; border-radius:100px;
  font-family:var(--f-mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase;
  background:rgba(0,0,0,.55); color:#EDF2EF;
}
.gprev__i:has(img.is-bad)::after{
  content:"nie znaleziono pliku"; position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--f-mono); font-size:11px; color:var(--oxblood); text-align:center; padding:10px;
}
.gprev__i:has(img.is-ok){border-style:solid; border-color:var(--brass)}