/* Photo stack — a pile of prints you swipe through. The top photo goes to the
   bottom of the pile; nothing is a carousel and nothing loops out of view.

   Enhances any .stage .grid, or any container marked data-stack, of two or
   more photos on a job page (figures or plain divs, each holding an img). Without
   JavaScript the grid stays a grid, so no photo is ever unreachable.

   Tokens come from the job page (--teal, --gold-lt, --pearl, --ink); the
   fallbacks are the same values, so the stack reads right on a page that
   does not declare them. */

.pstack{--pst-teal:var(--teal,#4FB5BE);--pst-gold:var(--gold-lt,#D9BC7C);
  display:flex;flex-direction:column;align-items:center;margin:4px 0 6px}

/* One shape for every pile — a 4:3 print, never taller than most of the
   screen — so a pile is always shorter than the grid it replaces. */
.pstack-deck{position:relative;--ar:1.3333;
  width:min(100%,600px,calc(62vh * var(--ar)));aspect-ratio:var(--ar);
  margin-bottom:30px;outline:none;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.pstack-deck:focus-visible{outline:2px solid var(--pst-teal);outline-offset:8px;border-radius:3px}

/* Every card is a print: the figure keeps its own classes (a .ba before/after
   tag still shows), the photo is shown whole, and a blur of the same photo
   fills whatever the frame does not. */
.pstack-deck > .pstack-card{position:absolute;inset:0;margin:0;overflow:hidden;
  background:#04080f;border:1px solid rgba(79,181,190,.2);border-radius:3px;
  box-shadow:0 18px 44px rgba(0,0,0,.55),0 2px 8px rgba(0,0,0,.4);
  transform-origin:50% 80%;will-change:transform;cursor:grab;
  transition:transform .42s cubic-bezier(.2,.8,.2,1),opacity .3s ease}
.pstack-deck > .pstack-card.is-dragging{transition:none;cursor:grabbing}
.pstack-card .pstack-fill{position:absolute;inset:-24px;background-size:cover;background-position:center;
  filter:blur(22px) brightness(.45) saturate(.9);transform:scale(1.08)}
/* Whatever wraps the photo on the page (a .frame, a bare div) fills the print. */
.pstack-deck > .pstack-card > :not(.pstack-fill){position:absolute;inset:0;width:100%;height:100%;
  margin:0;border:0;background:none;aspect-ratio:auto}
.pstack-deck > .pstack-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  transform:none !important;filter:none !important;pointer-events:none;-webkit-user-drag:none}

.pstack-cap{width:min(100%,640px);margin:-14px 0 14px;font-size:14.5px;line-height:1.6;
  color:rgba(234,239,245,.62);min-height:1.6em}
.pstack-cap b{color:var(--pearl,#EAEFF5);font-weight:400}
.pstack-foot{display:flex;align-items:center;gap:18px;font-size:10px;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:rgba(234,239,245,.42)}
.pstack-count{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em;
  color:var(--pst-gold)}
.pstack-hint{transition:opacity .5s ease}
.pstack.touched .pstack-hint{opacity:0}

@media (prefers-reduced-motion:reduce){
  .pstack-deck > .pstack-card{transition:none}
}