/* =====================================================================
   Expanding-panels mode for the project carousels
   ---------------------------------------------------------------------
   Replaces the fan-stack swipe carousel with a row of expanding panels:
   the active panel grows, the rest collapse to slivers (like an
   accordion gallery). Scoped to #hscrollTrack.pcs-panels so it only
   applies once panels.js has opted the track in. All the surrounding
   chrome (filters, Grid/List toggle, Saved ribbon, dots/counter, deep
   links) keeps working — this only changes how the cards are laid out.

   Shared by: index.html, projects/index.html, design/index.html
   ===================================================================== */

/* Suppress all transitions until panels.js adds .pcs-ready (one frame
   after first layout). Stops the external stylesheet load from animating
   the initial collapse, which can freeze off-screen under
   content-visibility and leave panels stuck at their pre-panels size. */
#hscrollTrack.pcs-panels:not(.pcs-ready) .proj-card,
#hscrollTrack.pcs-panels:not(.pcs-ready) .proj-card .img,
#hscrollTrack.pcs-panels:not(.pcs-ready) .proj-card .meta{
  transition:none !important;
}

/* --- The track becomes a horizontal flex row of panels ------------- */
#hscrollTrack.pcs-panels:not(.view-list){
  display:flex !important;
  flex-direction:row;
  flex-wrap:nowrap;
  align-items:stretch;
  gap:10px;
  height:clamp(420px, 56vh, 540px) !important;
  min-height:0 !important;
  padding:4px;
  perspective:none !important;
  perspective-origin:50% 50%;
  transform:none !important;
  grid-template-columns:none !important;
  overflow-x:auto;
  overflow-y:hidden;
  isolation:isolate;
  touch-action:pan-y;
  scrollbar-width:thin;
  scrollbar-color:rgba(168,243,65,.4) transparent;
  scroll-behavior:smooth;
}
/* Drop the fan-stack glow + corner crop-marks (they assume a centred stack) */
#hscrollTrack.pcs-panels:not(.view-list)::before,
#hscrollTrack.pcs-panels:not(.view-list)::after{ display:none !important; }

#hscrollTrack.pcs-panels:not(.view-list)::-webkit-scrollbar{ height:6px; }
#hscrollTrack.pcs-panels:not(.view-list)::-webkit-scrollbar-thumb{
  background:rgba(168,243,65,.4); border-radius:99px;
}

/* --- Each card becomes a flex panel -------------------------------- */
#hscrollTrack.pcs-panels:not(.view-list) .proj-card{
  position:relative !important;
  left:auto !important; right:auto !important; top:auto !important; bottom:auto !important;
  margin:0 !important;
  width:auto !important;
  height:100% !important;
  min-height:0 !important;
  max-width:none !important;
  aspect-ratio:auto !important;
  flex:1 1 0% ;
  min-width:64px;
  z-index:1;
  border-radius:var(--r-lg, 18px);
  overflow:hidden;
  cursor:pointer;
  transform-style:flat !important;
  box-shadow:0 14px 34px -18px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.05);
  transition:flex-grow .7s cubic-bezier(.32,.72,.32,1),
             box-shadow .55s ease,
             border-color .55s ease;
  will-change:flex-grow;
}

/* The expanded / active panel */
#hscrollTrack.pcs-panels:not(.view-list) .proj-card.is-active{
  flex:7 1 0% ;
  min-width:min(78vw, 560px);
  box-shadow:0 30px 72px -22px rgba(0,0,0,.72), inset 0 0 0 1px rgba(168,243,65,.45);
}
#hscrollTrack.pcs-panels:not(.view-list) .proj-card.is-urgent.is-active{
  box-shadow:0 30px 72px -22px rgba(0,0,0,.72), inset 0 0 0 1px rgba(226,106,91,.5);
}

/* Image: collapsed panels sit dim + slightly zoomed; active brightens */
#hscrollTrack.pcs-panels:not(.view-list) .proj-card .img{
  transform:scale(1.12);
  filter:saturate(.8) brightness(.55);
  transition:transform .8s cubic-bezier(.2,.7,.1,1), filter .6s ease;
}
#hscrollTrack.pcs-panels:not(.view-list) .proj-card.is-active .img{
  transform:scale(1);
  filter:saturate(1.02) brightness(.92);
}

/* Full card meta only reads on the active panel */
#hscrollTrack.pcs-panels:not(.view-list) .proj-card .meta{
  opacity:0;
  transition:opacity .35s ease;
  pointer-events:none;
}
#hscrollTrack.pcs-panels:not(.view-list) .proj-card.is-active .meta{
  opacity:1;
  transition:opacity .5s ease .2s;
  pointer-events:auto;
}
#hscrollTrack.pcs-panels:not(.view-list) .proj-card.is-active .meta > *{ pointer-events:auto; }

/* Vertical mini-label shown on the collapsed slivers so each panel is
   identifiable before it's expanded (injected by panels.js). */
#hscrollTrack.pcs-panels:not(.view-list) .proj-card .pcs-vlabel{
  position:absolute;
  left:0; bottom:0;
  z-index:4;
  max-height:100%;
  padding:18px 16px;
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  font-family:var(--display, 'Red Hat Display', sans-serif);
  font-weight:800;
  font-size:15px;
  letter-spacing:.005em;
  line-height:1;
  color:var(--bone, #f5f3ee);
  text-shadow:0 2px 12px rgba(0,0,0,.65);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  opacity:1;
  transition:opacity .35s ease;
  pointer-events:none;
}
#hscrollTrack.pcs-panels:not(.view-list) .proj-card.is-active .pcs-vlabel{ opacity:0; }

/* Keep the status stripe + the leaf CTA reading on the active panel */
#hscrollTrack.pcs-panels:not(.view-list) .proj-card .save-btn{ z-index:6; }

/* --- Staggered entrance (left → right) ----------------------------- */
@media (prefers-reduced-motion: no-preference){
  #hscrollTrack.pcs-panels:not(.view-list) .proj-card{
    animation:pcsPanelIn .6s cubic-bezier(.2,.7,.1,1) both;
    animation-delay:calc(var(--pcs-i, 0) * 80ms);
  }
  @keyframes pcsPanelIn{
    from{ opacity:0; transform:translateX(-36px); }
    to  { opacity:1; transform:none; }
  }
}

/* --- Mobile: vertical accordion ------------------------------------ */
@media (max-width: 860px){
  #hscrollTrack.pcs-panels:not(.view-list){
    flex-direction:column;
    height:auto !important;
    max-height:none;
    overflow:visible;
    gap:8px;
  }
  #hscrollTrack.pcs-panels:not(.view-list) .proj-card{
    width:100% !important;
    height:auto !important;
    min-height:72px !important;
    flex:0 0 auto;
    transition:min-height .6s cubic-bezier(.32,.72,.32,1), box-shadow .5s ease;
  }
  #hscrollTrack.pcs-panels:not(.view-list) .proj-card.is-active{
    min-height:60vh !important;
    min-width:0;
  }
  #hscrollTrack.pcs-panels:not(.view-list) .proj-card .pcs-vlabel{
    writing-mode:horizontal-tb;
    transform:none;
    bottom:auto; top:0;
    padding:20px 18px;
    font-size:17px;
  }
  @media (prefers-reduced-motion: no-preference){
    @keyframes pcsPanelIn{
      from{ opacity:0; transform:translateY(-22px); }
      to  { opacity:1; transform:none; }
    }
  }
}