/* ============================================================
   70-workshop — knee-workshop funnel pages
   (/avoid-knee-replacement/, /workshop-deposit/, /knee-workshop-confirmation/).
   Logo-only header like the live funnel, centered interior hero,
   details strip, checklists, numbered cards, reviews, payment card.
   Reuses .sec-00-inthero and .sec-18-faq; everything else is scoped here.
   ============================================================ */

/* --- Logo-only header, overlays the hero like the main nav does --- */
.sec-70-ws-bar {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 20;
  height: var(--nav-h);
  display: flex;
  align-items: center;
}
.sec-70-ws-bar__inner { display: flex; justify-content: center; }
.sec-70-ws-bar__logo img { display: block; width: auto; height: 62px; }

/* --- Hero: centered variant of the interior hero --- */
.sec-70-ws-hero { text-align: center; }
.sec-70-ws-hero__inner { display: flex; flex-direction: column; align-items: center; }
.sec-70-ws-hero h1 { max-width: 22ch; margin-inline: auto; }
.sec-70-ws-hero .sec-00-inthero__sub { margin-inline: auto; max-width: 60ch; }
.sec-70-ws-hero .eyebrow::before { display: none; }
.sec-70-ws-hero__cta { justify-content: center; }
.sec-70-ws-hero__lead {
  margin-top: 1.25rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h4);
  color: var(--white);
}
.sec-70-ws-hero__small { margin-top: 1rem; font-size: var(--fs-small); color: var(--text-on-ink-dim); }

/* --- YouTube facade (iframe swaps in on click, see 70-workshop.js) --- */
.sec-70-ws-video {
  width: min(100%, 720px);
  margin-top: 2rem;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 2px solid var(--accent);
  box-shadow: var(--shadow-lift), var(--shadow-glow);
  background: var(--ink-3);
}
.sec-70-ws-video__play {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.sec-70-ws-video__play img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sec-70-ws-video__icon {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-on);
  transform: translate(-50%, -50%);
  box-shadow: 0 10px 30px hsl(0 0% 0% / 0.35);
  transition: transform 300ms var(--ease-spring);
}
.sec-70-ws-video__play:hover .sec-70-ws-video__icon,
.sec-70-ws-video__play:focus-visible .sec-70-ws-video__icon { transform: translate(-50%, -50%) scale(1.08); }
.sec-70-ws-video iframe { display: block; width: 100%; height: 100%; border: 0; }

/* --- Shared helpers --- */
.sec-70-ws-center { margin-inline: auto; text-align: center; }
.sec-70-ws-center .eyebrow { justify-content: center; }
.sec-70-ws-center .eyebrow::before { display: none; }
.sec-70-ws-center[data-chapter]::before { left: 50%; transform: translateX(-50%); }
.sec-70-ws-check {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-on);
}

/* --- Workshop details strip --- */
.sec-70-ws-details__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--sp-gap);
}
.sec-70-ws-details__item {
  padding: 1.5rem 1.25rem;
  text-align: center;
  background: var(--white);
  border-radius: var(--radius-card);
  border-top: 3px solid var(--accent);
  box-shadow: var(--shadow-soft);
}
.sec-70-ws-details__icon {
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
}
.sec-70-ws-details__label {
  margin-top: 0.85rem;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--text-on-bone);
}
.sec-70-ws-details__value { margin-top: 0.35rem; font-size: 0.95rem; color: var(--text-on-bone-dim); }

/* --- Image + copy split (for-you, host, deposit) --- */
.sec-70-ws-split__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.sec-70-ws-split__grid--flip { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
.sec-70-ws-split__media { margin: 0; }
.sec-70-ws-split__media img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 560px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
}
.sec-70-ws-split__body h2 { margin-top: 0.9rem; font-size: var(--fs-h2); }
.sec-70-ws-split__body > p:not(.eyebrow) { margin-top: 1.1rem; max-width: 58ch; }
.sec-70-ws-split__body .btn { margin-top: 1.75rem; }

.sec-70-ws-checklist { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; gap: 1rem; }
.sec-70-ws-checklist li { display: flex; gap: 0.9rem; align-items: flex-start; }
.sec-70-ws-checklist li > span:last-child { padding-top: 0.15rem; }
.on-ink .sec-70-ws-checklist li { color: var(--text-on-ink); }

/* --- Numbered / checked cards (learn, what happens next) --- */
.sec-70-ws-learn { background: var(--bone-2); }
.sec-70-ws-learn--ink { background: var(--ink-2); }
.sec-70-ws-learn__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--sp-gap);
}
.sec-70-ws-learn__card {
  grid-column: span 2;
  padding: clamp(1.5rem, 2.5vw, 2rem);
  background: var(--white);
  border-radius: var(--radius-card);
  border-top: 3px solid var(--accent);
  box-shadow: var(--shadow-soft);
  color: var(--text-on-bone);
}
/* 5 cards: 3 on the first row, 2 centered-wide on the second */
.sec-70-ws-learn__grid > .sec-70-ws-learn__card:nth-child(4):nth-last-child(2),
.sec-70-ws-learn__grid > .sec-70-ws-learn__card:nth-child(5):last-child { grid-column: span 3; }
.sec-70-ws-learn--ink .sec-70-ws-learn__card { background: var(--ink-3); color: var(--text-on-ink); box-shadow: none; }
.sec-70-ws-learn__num {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 1.6rem + 1.5vw, 2.75rem);
  line-height: 1;
  color: var(--accent);
}
.sec-70-ws-learn__card .sec-70-ws-check { margin-bottom: 1rem; }
.sec-70-ws-learn__card h3 { margin-top: 0.9rem; font-size: var(--fs-h4); }
.sec-70-ws-learn__card p { margin-top: 0.75rem; }
.sec-70-ws-learn__card .sec-70-ws-check + p { margin-top: 0; }
.sec-70-ws-next { background: var(--bone); }

/* --- GoHighLevel form panel --- */
.sec-70-ws-form { background: var(--bone); }
.sec-70-ws-form__panel {
  max-width: 760px;
  margin-inline: auto;
  padding: clamp(0.75rem, 2vw, 1.5rem);
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
}

/* --- Reviews (verbatim copy; <mark> mirrors the live highlights) --- */
.sec-70-ws-reviews { background: var(--bone-2); }
.sec-70-ws-reviews__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-gap);
  align-items: start;
}
.sec-70-ws-review {
  padding: clamp(1.4rem, 2.5vw, 1.9rem);
  background: var(--white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
}
.sec-70-ws-review__head { display: flex; align-items: center; gap: 0.85rem; }
.sec-70-ws-review__avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
}
.sec-70-ws-review__name { font-family: var(--font-display); font-weight: 700; color: var(--text-on-bone); }
.sec-70-ws-review__name a { color: inherit; }
.sec-70-ws-review__meta { font-size: 0.82rem; color: var(--text-on-bone-dim); }
.sec-70-ws-review__stars { margin-top: 0.9rem; color: var(--ember); letter-spacing: 0.12em; font-size: 1.05rem; }
.sec-70-ws-review__text { margin-top: 0.6rem; font-size: 0.97rem; line-height: 1.65; color: var(--text-on-bone); }
.sec-70-ws-review mark { background: hsl(48 100% 80%); color: inherit; padding: 0 0.1em; }

/* --- Host --- */
.sec-70-ws-host { background: var(--accent-strong); color: var(--white); }
.sec-70-ws-host h2, .sec-70-ws-host .eyebrow { color: var(--white); }
.sec-70-ws-host .eyebrow::before { background: var(--white); }
.sec-70-ws-host__role { font-family: var(--font-display); font-weight: 600; }
.sec-70-ws-host .btn--solid { background: var(--white); color: var(--accent-strong); box-shadow: none; }
.sec-70-ws-host .btn--solid:hover { background: var(--bone); }
.sec-70-ws-host__media img { aspect-ratio: 1; }

/* --- Deposit explainer + payment card --- */
.sec-70-ws-deposit { background: var(--bone); }
.sec-70-ws-deposit__list { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 1rem; max-width: 56ch; }
.sec-70-ws-deposit__list strong { color: var(--text-on-bone); }
.sec-70-ws-pay {
  max-width: 460px;
  margin: clamp(3rem, 6vw, 4.5rem) auto 0;
  padding: clamp(1.75rem, 4vw, 2.5rem);
  text-align: center;
  background: var(--white);
  border: 2px solid var(--accent);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
}
.sec-70-ws-pay__logo { display: block; width: 200px; height: auto; margin-inline: auto; }
.sec-70-ws-pay__label { margin-top: 1rem; color: var(--text-on-bone-dim); }
.sec-70-ws-pay__price {
  margin-top: 0.25rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(3rem, 2.4rem + 2vw, 4rem);
  line-height: 1.1;
  color: var(--text-on-bone);
}
.sec-70-ws-pay__btn { margin-top: 1.25rem; min-width: 220px; }
.sec-70-ws-pay__trust {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 1.25rem 0 0;
  border-top: 1px solid var(--line-bone);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.1rem;
  font-size: 0.82rem;
  color: var(--text-on-bone-dim);
}
.sec-70-ws-pay__trust li:first-child { flex-basis: 100%; font-weight: 600; color: var(--text-on-bone); }

/* --- Confirmation contact block --- */
.sec-70-ws-contact { margin-top: clamp(2.5rem, 5vw, 3.5rem); text-align: center; display: grid; gap: 0.4rem; justify-items: center; }
.sec-70-ws-contact__share { margin-bottom: 1rem; color: var(--text-on-bone); }
.sec-70-ws-contact a:not(.btn) { color: var(--accent); }

/* --- Responsive --- */
@media (max-width: 900px) {
  .sec-70-ws-split__grid,
  .sec-70-ws-split__grid--flip { grid-template-columns: 1fr; }
  .sec-70-ws-split__media img { max-height: 420px; }
  .sec-70-ws-reviews__grid { grid-template-columns: 1fr; }
  .sec-70-ws-learn__grid { grid-template-columns: 1fr; }
  .sec-70-ws-learn__card,
  .sec-70-ws-learn__grid > .sec-70-ws-learn__card:nth-child(4):nth-last-child(2),
  .sec-70-ws-learn__grid > .sec-70-ws-learn__card:nth-child(5):last-child { grid-column: auto; }
}
@media (max-width: 600px) {
  .sec-70-ws-bar__logo img { height: 48px; }
  .sec-70-ws-details__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
  .sec-70-ws-details__item { padding: 1.1rem 0.75rem; }
  .sec-70-ws-details__item:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .sec-70-ws-video__icon { width: 62px; height: 62px; }
}