/*
 * Workshop slice: offer page, checkout, registration confirmation.
 * Prefix zw-. Loaded after site.css via pageOpts.CSS. The offer's editorial
 * sections are fence content and are styled through the section modifier
 * classes (flow, faq, included) that the content sets.
 */

.zw-soft { color: var(--ink-soft); }
.zw-fine { font-size: 12px; line-height: 18px; color: var(--ink-soft); }
.zw-h1 { margin: 0; }

/* ---------- Offer ---------- */

.zw-hero {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: var(--space-8);
  align-items: start;
}

.zw-aside {
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: var(--rule-weight) solid var(--orange);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  display: grid;
  gap: var(--space-4);
}
.zw-aside__date { display: grid; gap: var(--space-1); font-size: 14px; line-height: 22px; }
.zw-numeral { font-family: var(--font-display); font-weight: 300; font-size: 40px; line-height: 44px; color: var(--ink); }
.zw-aside__price { border-top: 1px solid var(--line); padding-top: var(--space-4); display: grid; gap: var(--space-1); font-size: 14px; line-height: 22px; }
.zw-aside__price-row { display: flex; justify-content: space-between; gap: var(--space-3); align-items: baseline; }
.zw-price { font-family: var(--font-display); font-weight: 600; font-size: 24px; line-height: 32px; color: var(--ink); }
.zw-tier { font-size: 12px; line-height: 18px; font-weight: 600; color: var(--orange-ink); text-transform: uppercase; letter-spacing: 0.08em; text-align: right; }
.zw-block-button { justify-content: center; text-align: center; }

.zw-band {
  background: var(--band);
  color: var(--on-band);
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-7);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  align-items: center;
  justify-content: space-between;
}
.zw-band__text { display: grid; gap: var(--space-2); }
.zw-band .z-eyebrow { color: var(--orange-faded); }
.zw-band__title { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 24px; line-height: 32px; }

/* Session flow and FAQ: a narrow heading column beside a wide content column. */
.zs-section--flow > .zs-split,
.zs-section--faq > .zs-split { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }

.zs-section--flow ol { list-style: none; margin: 0; padding: 0; display: grid; counter-reset: flow; }
.zs-section--flow li {
  counter-increment: flow;
  position: relative;
  padding: var(--space-5) 0 var(--space-5) 88px;
  border-top: 1px solid var(--line);
  margin: 0;
  color: var(--ink-soft);
}
.zs-section--flow li::before {
  content: "0" counter(flow);
  position: absolute; left: 0; top: var(--space-5);
  font-family: var(--font-display); font-weight: 300; font-size: 40px; line-height: 44px; color: var(--link);
}
.zs-section--flow li strong {
  display: block; margin-bottom: var(--space-2);
  font-family: var(--font-display); font-weight: 600; font-size: 18px; line-height: 26px; color: var(--ink);
}

.zs-section--faq .zs-details summary { font-family: var(--font-display); font-weight: 600; font-size: 16px; line-height: 24px; }

/* What is included: ticks in the first column, plain bullets in the second. */
.zs-section--included .zs-grid > .zs-stack:first-child ul { list-style: none; padding: 0; display: grid; gap: var(--space-4); }
.zs-section--included .zs-grid > .zs-stack:first-child li { position: relative; padding-left: 32px; margin: 0; }
.zs-section--included .zs-grid > .zs-stack:first-child li::before {
  content: "\2713"; position: absolute; left: 0; color: var(--green-ink); font-weight: 600;
}
.zs-section--included .z-eyebrow { margin: 0; }
.zs-section--included .zs-grid > .zs-stack:last-child p:last-child { font-size: 14px; line-height: 22px; color: var(--ink-soft); }

/* ---------- Checkout ---------- */

.zw-checkout {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--space-7);
  align-items: start;
  padding-top: var(--space-7);
  padding-bottom: var(--space-9);
}
.zw-checkout__main { display: grid; gap: var(--space-7); min-width: 0; }

.zw-fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: var(--space-4); min-width: 0; }
.zw-legend { padding: 0; margin-bottom: var(--space-5); }
/* Two columns at most, so the details read in rows of two (name and email,
   country and phone, business and tax ID), and one column once two would be
   narrower than 220px each. */
.zw-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, max(220px, calc((100% - var(--space-5)) / 2))), 1fr)); gap: var(--space-5); }
.zw-fields .z-field { max-width: none; }

.zw-methods { display: grid; gap: var(--space-4); }
.zw-method {
  display: grid; grid-template-columns: 20px 1fr auto; gap: var(--space-4); align-items: center;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5); cursor: pointer; transition: border-color var(--transition-colour);
}
.zw-method:has(input:checked) { background: var(--surface-blue); border-color: var(--link); }
.zw-method:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.zw-method input { width: 18px; height: 18px; margin: 0; accent-color: var(--action); }
.zw-method__text { display: grid; gap: 2px; font-size: 14px; line-height: 22px; }
.zw-method__label { font-size: 16px; line-height: 24px; font-weight: 600; }
.zw-method__via { font-size: 12px; line-height: 18px; color: var(--ink-soft); white-space: nowrap; }

/* The provider name follows the chosen method without JavaScript. The server
   marks the selected provider; :has() keeps it in step with later changes. */
.zw-provider { display: none; }
.zw-provider.is-selected { display: inline; }
.zw-checkout:has(input[name="method"]:checked) .zw-provider { display: none; }

/* The GST line follows the country select as the buyer changes it; the
   server renders it hidden for any country but Australia, which is what a
   browser without :has() shows until the form is next submitted. */
.zw-checkout:has(#country option[value="AU"]:checked) .zw-gst { display: block; }
.zw-checkout:has(#country option:not([value="AU"]):checked) .zw-gst { display: none; }
.zw-checkout:has(input[name="method"][value="stripe"]:checked) .zw-provider[data-provider="stripe"],
.zw-checkout:has(input[name="method"][value="paypal"]:checked) .zw-provider[data-provider="paypal"] { display: inline; }

.zw-submit { display: grid; gap: var(--space-4); }
.zw-check { display: grid; gap: var(--space-2); }
.zw-submit__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); font-size: 14px; line-height: 20px; }
.zw-submit .z-button[disabled] { cursor: not-allowed; }

.zw-summary { display: grid; gap: var(--space-4); min-width: 0; }
.zw-summary__card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: var(--space-6); display: grid; gap: var(--space-5);
}
.zw-summary__item { display: grid; gap: var(--space-1); font-size: 14px; line-height: 22px; }
.zw-summary__title { font-family: var(--font-display); font-weight: 600; font-size: 18px; line-height: 26px; }
.zw-summary__lines { display: grid; gap: var(--space-2); font-size: 14px; line-height: 22px; border-top: 1px solid var(--line); padding-top: var(--space-4); }
.zw-line { display: flex; justify-content: space-between; gap: var(--space-3); }
.zw-line--discount { color: var(--green-ink); }
.zw-total { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); border-top: 1px solid var(--line); padding-top: var(--space-4); }
.zw-total__label { font-weight: 600; }
.zw-total__amount { font-family: var(--font-display); font-weight: 600; font-size: 24px; line-height: 32px; }
.zw-total__currency { font-family: var(--font-text); font-size: 14px; font-weight: 400; color: var(--ink-soft); }
.zw-promo { display: grid; gap: var(--space-2); }
.zw-promo__label { font-size: 14px; line-height: 20px; font-weight: 600; }
.zw-promo__row { display: flex; gap: var(--space-2); }
.zw-promo__input { flex: 1; min-width: 0; text-transform: uppercase; }
.zw-promo__row .z-button { flex: none; }
.zw-guarantee {
  background: var(--surface-sunken); border-radius: var(--radius-lg); padding: var(--space-5);
  font-size: 14px; line-height: 22px; display: grid; gap: var(--space-2);
}

/* ---------- Confirmation ---------- */

.zw-done {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: var(--space-8);
  align-items: start;
  padding-top: var(--space-9);
  padding-bottom: var(--space-9);
}
.zw-pending {
  font-size: 14px; line-height: 22px; font-weight: 600; color: var(--ink-soft);
  background: var(--surface-sunken); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4);
}
.zw-order {
  display: grid; gap: var(--space-2); font-size: 14px; line-height: 22px; color: var(--ink-soft);
  border-top: 1px solid var(--line); padding-top: var(--space-4);
}
.zw-next { list-style: none; margin: 0; padding: 0; display: grid; }
.zw-next li {
  display: grid; grid-template-columns: 48px 1fr; gap: var(--space-4);
  padding: var(--space-5) 0; border-top: 1px solid var(--line); margin: 0;
}
.zw-next__n { font-family: var(--font-display); font-weight: 300; font-size: 32px; line-height: 36px; color: var(--link); }
.zw-next__text { display: grid; gap: var(--space-2); align-content: start; }

/* ---------- Responsive ---------- */

@media (min-width: 961px) {
  .zw-summary { position: sticky; top: var(--space-5); }
}

@media (max-width: 960px) {
  .zw-checkout { grid-template-columns: minmax(0, 1fr); gap: var(--space-7); }
}

@media (max-width: 720px) {
  .zw-hero, .zw-done { grid-template-columns: minmax(0, 1fr); gap: var(--space-7); }
  .zw-done { padding-top: var(--space-7); padding-bottom: var(--space-7); }
  .zw-aside, .zw-summary__card { padding: var(--space-5); }
  .zw-band { padding: var(--space-7) var(--space-5); }
  .zw-band__title { font-size: 20px; line-height: 28px; }
  .zw-method { grid-template-columns: 20px 1fr; }
  .zw-method__via { grid-column: 2; }
  .zs-section--flow > .zs-split, .zs-section--faq > .zs-split { grid-template-columns: minmax(0, 1fr); }
  .zs-section--flow li { padding-left: 64px; }
  .zs-section--flow li::before { font-size: 32px; line-height: 36px; }
  .zw-promo__row { flex-wrap: wrap; }
}