/* ---------- Project view switcher (Grid / Stream / Gallery) ---------- */
.viewbar{
  display:flex; gap:clamp(8px,1vw,14px); align-items:center;
  padding:0 var(--pad,30px) clamp(16px,2vw,30px);
}
.viewbar .lbl{ font-size:clamp(9px,.8vw,11px); letter-spacing:.22em; text-transform:uppercase; color:var(--muted,#9a9a9a); margin-right:.4em; }
.viewbar .vb{
  background:none; border:0; cursor:pointer; padding:6px; line-height:0; color:#c2c2c2;
  transition:color .2s ease;
}
.viewbar .vb:hover{ color:#555; }
.viewbar .vb.active{ color:#000; }
.viewbar .vb svg{ width:20px; height:20px; display:block; fill:currentColor; }

/* Grid view */
.pv-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(10px,1.4vw,22px); padding:0 var(--pad,30px) clamp(30px,5vw,80px); }
.pv-grid figure{ margin:0; aspect-ratio:4/5; overflow:hidden; background:#f2f2f1; cursor:zoom-in; }
.pv-grid img{ width:100%; height:100%; object-fit:cover; display:block; transition:opacity .25s ease; }
.pv-grid figure:hover img{ opacity:.88; }
@media(max-width:900px){ .pv-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .pv-grid{ grid-template-columns:1fr; } }

/* Stream view (one by one, large) */
.pv-stream{ padding:0 var(--pad,30px) clamp(30px,5vw,80px); }
.pv-stream figure{ margin:0 auto clamp(40px,6vw,110px); max-width:min(1100px,92vw); cursor:zoom-in; }
.pv-stream figure:last-child{ margin-bottom:0; }
.pv-stream img{ width:100%; height:auto; display:block; background:#f2f2f1; }

/* Gallery view (one at a time) */
.pv-gallery{ position:relative; padding:0 var(--pad,30px) clamp(10px,1.6vw,24px); }
.pv-stage{ position:relative; height:min(76vh,780px); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.pv-stage img{ position:absolute; max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; display:block; opacity:0; transition:opacity .5s var(--ease,ease); }
.pv-stage img.show{ opacity:1; }
.pv-zone{ position:absolute; top:0; height:100%; width:50%; z-index:3; cursor:pointer; }
.pv-zone.prev{ left:0; } .pv-zone.next{ right:0; }
.pv-arrow{ position:absolute; top:50%; transform:translateY(-50%); font-size:22px; color:#111; opacity:.55; pointer-events:none; z-index:4; }
.pv-arrow.prev{ left:calc(var(--pad,30px) + 6px); } .pv-arrow.next{ right:calc(var(--pad,30px) + 6px); }
.pv-count{ text-align:center; color:var(--muted,#8c8c8c); font-size:clamp(10px,.9vw,12px); letter-spacing:.18em; margin-top:14px; font-variant-numeric:tabular-nums; }