/* =====================================================================
   SELECT PAGES — /schedule /pricing /events /visiting
   Studio-chooser landing pages. Reuses studio-hub.css for tokens, the
   top nav, footer and pills; this file adds the chooser hero, the
   studio picker (cards) and the studio toggle + filtered pricing.
   ===================================================================== */

.sel-main{ min-height:100vh; background:var(--paper) }

/* current page in the top nav */
.topnav .links a[aria-current="page"]{ color:var(--terracotta) }
.topnav .links a[aria-current="page"]::after{ content:""; display:block; height:1.5px;
  background:var(--terracotta); margin-top:5px; border-radius:2px }

/* ---- chooser hero ---- */
.sel-hero{
  position:relative; padding:clamp(118px,16vh,168px) clamp(20px,5vw,72px) clamp(40px,6vh,72px);
  max-width:1180px; margin:0 auto; overflow:hidden;
}
.sel-hero::before{ /* soft warm wash behind the headline */
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(60% 50% at 18% 8%, rgba(194,84,61,.10), transparent 70%),
    radial-gradient(50% 50% at 92% 0%, rgba(212,168,95,.12), transparent 70%);
}
.sel-hero > *{ position:relative; z-index:1 }
.sel-eyebrow{ display:inline-flex; align-items:center; gap:9px;
  font:500 12px/1 "Inter"; letter-spacing:.32em; text-transform:uppercase; color:var(--terracotta) }
.sel-eyebrow .dot{ width:7px; height:7px; border-radius:999px; background:var(--terracotta);
  box-shadow:0 0 0 0 rgba(194,84,61,.5); animation:selpulse 2.4s cubic-bezier(.16,1,.3,1) infinite }
@keyframes selpulse{ 0%{box-shadow:0 0 0 0 rgba(194,84,61,.45)} 70%{box-shadow:0 0 0 8px rgba(194,84,61,0)} 100%{box-shadow:0 0 0 0 rgba(194,84,61,0)} }

.sel-hero h1{ font:300 clamp(48px,8.4vw,104px)/0.95 "Fraunces"; letter-spacing:-.02em;
  color:var(--ink); margin:18px 0 0 }
.sel-hero h1 b{ font-weight:400; font-style:italic; color:var(--terracotta) }
.sel-lede{ font:400 clamp(16px,1.5vw,19px)/1.6 "Inter"; color:var(--ink-soft);
  max-width:46ch; margin:18px 0 0 }
.sel-lede b{ font-weight:500; color:var(--ink) }

/* ---- studio picker (cards that navigate) ---- */
.studio-picker{
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(12px,1.5vw,18px);
  margin:clamp(34px,5vh,56px) auto 0; max-width:1180px;
  padding:0 clamp(20px,5vw,72px); position:relative; z-index:1;
}
.sp-card{
  position:relative; display:flex; flex-direction:column; text-decoration:none; color:var(--ink);
  background:#fff; border:1px solid var(--rule); border-radius:16px; overflow:hidden;
  transition:transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s cubic-bezier(.16,1,.3,1),
             border-color .5s cubic-bezier(.16,1,.3,1);
}
.sp-card:hover{ transform:translateY(-6px); border-color:rgba(26,24,22,.2);
  box-shadow:0 28px 60px -34px rgba(26,24,22,.5) }
.sp-pic{ position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--paper-2) }
.sp-pic img{ width:100%; height:100%; object-fit:cover;
  transition:transform .9s cubic-bezier(.16,1,.3,1) }
.sp-card:hover .sp-pic img{ transform:scale(1.06) }
.sp-no{ position:absolute; top:12px; left:12px; z-index:2;
  font:500 9.5px/1 "Inter"; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(246,241,230,.92); background:rgba(26,24,22,.42); backdrop-filter:blur(4px);
  padding:5px 8px; border-radius:6px }
.sp-meta{ padding:16px 16px 18px; display:flex; flex-direction:column; gap:3px }
.sp-loc{ font:500 10px/1 "Inter"; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-mute) }
.sp-meta strong{ font:400 italic 24px/1.05 "Fraunces"; letter-spacing:-.01em; color:var(--ink); margin-top:4px }
.sp-addr{ font:400 12.5px/1.4 "Inter"; color:var(--ink-soft); margin-top:2px }
.sp-go{ margin-top:12px; display:inline-flex; align-items:center; gap:8px;
  font:500 10.5px/1 "Inter"; letter-spacing:.16em; text-transform:uppercase; color:var(--terracotta) }
.sp-go .arr{ display:inline-grid; place-items:center; width:24px; height:24px; border-radius:999px;
  border:1px solid var(--rule); transition:transform .35s cubic-bezier(.16,1,.3,1), background .25s, color .25s }
.sp-card:hover .sp-go .arr{ background:var(--terracotta); color:#fff; border-color:var(--terracotta); transform:translateX(3px) }

.sel-foot-note{ max-width:1180px; margin:clamp(30px,4vh,46px) auto 0;
  padding:0 clamp(20px,5vw,72px) clamp(60px,8vh,96px);
  font:400 13px/1.6 "Inter"; color:var(--ink-mute); position:relative; z-index:1 }
.sel-foot-note a{ color:var(--terracotta); text-decoration:none }
.sel-foot-note a:hover{ text-decoration:underline }

/* ---- studio toggle (pricing page — filters in place) ---- */
.studio-toggle{
  display:inline-flex; flex-wrap:wrap; gap:6px; margin-top:clamp(26px,4vh,40px);
  padding:6px; background:#fff; border:1px solid var(--rule); border-radius:999px;
}
.st-btn{
  appearance:none; cursor:pointer; border:0; background:transparent; color:var(--ink-soft);
  font:500 12px/1 "Inter"; letter-spacing:.06em; padding:11px 18px; border-radius:999px;
  transition:background .35s cubic-bezier(.16,1,.3,1), color .25s;
}
.st-btn:hover{ color:var(--ink) }
.st-btn.active{ background:var(--ink); color:var(--paper) }
.st-btn .st-loc{ display:block; font:400 9.5px/1 "Inter"; letter-spacing:.16em;
  text-transform:uppercase; opacity:.6; margin-top:4px }

/* ---- pricing page body (reuses .price-grid / .price-card / .pack-select) ---- */
.pricing-body{ max-width:1180px; margin:0 auto; padding:clamp(8px,2vh,24px) clamp(20px,5vw,72px) clamp(70px,9vh,110px) }
.pricing-context{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin-bottom:clamp(22px,3vh,34px); padding:14px 18px;
  background:#fff; border:1px solid var(--rule); border-radius:12px;
  font:400 13.5px/1.5 "Inter"; color:var(--ink-soft);
}
.pricing-context .pc-dot{ width:8px; height:8px; border-radius:999px; background:var(--terracotta); flex-shrink:0 }
.pricing-context b{ font-weight:600; color:var(--ink) }
.pricing-context a{ margin-left:auto; color:var(--terracotta); text-decoration:none; font-weight:500; letter-spacing:.04em; white-space:nowrap }
.pricing-context a:hover{ text-decoration:underline }

@media (max-width: 900px){
  .studio-picker{ grid-template-columns:repeat(2,1fr) }
}
@media (max-width: 560px){
  .studio-picker{ grid-template-columns:1fr 1fr; gap:10px }
  .sp-meta strong{ font-size:20px }
  .studio-toggle{ display:flex; width:100% }
  .st-btn{ flex:1 1 40%; padding:10px 8px; text-align:center }
  .pricing-context a{ margin-left:0; flex-basis:100% }
}
@media (prefers-reduced-motion: reduce){
  .sp-card,.sp-pic img,.sp-go .arr,.st-btn,.sel-eyebrow .dot{ transition:none; animation:none }
}

/* =====================================================================
   PRICING INLINE CARDS — visible-by-default options with savings
   Styles scoped to the new .pi-* pattern used on /pricing.
   ===================================================================== */

/* savings green — desaturated to match editorial palette */
:root{ --savings-green: #3d7a5e }

/* ---- visible options container ---- */
.pi-visible-options{
  display:flex; flex-direction:column; gap:10px; margin-top:14px;
}

/* ---- expandable (hidden by default, revealed by "see more") ---- */
.pi-expandable{
  display:flex; flex-direction:column; gap:10px;
  margin-top:10px;
  /* height-based transition for smooth reveal */
  overflow:hidden;
}
.pi-expandable[hidden]{ display:none }
.pi-expandable:not([hidden]){
  animation:pi-expand .4s cubic-bezier(.16,1,.3,1) both;
}
@keyframes pi-expand{
  from{ opacity:0; transform:translateY(-8px) }
  to{ opacity:1; transform:none }
}

/* ---- single inline option row ---- */
.pi-option{
  display:grid;
  /* cards in the 3-up pricing grid are ~320px — info + price share the
     row, the CTA gets its own full-width row (never crush the text) */
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:8px 12px;
  padding:14px 16px; border-radius:12px;
  background:var(--paper); border:1px solid var(--rule);
  transition:border-color .3s cubic-bezier(.16,1,.3,1),
             background .3s cubic-bezier(.16,1,.3,1),
             transform .3s cubic-bezier(.16,1,.3,1),
             box-shadow .3s cubic-bezier(.16,1,.3,1);
}
.pi-option:hover{
  border-color:rgba(26,24,22,.22); background:#fff;
  transform:translateY(-1px);
  box-shadow:0 8px 24px -12px rgba(26,24,22,.18);
}
.pi-option--popular{
  border-color:var(--terracotta);
  background:rgba(194,84,61,.04);
}
.pi-option--popular:hover{ background:rgba(194,84,61,.06) }

/* ---- option info (left col) ---- */
.pi-opt-info{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px }
.pi-opt-nm{
  font:500 14px/1.3 "Inter"; color:var(--ink);
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  white-space:normal;
}
.pi-popular-tag{
  font:500 9.5px/1 "Inter"; letter-spacing:.18em; text-transform:uppercase;
  color:var(--terracotta); background:rgba(194,84,61,.10);
  padding:3px 7px; border-radius:999px; flex-shrink:0;
}
.pi-opt-sub{
  font:400 11.5px/1.3 "Inter"; color:var(--ink-mute);
  display:block; margin-top:2px; letter-spacing:0; text-transform:none;
}

/* savings line */
.pi-savings{
  font:400 11.5px/1.3 "Inter"; color:var(--savings-green);
  display:block; margin-top:2px; letter-spacing:0;
}
.pi-savings:empty{ display:none }

/* ---- right col: price + per-class ---- */
.pi-opt-right{
  display:flex; flex-direction:column; align-items:flex-end; gap:3px;
}
.pi-opt-price{
  font:400 italic clamp(20px,2vw,24px)/1 "Fraunces"; letter-spacing:-.01em; color:var(--ink);
}
.pi-option--popular .pi-opt-price{ color:var(--terracotta) }
.pi-per-class{
  font:400 11px/1.2 "Inter"; color:var(--savings-green); text-align:right;
}
.pi-per-class:empty{ display:none }

/* ---- CTA button ---- */
.pi-opt-cta{
  grid-column:1/-1; width:100%; justify-content:center;
  flex-shrink:0; display:inline-flex; align-items:center; gap:7px;
  padding:9px 14px; border-radius:999px; text-decoration:none;
  font:500 11px/1 "Inter"; letter-spacing:.15em; text-transform:uppercase;
  color:var(--paper); background:var(--ink);
  transition:background .25s, transform .3s cubic-bezier(.16,1,.3,1);
  white-space:nowrap;
}
.pi-opt-cta:hover{ background:var(--terracotta); transform:translateY(-1px) }
.pi-arr{ transition:transform .3s cubic-bezier(.16,1,.3,1) }
.pi-opt-cta:hover .pi-arr{ transform:translateX(3px) }

/* ---- "See more" toggle button ---- */
.pi-see-more{
  appearance:none; border:0; background:transparent; cursor:pointer;
  display:inline-flex; align-items:center; gap:8px;
  margin-top:12px; padding:8px 0;
  font:500 12px/1 "Inter"; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-soft);
  transition:color .25s;
}
.pi-see-more:hover{ color:var(--terracotta) }
.pi-see-more-chevron{
  display:grid; place-items:center; width:22px; height:22px; border-radius:999px;
  border:1px solid var(--rule);
  transition:transform .35s cubic-bezier(.16,1,.3,1), background .25s, color .25s, border-color .25s;
}
.pi-see-more-chevron svg{ width:10px; height:10px }
.pi-see-more.open .pi-see-more-chevron{
  transform:rotate(180deg);
  background:var(--ink); color:#fff; border-color:var(--ink);
}

/* ---- responsive ---- */
@media (max-width: 480px){
  .pi-option{ grid-template-columns:1fr auto }
  .pi-opt-cta{ grid-column:1/-1; width:100%; justify-content:center; margin-top:2px }
  .pi-per-class{ font-size:10px }
}

@media (prefers-reduced-motion: reduce){
  .pi-option,.pi-opt-cta,.pi-see-more-chevron,.pi-arr{ transition:none }
  .pi-expandable:not([hidden]){ animation:none }
}