/* =====================================================================
   PACK-SELECT — collapsible package dropdown
   Replaces the wall-of-prices list inside a pricing card with one
   editorial dropdown: pick a package, then see its price + checkout.
   Shared by the studio hubs and the unified /pricing page.
   Tokens (--paper, --ink, --terracotta, --rule, --cream, --gold)
   are defined by studio-hub.css / the host page :root.
   ===================================================================== */

.pack-select{ position:relative; margin-top:2px }

/* ---- trigger ---- */
.ps-trigger{
  width:100%; display:flex; align-items:center; gap:14px;
  padding:14px 16px; cursor:pointer; text-align:left;
  background:transparent; border:1px solid rgba(255,255,255,.5); border-radius:12px;
  color:var(--ink); font-family:"Inter",system-ui,sans-serif;
  transition:border-color .3s cubic-bezier(.16,1,.3,1),
             background .3s cubic-bezier(.16,1,.3,1),
             box-shadow .3s cubic-bezier(.16,1,.3,1);
}
.ps-trigger:hover{ border-color:rgba(255,255,255,.7); background:transparent }
.ps-trigger:focus-visible{ outline:none; border-color:var(--terracotta);
  box-shadow:0 0 0 3px rgba(194,84,61,.16) }
.pack-select.open .ps-trigger{ border-color:var(--terracotta);
  border-bottom-left-radius:4px; border-bottom-right-radius:4px }

.ps-label{ display:flex; flex-direction:column; gap:3px; min-width:0; flex:1 }
.ps-label-nm{ font:500 14px/1.25 "Inter"; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.ps-label-sub{ font:400 11.5px/1.2 "Inter"; color:var(--ink-mute);
  letter-spacing:0; text-transform:none }
.pack-select.chosen .ps-label-nm{ color:var(--ink) }

.ps-price{ font:400 italic 23px/1 "Fraunces"; letter-spacing:-.01em;
  color:var(--terracotta); flex-shrink:0; opacity:0; transform:translateY(2px);
  transition:opacity .3s cubic-bezier(.16,1,.3,1), transform .3s cubic-bezier(.16,1,.3,1) }
.pack-select.chosen .ps-price{ opacity:1; transform:none }

.ps-chevron{ flex-shrink:0; width:26px; height:26px; border-radius:999px;
  display:grid; place-items:center; border:1px solid var(--rule);
  color:var(--ink-soft); font-size:13px; line-height:1;
  transition:transform .35s cubic-bezier(.16,1,.3,1), background .25s, color .25s }
.ps-chevron svg{ width:12px; height:12px }
.pack-select.open .ps-chevron{ transform:rotate(180deg);
  background:var(--ink); color:#fff; border-color:var(--ink) }

/* ---- menu ---- */
/* Accordion, not a floating dropdown: the menu expands IN FLOW and pushes the
   card taller, so it can never be clipped by the card's overflow:hidden. */
.ps-menu{
  list-style:none; margin:0; padding:0 6px; position:static;
  background:transparent; -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); border:1px solid transparent; border-radius:12px;
  max-height:0; overflow:hidden;
  opacity:0; pointer-events:none;
  transition:max-height .38s cubic-bezier(.16,1,.3,1), opacity .26s ease,
             padding .38s cubic-bezier(.16,1,.3,1), margin .38s cubic-bezier(.16,1,.3,1),
             border-color .26s ease;
}
.pack-select.open .ps-menu{
  max-height:640px; opacity:1; pointer-events:auto;
  margin-top:8px; padding:6px; border-color:var(--rule);
  box-shadow:0 18px 48px -22px rgba(26,24,22,.4), 0 4px 14px -8px rgba(26,24,22,.18);
}
.ps-menu[hidden]{ display:block } /* keep transitionable; JS toggles .open */

.ps-option{ display:flex; align-items:center; gap:14px; padding:11px 12px;
  border-radius:8px; cursor:pointer; position:relative;
  transition:background .2s cubic-bezier(.16,1,.3,1) }
.ps-option + .ps-option{ border-top:1px solid var(--rule-2) }
.ps-option:hover,
.ps-option.active{ background:var(--cream); border-top-color:transparent }
.ps-option[aria-selected="true"]{ background:rgba(194,84,61,.07) }
.ps-option[hidden]{ display:none }

.ps-opt-nm{ font:500 14px/1.3 "Inter"; color:var(--ink); flex:1; min-width:0 }
.ps-opt-nm small{ display:block; font:400 12px/1.3 "Inter"; color:var(--ink-mute);
  margin-top:2px; letter-spacing:0; text-transform:none }
.ps-opt-price{ font:400 italic 20px/1 "Fraunces"; color:var(--ink);
  letter-spacing:-.01em; flex-shrink:0 }
.ps-option:hover .ps-opt-price,
.ps-option.active .ps-opt-price{ color:var(--terracotta) }
.ps-opt-link{ position:absolute; width:0; height:0; overflow:hidden } /* hydration target only */

/* ---- the resolved checkout CTA ---- */
.ps-go{
  margin-top:10px; display:none; align-items:center; justify-content:space-between; gap:12px;
  padding:13px 16px; border-radius:12px; text-decoration:none;
  background:var(--ink); color:var(--paper);
  font:500 11px/1 "Inter"; letter-spacing:.18em; text-transform:uppercase;
  transition:transform .3s cubic-bezier(.16,1,.3,1), background .25s;
  opacity:0; transform:translateY(6px); pointer-events:none;
}
/* button only takes space once a pack is chosen — cards stay compact until then */
.pack-select.chosen .ps-go{ display:flex; opacity:1; transform:none; pointer-events:auto }
.ps-go:hover{ background:var(--terracotta); transform:translateY(-2px) }
.ps-go .ps-go-arr{ width:26px; height:26px; border-radius:999px; display:grid; place-items:center;
  background:rgba(255,255,255,.12); transition:transform .3s cubic-bezier(.16,1,.3,1) }
.ps-go:hover .ps-go-arr{ transform:translateX(3px) }

/* featured card variant — terracotta accent on the trigger */
.price-card.featured .ps-trigger{ background:transparent }
.price-card.featured .pack-select.open .ps-trigger,
.price-card.featured .ps-trigger:focus-visible{ border-color:var(--terracotta) }

@media (prefers-reduced-motion: reduce){
  .ps-trigger,.ps-chevron,.ps-menu,.ps-option,.ps-price,.ps-go{ transition:none }
}