/* ═════════════════════════════════════════════════════════════════════
   Workshops — scoped stylesheet
   Static port of workshop-page/project/Workshops.html (Claude Design).
   Every selector is namespaced under .workshops to prevent bleed into
   other pages. CSS variables live on .workshops instead of :root for
   the same reason. The mock .site-header / .meta-band / .tweaks
   blocks from the design are intentionally omitted — the site's real
   header/footer are rendered via get_header() / get_footer().
   ═════════════════════════════════════════════════════════════════════ */

.workshops {
  --bg: #fbfaf7;
  --ink: #1a1a1a;
  --ink-2: #3a3a38;
  --muted: #6f6c66;
  --rule: #e6e2dc;
  --accent: #e8d9c4;          /* warm beige separator */
  --accent-2: #c9a87a;
  --grad-a: #b8c4b3;          /* sage */
  --grad-b: #d9c0b0;          /* peach */
  --placeholder: #d8d2c7;
  --card: #ffffff;
  --shadow: 0 1px 0 rgba(0,0,0,.04), 0 18px 40px -28px rgba(40,30,20,.18);
  --max: 1180px;

  font-family: 'Public Sans', system-ui, sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.workshops *,
.workshops *::before,
.workshops *::after { box-sizing: border-box; }

.workshops .wrap { max-width: var(--max); margin: 0 auto; padding: 0 32px; }

/* ============ Hero (editorial, preserved) ============ */
.workshops .hero { padding: 96px 0 88px; }
.workshops .hero-grid {
  display: grid; grid-template-columns: 1fr minmax(0,2fr) 1fr;
  align-items: start;
}
.workshops .hero-inner { grid-column: 2; }
.workshops .hero h1 {
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1.05;
  letter-spacing: -.02em;
  font-weight: 800;
  margin: 0 0 36px;
}
.workshops .quote-mark {
  color: #bdb8af; font-size: 64px; line-height: .6; font-family: Georgia, serif;
  display: block; margin-bottom: 8px;
}
.workshops .hero-lede {
  font-weight: 700; font-size: 22px; margin: 0 0 18px;
}
.workshops .hero-divider { width: 48px; border: 0; border-top: 1px solid #c9c5be; margin: 0 0 14px; }
.workshops .hero-attr {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 28px;
}
.workshops .hero-body {
  color: var(--ink-2); font-size: 17px; line-height: 1.7; max-width: 62ch; margin: 0 0 36px;
}
.workshops .pill-btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
  color: #fff; text-decoration: none;
  padding: 16px 32px; border-radius: 999px; border: none; cursor: pointer;
  background: linear-gradient(135deg, var(--grad-a), var(--grad-b));
  box-shadow: 0 10px 24px -14px rgba(120,100,80,.45);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.workshops .pill-btn:hover { transform: translateY(-1px); filter: brightness(1.03); }
.workshops .pill-btn.ghost {
  background: transparent; color: var(--ink);
  border: 1px solid #cfc9bf;
}
.workshops .pill-btn.ghost:hover { background: #f2ede5; }
.workshops .hero-cta-row { display: flex; justify-content: center; }

.workshops .section-rule { border: 0; border-top: 1px solid var(--rule); margin: 0; }

/* ============ Find workshops anchor ============ */
.workshops .find-band { padding: 80px 0 24px; }
.workshops .find-band .label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: var(--muted);
  margin: 0 0 18px;
}
.workshops .find-band h2 {
  font-size: clamp(32px, 3.4vw, 44px);
  letter-spacing: -.02em; line-height: 1.08; font-weight: 800; margin: 0 0 14px;
  max-width: 18ch;
}
.workshops .find-band .sub { color: var(--ink-2); max-width: 56ch; margin: 0 0 36px; font-size: 17px; line-height: 1.65; }

/* ============ Filter bar ============ */
.workshops .filter-bar {
  display: flex; flex-direction: column; gap: 20px;
  padding: 24px; border: 1px solid var(--rule); border-radius: 18px;
  background: #fff;
}
.workshops .filter-controls {
  display: grid; grid-template-columns: 1fr 1fr auto; gap: 16px; align-items: end;
}
.workshops .filter-select { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.workshops .filter-select > span {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--muted);
}
.workshops .filter-select select {
  appearance: none; -webkit-appearance: none;
  font: inherit; font-size: 15px; color: var(--ink); font-weight: 600;
  padding: 14px 40px 14px 16px;
  border: 1px solid #d8d2c7; border-radius: 12px; background: #fbfaf7;
  cursor: pointer; width: 100%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1a1a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6,9 12,15 18,9'/></svg>");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 14px 14px;
  transition: border-color .15s ease, background-color .15s ease;
}
.workshops .filter-select select:hover { border-color: #a89a82; }
.workshops .filter-select select:focus { outline: none; border-color: var(--ink); background: #fff; }
.workshops .filter-reset {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--muted); background: none; border: none; cursor: pointer;
  padding: 14px 8px;
  text-decoration: underline; text-underline-offset: 4px;
}
.workshops .filter-reset:hover { color: var(--ink); }

.workshops .filter-pills-wrap { position: relative; }
.workshops .filter-pills-wrap::before,
.workshops .filter-pills-wrap::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 36px; pointer-events: none;
  z-index: 2; transition: opacity .2s ease;
}
.workshops .filter-pills-wrap::before {
  left: 0; background: linear-gradient(90deg, #fff, rgba(255,255,255,0));
}
.workshops .filter-pills-wrap::after {
  right: 0; background: linear-gradient(-90deg, #fff, rgba(255,255,255,0));
}
.workshops .filter-pills-wrap[data-at-start="true"]::before { opacity: 0; }
.workshops .filter-pills-wrap[data-at-end="true"]::after { opacity: 0; }

.workshops .pill-scroll {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border-radius: 999px;
  border: 1px solid var(--rule); background: #fff; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  z-index: 3; color: var(--ink);
  box-shadow: 0 4px 14px -6px rgba(0,0,0,.15);
  transition: opacity .2s ease, transform .15s ease;
}
.workshops .pill-scroll:hover { transform: translateY(-50%) scale(1.05); }
.workshops .pill-scroll.prev { left: -6px; }
.workshops .pill-scroll.next { right: -6px; }
.workshops .filter-pills-wrap[data-at-start="true"] .pill-scroll.prev { opacity: 0; pointer-events: none; }
.workshops .filter-pills-wrap[data-at-end="true"]   .pill-scroll.next { opacity: 0; pointer-events: none; }

.workshops .filters {
  display: flex; flex-wrap: nowrap; gap: 10px;
  overflow-x: auto; scroll-behavior: smooth;
  padding: 4px 12px;
  scrollbar-width: none;
}
.workshops .filters::-webkit-scrollbar { display: none; }
.workshops .filter {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  padding: 11px 20px; border-radius: 999px;
  border: 1px solid #d8d2c7; background: transparent; color: var(--ink-2);
  cursor: pointer; display: inline-flex; align-items: center; gap: 10px;
  white-space: nowrap; flex-shrink: 0;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .12s ease;
}
.workshops .filter .count {
  font-size: 10px; color: var(--muted);
  border-left: 1px solid currentColor; padding-left: 10px; opacity: .5;
}
.workshops .filter:hover { border-color: #a89a82; color: var(--ink); }
.workshops .filter.is-active {
  background: var(--ink); color: #fff; border-color: var(--ink);
}
.workshops .filter.is-active .count { color: #fff; opacity: .7; }

/* ============ Series list (outer accordion) ============ */
.workshops .list { display: flex; flex-direction: column; margin: 48px 0 0; border-top: 1px solid var(--rule); }
.workshops .series { border-bottom: 1px solid var(--rule); background: transparent; transition: background .25s ease; }
.workshops .series.open { background: #fcf9f3; }
.workshops .series.is-soon { opacity: .55; }
.workshops .series.is-soon .series-head { cursor: default; }

.workshops .series-head {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 28px;
  align-items: center;
  padding: 40px 32px;
  cursor: pointer;
  width: 100%;
  background: none; border: none; text-align: left; font: inherit; color: inherit;
}
.workshops .series-head:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 4px; border-radius: 6px; }
.workshops .series-icon {
  width: 44px; height: 44px;
  border: 1px solid var(--accent);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: #fff;
  color: var(--ink);
  flex-shrink: 0;
}
.workshops .series-icon svg { width: 22px; height: 22px; }
.workshops .series-title-wrap { min-width: 0; }
.workshops .series-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: .28em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 6px;
}
.workshops .series-title {
  font-size: clamp(28px, 2.6vw, 38px);
  font-weight: 800; letter-spacing: -.02em; line-height: 1.05;
  margin: 0 0 6px;
}
.workshops .series-desc { color: var(--ink-2); font-size: 15px; margin: 0; max-width: 62ch; }
.workshops .series-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.workshops .series-count b { color: var(--ink); font-weight: 700; font-size: 13px; margin-right: 6px; }
.workshops .series.is-soon .series-count { color: var(--accent-2); }
.workshops .series .series-chev {
  width: 32px; height: 32px; border-radius: 999px; border: 1px solid #cfc9bf;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .3s ease, background .2s ease, border-color .2s ease;
  color: var(--ink);
}
.workshops .series .series-chev svg { width: 12px; height: 12px; }
.workshops .series.open .series-chev { transform: rotate(180deg); background: var(--ink); border-color: var(--ink); color: #fff; }

.workshops .series-body-wrap { overflow: hidden; height: 0; transition: height .42s cubic-bezier(.2,.7,.2,1); }
.workshops .series-body { padding: 0 32px 48px; container-type: inline-size; container-name: seriesBody; }
.workshops .workshops-list { margin-left: 56px; border-top: 1px dashed var(--rule); }
.workshops .workshops-list .empty-in-series {
  padding: 32px 8px; color: var(--muted);
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  letter-spacing: .22em; text-transform: uppercase;
}

/* ============ Workshop card ============ */
.workshops .card {
  border-top: 1px solid var(--rule);
  background: transparent;
  transition: background .25s ease;
}
.workshops .workshops-list .card:first-child { border-top: none; }
.workshops .card.open { background: #fffdf9; }

.workshops .card-head {
  display: grid;
  /* The meta column sizes to its own content (never below min-content, never
     past max-content) — as a 1fr track it was handed a share of free space
     regardless of need, so a long level label overran the next divider on
     every viewport between ~1010px and ~1340px. The title track absorbs the
     slack instead. */
  grid-template-columns: minmax(0, 1.3fr) minmax(min-content, max-content) minmax(0, auto) auto;
  gap: 32px;
  align-items: center;
  padding: 36px 24px;
  cursor: pointer;
  width: 100%;
  background: none; border: none; text-align: left; font: inherit; color: inherit;
}
.workshops .card-head:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 4px; border-radius: 6px; }
.workshops .card-title {
  font-size: clamp(26px, 2.4vw, 34px);
  letter-spacing: -.015em; font-weight: 800; line-height: 1.1;
  margin: 0 0 6px;
}
.workshops .card-title .code {
  font-family: 'JetBrains Mono', monospace;
  font-size: .5em; font-weight: 500; letter-spacing: .04em; color: var(--muted);
  margin-left: 8px; vertical-align: .25em;
}
.workshops .card-sub { font-size: 16px; color: var(--ink-2); font-weight: 600; margin: 0; }

.workshops .card-meta {
  display: flex; align-items: stretch; gap: 0;
  font-size: 13px; color: var(--ink-2);
}
.workshops .meta-item {
  padding: 0 18px; border-left: 1px solid var(--accent);
  display: flex; flex-direction: column; justify-content: center;
  min-width: 0;
}
.workshops .meta-item:first-child { border-left: none; padding-left: 0; }
.workshops .meta-k {
  font-weight: 700; font-size: 12px; color: var(--ink); margin-bottom: 4px;
  white-space: nowrap;
}
/* Wrapping (not nowrap) keeps min-content small, so the row can always be
   squeezed into its track rather than spilling across the rule beside it. */
.workshops .meta-v { color: var(--muted); overflow-wrap: anywhere; }

.workshops .card-price { text-align: right; min-width: 130px; }
.workshops .price-now { font-size: 20px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; }
.workshops .price-was {
  color: var(--muted); text-decoration: line-through; font-weight: 500;
  font-size: 14px; margin-right: 6px;
}
.workshops .price-note {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent-2); margin-top: 6px;
}

.workshops .card-toggle {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-2);
}
.workshops .chev {
  width: 28px; height: 28px; border-radius: 999px; border: 1px solid #cfc9bf;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .3s ease, background .2s ease, border-color .2s ease;
}
.workshops .chev svg { width: 12px; height: 12px; color: var(--ink); }
.workshops .card.open .chev { transform: rotate(180deg); background: var(--ink); border-color: var(--ink); color: #fff; }
.workshops .card.open .chev svg { color: #fff; }

/* Accordion body */
.workshops .card-body-wrap {
  overflow: hidden;
  height: 0;
  transition: height .42s cubic-bezier(.2,.7,.2,1);
}
.workshops .card-body {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 64px;
  padding: 8px 24px 56px;
}
.workshops .body-cols {
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px 56px;
  align-content: start;
}
.workshops .body-block h4 {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 14px; font-weight: 500;
}
.workshops .body-block ul { margin: 0; padding: 0; list-style: none; }
.workshops .body-block li {
  position: relative; padding-left: 18px; margin-bottom: 10px; color: var(--ink-2);
  font-size: 15.5px; line-height: 1.55;
}
.workshops .body-block li::before {
  content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--accent-2);
  position: absolute; left: 0; top: 9px;
}
.workshops .body-block p { margin: 0; color: var(--ink-2); font-size: 15.5px; line-height: 1.65; }
.workshops .outcomes li::before { background: #7a9b78; }

.workshops .body-aside { display: flex; flex-direction: column; gap: 24px; }
.workshops .placeholder-img {
  aspect-ratio: 4/3;
  background:
    repeating-linear-gradient(
      135deg,
      var(--placeholder) 0 12px,
      #cfc8ba 12px 13px
    );
  border-radius: 14px;
  position: relative;
  display: flex; align-items: flex-end; justify-content: flex-start;
  padding: 18px;
}
.workshops .placeholder-img::after {
  content: "";
  position: absolute; inset: 0; border-radius: 14px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.04);
  pointer-events: none;
}
.workshops .placeholder-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  background: rgba(255,255,255,.85); color: var(--ink);
  padding: 6px 10px; border-radius: 999px;
}
.workshops .book-row { display: flex; flex-direction: column; gap: 14px; }
.workshops .next-run {
  display: flex; align-items: center; gap: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted);
}
.workshops .next-run b { color: var(--ink); font-weight: 600; }
.workshops .seats-bar {
  display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--ink-2);
}
.workshops .seats-track { flex: 1; height: 4px; background: #ece6db; border-radius: 999px; overflow: hidden; }
.workshops .seats-fill { height: 100%; background: linear-gradient(90deg, var(--grad-a), var(--grad-b)); }

/* Nothing published yet — server-rendered notice above the list */
.workshops .ws-none {
  padding: 48px 32px; text-align: center;
  border: 1px solid var(--rule); border-radius: 18px; background: #fff;
  margin: 0 0 32px;
}
.workshops .ws-none .label { margin: 0 0 14px; }
.workshops .ws-none-msg {
  margin: 0 auto; max-width: 42ch; color: var(--ink-2);
  font-size: 19px; line-height: 1.6;
}

/* Empty state */
.workshops .empty {
  padding: 80px 8px; text-align: center; color: var(--muted);
  display: none;
}
.workshops .empty.show { display: block; }
.workshops .empty .em {
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  letter-spacing: .22em; text-transform: uppercase;
}

/* ============ Card, narrow containers ============
   The card is indented inside .series-body, so its own width — not the
   viewport — decides when it must stack. These must stay AFTER the .card-*
   component rules above: same specificity, so source order decides. */
@container seriesBody (max-width: 1040px) {
  .workshops .workshops-list { margin-left: 24px; }
  .workshops .card-head { grid-template-columns: 1fr; gap: 18px; padding: 32px 20px; }
  .workshops .card-meta { flex-wrap: wrap; gap: 0 8px; }
  .workshops .card-price { text-align: left; min-width: 0; }
  /* Stacked, the toggle spans the full row — let the label hug the chevron on
     the left instead of drifting to the middle with the chevron at the edge. */
  .workshops .card-toggle { justify-content: flex-start; }
  .workshops .card-toggle .toggle-label { flex: 0 0 auto; text-align: left; }
}
@container seriesBody (max-width: 560px) {
  .workshops .workshops-list { margin-left: 0; }
  .workshops .card-head { padding: 26px 0; gap: 16px; }
  /* Vertical rules read as noise at this size — the meta becomes a plain
     grid, 3 across where it fits and 2 where it doesn't. */
  .workshops .card-meta {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
    gap: 14px 18px;
  }
  .workshops .meta-item { border-left: none; padding: 0; }
  .workshops .card-price { min-width: 0; }
  .workshops .card-title { font-size: clamp(22px, 6.5vw, 28px); }
  .workshops .card-body { padding: 8px 0 40px; }
}

/* ============ Responsive ladder ============
   ≥1180  desktop, as designed
   ≤1024  iPad landscape / small laptop — tighten the shell
   ≤900   (below) hero + card body go single column
   ≤820   iPad portrait — series head becomes two rows
   ≤620   phone — single column, softer padding, bigger tap targets
   Card internals are handled by the seriesBody container queries above,
   since the card is indented inside the series body rather than sitting
   at viewport width. */

@media (max-width: 1024px) {
  .workshops .series-head { gap: 20px; padding: 32px 24px; }
  .workshops .series-body { padding: 0 24px 40px; }
  .workshops .find-band { padding: 64px 0 24px; }
}

@media (max-width: 900px) {
  .workshops .hero-grid { grid-template-columns: 1fr; }
  .workshops .hero-inner { grid-column: 1; }
  .workshops .card-body { grid-template-columns: 1fr; gap: 32px; }
  .workshops .body-cols { grid-template-columns: 1fr; gap: 28px; }
  /* .card-head / .card-meta / .card-price stack via the seriesBody container
     queries above — a viewport this narrow always means a narrow container. */
}

/* iPad portrait and down: the series head had no responsive rule at all, so
   four columns plus 28px gaps left the title ~69px at phone width. Title and
   description now get the full row; the count drops beneath them. */
@media (max-width: 820px) {
  .workshops .series-head {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "icon title chev"
      "icon count chev";
    row-gap: 12px;
  }
  .workshops .series-icon      { grid-area: icon; align-self: start; }
  .workshops .series-title-wrap { grid-area: title; }
  .workshops .series-count     { grid-area: count; justify-self: start; }
  .workshops .series .series-chev { grid-area: chev; }
  .workshops .workshops-list { margin-left: 24px; }
}

@media (max-width: 620px) {
  .workshops .wrap { padding: 0 20px; }
  .workshops .hero { padding: 64px 0 56px; }
  .workshops .find-band { padding: 48px 0 24px; }

  .workshops .series-head { gap: 16px; padding: 24px 20px; }
  .workshops .series-icon { width: 36px; height: 36px; border-radius: 10px; }
  .workshops .series-icon svg { width: 18px; height: 18px; }
  .workshops .series-title { font-size: clamp(22px, 7vw, 28px); }
  .workshops .series-desc { font-size: 14px; }
  .workshops .series-body { padding: 0 20px 32px; }
  .workshops .list { margin-top: 32px; }

  .workshops .filter-bar { padding: 18px; gap: 16px; }
  .workshops .filter-controls { grid-template-columns: 1fr; gap: 14px; }
  .workshops .filter-reset { justify-self: start; padding: 8px 0; }
  /* Touch swipes the pill strip; the arrows only steal room. */
  .workshops .pill-scroll { display: none; }
  .workshops .filters { padding: 4px 0; }
  .workshops .filter-pills-wrap::before,
  .workshops .filter-pills-wrap::after { width: 20px; }

  .workshops .ws-none { padding: 32px 20px; }
  .workshops .ws-none-msg { font-size: 17px; }
  .workshops .empty { padding: 56px 8px; }
}

/* Filter visibility — applied by workshops.js to hide non-matching
   series and cards while preserving their DOM (so the accordion state,
   inline heights, and scroll position survive a filter change). */
.workshops .is-hidden { display: none !important; }