/* ====================================================================
   CMS Public Surface — book.pastlives.space class portal
   Lifted from base_public.html's inline <style> in v2.3.0 so the
   public CMS can be theme-aware. Sources all brand colors from the
   FOG palette in hub.css; flips a small number of surface tokens
   for dark mode via [data-theme="dark"] .cp-page.
==================================================================== */

/* Page background — replaces the old fixed Squarespace backdrop image.
   The portal now uses the FOG body background (light by default;
   dark when the theme toggle is on). */
body.classes-portal {
  background: var(--hub-bg);
}

/* ── Public CMS topbar ───────────────────────────────────────
   Slim navy bar matching pastlives.space cadence: wordmark left,
   nav center/right, Become-a-member CTA. Only renders on public
   surfaces (the {% if not user.is_authenticated %} gate in
   base_public.html); hub keeps its own sidebar+topbar. */
.cp-topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-navy);
  color: var(--color-cream);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  font-family: 'Lato', system-ui, -apple-system, sans-serif;
}
.cp-topbar__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 28px;
  height: 64px;
}
.cp-topbar__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--color-cream);
  text-decoration: none;
  flex-shrink: 0;
}
.cp-topbar__brand:hover { color: var(--color-tuscan-yellow); text-decoration: none; }
.cp-topbar__mark { display: block; }
.cp-topbar__wordmark {
  font-family: 'Lato', system-ui, sans-serif;
  font-weight: 900;
  font-size: 14px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.cp-topbar__nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 12px;
  flex: 1;
}
.cp-topbar__link {
  color: var(--color-cream);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 8px 14px;
  border-radius: 4px;
  text-decoration: none;
  transition: color .15s, background .15s;
  position: relative;
}
.cp-topbar__link:hover {
  color: var(--color-tuscan-yellow);
  background: rgba(238,180,75,0.06);
  text-decoration: none;
}
.cp-topbar__link--current { color: var(--color-tuscan-yellow); }
.cp-topbar__link--current::after {
  content: '';
  position: absolute;
  left: 14px; right: 14px; bottom: 2px;
  height: 1px;
  background: var(--color-tuscan-yellow);
}
.cp-topbar__right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.cp-topbar__ghost {
  color: var(--color-cream);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 8px 14px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.18);
  text-decoration: none;
}
.cp-topbar__ghost:hover {
  border-color: var(--color-tuscan-yellow);
  color: var(--color-tuscan-yellow);
  text-decoration: none;
}
.cp-topbar__cta {
  background: var(--color-tuscan-yellow);
  color: var(--color-navy);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 9px 18px;
  border-radius: 4px;
  text-decoration: none;
  box-shadow: 0 2px 12px rgba(238,180,75,0.25);
  transition: background .15s, transform .15s;
}
.cp-topbar__cta:hover {
  background: #f5ca6e;
  color: var(--color-navy);
  text-decoration: none;
  transform: translateY(-1px);
}
/* "FOG ↗" jump-to-member-dashboard link (shown on the public surface only). */
.cp-topbar__ext {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--color-tuscan-yellow);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
}
.cp-topbar__ext:hover {
  color: #f5ca6e;
  text-decoration: none;
}
.cp-topbar__ext svg {
  opacity: 0.85;
}
/* "Member" status pill. */
.cp-topbar__pill {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-cream);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 3px 9px;
  border-radius: 999px;
}
/* "Log out" subtle text link (no border, lighter than the ghost button). */
.cp-topbar__logout {
  color: var(--color-cream);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  opacity: 0.75;
}
.cp-topbar__logout:hover {
  color: var(--color-tuscan-yellow);
  opacity: 1;
  text-decoration: none;
}
.cp-topbar__theme-toggle {
  background: none;
  border: none;
  color: rgba(244,239,221,0.6);
  cursor: pointer;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: color .15s, background-color .15s;
  flex-shrink: 0;
}
.cp-topbar__theme-toggle:hover {
  color: var(--color-cream);
  background: rgba(255,255,255,0.08);
}
.cp-topbar__burger {
  display: none;
  background: none;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 4px;
  color: var(--color-cream);
  width: 40px; height: 40px;
  align-items: center; justify-content: center;
  cursor: pointer;
}
.cp-topbar__drawer {
  display: none;
  flex-direction: column;
  background: var(--color-navy);
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 8px 16px 16px;
}
.cp-topbar__drawer--open { display: flex; }
.cp-topbar__drawer-link {
  color: var(--color-cream);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 12px 8px;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.cp-topbar__drawer-link:last-child { border-bottom: none; }
.cp-topbar__drawer-link--current { color: var(--color-tuscan-yellow); }
.cp-topbar__drawer-link--cta {
  background: var(--color-tuscan-yellow);
  color: var(--color-navy);
  border-radius: 4px;
  text-align: center;
  margin-top: 8px;
  border: none;
}
.cp-topbar__drawer-divider {
  height: 1px;
  background: rgba(255,255,255,0.10);
  margin: 6px 0;
}
/* Account hamburger + dropdown (desktop right-side) */
.cp-topbar__account-menu {
  position: relative;
  display: inline-flex;
}
.cp-topbar__account-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: none;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 4px;
  color: var(--color-cream);
  cursor: pointer;
  transition: border-color .15s, color .15s;
  flex-shrink: 0;
}
.cp-topbar__account-btn:hover,
.cp-topbar__account-btn[aria-expanded="true"] {
  border-color: var(--color-tuscan-yellow);
  color: var(--color-tuscan-yellow);
}
.cp-topbar__account-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 180px;
  background: var(--color-navy);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.35);
  z-index: 200;
  overflow: hidden;
}
.cp-topbar__account-status {
  padding: 10px 14px 8px;
}
.cp-topbar__account-pill {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-tuscan-yellow);
  background: rgba(238,180,75,0.12);
  border: 1px solid rgba(238,180,75,0.30);
  padding: 3px 9px;
  border-radius: 999px;
}
.cp-topbar__account-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  color: var(--color-cream);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: background .12s, color .12s;
  white-space: nowrap;
}
.cp-topbar__account-item:hover {
  background: rgba(255,255,255,0.06);
  color: var(--color-tuscan-yellow);
  text-decoration: none;
}
.cp-topbar__account-item--ext { color: var(--color-tuscan-yellow); }
.cp-topbar__account-item--logout { opacity: 0.7; }
.cp-topbar__account-item--logout:hover { opacity: 1; color: var(--color-cream); background: rgba(255,255,255,0.06); }
.cp-topbar__account-divider {
  height: 1px;
  background: rgba(255,255,255,0.08);
  margin: 2px 0;
}
@media (max-width: 880px) {
  .cp-topbar__nav,
  .cp-topbar__right { display: none; }
  .cp-topbar__burger { display: inline-flex; margin-left: auto; }
  .cp-topbar__inner { padding: 0 16px; height: 56px; gap: 12px; }
  .cp-topbar__wordmark { font-size: 12px; letter-spacing: 0.18em; }
}

/* ── .cp-page tokens ─────────────────────────────────────────
   Names match the original prototype so downstream rules don't
   need to change. Values now source from hub.css FOG tokens. */
.cp-page {
  /* Brand accents — identical in both themes */
  --navy:        var(--color-navy);
  --navy-light:  #0d3a5e;
  --navy-dark:   #061f33;
  --gold:        var(--color-tuscan-yellow);
  --gold-light:  #f5ca6e;
  /* Gold used as *text* on light backgrounds; #EEB44B fails AA there, so a
     darker gold is substituted in light mode (restored to brand gold in dark,
     where gold sits on navy and passes). Gold *fills* keep --gold. */
  --gold-text:   #7a5d28;
  --gold-glow:   rgba(238,180,75,.20);
  --cream:       var(--color-cream);
  --cream-dim:   #d4cfc0;

  /* Body / surface — light defaults; dark overrides below */
  --bg:      var(--hub-bg);
  --bg2:     var(--hub-card-bg);
  --bg3:     rgba(9,46,76,.04);
  --bg4:     rgba(9,46,76,.07);
  --border:  rgba(9,46,76,.12);
  --border2: rgba(9,46,76,.22);

  /* Text — themed via FOG vars */
  --text:      var(--hub-text);
  --text2:     var(--hub-text-muted);
  --text3:     #686868;
  --steel:     var(--hub-text-muted);
  --steel-dim: #999;

  /* Accent + status */
  --accent:      var(--color-tuscan-yellow);
  --accent2:     #f5ca6e;
  --accent-glow: rgba(238,180,75,.15);
  --green: #197659;
  --red:   #be5656;
  --blue:  var(--color-brand-link);
  --purple:#a78bfa;

  /* Geometry + type */
  --r:  10px;
  --r2: 14px;
  --max: 1100px;
  --heading: 'Playfair Display', Georgia, serif;
  --font:    'Lato', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

[data-theme="dark"] .cp-page {
  --bg3:    rgba(9,46,76,.28);
  --bg4:    rgba(14,50,80,.50);
  --border: rgba(26,69,104,.30);
  --border2:rgba(26,69,104,.50);
  --text3:  #6589a4;
  --steel-dim: #6b8396;
  --green:  #2dd4a0;
  --red:    #f87171;
  --gold-text: var(--gold);
  --gold-glow:   rgba(238,180,75,.30);
  --accent-glow: rgba(238,180,75,.25);
}

.cp-page a{color:var(--gold-text);text-decoration:none;cursor:pointer}
.cp-page a:hover{text-decoration:underline;color:var(--gold-text)}
/* Hub button components (pl-btn) used inside the CMS public pages: the generic
   .cp-page anchor color/underline above would otherwise override their own
   styling and, on hover, paint the label the same gold as the hover background
   (making it vanish). Keep them looking like the standard hub buttons. */
.cp-page a.pl-btn:hover{text-decoration:none}
.cp-page a.pl-btn--primary,
.cp-page a.pl-btn--primary:hover{color:var(--color-navy)}
.cp-page a.pl-btn--secondary,
.cp-page a.pl-btn--secondary:hover{color:var(--hub-text)}
.cp-page .cp-container{max-width:var(--max);margin:0 auto;padding:0 24px}

.cp-page #hero{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:56px 24px 60px;background:transparent}
.cp-page #hero::after{content:'';position:absolute;inset:-20% -10%;pointer-events:none;background:radial-gradient(ellipse 50% 60% at 50% 35%,rgba(238,180,75,.08) 0%,rgba(200,150,50,.03) 30%,transparent 60%)}
.cp-page #hero img{width:100%;max-width:560px;margin-bottom:16px;filter:brightness(1.1) drop-shadow(0 0 40px rgba(238,180,75,.12))}
.cp-page #hero h1{font-family:var(--heading);font-size:38px;font-weight:800;letter-spacing:-.02em;color:var(--text)}
.cp-page #hero h1 span{color:var(--gold-text)}
.cp-page #hero p{font-size:15px;color:var(--text2);margin-top:8px;max-width:480px;font-weight:300}
.cp-page #hero-stats{display:flex;gap:48px;justify-content:center;margin-top:28px}
.cp-page .hs-n{font-size:32px;font-weight:900;color:var(--gold-text);font-family:var(--heading)}
.cp-page .hs-l{font-size:9px;color:var(--text2);text-transform:uppercase;letter-spacing:.14em;margin-top:3px}
.cp-page #hero-cta{margin-top:24px;display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.cp-page #hero-cta a{padding:11px 32px;border-radius:4px;font-size:13px;font-weight:700;cursor:pointer;transition:all .2s;text-decoration:none;letter-spacing:.03em;text-transform:uppercase}
.cp-page .cta-primary{background:var(--gold);color:var(--navy-dark);box-shadow:0 4px 20px var(--gold-glow)}
.cp-page .cta-primary:hover{background:var(--gold-light);color:var(--navy-dark);text-decoration:none;box-shadow:0 6px 28px var(--gold-glow)}
.cp-page .cta-secondary{background:transparent;color:var(--text);border:1px solid var(--border) !important}
.cp-page .cta-secondary:hover{border-color:var(--gold-text) !important;color:var(--gold-text);text-decoration:none}

/* ── Scroll-to-top button ─────────────────────────────────────── */
#scroll-top-btn{position:fixed;bottom:2rem;right:2rem;z-index:200;width:44px;height:44px;border-radius:50%;border:none;cursor:pointer;background:var(--color-navy);color:var(--color-tuscan-yellow);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(9,46,76,.28);transition:background .2s,transform .2s,opacity .2s;opacity:.9}
#scroll-top-btn:hover{background:#0d3a5e;transform:translateY(-2px);opacity:1}

/* ── Pagination ───────────────────────────────────────────────── */
.cls-pagination{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:32px;padding-top:20px;border-top:1px solid var(--border)}
.cls-page-btn{padding:8px 20px;border-radius:4px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;border:1px solid var(--border);background:var(--bg3);color:var(--text2);transition:all .2s;text-decoration:none;display:inline-block}
.cls-page-btn:hover{border-color:var(--gold-text);color:var(--gold-text);background:var(--gold-glow);text-decoration:none}
.cls-page-btn--disabled{opacity:.55;cursor:default;pointer-events:none}
.cls-page-info{font-size:12px;color:var(--text2);font-weight:600;letter-spacing:.04em}

.cp-page .cp{padding:6px 16px;border-radius:4px;font-size:11px;font-weight:700;cursor:pointer;border:1px solid var(--border);background:var(--bg3);color:var(--text2);transition:all .2s;white-space:nowrap;text-transform:uppercase;letter-spacing:.04em;text-decoration:none;display:inline-block}
.cp-page .cp:hover{color:var(--text);border-color:var(--gold-text);background:var(--gold-glow);text-decoration:none}
.cp-page .cp.on{background:var(--gold);color:var(--navy-dark);border-color:var(--gold-text);box-shadow:0 0 16px var(--gold-glow)}
.cp-page .cp .ct{opacity:.4;font-size:9px;margin-left:3px}

.cp-page .view{padding:20px 0 60px}
.cp-page .cat-sec{margin-bottom:40px;position:relative;padding:20px;margin-left:-20px;margin-right:-20px;border-radius:var(--r2)}
.cp-page .cat-sec::before{content:'';position:absolute;inset:0;border-radius:var(--r2);background:radial-gradient(ellipse 80% 60% at 50% 20%,rgba(238,180,75,.03) 0%,var(--bg3) 50%,transparent 100%);pointer-events:none}
.cp-page .cat-hd{display:flex;align-items:baseline;gap:10px;margin-bottom:14px;padding-bottom:8px;border-bottom:1px solid rgba(238,180,75,.18)}
.cp-page .cat-hd h2{font-family:var(--heading);font-size:20px;font-weight:800;color:var(--gold-text)}
.cp-page .cat-hd .cc{font-size:11px;color:var(--text2)}

.cp-page .cls-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.cp-page .cls-card{position:relative;display:flex;flex-direction:column;background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;transition:all .25s;box-shadow:0 1px 2px rgba(9,46,76,.04)}
.cp-page .cls-card:hover{background:var(--bg2);border-color:var(--gold-text);box-shadow:0 4px 24px rgba(9,46,76,.08),0 0 32px var(--accent-glow);transform:translateY(-1px)}
.cp-page .cls-media{position:relative;width:100%;height:150px;background:var(--bg4);overflow:hidden;display:block;text-decoration:none}
.cp-page .cls-img{width:100%;height:100%;object-fit:cover;display:block}
.cp-page .cls-img-ph{width:100%;height:100%;background:linear-gradient(135deg,var(--navy),var(--navy-light));display:flex;align-items:center;justify-content:center;font-size:40px;font-family:var(--heading);color:var(--gold);font-weight:800;opacity:.85;letter-spacing:.04em}
.cp-page .cls-body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:6px;flex:1}
.cp-page .cls-title{font-family:var(--heading);font-size:16px;font-weight:800;line-height:1.25;color:var(--text);text-decoration:none;display:block}
.cp-page .cls-title:hover{color:var(--gold-text)}
.cp-page .cls-inst{font-size:12px;color:var(--text2);position:relative;z-index:2}
.cp-page .cls-inst a{color:var(--gold-text);font-weight:400;position:relative;z-index:2}
.cp-page .cls-inst a:hover{color:var(--gold-text)}
.cp-page .cls-when{font-size:11px;color:var(--text3);margin-top:-2px}
.cp-page .cls-schedule{display:flex;flex-direction:column;gap:3px;margin-top:2px}
.cp-page .cls-schedule__row{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:12px}
.cp-page .cls-schedule__date{color:var(--text);font-weight:600;white-space:nowrap}
.cp-page .cls-schedule__time{color:var(--text3);white-space:nowrap;font-size:11px}
.cp-page .cls-schedule__more{font-size:11px;color:var(--gold-text);font-weight:600;margin-top:1px}
.cp-page .cls-schedule__tba{font-size:11px;color:var(--text3);font-style:italic}
.cp-page .cls-schedule__flex{font-size:11px;color:var(--text3)}
.cp-page .cls-schedule__pick{font-size:11px;color:var(--text3);font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.cp-page .cls-schedule__row--pick{text-decoration:none;border-radius:5px;margin:0 -6px;padding:3px 6px;transition:background .12s ease}
.cp-page .cls-schedule__row--pick:hover{background:var(--bg3)}
.cp-page .cls-schedule__row--pick .cls-spots{white-space:nowrap}
.cp-page .cls-spots--dates{color:var(--gold-text);text-transform:none;letter-spacing:0}
.cp-page .cls-footer{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-top:auto;padding-top:8px;border-top:1px solid var(--border)}
.cp-page .cls-price{font-size:18px;font-weight:900;color:var(--gold-text);font-family:var(--heading)}
.cp-page .cls-price-member{font-size:10px;color:var(--text3);margin-left:4px;font-family:var(--font);font-weight:400}
.cp-page .cls-spots{font-size:11px;font-weight:700}
.cp-page .cls-spots.ok{color:var(--green)}
.cp-page .cls-spots.low{color:var(--red)}
.cp-page .cls-spots.full{color:var(--red);text-transform:uppercase;letter-spacing:.06em}
.cp-page .badge{display:inline-block;font-size:9px;font-weight:700;padding:2px 7px;border-radius:4px;text-transform:uppercase;letter-spacing:.05em;vertical-align:middle;margin-left:6px}
.cp-page .badge.fx{background:rgba(167,139,250,.12);color:var(--purple);border:1px solid rgba(167,139,250,.25)}
.cp-page .badge.pv{background:rgba(248,113,113,.10);color:var(--red);border:1px solid rgba(248,113,113,.25)}
.cp-page .badge.series{background:var(--gold);color:var(--navy-dark);border:1px solid var(--gold);box-shadow:0 0 12px var(--gold-glow)}
.cp-page .badge.single{background:transparent;color:var(--text2);border:1px solid var(--border)}
/* Sale badge is RED-accented (like .badge.pv), NOT gold — a gold badge would be
   indistinguishable from the gold-filled series badge when both render together. */
.cp-page .badge.sale{background:rgba(248,113,113,.14);color:var(--red);border:1px solid rgba(248,113,113,.30)}
.cp-page .cls-price--was{text-decoration:line-through;color:var(--text3);font-weight:400;font-size:12px;margin-right:4px}

.cp-page .detail-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r2);max-width:720px;margin:24px auto;overflow:hidden;box-shadow:0 1px 3px rgba(9,46,76,.06),0 16px 40px rgba(9,46,76,.10);position:relative}
.cp-page .detail-card::before{content:'';position:absolute;top:-1px;left:20%;right:20%;height:1px;background:linear-gradient(90deg,transparent,rgba(238,180,75,.4),transparent);pointer-events:none}
.cp-page .detail-hero{width:100%;height:220px;object-fit:cover;display:block}
.cp-page .detail-head{padding:18px 24px 14px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.cp-page .detail-body{padding:0 24px 24px}
.cp-page .dc-cat{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--gold-text)}
.cp-page .dc-title{font-family:var(--heading);font-size:22px;font-weight:800;letter-spacing:-.01em;margin-top:4px;line-height:1.2;color:var(--text)}
.cp-page .dc-inst{font-size:13px;color:var(--text2);margin-top:4px}
.cp-page .dc-inst a{color:var(--gold-text);font-weight:400}
.cp-page .back-link{color:var(--text2);font-size:11px;text-transform:uppercase;letter-spacing:.08em;background:var(--bg3);border:1px solid var(--border);padding:6px 12px;border-radius:4px;white-space:nowrap}
.cp-page .back-link:hover{border-color:var(--gold-text);background:var(--gold-glow);color:var(--text);text-decoration:none}
.cp-page .dc-pbar{display:flex;align-items:baseline;gap:12px;margin:14px 0;padding:14px 16px;background:rgba(238,180,75,.06);border-radius:var(--r);border:1px solid rgba(238,180,75,.18);flex-wrap:wrap}
.cp-page .dc-pbig{font-size:28px;font-weight:900;color:var(--gold-text);font-family:var(--heading)}
.cp-page .dc-pmem{font-size:12px;color:var(--text2)}
.cp-page .dc-pspot{margin-left:auto;font-size:13px;font-weight:600}
.cp-page .dc-pspot.ok{color:var(--green)}
.cp-page .dc-pspot.low{color:var(--red)}
.cp-page .dc-pspot.full{color:var(--red);font-weight:800}
.cp-page .dc-sec{margin-top:16px}
.cp-page .dc-lbl{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text3);margin-bottom:4px}
.cp-page .dc-txt{font-size:13px;color:var(--text);line-height:1.7;white-space:pre-wrap}
.cp-page .dc-srow{display:flex;gap:8px;align-items:center;padding:7px 10px;margin-bottom:2px;background:var(--bg3);border-radius:6px;font-size:12px;border:1px solid var(--border)}
.cp-page .dc-snum{font-size:9px;font-weight:800;color:var(--gold-text);background:rgba(238,180,75,.14);border-radius:4px;padding:2px 6px;min-width:20px;text-align:center}
.cp-page .dc-sdate{font-weight:600;flex:1}
.cp-page .dc-stime{color:var(--text2)}
.cp-page .dc-sdur{font-size:10px;color:var(--text3)}
.cp-page .dc-igrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.cp-page .dc-icard{padding:10px 12px;background:var(--bg3);border-radius:var(--r);border:1px solid var(--border)}
.cp-page .dc-icard .dc-lbl{margin-bottom:2px}
.cp-page .dc-icard .dc-txt{font-size:11px}
.cp-page .dc-reg{margin-top:20px;padding-top:16px;border-top:1px solid var(--border)}
.cp-page .btn-reg{display:block;width:100%;padding:14px;border:none;border-radius:4px;background:var(--gold);color:var(--navy-dark);font-size:15px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;text-align:center;transition:all .2s;box-shadow:0 4px 20px var(--gold-glow);text-decoration:none}
.cp-page .btn-reg:hover{background:var(--gold-light);transform:translateY(-1px);box-shadow:0 6px 28px var(--gold-glow);text-decoration:none;color:var(--navy-dark)}
.cp-page .btn-sold{display:block;width:100%;padding:14px;border-radius:4px;background:rgba(248,113,113,.08);color:var(--red);font-size:15px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;text-align:center;cursor:default;border:1px solid rgba(248,113,113,.25)}

.cp-page .ip-hero{display:flex;gap:20px;align-items:flex-start;margin-bottom:20px}
.cp-page .ip-photo{width:120px;height:120px;border-radius:var(--r2);object-fit:cover;background:var(--bg4);flex-shrink:0}
.cp-page .ip-photo-ph{width:120px;height:120px;border-radius:var(--r2);background:var(--bg4);border:2px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:36px;color:var(--gold-text);flex-shrink:0}
.cp-page .ip-name{font-family:var(--heading);font-size:24px;font-weight:800;line-height:1.2;color:var(--text)}
.cp-page .ip-links{margin-top:6px;font-size:12px;color:var(--text2);display:flex;gap:10px;flex-wrap:wrap}
.cp-page .ip-links a{color:var(--accent)}
.cp-page .ip-bio{font-size:13px;color:var(--text2);line-height:1.7;margin-top:10px;font-weight:300;white-space:pre-wrap}
.cp-page .ip-sec{margin-top:20px}
.cp-page .ip-sec h3{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--text3);margin-bottom:8px;padding-bottom:4px;border-bottom:1px solid var(--border)}
.cp-page .ip-cls{padding:10px 12px;background:var(--bg3);border-radius:var(--r);margin-bottom:4px;transition:all .2s;border:1px solid var(--border);display:block;color:inherit;text-decoration:none}
.cp-page .ip-cls:hover{border-color:var(--gold-text);background:var(--gold-glow);text-decoration:none;color:inherit}
.cp-page .ip-cls.past{opacity:.5;cursor:default}
.cp-page .ip-cls-t{font-size:13px;font-weight:600}
.cp-page .ip-cls-m{font-size:10px;color:var(--text3);margin-top:1px}

.cp-page .empty{padding:24px;text-align:center;color:var(--text3);font-size:11px}

@media(max-width:768px){
  .cp-page .cls-card{grid-template-columns:64px 1fr auto;gap:10px;padding:10px 12px}
  .cp-page .cls-img,.cp-page .cls-img-ph{width:64px;height:48px}
  .cp-page .dc-igrid{grid-template-columns:1fr}
  .cp-page #hero{padding:32px 20px}
  .cp-page #hero h1{font-size:24px}
  .cp-page #hero p{font-size:12px}
  .cp-page #hero-stats{gap:24px;flex-wrap:wrap;row-gap:16px}
  .cp-page .hs-l{white-space:nowrap}
  .cp-page .hs-n{font-size:22px}
  .cp-page #hero img{max-width:360px}
  .cp-page #hero-cta a{padding:8px 20px;font-size:12px}
  .cp-page .ip-hero{flex-direction:column;align-items:center;text-align:center}
  .cp-page .ip-photo,.cp-page .ip-photo-ph{width:100px;height:100px}
  .cp-page .ip-links{justify-content:center}
  .cp-page .dc-title{font-size:17px}
  .cp-page .dc-pbig{font-size:22px}
}

/* ====================================================================
   .cp-detail — v2.3.0 class detail page
   Full-width, 16px floor, dense section blocks, sticky booking rail.
==================================================================== */

.cp-detail {
  --cp-detail-pad: clamp(1rem, 4vw, 2.5rem);
  font-size: clamp(16px, 1rem + 0.2vw, 18px);
  color: var(--text);
  line-height: 1.55;
  padding-bottom: 80px;
}

.cp-detail__preview-banner {
  margin: 12px var(--cp-detail-pad);
  padding: 12px 16px;
  background: rgba(238,180,75,.10);
  border: 1px solid var(--gold);
  border-radius: var(--r);
  font-size: 14px;
  color: var(--text);
}

/* ── Sale announcement banner ──────────────────────────── */
/* Full-width navy strip with a gold sheen sweeping across it. The navy base is
   deliberately theme-constant (brand structural blue), so the cream text and
   gold shimmer read identically on Obsidian and Slate. */
.cp-detail__sale-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin: 12px var(--cp-detail-pad);
  padding: 14px 18px;
  border: 1px solid var(--gold);
  border-radius: var(--r);
  background:
    linear-gradient(115deg, transparent 30%, var(--gold-glow) 45%, rgba(238,180,75,.45) 50%, var(--gold-glow) 55%, transparent 70%),
    linear-gradient(120deg, var(--navy-dark), var(--navy) 55%, var(--navy-dark));
  background-size: 250% 100%, 100% 100%;
  background-position: 125% 0, 0 0;
  animation: cp-sale-shimmer 3.5s ease-in-out infinite;
  box-shadow: 0 4px 20px var(--gold-glow);
}
.cp-detail__sale-banner-text {
  font-family: var(--heading);
  font-weight: 800;
  font-size: clamp(15px, 1rem + 0.3vw, 19px);
  color: #f4efdd; /* cream on the always-navy strip — same in both themes */
  text-align: center;
}
.cp-detail__sale-banner-pill {
  background: var(--gold);
  color: var(--navy-dark);
  font-weight: 800;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 4px 12px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 0 12px var(--gold-glow);
}
@keyframes cp-sale-shimmer {
  0%   { background-position: 125% 0, 0 0; }
  60%  { background-position: -60% 0, 0 0; }
  100% { background-position: -60% 0, 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .cp-detail__sale-banner { animation: none; }
}

/* ── Hero ──────────────────────────────────────── */
.cp-detail__hero {
  position: relative;
  width: 100%;
  height: clamp(280px, 42vw, 520px);
  background: var(--bg4);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}
.cp-detail__hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cp-detail__hero-logo {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cp-detail__hero-logo img {
  width: clamp(120px, 22vw, 200px);
  height: clamp(120px, 22vw, 200px);
  object-fit: contain;
  opacity: .9;
}
.cp-detail__hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(9,46,76,0) 0%, rgba(9,46,76,.55) 60%, rgba(9,46,76,.85) 100%);
}
.cp-detail__hero-content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 28px var(--cp-detail-pad) 32px;
  color: var(--color-cream);
}
.cp-detail__back {
  display: inline-block;
  margin-bottom: 18px;
  padding: 7px 14px;
  border-radius: 4px;
  background: rgba(0,0,0,0.35);
  color: var(--color-cream);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: 0.04em;
  backdrop-filter: blur(8px);
}
.cp-detail__back:hover { background: rgba(0,0,0,0.55); color: var(--color-cream); text-decoration: none; }
.cp-detail__cat-row {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 8px;
}
a.cp-detail__cat-chip {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--color-tuscan-yellow);
  color: var(--color-navy);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-decoration: none;
}
a.cp-detail__cat-chip:hover { background: #f5ca6e; color: var(--color-navy); text-decoration: none; }
.cp-detail__next-pill {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.14);
  color: var(--color-cream);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  border: 1px solid rgba(255,255,255,0.20);
}
.cp-detail__next-pill--flex { background: rgba(167,139,250,.18); border-color: rgba(167,139,250,.40); }
.cp-detail__title {
  font-family: var(--heading);
  font-size: clamp(28px, 4.5vw, 52px);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.05;
  margin: 8px 0 6px;
  color: var(--color-cream);
  text-shadow: 0 2px 24px rgba(0,0,0,0.40);
}
.cp-detail__byline {
  font-size: 17px;
  color: var(--color-cream);
  opacity: 0.92;
}
.cp-detail__byline a { color: var(--color-tuscan-yellow); font-weight: 600; }
.cp-detail__byline a:hover { color: #f5ca6e; }

/* ── Grid layout ─────────────────────────────── */
.cp-detail__grid {
  max-width: 1280px;
  margin: 0 auto;
  padding: 32px var(--cp-detail-pad) 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
@media (min-width: 1024px) {
  .cp-detail__grid {
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 48px;
  }
}
.cp-detail__main { min-width: 0; }
.cp-detail__rail { min-width: 0; }

/* ── Sections ────────────────────────────────── */
.cp-detail__section {
  padding: 28px 0;
  border-top: 1px solid var(--border);
}
.cp-detail__section:first-child { border-top: none; padding-top: 0; }
.cp-detail__section--split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 640px) {
  .cp-detail__section--split { grid-template-columns: 1fr 1fr; }
}
.cp-detail__h2 {
  font-family: var(--heading);
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 800;
  color: var(--text);
  margin: 0 0 14px;
  line-height: 1.2;
}
.cp-detail__h2-sub {
  font-family: var(--font);
  font-size: 14px;
  font-weight: 400;
  color: var(--text2);
  letter-spacing: 0.02em;
}
.cp-detail__h3 {
  font-family: var(--heading);
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 10px;
  letter-spacing: -0.005em;
}
.cp-detail__prose {
  font-size: 17px;
  line-height: 1.65;
  color: var(--text);
}
.cp-detail__prose p { margin: 0 0 12px; }
.cp-detail__prose p:last-child { margin-bottom: 0; }
.cp-detail__prose a { color: var(--gold-text); font-weight: 600; }
.cp-detail__prose a:hover { color: var(--gold-text); }

/* ── Video embed (responsive 16:9) ───────────── */
.cp-detail__video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--bg4);
  border-radius: var(--r2);
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(9,46,76,0.10);
}
.cp-detail__video iframe {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  border: 0;
}

/* ── Schedule ────────────────────────────────── */
.cp-detail__sessions {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.cp-detail__session {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--r);
}
.cp-detail__session-num {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--color-tuscan-yellow);
  color: var(--color-navy);
  font-weight: 800;
  font-size: 14px;
  display: inline-flex; align-items: center; justify-content: center;
}
.cp-detail__session-body { flex: 1; min-width: 0; }
.cp-detail__session-date { font-weight: 700; font-size: 16px; color: var(--text); }
.cp-detail__session-time { font-size: 15px; color: var(--text2); margin-top: 2px; }
.cp-detail__session-dur { color: var(--text3); }
/* Sessions that have already taken place (shown for context on a started series). */
.cp-detail__session--past { opacity: 0.5; }
.cp-detail__session--past .cp-detail__session-num { background: var(--text3); color: var(--bg, #fff); }
.cp-detail__session-done { font-weight: 600; font-size: 13px; color: var(--text3); }

/* ── Other dates for this class ──────────────── */
.cp-detail__other-dates { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cp-detail__other-date a {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 16px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--r);
  text-decoration: none;
  transition: border-color .15s ease, background .15s ease;
}
.cp-detail__other-date a:hover { border-color: var(--gold); background: var(--bg4); }
.cp-detail__other-date-when { font-weight: 600; font-size: 15px; color: var(--text); }

.cp-detail__flex-note {
  padding: 16px 18px;
  background: rgba(167,139,250,0.10);
  border: 1px solid rgba(167,139,250,0.30);
  border-radius: var(--r);
  font-size: 16px;
  color: var(--text);
}
.cp-detail__flex-note p { margin-top: 8px; }

/* ── Info blocks ─────────────────────────────── */
.cp-detail__info-block {
  padding: 18px 20px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--r);
}
.cp-detail__info-block--accent {
  background: rgba(238,180,75,0.06);
  border-color: rgba(238,180,75,0.30);
}

/* ── Instructor card ─────────────────────────── */
.cp-detail__instructor {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 18px;
  padding: 20px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--r2);
}
@media (max-width: 640px) {
  .cp-detail__instructor {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .cp-detail__instructor-photo { margin: 0 auto; }
}
.cp-detail__instructor-photo {
  width: 96px; height: 96px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg4);
  font-family: var(--heading);
  color: var(--gold);
  font-weight: 800;
  font-size: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--border);
}
.cp-detail__instructor-photo--ph { letter-spacing: 0; }
.cp-detail__instructor-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cp-detail__instructor-name {
  font-family: var(--heading);
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
  text-decoration: none;
}
.cp-detail__instructor-name:hover { color: var(--gold-text); text-decoration: none; }
.cp-detail__instructor-link {
  font-size: 14px;
  font-weight: 700;
  color: var(--gold-text);
  text-decoration: none;
  letter-spacing: 0.02em;
  margin-top: 4px;
}
.cp-detail__instructor-link:hover { color: var(--gold-text); }

/* ── Guild card ──────────────────────────────── */
.cp-detail__guild {
  padding: 20px;
  background: rgba(238,180,75,0.05);
  border: 1px solid rgba(238,180,75,0.30);
  border-radius: var(--r2);
}
.cp-detail__guild-link {
  display: inline-block;
  margin-top: 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--gold-text);
  text-decoration: none;
  letter-spacing: 0.02em;
}
.cp-detail__guild-link:hover { color: var(--gold-text); }

/* ── FAQ ─────────────────────────────────────── */
.cp-detail__faq-item {
  border: 1px solid var(--border);
  background: var(--bg3);
  border-radius: var(--r);
  padding: 14px 18px;
  margin-bottom: 8px;
}
.cp-detail__faq-item summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 16px;
  color: var(--text);
  list-style: none;
  display: flex; align-items: center; justify-content: space-between;
}
.cp-detail__faq-item summary::-webkit-details-marker { display: none; }
.cp-detail__faq-item summary::after {
  content: '+';
  color: var(--gold);
  font-size: 20px;
  font-weight: 400;
  margin-left: 12px;
  transition: transform .2s;
}
.cp-detail__faq-item[open] summary::after { content: '–'; }
.cp-detail__faq-item[open] { background: var(--bg2); }
.cp-detail__faq-item .cp-detail__prose { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }

/* ── Sticky booking rail ─────────────────────── */
.cp-detail__rail-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r2);
  padding: 22px;
  box-shadow: 0 8px 32px rgba(9,46,76,0.10);
}
/* Sticky lives on the wrapper (card + gallery stick together — a sticky card
   alone would slide over the gallery below it). */
@media (min-width: 1024px) {
  .cp-detail__rail-inner {
    position: sticky;
    top: 88px;
  }
}
.cp-detail__rail-gallery { margin-top: 20px; }
.cp-detail__rail-gallery .cp-detail__h3 { margin-bottom: 10px; }
.cp-detail__rail-gallery .cls-gallery__main { border-radius: var(--r2); }
.cp-detail__price-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.cp-detail__price {
  font-family: var(--heading);
  font-size: 36px;
  font-weight: 900;
  color: var(--gold-text);
  line-height: 1;
}
.cp-detail__price--was {
  font-family: var(--heading);
  font-size: 20px;
  font-weight: 700;
  color: var(--text3);
  text-decoration: line-through;
  line-height: 1;
}
.cp-detail__sale-note {
  font-size: 13px;
  font-weight: 700;
  color: var(--gold-text);
}
.cp-detail__price-member {
  font-size: 14px;
  color: var(--text2);
  font-weight: 600;
}
.cp-detail__price-member span {
  color: var(--text3);
  font-weight: 400;
}
.cp-detail__spots {
  padding: 12px 0 16px;
  font-size: 15px;
  font-weight: 700;
}
.cp-detail__spots--ok { color: var(--green); }
.cp-detail__spots--low { color: var(--red); }
.cp-detail__spots--full { color: var(--red); text-transform: uppercase; letter-spacing: 0.06em; }
a.cp-detail__cta {
  display: block;
  width: 100%;
  padding: 16px;
  border: none;
  border-radius: 6px;
  background: var(--gold);
  color: var(--navy-dark);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 4px 20px var(--gold-glow);
  transition: transform .15s, box-shadow .15s, background .15s;
  min-height: 44px;
}
a.cp-detail__cta:hover {
  background: var(--gold-light);
  transform: translateY(-1px);
  box-shadow: 0 8px 28px var(--gold-glow);
  text-decoration: none;
  color: var(--navy-dark);
}
a.cp-detail__cta--waitlist {
  background: transparent;
  color: var(--gold-text);
  border: 2px solid var(--gold);
  box-shadow: none;
}
a.cp-detail__cta--waitlist:hover {
  background: rgba(238,180,75,0.08);
  color: var(--gold);
}
.cp-detail__cta--disabled {
  display: block;
  width: 100%;
  padding: 16px;
  border: 1px solid var(--border2);
  border-radius: 6px;
  background: var(--bg4);
  color: var(--text2);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  min-height: 44px;
  box-shadow: none;
  cursor: default;
  pointer-events: none;
}
.cp-detail__waitlist-hint {
  margin-top: 10px;
  font-size: 13px;
  color: var(--text2);
  line-height: 1.5;
}
.cp-detail__rail-meta {
  list-style: none;
  margin: 18px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
  color: var(--text2);
}
.cp-detail__rail-meta li strong { color: var(--text); font-weight: 700; }

/* ── Related classes ─────────────────────────── */
.cp-detail__related {
  max-width: 1280px;
  margin: 48px auto 0;
  padding: 32px var(--cp-detail-pad) 0;
  border-top: 1px solid var(--border);
}
.cp-detail__related .cls-grid { margin-top: 18px; }

/* ── Inline guild/category icons (seeded via Category.icon_svg) ── */
.cp-page .cp svg {
  width: 14px; height: 14px;
  vertical-align: -3px;
  margin-right: 6px;
  flex-shrink: 0;
}
.cp-page .cat-hd h2 svg {
  width: 22px; height: 22px;
  vertical-align: -4px;
  margin-right: 10px;
  color: var(--gold);
}
.cp-page .cls-img-ph--icon { display: flex; align-items: center; justify-content: center; }
.cp-page .cls-img-ph--icon svg {
  width: 44%; height: 44%;
  color: var(--gold);
  opacity: .8;
  stroke-width: 1.5;
}
.cp-page .cls-img-ph--logo { display: flex; align-items: center; justify-content: center; }
.cp-page .cls-img-ph--logo img {
  width: 56%; height: 56%;
  object-fit: contain;
  opacity: .9;
}
.cp-detail__cat-chip svg,
.cp-detail__cat-chip img {
  width: 13px; height: 13px;
  vertical-align: -2px;
  margin-right: 5px;
}

/* ====================================================================
   .cp-filter — list-page filter bar + popover
   Category dropdown is always visible; the Filter button toggles a
   popover with instructor multi-select, price range, and toggles.
   Form submission is HTMX-swapped into #cls-results.
==================================================================== */
.cp-filter {
  position: relative;
  max-width: var(--max);
  margin: 0 auto 18px;
  padding: 0 24px;
}
.cp-filter__row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: end;
}
.cp-filter__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 200px;
  flex: 1;
}
.cp-filter__field-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text2);
}
.cp-filter__select,
.cp-filter__price input {
  appearance: none;
  background: var(--bg2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 36px 10px 14px;
  font-family: var(--font);
  font-size: 16px;
  min-height: 44px;
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%),
                    linear-gradient(135deg, var(--gold) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.cp-filter__price input {
  background-image: none;
  padding-right: 12px;
  min-width: 0;
}
/* Native option popups don't inherit the select's colors (FRONTEND.md rule 13) —
   theme them explicitly so the dropdown isn't a white box on the dark theme. */
.cp-filter__select option {
  background: var(--bg2);
  color: var(--text);
}
.cp-filter__select:focus,
.cp-filter__price input:focus {
  outline: none;
  border-color: var(--gold);
}
/* Loading state: dim the results grid while an HTMX filter/timeframe request is
   in flight (the filter form points hx-indicator at #cls-results). Opacity is
   theme-independent, so this reads correctly on both Obsidian and Slate. */
.cp-page #cls-results.htmx-request {
  opacity: 0.55;
  transition: opacity 0.15s ease;
}
.cp-filter__toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: var(--bg2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  min-height: 44px;
}
.cp-filter__toggle:hover { border-color: var(--gold); color: var(--gold-text); }
.cp-filter__toggle--on { border-color: var(--gold); color: var(--gold-text); background: var(--gold-glow); }
.cp-filter__toggle--has-active { border-color: var(--gold); }
.cp-filter__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  background: var(--gold);
  color: var(--navy-dark);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}
.cp-filter__reset {
  align-self: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--gold-text);
  padding: 10px 14px;
  border-radius: 6px;
  text-decoration: none;
}
.cp-filter__reset:hover { background: var(--gold-glow); text-decoration: none; color: var(--gold); }

.cp-filter__popover {
  position: absolute;
  top: calc(100% + 10px);
  left: 24px;
  right: 24px;
  z-index: 60;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r2);
  padding: 22px;
  box-shadow: 0 16px 48px rgba(9,46,76,0.18);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-height: 70vh;
  overflow-y: auto;
}
@media (max-width: 760px) {
  .cp-filter__popover { grid-template-columns: 1fr; }
}
.cp-filter__group { border: none; padding: 0; margin: 0; min-width: 0; }
.cp-filter__group legend {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gold-text);
  margin-bottom: 10px;
  padding: 0;
}
.cp-filter__checks {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 240px;
  overflow-y: auto;
  padding-right: 6px;
}
.cp-filter__checks--inline { flex-direction: column; gap: 10px; max-height: none; }
.cp-filter__check {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  color: var(--text);
  cursor: pointer;
  padding: 6px 0;
}
.cp-filter__check input { width: 18px; height: 18px; accent-color: var(--gold); cursor: pointer; }
.cp-filter__empty { font-size: 14px; color: var(--text2); font-style: italic; }
.cp-filter__price {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.cp-filter__price label {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cp-filter__group--inline { grid-column: 1 / -1; }
.cp-filter__actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.cp-filter__action {
  padding: 11px 22px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  border: none;
  min-height: 44px;
}
.cp-filter__action--ghost {
  background: transparent;
  color: var(--text2);
  border: 1px solid var(--border);
}
.cp-filter__action--ghost:hover { color: var(--text); text-decoration: none; }
.cp-filter__action--apply {
  background: var(--gold);
  color: var(--navy-dark);
}
.cp-filter__action--apply:hover { background: var(--gold-light); text-decoration: none; }

/* ── Results summary line ─────────────────── */
.cp-results__summary {
  max-width: var(--max);
  margin: 0 auto 14px;
  padding: 10px 24px 0;
  font-size: 15px;
  color: var(--text2);
}
.cp-results__summary strong { color: var(--text); font-weight: 700; }
.cp-results__summary em { font-style: normal; color: var(--text); font-weight: 600; }
.cp-results__reset-inline {
  margin-left: 10px;
  font-weight: 600;
  color: var(--gold-text);
  text-decoration: none;
}
.cp-results__reset-inline:hover { color: var(--gold-text); text-decoration: underline; }

/* ── Active guild-filter heading ─────────────────── */
.cp-results__guild {
  max-width: var(--max);
  margin: 0 auto 4px;
  padding: 10px 24px 0;
  font-family: var(--heading);
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
}
.cp-results__guild .cp-results__reset-inline { font-size: 14px; }