/* =====================================================================
   SWAP (2 Nov 2026): Packages <-> Reviews animations. Loaded last.
   js/swap.js adds the classes used here.
   ===================================================================== */

/* 1. PACKAGES: pinned 3D stage. #packages is tall; #show sticks to the
   screen while you scroll through it, and the cards turn in 3D. */
#packages.pk3d{height:360vh;position:relative}
#packages.pk3d #show{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;
  grid-template-rows:auto auto 1fr auto;align-content:stretch;padding-top:clamp(86px,12vh,120px);padding-bottom:clamp(18px,3vh,30px);max-width:none}
#packages.pk3d #show .side .chap{align-self:end}
#packages.pk3d .pkstage{grid-column:1 / -1;grid-row:3;align-self:stretch;height:100%;position:relative;perspective:1500px;perspective-origin:50% 50%;min-height:0}
#packages.pk3d #show .pnote{grid-row:4;text-align:center;justify-self:center;max-width:720px}
/* each card: a white card in the middle of the stage, moved by js/swap.js */
#packages.pk3d .pkstage .panel{position:absolute;left:50%;top:50%;width:min(29vw,420px);margin:0;min-height:0;
  display:grid;gap:8px;align-content:start;padding:0 0 18px;background:#fff;border-radius:20px;overflow:hidden;
  box-shadow:0 40px 80px -36px rgba(80,45,15,.45);transform-style:preserve-3d;will-change:transform,opacity;cursor:pointer;
  opacity:1;transition:box-shadow .4s}
#packages.pk3d .pkstage .panel.now{cursor:default;box-shadow:0 50px 90px -34px rgba(80,45,15,.55),0 0 0 2px rgba(255,106,0,.35)}
#packages.pk3d .pkstage .panel > *:not(.stagebox){margin-inline:18px}
#packages.pk3d .stagebox{border-radius:0;box-shadow:none;backdrop-filter:none;transform:none!important;aspect-ratio:16/10;height:auto;min-height:0}
#packages.pk3d .stagebox img{transform:none!important;opacity:1;pointer-events:none;-webkit-user-drag:none;width:100%;height:100%;object-fit:cover}
#packages.pk3d .glassframe{display:none}
#packages.pk3d .panel h3{font-size:22px;margin-top:6px}
#packages.pk3d .panel .sub{font-size:13px;line-height:1.4;color:var(--orange-ink)}
#packages.pk3d .panel .sub .price{display:inline-block;margin:2px 6px 0 0;vertical-align:-2px;font-size:clamp(24px,2vw,30px);font-weight:900;line-height:1.1;color:#191715}
#packages.pk3d .panel ul{gap:5px}
#packages.pk3d .panel ul li{font-size:11.5px;padding:3px 9px;background:#fff;backdrop-filter:none}
/* short laptop screens: smaller photo so the whole card fits */
@media (max-height:760px) and (min-width:761px){#packages.pk3d .stagebox{aspect-ratio:16/8}#packages.pk3d .pkstage .panel{width:min(25vw,350px)}}
@media (max-width:1100px) and (min-width:761px){#packages.pk3d .pkstage .panel{width:34vw}}
@media (max-width:760px){
  #packages.pk3d #show{grid-template-rows:auto auto auto 1fr auto;padding-top:78px;gap:8px}
  #packages.pk3d #show .ocount{grid-row:3}
  #packages.pk3d .pkstage{grid-row:4}
  #packages.pk3d #show .pnote{grid-row:5;font-size:12px}
  #packages.pk3d .pkstage .panel{width:76vw}
  #packages.pk3d .stagebox{aspect-ratio:16/8}
  #packages.pk3d .panel ul li{font-size:11px;padding:3px 8px}
}

/* 2. REVIEWS: flat sliding row, not pinned. */
#stations.flat{height:auto;padding:clamp(80px,12vh,130px) 0 clamp(60px,9vh,100px)}
#stations.flat .pp-pin{position:relative;height:auto;overflow:visible;padding-top:0;padding-bottom:0;max-width:1320px;margin:0 auto}
#stations.flat .pp-scene{position:relative;inset:auto;perspective:none;display:flex;gap:20px;margin-top:clamp(28px,4vh,44px);
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;padding:6px 2px 26px;scrollbar-width:none;cursor:grab;-webkit-overflow-scrolling:touch}
#stations.flat .pp-scene::-webkit-scrollbar{display:none}
#stations.flat .pp-scene.drag{cursor:grabbing;scroll-snap-type:none;user-select:none;-webkit-user-select:none}
#stations.flat .pp-scene:focus-visible{outline:2px solid var(--orange-ink);outline-offset:4px;border-radius:20px}
#stations.flat .pp{position:relative;left:auto;top:auto;width:auto;flex:0 0 calc((100% - 40px) / 2.3);aspect-ratio:auto;min-height:225px;
  transform:none!important;opacity:1!important;scroll-snap-align:start;will-change:auto}
#stations.flat .pp::before{display:none}
#stations.flat .rvc-in{position:relative;inset:auto;height:100%;border-radius:20px;background:#fff;box-shadow:0 24px 50px -32px rgba(80,45,15,.4);overflow:hidden}
#stations.flat .pp-cap{position:static;margin-top:6px;align-items:center}
#stations.flat .pp-cap .oarrows{display:flex;gap:8px;margin-left:auto}
@media (max-width:1100px){#stations.flat .pp{flex-basis:calc((100% - 20px) / 1.6)}}
@media (max-width:760px){#stations.flat .pp{flex-basis:86%;min-height:260px}}
/* Compact review cards - desktop */
@media (min-width: 761px) {
  #stations.flat .pp {
    flex: 0 0 380px;
    height: 220px;
    min-height: 220px;
    max-height: 220px;
    box-sizing: border-box;
  }

  #stations.flat .rvc-in {
    height: 100%;
    box-sizing: border-box;
    padding: 20px 28px;
    gap: 10px;
  }
}