/* ============================================================
   Academy — page CSS
   Scope: .hcg-acad (page-academy.php). Conditionally enqueued in
   hcg_assets() — loaded only on this page.

   Token-based only — no hardcoded surface/text colours. Every
   surface/text colour comes from the theme tokens (--hcg-bg,
   --hcg-surface, --hcg-text, --hcg-muted, ...) so the page is
   correct in every tone (light / dark / auto). Accent tints use
   color-mix() over the brand tokens — still token-driven.

   Reused from theme.css (NOT redefined here):
   .hcg-btn*, .hcg-grad, .hcg-eyebrow, .hcg-section-title,
   .hcg-section-sub, .hcg-split (+--reverse), .hcg-action-row
   ============================================================ */

/* ---------- Layout primitives ---------- */
.hcg-acad-band { padding: 96px 0; }
.hcg-acad-band--surface { background: var(--hcg-surface); }
/* Wrap tracks the theme container so the page breathes on large
   desktop screens (and follows the Customizer container setting). */
.hcg-acad-wrap { max-width: var(--hcg-container-max, 1440px); margin: 0 auto; padding: 0 28px; }
.hcg-acad .hcg-eyebrow { display: block; margin-bottom: 14px; }

.hcg-acad-head { max-width: 760px; margin: 0 auto 56px; text-align: center; }
.hcg-acad-head .hcg-section-title { font-size: clamp(2rem, 3.4vw, 3rem); }
.hcg-acad-head .hcg-section-sub { margin: 14px auto 0; text-align: center; }

/* Inline section divider with gradient end-rules — used to label
   the sub-blocks inside multi-block sections (e.g. "Inside a real
   lesson", "Diagrams that teach…"). */
.hcg-acad-subhead {
  text-align: center;
  margin: 56px auto 28px;
  max-width: 60ch;
  font-family: var(--hcg-font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--hcg-muted);
}
.hcg-acad-subhead::before,
.hcg-acad-subhead::after {
  content: "";
  display: inline-block;
  width: 32px;
  height: 1px;
  vertical-align: middle;
  background: var(--hcg-border-strong);
  margin: 0 14px;
}

/* ---------- Hero (centred, owner-first) ---------- */
.hcg-acad-hero { padding: 116px 0 96px; text-align: center; }
.hcg-acad-hero__title {
  font-family: var(--hcg-font-heading);
  font-weight: 800;
  font-size: clamp(2.4rem, 4.6vw, 3.9rem);
  line-height: 1.05;
  letter-spacing: -.02em;
  max-width: 22ch;
  margin: 0 auto;
}
.hcg-acad-hero__sub {
  font-family: var(--hcg-font-heading);
  font-weight: 400;
  font-size: clamp(1.25rem, 2.1vw, 1.8rem);
  line-height: 1.22;
  color: var(--hcg-text-2);
  max-width: 42ch;
  margin: 18px auto 0;
}
.hcg-acad-hero__copy { color: var(--hcg-muted); max-width: 54ch; margin: 16px auto 0; }
.hcg-acad-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 32px; }
.hcg-acad-hero__trust { margin-top: 20px; font-size: .85rem; color: var(--hcg-muted); }

/* ---------- Outcomes for the salon (4 owner pillars) ---------- */
.hcg-acad-outcomes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.hcg-acad-outcome { text-align: left; }
.hcg-acad-outcome__icon {
  width: 54px;
  height: 54px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--hcg-bg);
  border: 1px solid var(--hcg-border-strong);
  margin-bottom: 18px;
}
.hcg-acad-band--surface .hcg-acad-outcome__icon { background: var(--hcg-surface-2); }
.hcg-acad-outcome__icon .dashicons {
  font-size: 26px;
  width: 26px;
  height: 26px;
  line-height: 1;
  /* brand gradient clipped to the glyph */
  background: var(--hcg-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.hcg-acad-outcome h3 { font-family: var(--hcg-font-heading); font-size: 1.2rem; margin: 0 0 8px; }
.hcg-acad-outcome p { color: var(--hcg-text-2); font-size: .95rem; line-height: 1.6; margin: 0; }

/* ---------- Ladder (4 levels with gradient spine) ---------- */
.hcg-acad-ladder { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; position: relative; }
/* horizontal gradient spine connecting the four numbered nodes */
.hcg-acad-ladder::before {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  top: 42px;
  height: 2px;
  background: linear-gradient(90deg, var(--hcg-c1), var(--hcg-c2), var(--hcg-c3));
  opacity: .4;
  z-index: 0;
}
.hcg-acad-ladder-step {
  position: relative;
  z-index: 1;
  background: var(--hcg-bg);
  border: 1px solid var(--hcg-border);
  border-radius: var(--hcg-r-xl);
  padding: 22px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hcg-acad-band--surface .hcg-acad-ladder-step { background: var(--hcg-surface-2); }
.hcg-acad-ladder-num {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--hcg-surface);
  border: 1px solid var(--hcg-border-strong);
  margin-bottom: 8px;
  font-family: var(--hcg-font-mono);
  font-weight: 600;
  font-size: 13px;
  color: var(--hcg-text);
  letter-spacing: .04em;
}
.hcg-acad-band--surface .hcg-acad-ladder-num { background: var(--hcg-bg); }
/* a soft brand ring per level, cycling the three brand hues */
.hcg-acad-ladder-step:nth-child(1) .hcg-acad-ladder-num { box-shadow: 0 0 0 4px color-mix(in srgb, var(--hcg-c1) 14%, transparent); }
.hcg-acad-ladder-step:nth-child(2) .hcg-acad-ladder-num { box-shadow: 0 0 0 4px color-mix(in srgb, var(--hcg-c2) 14%, transparent); }
.hcg-acad-ladder-step:nth-child(3) .hcg-acad-ladder-num { box-shadow: 0 0 0 4px color-mix(in srgb, var(--hcg-c3) 14%, transparent); }
.hcg-acad-ladder-step:nth-child(4) .hcg-acad-ladder-num { box-shadow: 0 0 0 4px color-mix(in srgb, var(--hcg-c1) 14%, transparent); }
.hcg-acad-ladder-meta {
  font-family: var(--hcg-font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--hcg-muted);
}
.hcg-acad-ladder-t { font-family: var(--hcg-font-heading); font-size: 1.25rem; margin: 0; }
.hcg-acad-ladder-b { font-size: .92rem; line-height: 1.55; color: var(--hcg-text-2); margin: 0; }
.hcg-acad-ladder-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 6px; }
.hcg-acad-ladder-tags span {
  font-family: var(--hcg-font-mono);
  font-size: 10.5px;
  padding: 3px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--hcg-accent) 14%, transparent);
  color: var(--hcg-text-2);
}

/* ---------- Two onboarding paths ---------- */
.hcg-acad-paths { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 880px; margin: 0 auto; }
.hcg-acad-path {
  position: relative;
  background: var(--hcg-bg);
  border: 1px solid var(--hcg-border);
  border-radius: var(--hcg-r-xl);
  padding: 30px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: center;
  align-items: center;
}
.hcg-acad-band--surface .hcg-acad-path { background: var(--hcg-surface-2); }
.hcg-acad-path--rec {
  background: color-mix(in srgb, var(--hcg-c1) 6%, var(--hcg-bg));
  border-color: color-mix(in srgb, var(--hcg-c1) 35%, var(--hcg-border-strong));
}
.hcg-acad-band--surface .hcg-acad-path--rec {
  background: color-mix(in srgb, var(--hcg-c1) 6%, var(--hcg-surface-2));
}
.hcg-acad-path__badge {
  position: absolute;
  top: 14px;
  right: 14px;
  font-family: var(--hcg-font-mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
  background: var(--hcg-gradient);
  padding: 3px 10px;
  border-radius: 999px;
}
.hcg-acad-path__icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--hcg-surface);
  border: 1px solid var(--hcg-border-strong);
}
.hcg-acad-band--surface .hcg-acad-path__icon { background: var(--hcg-bg); }
.hcg-acad-path__icon .dashicons {
  font-size: 26px;
  width: 26px;
  height: 26px;
  line-height: 1;
  background: var(--hcg-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.hcg-acad-path h3 { font-family: var(--hcg-font-heading); font-size: 1.3rem; margin: 0; }
.hcg-acad-path p { color: var(--hcg-text-2); font-size: .95rem; max-width: 34ch; margin: 0; }

/* ---------- 3-step flow (connected timeline) ---------- */
.hcg-acad-flow { max-width: 620px; margin: 0 auto; }
.hcg-acad-flow-step {
  position: relative;
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 22px;
  padding-bottom: 40px;
}
.hcg-acad-flow-step:last-child { padding-bottom: 0; }
.hcg-acad-flow-step::before {
  content: "";
  position: absolute;
  left: 25px;
  top: 54px;
  bottom: -4px;
  width: 2px;
  background: linear-gradient(180deg, var(--hcg-c1), var(--hcg-c2));
  opacity: .4;
}
.hcg-acad-flow-step:last-child::before { display: none; }
.hcg-acad-flow-node {
  width: 52px;
  height: 52px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--hcg-bg);
  border: 1px solid var(--hcg-border-strong);
  color: var(--hcg-text);
  position: relative;
  z-index: 1;
}
.hcg-acad-band--surface .hcg-acad-flow-node { background: var(--hcg-surface-2); }
.hcg-acad-flow-node .dashicons {
  font-size: 26px;
  width: 26px;
  height: 26px;
  line-height: 1;
}
.hcg-acad-flow-step:nth-child(1) .hcg-acad-flow-node { box-shadow: 0 0 0 4px color-mix(in srgb, var(--hcg-c1) 12%, transparent); }
.hcg-acad-flow-step:nth-child(2) .hcg-acad-flow-node { box-shadow: 0 0 0 4px color-mix(in srgb, var(--hcg-c2) 12%, transparent); }
.hcg-acad-flow-step:nth-child(3) .hcg-acad-flow-node { box-shadow: 0 0 0 4px color-mix(in srgb, var(--hcg-c3) 12%, transparent); }
.hcg-acad-flow-num {
  font-family: var(--hcg-font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--hcg-muted);
  display: block;
  margin-bottom: 5px;
}
.hcg-acad-flow-t { font-family: var(--hcg-font-heading); font-size: 1.3rem; margin: 0 0 8px; }
.hcg-acad-flow-b { font-size: 1rem; line-height: 1.62; color: var(--hcg-text-2); margin: 0; }

/* ---------- 5-section icon strip ---------- */
.hcg-acad-sections5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; max-width: 1080px; margin: 0 auto; }
.hcg-acad-sect {
  text-align: center;
  padding: 22px 16px;
  border: 1px solid var(--hcg-border);
  border-radius: var(--hcg-r-xl);
  background: var(--hcg-bg);
}
.hcg-acad-band--surface .hcg-acad-sect { background: var(--hcg-surface-2); }
.hcg-acad-sect__icon {
  width: 50px;
  height: 50px;
  border-radius: 14px;
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--hcg-surface);
  border: 1px solid var(--hcg-border-strong);
}
.hcg-acad-band--surface .hcg-acad-sect__icon { background: var(--hcg-bg); }
.hcg-acad-sect__icon .dashicons {
  font-size: 24px;
  width: 24px;
  height: 24px;
  line-height: 1;
  background: var(--hcg-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.hcg-acad-sect__num {
  font-family: var(--hcg-font-mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  color: var(--hcg-muted);
  display: block;
  margin-bottom: 4px;
}
.hcg-acad-sect h3 { font-family: var(--hcg-font-heading); font-size: 1.05rem; margin: 0 0 6px; }
.hcg-acad-sect p { font-size: .85rem; color: var(--hcg-text-2); line-height: 1.5; margin: 0; }

/* ---------- Course cards ---------- */
.hcg-acad-courses { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.hcg-acad-course {
  background: var(--hcg-bg);
  border: 1px solid var(--hcg-border);
  border-radius: var(--hcg-r-xl);
  padding: 24px;
  display: flex;
  flex-direction: column;
}
.hcg-acad-band--surface .hcg-acad-course { background: var(--hcg-surface-2); }
.hcg-acad-course__chip {
  display: inline-block;
  font-family: var(--hcg-font-mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
  background: var(--hcg-gradient);
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 14px;
  align-self: flex-start;
}
.hcg-acad-course h3 { font-family: var(--hcg-font-heading); font-size: 1.2rem; margin: 0 0 10px; }
.hcg-acad-course p { color: var(--hcg-text-2); font-size: .95rem; line-height: 1.6; margin: 0 0 18px; }
.hcg-acad-course__meta {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--hcg-border);
  display: flex;
  gap: 18px;
  font-family: var(--hcg-font-mono);
  font-size: 11.5px;
  letter-spacing: .06em;
  color: var(--hcg-muted);
  text-transform: uppercase;
}
.hcg-acad-course__meta span { display: inline-flex; align-items: center; gap: 6px; }
.hcg-acad-course__meta .dashicons {
  font-size: 14px;
  width: 14px;
  height: 14px;
  line-height: 1;
  color: var(--hcg-accent);
}

/* ---------- Stats row (numbers behind the curriculum) ---------- */
.hcg-acad-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 920px; margin: 0 auto; }
.hcg-acad-stat {
  background: var(--hcg-bg);
  border: 1px solid var(--hcg-border);
  border-radius: var(--hcg-r-xl);
  padding: 24px 22px;
  text-align: center;
}
.hcg-acad-band--surface .hcg-acad-stat { background: var(--hcg-surface-2); }
.hcg-acad-stat__num {
  display: block;
  font-family: var(--hcg-font-heading);
  font-weight: 800;
  font-size: clamp(2.2rem, 3.6vw, 3rem);
  line-height: 1;
  margin-bottom: 8px;
  background: var(--hcg-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.hcg-acad-stat__lbl {
  font-family: var(--hcg-font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--hcg-muted);
}

/* ---------- Sample Level Check quiz card (CSS-drawn) ---------- */
.hcg-acad-quiz {
  border: 1px solid var(--hcg-border-strong);
  border-radius: var(--hcg-r-xl);
  background: var(--hcg-surface);
  padding: 26px 28px;
  box-shadow: var(--hcg-shadow-lg, var(--hcg-shadow));
}
.hcg-acad-band--surface .hcg-acad-quiz { background: var(--hcg-bg); }
.hcg-acad-quiz__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  font-family: var(--hcg-font-mono);
  font-size: 11px;
  color: var(--hcg-muted);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.hcg-acad-quiz__q {
  font-family: var(--hcg-font-heading);
  font-weight: 700;
  font-size: 1.15rem;
  margin: 0 0 18px;
  line-height: 1.35;
}
.hcg-acad-quiz__opts { display: flex; flex-direction: column; gap: 8px; }
.hcg-acad-quiz__opt {
  padding: 11px 14px;
  border: 1px solid var(--hcg-border);
  border-radius: var(--hcg-r);
  font-size: .95rem;
  color: var(--hcg-text-2);
}
.hcg-acad-quiz__opt.is-correct {
  border-color: color-mix(in srgb, var(--hcg-c1) 60%, transparent);
  background: color-mix(in srgb, var(--hcg-c1) 8%, transparent);
  color: var(--hcg-text);
  position: relative;
}
.hcg-acad-quiz__opt.is-correct::after {
  content: "✓";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--hcg-font-body);
  font-weight: 700;
  background: var(--hcg-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.hcg-acad-quiz__expl {
  margin-top: 14px;
  padding: 11px 13px;
  border-radius: var(--hcg-r);
  background: color-mix(in srgb, var(--hcg-c1) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--hcg-c1) 22%, transparent);
  font-size: .88rem;
  line-height: 1.55;
  color: var(--hcg-text-2);
}
.hcg-acad-quiz__expl b { color: var(--hcg-text); }

/* ---------- Real product screenshots ---------- */
.hcg-acad-shot {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--hcg-r-xl);
  border: 1px solid var(--hcg-border);
  box-shadow: var(--hcg-shadow);
  background: var(--hcg-surface);
}
.hcg-acad-band--surface .hcg-acad-shot { background: var(--hcg-bg); }
.hcg-acad-shot__cap {
  margin-top: 14px;
  font-size: .82rem;
  color: var(--hcg-muted);
  text-align: center;
}

/* ---------- Final CTA ---------- */
.hcg-acad-final { text-align: center; padding: 110px 0; }
.hcg-acad-final .hcg-section-title { font-size: clamp(2.2rem, 4vw, 3.4rem); max-width: 22ch; margin: 0 auto; }
.hcg-acad-final .hcg-section-sub { margin: 16px auto 0; text-align: center; }
.hcg-acad-final .hcg-action-row { display: flex; justify-content: center; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .hcg-acad-outcomes,
  .hcg-acad-ladder,
  .hcg-acad-sections5,
  .hcg-acad-courses { grid-template-columns: repeat(2, 1fr); }
  .hcg-acad-ladder::before { display: none; }
}
@media (max-width: 880px) {
  .hcg-acad-paths { grid-template-columns: 1fr; }
  .hcg-acad-outcomes,
  .hcg-acad-ladder,
  .hcg-acad-sections5,
  .hcg-acad-courses,
  .hcg-acad-stats { grid-template-columns: 1fr; }
  .hcg-acad-band { padding: 64px 0; }
  .hcg-acad-hero { padding: 84px 0 60px; }
}