/* =============================================================================
   case.css — shared template for the three case-study pages
   (/work/green-solar/, /work/dasalla/, /work/affiliate-business/)

   Loaded only on case pages, after site.css. Reuses shared foundation classes
   wherever possible (.section, .section--alt, .section__head, .eyebrow,
   .display-*, .body-l, .tile, .figure__value/__label/__source/__viz, .viz-bar,
   .viz-waffle, .viz-pipeline, .toolkit-tile__tags/.toolkit-tag, .btn,
   .link-more) and only adds what's genuinely new: the hero layout, the
   case-chapter grid (sticky title + text, Apple product-page style), the
   case figures row, the big process stepper and pipeline visuals, the
   honest-note callout, the pull-quote moment, and the next-case-study
   footer tile.

   Each page sets the story accent once, on <main>:
     style="--accent:var(--acc-solar); --accent-ink:var(--acc-solar-ink)"
   --accent feeds .eyebrow (raw hue, matches the home work-card convention);
   --accent-ink feeds .figure__value and anywhere else text needs the
   darker/lighter safe variant. --accent (the raw hue) is reused directly for
   chart/stepper/pipeline fills.
============================================================================= */

/* Tighten this page's section rhythm vs. the site default (site.css's
   --section-pad is 72-140px); scoped to .case so no other page is affected. */
.case .section {
  padding-top: clamp(64px, 8vw, 120px);
  padding-bottom: clamp(64px, 8vw, 120px);
}

.case-hero {
  position: relative;
  padding-top: clamp(132px, 17vw, 188px);
  padding-bottom: clamp(56px, 7vw, 88px);
  overflow: hidden;
}
.case-hero__inner { position: relative; z-index: 1; }
.case-hero__title { margin-bottom: 18px; max-width: 16ch; }
.case-hero__meta { color: var(--ink-2); margin-bottom: clamp(44px, 6vw, 72px); }

.case-figures {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  margin-bottom: clamp(56px, 8vw, 96px);
}
@media (min-width: 560px) {
  .case-figures { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px); }
  .case-figures .figure:not(:first-child) { border-left: 1px solid var(--line); padding-left: clamp(24px, 3vw, 40px); }
}
.case-figures .figure:not(:first-child) { border-top: 1px solid var(--line); padding-top: 20px; }
@media (min-width: 560px) {
  .case-figures .figure:not(:first-child) { border-top: 0; padding-top: 0; }
}
.case-figures .figure__value { font-size: clamp(34px, 3.6vw, 44px); }

/* ---- result figure paired with a larger waffle (Dasalla's $300K) ---- */
.figure--with-viz { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 28px); flex-wrap: wrap; }
.figure--with-viz .figure__text { min-width: 0; }
.figure--with-viz .figure__viz { margin-top: 0; flex: none; }
.figure--with-viz .viz-waffle { width: clamp(120px, 14vw, 168px); gap: 3px; }

/* ---- signature hero visual: quota band / waffle / pipeline, scaled up to
   read as hero art, not a mini chart ---- */
.case-hero__visual { position: relative; margin-top: 8px; }

.case-hero__visual .viz-bar { height: clamp(120px, 15vw, 160px); }
.case-hero__visual .viz-bar__track { height: 22px; border-radius: 11px; }
.case-hero__visual .viz-bar__fill { background: var(--accent, var(--blue)); height: 22px; border-radius: 11px; }
.case-hero__visual .viz-bar__target { top: auto; height: 64px; bottom: 22px; }
.case-hero__visual .viz-bar__target::after {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink-2);
  top: -30px;
}
.case-hero__visual .viz-bar__end-label {
  position: absolute;
  bottom: 40px;
  transform: translateX(-50%);
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--accent-ink, var(--ink));
  white-space: nowrap;
  font-variant-numeric: tabular-nums lining-nums;
}

.case-hero__visual .viz-waffle {
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: clamp(6px, 1vw, 11px);
  max-width: 640px;
}
.case-hero__visual .viz-waffle span.is-lit { background: var(--accent, var(--acc-dasalla)); }

.case-hero__visual .viz-pipeline { gap: clamp(12px, 1.8vw, 20px); }
.case-hero__visual .viz-pipeline__node {
  padding: clamp(14px, 1.6vw, 20px) clamp(24px, 2.6vw, 34px);
  font-size: clamp(16px, 1.4vw, 19px);
  border-color: var(--line-strong);
}
.case-hero__visual .viz-pipeline__arrow { font-size: 22px; }

/* ---- Apple "chapter" body grid: sticky title (left, 4 cols) + lead text
   (right, 7-8 cols). Aside stretches to the body column's height by default
   grid stretching, so its sticky child sticks for exactly as long as the
   section scrolls, then releases. ---- */
.case-chapter {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(32px, 5vw, 64px);
}
.case-chapter__aside { position: sticky; top: 96px; align-self: start; }
.case-chapter__body { min-width: 0; }
.case-chapter__body .body-l { max-width: 58ch; }

.case-chapter__fact { margin-top: clamp(28px, 4vw, 40px); }
.case-chapter__fact-value {
  font-size: clamp(28px, 2.6vw, 34px);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--accent-ink, var(--ink));
}
.case-chapter__fact-label { margin-top: 6px; font-size: 14px; color: var(--ink-3); max-width: 26ch; }

@media (max-width: 899px) {
  .case-chapter { grid-template-columns: 1fr; gap: 24px; }
  .case-chapter__aside { position: static; align-self: auto; }
}

/* ---- shared case body text ---- */
.case-block__text { margin-top: 4px; }
.case-block__text + .case-block__text { margin-top: 20px; }

/* ---- case-stepper: large horizontal process stepper (green-solar "The
   work"), spans the full content width below the chapter grid. Line and
   nodes are filled by default (fully visible with zero JS); once GSAP is
   ready they reset and case.js scrubs the fill/activation to scroll. ---- */
.case-stepper { position: relative; margin-top: clamp(48px, 6vw, 72px); }
.case-stepper__track {
  position: absolute;
  top: 22px; left: 22px; right: 22px; height: 4px;
  border-radius: 2px;
  background: var(--line-strong);
  overflow: hidden;
}
.case-stepper__fill {
  position: absolute;
  inset: 0;
  background: var(--accent, var(--blue));
  border-radius: 2px;
  transform: scaleX(1);
  transform-origin: left;
}
html.gsap-ready .case-stepper__fill { transform: scaleX(0); }

.case-stepper__nodes { position: relative; display: flex; justify-content: space-between; gap: 8px; }
.case-stepper__step { display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 130px; text-align: center; }
.case-stepper__node {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: var(--accent, var(--blue));
  /* Fixed dark text, not var(--ink): the bright story accents fail 4.5:1
     against white or the dark-mode ink, but pass against dark text in both
     themes since the accent hues themselves don't change with theme. */
  color: #1d1d1f;
  border: 2px solid var(--accent, var(--blue));
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
html.gsap-ready .case-stepper__node {
  background: var(--card);
  border-color: var(--line-strong);
  color: var(--ink-2);
}
.case-stepper__step.is-active .case-stepper__node {
  background: var(--accent, var(--blue));
  border-color: var(--accent, var(--blue));
  color: #1d1d1f;
}
.case-stepper__label { font-size: 15px; font-weight: 600; color: var(--ink-2); }

@media (max-width: 899px) {
  .case-stepper__track { top: 22px; bottom: 22px; left: 22px; right: auto; width: 4px; height: auto; }
  .case-stepper__fill { transform-origin: top; }
  html.gsap-ready .case-stepper__fill { transform: scaleY(0); }
  .case-stepper__nodes { flex-direction: column; align-items: flex-start; gap: 32px; }
  .case-stepper__step { flex-direction: row; max-width: none; text-align: left; gap: 18px; }
}

/* ---- case-pipeline: four larger node tiles with captions (affiliate-
   business "The work"), spans the full content width. Connector lines use
   the generic [data-draw="scalex"] hook from site.js, so no page-specific
   JS is needed to draw them on scroll. ---- */
.case-pipeline { margin-top: clamp(48px, 6vw, 72px); display: flex; align-items: stretch; gap: clamp(8px, 1.6vw, 16px); }
.case-pipeline__node { flex: 1 1 0; min-width: 0; padding: clamp(24px, 2.6vw, 32px); }
.case-pipeline__title { font-size: clamp(19px, 1.8vw, 22px); font-weight: 700; letter-spacing: -0.01em; margin-bottom: 8px; }
.case-pipeline__caption { font-size: 15px; color: var(--ink-2); }
.case-pipeline__connector { display: flex; align-items: center; justify-content: center; gap: 3px; flex: none; width: clamp(32px, 4.5vw, 56px); }
.case-pipeline__line { display: block; flex: 1; min-width: 12px; height: 2px; background: var(--accent, var(--blue)); transform-origin: left center; }
.case-pipeline__chevron { flex: none; font-size: 20px; line-height: 1; color: var(--ink-3); }

@media (max-width: 899px) {
  .case-pipeline { flex-direction: column; align-items: stretch; }
  .case-pipeline__connector { width: 44px; height: 44px; margin: 0 auto; transform: rotate(90deg); }
}

/* ---- result figures (reuse .case-figures grid, no card wrapper) ---- */
.case-result .case-figures { margin-bottom: 0; }

/* ---- honest note (affiliate-business only) ---- */
.honest-note {
  border-left: 3px solid var(--accent, var(--blue));
  padding: clamp(20px, 2.4vw, 28px) clamp(24px, 3vw, 32px);
  border-radius: 0 var(--radius-ui) var(--radius-ui) 0;
  background: var(--card);
}

/* ---- What I learned: pull-quote moment ---- */
.pullquote { text-align: left; }
.pullquote__label { margin-bottom: 20px; }
.pullquote__text {
  font-size: clamp(30px, 4.6vw, 50px);
  line-height: 1.32;
  letter-spacing: -0.02em;
  font-weight: 600;
  max-width: 22ch;
}
.pullquote__word { color: var(--ink); opacity: 1; }
html.gsap-ready .pullquote__word { opacity: 0.2; }

/* ---- tools ---- */
.case-tools .toolkit-tile__tags { margin-top: 4px; }

/* ---- footer nav: next case study + back/contact ---- */
.case-next { background: var(--bg-alt); padding: clamp(64px, 8vw, 120px) 0; }
.case-next__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 4vw, 48px);
}
@media (min-width: 860px) {
  .case-next__inner { grid-template-columns: 1.6fr 1fr; align-items: center; }
}
.case-next__tile {
  display: block;
  padding: clamp(32px, 4vw, 48px);
}
.case-next__title { margin: 10px 0 10px; }
.case-next__desc { color: var(--ink-2); }
.case-next__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

@media (prefers-reduced-motion: reduce) {
  .pullquote__word { opacity: 1 !important; }
  .case-stepper__fill { transform: scaleX(1) !important; }
  .case-stepper__node {
    background: var(--accent, var(--blue)) !important;
    border-color: var(--accent, var(--blue)) !important;
    color: #1d1d1f !important;
  }
}