/* ============================================================
   Fisher.digital — Work stack (hero portfolio)
   Desktop (>980px): hero pins, cards slide up inside a browser frame.
   Mobile (<=980px): native horizontal swipe strip (no pinning).
   Pairs with /js/work-stack.js.
   ============================================================ */

#work-stack{ position:relative; width:100%; height:100%;
  min-height:clamp(230px,26vw,300px);
  display:flex; align-items:flex-start; justify-content:center;
  padding-top:clamp(4px,3vh,44px);
  --ws-ease:cubic-bezier(.22,1,.36,1); --ws-hair:rgba(255,255,255,.14); }

/* landscape mockup — matches the ~1.88:1 homepage screenshots.
   The stack is a single framed "browser window"; cards slide up inside it. */
.ws-stack{ position:relative; width:min(100%,560px); aspect-ratio:1440/766;
  border-radius:15px; overflow:hidden; background:#101014;
  border:1px solid var(--ws-hair); box-shadow:0 34px 66px -30px rgba(0,0,0,.82); }

.ws-card{ position:absolute; inset:0; overflow:hidden; background:#101014;
  transform:translateY(108%); will-change:transform; backface-visibility:hidden; }
.ws-card.ws-first{ transform:translateY(0); }

.ws-bar{ position:absolute; top:0; left:0; right:0; z-index:3; display:flex; align-items:center;
  gap:6px; padding:9px 13px; background:linear-gradient(180deg,rgba(7,7,12,.7),transparent); }
.ws-bar .ws-dot{ width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.28); }

.ws-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top center; }
.ws-card::after{ content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,transparent 42%,rgba(5,5,10,.3) 66%,rgba(5,5,10,.88) 100%); }

/* bottom overlay: meta on the left, action buttons on the right */
.ws-info{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:clamp(12px,2vw,20px);
  display:flex; align-items:flex-end; justify-content:space-between; gap:12px; }
.ws-meta{ min-width:0; }
.ws-idx{ font-size:.6rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(255,255,255,.62); margin-bottom:8px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.ws-tags{ display:flex; flex-wrap:wrap; gap:5px; margin-bottom:0; }
.ws-chip{ font-size:.6rem; font-weight:600; color:#e7e7ea; background:rgba(255,255,255,.1);
  border:1px solid var(--ws-hair); border-radius:999px; padding:2px 8px; }
.ws-acts{ display:flex; flex-direction:column; align-items:flex-end; gap:7px; flex-shrink:0; }
.ws-btn{ display:inline-flex; align-items:center; gap:5px; font-size:.76rem; font-weight:600;
  text-decoration:none; padding:6px 12px; border-radius:999px; white-space:nowrap;
  transition:transform .2s var(--ws-ease),background .2s; }
.ws-btn:active{ transform:translateY(1px); }
.ws-btn-p{ background:#fafafa; color:#0b0b12; }
.ws-btn-g{ background:rgba(255,255,255,.12); color:#fafafa; border:1px solid var(--ws-hair); }
.ws-btn-g:hover{ background:rgba(255,255,255,.18); }
.ws-btn svg{ width:12px; height:12px; }

/* Final "see the full portfolio" card */
.ws-cta{ display:flex; flex-direction:column; justify-content:center; align-items:flex-start;
  gap:9px; padding:clamp(18px,3vw,32px); text-decoration:none;
  background:radial-gradient(120% 120% at 18% 0%,#1b1b24 0%,#0c0c11 64%); }
.ws-cta::after{ display:none; }
.ws-cta h3{ font-family:'Fraunces',Georgia,serif; font-weight:600; color:#fafafa;
  font-size:clamp(20px,2.6vw,30px); line-height:1.05; letter-spacing:-.01em; margin:0; }
.ws-cta p{ color:#b7b7c0; font-size:.86rem; line-height:1.5; margin:0; max-width:36ch; }
.ws-cta .ws-go{ display:inline-flex; align-items:center; gap:7px; font-weight:700; color:#fafafa; font-size:.9rem; margin-top:2px; }
.ws-cta .ws-go svg{ width:15px; height:15px; transition:transform .25s var(--ws-ease); }
.ws-cta:hover .ws-go svg{ transform:translateX(4px); }

/* No-JS / reduced-motion / GSAP unavailable: show the first card only, static */
#work-stack.ws-static .ws-card{ transform:none; }
#work-stack.ws-static .ws-card:not(.ws-first){ display:none; }

/* ---------- Mobile / tablet (<=980px): native horizontal swipe, no pinning ---------- */
@media (max-width: 980px){
  /* the hero's right column is hidden by the site CSS at this width — show it for the portfolio */
  .hero-visual{ display:block !important; height:auto !important; min-height:0 !important; margin-top:18px; }

  #work-stack{ display:block; height:auto; min-height:0; padding:0; }
  #work-stack .ws-stack{ position:relative; width:100%; max-width:none; aspect-ratio:auto;
    display:flex; gap:12px; overflow-x:auto; -webkit-overflow-scrolling:touch;
    padding:0 2px 12px; border:0; background:none; box-shadow:none; border-radius:0;
    scrollbar-width:none; touch-action:pan-y; }
  #work-stack .ws-stack::-webkit-scrollbar{ display:none; }
  #work-stack .ws-card{ position:relative; inset:auto; transform:none !important;
    flex:0 0 86%; aspect-ratio:1440/766; scroll-snap-align:center;
    border-radius:14px; border:1px solid var(--ws-hair); box-shadow:0 20px 44px -24px rgba(0,0,0,.72); }
  #work-stack.ws-static .ws-card:not(.ws-first){ display:block; } /* show all in the swipe strip */
}
@media (max-width: 560px){
  #work-stack .ws-card{ flex-basis:90%; }
}