/* =========================================================
   ForGrowth Academy — flow-chain.css
   ISOLATED. Scoped to .fg-step*.

   Scroll-stacked step panels: each panel sticks to the top of the viewport
   while the next one scrolls up and covers it. Pure CSS `position: sticky` —
   no scroll listener, no JavaScript driving position, so it stays smooth on
   mobile where scroll-jacking usually falls apart.
   ========================================================= */

.fg-steps {
  position: relative;
  margin-top: clamp(40px, 6vw, 72px);
  /* The section this sits in has its own horizontal padding; the panels are
     full-bleed, so pull them out to the viewport edges. */
  margin-inline: calc(50% - 50vw);
  width: 100vw;
}

.fg-step {
  position: sticky;
  top: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  /* Each panel paints over the one before it as it slides up. */
  box-shadow: 0 -18px 40px -24px rgba(28, 24, 22, 0.45);
}

.fg-step-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  width: 100%;
  padding-block: clamp(56px, 9vh, 110px);
}

/* ---------- themes ---------- */
.fg-step--light  { background: #F8F6F1; color: var(--ink, #1C1C1E); }
.fg-step--cream  { background: #F1EBE0; color: var(--ink, #1C1C1E); }
.fg-step--dark   { background: #1A1A1C; color: #F8F6F1; }
.fg-step--accent { background: var(--accent, #D9400B); color: #fff; }

.fg-step.fg-step--dark .fg-step-tag,
.fg-step.fg-step--accent .fg-step-tag { color: rgba(255, 255, 255, 0.70); }

.fg-step.fg-step--dark h3,
.fg-step.fg-step--accent h3 { color: #FFFFFF; }

.fg-step.fg-step--dark p,
.fg-step.fg-step--accent p { color: rgba(248, 246, 241, 0.78); }

/* Stats sit on the same dark plates and need the same treatment. */
.fg-step.fg-step--dark .fg-step-stats b,
.fg-step.fg-step--accent .fg-step-stats b { color: #FFFFFF; }
.fg-step.fg-step--dark .fg-step-stats span,
.fg-step.fg-step--accent .fg-step-stats span { color: rgba(248, 246, 241, 0.72); opacity: 1; }

.fg-step.fg-step--accent .fg-step-word { color: #1A1A1C; }
.fg-step.fg-step--dark .fg-step-word { color: var(--accent-bright, #F0561F); }
.fg-step--light .fg-step-word,
.fg-step--cream .fg-step-word { color: var(--accent, #D9400B); }

/* ---------- copy ---------- */
.fg-step-tag {
  display: block;
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--grey, #6B6B6E);
  margin-bottom: 18px;
}

.fg-step h3 {
  font-family: var(--font-display, sans-serif);
  font-size: clamp(30px, 5.2vw, 62px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--black, #121214);
  margin: 0 0 18px;
  max-width: 15ch;
}

.fg-step p {
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.65;
  color: var(--grey, #6B6B6E);
  margin: 0;
  max-width: 46ch;
}

.fg-step-stats {
  list-style: none;
  display: flex;
  gap: clamp(26px, 4vw, 52px);
  margin: clamp(24px, 3.4vw, 38px) 0 0;
  padding: 0;
}
.fg-step-stats li { display: flex; flex-direction: column; gap: 4px; }
.fg-step-stats b {
  font-family: var(--font-display, sans-serif);
  font-size: clamp(22px, 2.6vw, 32px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}
.fg-step-stats span {
  font-family: var(--font-mono, monospace);
  font-size: 10.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  opacity: 0.6;
}

/* ---------- visual ---------- */
.fg-step-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}
.fg-step-icon {
  width: clamp(140px, 20vw, 260px);
  aspect-ratio: 1;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(217, 64, 11, 0.09);
  color: var(--accent, #D9400B);
}
.fg-step--dark .fg-step-icon {
  background: rgba(240, 86, 31, 0.14);
  color: var(--accent-bright, #F0561F);
}
.fg-step--accent .fg-step-icon {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}
.fg-step-icon svg { width: 46%; height: 46%; display: block; }

/* ---------- tablet ---------- */
@media (max-width: 900px) {
  .fg-step-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    text-align: left;
  }
  .fg-step-visual { order: -1; justify-content: flex-start; }
  .fg-step-icon { width: clamp(104px, 22vw, 150px); }
}

/* ---------- mobile ----------
   Full-height panels on a phone leave too little room for the copy once the
   browser chrome is accounted for, so the panels size to their content and
   simply stack normally. Sticky still applies, so they still slide over one
   another — just without forcing a full screen each. */
@media (max-width: 620px) {
  .fg-step {
    min-height: 0;
    padding-block: 0;
  }
  .fg-step-inner { padding-block: 52px; gap: 22px; }
  .fg-step h3 { font-size: clamp(27px, 8.4vw, 38px); max-width: none; }
  .fg-step p { font-size: 15px; max-width: none; }
  .fg-step-icon { width: 92px; }
  .fg-step-stats { gap: 26px; margin-top: 22px; }
}

/* ---------- reduced motion ----------
   Sticky is not an animation, but the stacking effect can still be
   disorienting, so panels flow normally instead. */
@media (prefers-reduced-motion: reduce) {
  .fg-step { position: relative; min-height: 0; box-shadow: none; }
  .fg-step-inner { padding-block: 56px; }
}

/* Copy eases in as each panel takes the viewport. Defaults to visible, so a
   panel is never blank if the observer does not fire. */
@media (prefers-reduced-motion: no-preference) {
  .fg-step-copy > *,
  .fg-step-visual {
    opacity: 1;
    transform: none;
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .fg-step:not(.is-current) .fg-step-copy > *,
  .fg-step:not(.is-current) .fg-step-visual {
    opacity: 0.28;
    transform: translateY(14px) scale(0.985);
  }
  .fg-step-copy > *:nth-child(2) { transition-delay: 0.05s; }
  .fg-step-copy > *:nth-child(3) { transition-delay: 0.1s; }
  .fg-step-copy > *:nth-child(4) { transition-delay: 0.15s; }
}