/*
 * be a Hero case study (/work/be-a-hero/).
 * Shared building blocks (facts, eyebrows, stage, reflection, credits,
 * teaser) come from case-base.css; this file holds the page layout and the
 * exhibits. Campaign green is the project accent: hero, the light game
 * chapter and the dark closing chapter. All other values come from
 * tokens.css; fixed values only inside graphics.
 *
 * A calm page (27.10.2026, CASE-STUDY-STANDARD.md 3.5, pattern Moving Types):
 * - No boxes around content: the survey bars, G05, G02, G03 and the game
 *   flow stand on the chapter surface.
 * - No kickers, step labels, "Poster → phone" lines or counters; their
 *   words live in the caption or the sentence. One caption per figure.
 * - The stage tabs, the comparison rows and the old journey scroll are
 *   gone: G05 (stages), G02 (scenarios) and G03 (game loop) run once as
 *   calm sequences with one pause control each (js/be-a-hero-story.js), the
 *   path from game to donor card is the one sticky stage (js/case-stage.js).
 * - The hero characters (A5) can be paused: the script swaps in a still copy.
 * Rules on shared case-base.css classes carry .bh-page, so they win there.
 */

.bh-page {
  --case-accent: #106d5d;
  --case-accent-on-dark: #c8e8dd;
  --case-accent-surface: #f6f7f2;
  --case-accent-dark: #083d37;
  --bh-yellow: #f7d667;
  margin: 0;
  background: var(--color-surface);
  color: var(--color-ink);
  font-family: var(--font-sans);
}

.bh-page *,
.bh-page *::before,
.bh-page *::after {
  box-sizing: border-box;
}

.bh-page img {
  display: block;
  max-width: 100%;
}

.bh-page button {
  font: inherit;
}

.bh-story {
  overflow: clip;
}

.bh-page .bh-wrap {
  width: var(--content-width);
  margin-inline: auto;
}

:where(.bh-page) figure {
  margin: 0;
}

.bh-page h1,
.bh-page h2,
.bh-page h3,
.bh-page p:where(:not(footer p)) {
  margin: 0;
}

.bh-page figcaption {
  margin: 12px 0 0;
  color: var(--color-ink-muted);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  text-align: left;
}

.bh-page a:not(.bh-hero__link) {
  text-underline-offset: 3px;
}

.bh-page figcaption a,
.bh-page .bh-copy a {
  color: var(--color-accent) !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
}

/* Without JavaScript main.js never colours the fixed navigation, and its
   white text would run over the light chapters. */
@media (scripting: none) {
  .bh-page #main-nav {
    background: var(--color-surface-dark);
  }
}

/* ---------- Hero ---------- */

.bh-page .bh-hero {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 94svh;
  overflow: hidden;
  background: var(--case-accent-dark);
  color: var(--color-ink-on-dark);
}

.bh-page .bh-hero__grid {
  display: grid;
  flex: 1;
  grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
  gap: 5vw;
  align-items: center;
  padding-top: 126px;
  padding-bottom: 46px;
}

.bh-page .bh-hero__copy {
  position: relative;
  z-index: 1;
}

.bh-page h1 {
  max-width: 780px;
  margin: 0 0 32px;
  font-size: var(--text-h1);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-h1);
  letter-spacing: var(--tracking-heading);
  text-wrap: balance;
}

.bh-page .bh-lead {
  max-width: 620px;
  margin: 0 0 34px;
  color: var(--color-ink-on-dark-body);
  font-size: var(--text-lead);
  line-height: var(--leading-lead);
}

/* !important: the global link rule in custom.css sets display and colour on
   every link with a much higher specificity. */
.bh-page .bh-hero__link {
  display: inline-flex !important;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 12px 26px;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--case-accent-dark) !important;
  font: 600 16px/1.3 var(--font-sans);
  text-decoration: none !important;
  transition: background-color var(--dur-fast) var(--ease-standard);
}

.bh-page .bh-hero__link:hover {
  background: var(--bh-yellow);
}

.bh-page .bh-hero__art {
  position: relative;
  align-self: center;
  min-width: 0;
}

.bh-page .bh-hero__art::before {
  content: "";
  position: absolute;
  inset: 4% 0 12%;
  border-radius: var(--radius-round);
  background: #2b8f7e;
  filter: blur(65px);
  opacity: 0.5;
}

.bh-page .bh-hero__art img {
  display: block;
  position: relative;
  width: 118%;
  max-width: none;
  height: auto;
  margin-left: -10%;
  filter: drop-shadow(0 28px 25px rgba(0, 0, 0, 0.15));
}

.bh-page .bh-hero__art figcaption {
  position: relative;
  color: var(--color-ink-on-dark-muted);
}

.bh-page .bh-hero .bh-control {
  color: var(--color-ink-on-dark-muted);
}

.bh-page .bh-hero .bh-control:hover {
  color: var(--color-ink-on-dark);
}

.bh-page .bh-hero__facts {
  padding-bottom: 36px;
}

.bh-page .bh-hero__facts .case-facts {
  margin: 0;
  padding-top: 22px;
}

/* ---------- Sections and headings ---------- */

.bh-page .bh-section {
  padding-block: var(--space-section);
}

.bh-section--white {
  background: var(--color-surface);
}

.bh-section--grey {
  background: var(--color-surface-alt);
}

/* Project accent surfaces: the light game chapter and the dark close. */
.bh-section--tint {
  background: var(--case-accent-surface);
}

.bh-section--dark {
  background: var(--case-accent-dark);
  color: var(--color-ink-on-dark);
}

.bh-page .bh-section h2 {
  max-width: 1050px;
  margin: 0 0 var(--space-intro);
  font-size: var(--text-h2);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-h2);
  letter-spacing: var(--tracking-heading);
  text-wrap: balance;
}

.bh-page .bh-section h3 {
  font-size: var(--text-h3);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-h3);
  letter-spacing: var(--tracking-h3);
  text-wrap: balance;
}

.bh-page .bh-heading {
  max-width: 900px;
  margin-bottom: var(--space-block);
}

.bh-page .bh-heading > p:not(.case-eyebrow) {
  max-width: 820px;
  color: var(--color-ink-body);
  font-size: var(--text-lead);
  line-height: var(--leading-lead);
}

.bh-page .bh-heading > p:not(.case-eyebrow) + p {
  margin-top: 20px;
}

.bh-copy,
.bh-copy p {
  max-width: var(--measure-narrow);
  color: var(--color-ink-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

.bh-page .bh-copy h3 + p {
  margin-top: var(--space-6);
}

/* Pictures: one hairline and one radius for all of them. */
.bh-photo img {
  width: 100%;
  height: auto;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
}

/* ---------- 01 Starting point: two bars ---------- */

.bh-gap {
  max-width: 1040px;
}

.bh-gap__row {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: var(--space-10);
  align-items: center;
  margin-bottom: var(--space-6);
}

.bh-gap__row p {
  color: var(--color-ink);
  font-size: var(--text-body);
  line-height: var(--leading-h4);
}

.bh-gap__row p span {
  display: block;
  color: var(--case-accent);
  font-size: var(--text-h4);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-h3);
}

.bh-gap__track {
  height: 22px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: #dce8df;
}

.bh-gap__track i {
  display: block;
  width: var(--amount);
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--case-accent);
}

.bh-gap__row:nth-child(2) .bh-gap__track i {
  background: #d9773f;
}

/* The bars grow once as they come into view (only with JS). */
.bh-motion .bh-gap__track i {
  width: 0;
  transition: width 900ms var(--ease-out) 250ms;
}

.bh-motion .bh-gap.is-visible .bh-gap__track i {
  width: var(--amount);
}

.bh-gap > figcaption {
  max-width: 700px;
  margin-top: var(--space-8);
}

.bh-page .bh-pull {
  max-width: 950px;
  margin-top: clamp(50px, 7vw, 95px);
  font-size: var(--text-quote);
  font-weight: var(--weight-medium);
  line-height: var(--leading-quote);
  letter-spacing: var(--tracking-h3);
}

.bh-page .bh-pull em {
  color: var(--color-ink);
  font-style: normal;
  font-weight: var(--weight-semibold);
}

/* ---------- Steps beside a graphic (G05, G02, G03) ---------- */

/* The same numbered circles as the stage. While a sequence runs, the
   current step is filled and the others are muted; without JavaScript all
   of them read as plain text. */
.bh-steps {
  display: grid;
  gap: var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.bh-steps li {
  display: grid;
  grid-template-columns: var(--space-8) minmax(0, 1fr);
  column-gap: var(--space-4);
  row-gap: var(--space-1);
  align-content: start;
  align-items: start;
}

.bh-steps__num {
  display: inline-flex;
  grid-row: span 2;
  align-items: center;
  justify-content: center;
  width: var(--space-8);
  height: var(--space-8);
  border: 1.5px solid var(--color-accent);
  border-radius: var(--radius-round);
  color: var(--color-accent);
  font: var(--weight-semibold) var(--text-caption)/1 var(--font-sans);
  font-variant-numeric: tabular-nums;
  transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}

.bh-steps strong {
  padding-top: var(--space-1);
  color: var(--color-ink);
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-h4);
  transition: color var(--dur-base) var(--ease-out);
}

.bh-steps p {
  grid-column: 2;
  color: var(--color-ink-body);
  font-size: var(--text-small);
  line-height: var(--leading-small);
  transition: color var(--dur-base) var(--ease-out);
}

.bh-steps.is-live li:not(.is-current) strong,
.bh-steps.is-live li:not(.is-current) p {
  color: var(--color-ink-muted);
}

.bh-steps li.is-current .bh-steps__num {
  background: var(--color-accent);
  color: var(--color-ink-on-dark);
}

/* ---------- Caption with the pause control at its end ---------- */

.bh-caption-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  column-gap: var(--space-4);
}

.bh-caption-row > span {
  max-width: var(--measure);
}

.bh-control {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  /* The same width for "Pause" and "Play", so the caption never reflows. */
  min-width: 76px;
  min-height: var(--tap-min);
  /* Centre the 44 px target on the first caption line. */
  margin: -12px calc(-1 * var(--space-2)) -12px 0;
  padding: 0 var(--space-2);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-ink-muted);
  font: var(--weight-semibold) var(--text-caption)/var(--leading-caption) var(--font-sans);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-standard);
}

.bh-control[hidden] {
  display: none;
}

.bh-control:hover {
  color: var(--color-accent);
}

/* Two bars for "Pause", a triangle for "Play". */
.bh-control__icon {
  flex: none;
  width: 10px;
  height: 10px;
  border-right: 3px solid currentColor;
  border-left: 3px solid currentColor;
}

.bh-control[data-action="play"] .bh-control__icon {
  border: 0;
  background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.bh-page .is-paused,
.bh-page .is-paused * {
  animation-play-state: paused !important;
}

.bh-symbols {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Parts of a graphic during a run: the ones still to come are faint
   (js/be-a-hero-story.js sets the classes). */
.bh-page [data-part] {
  transition: opacity var(--dur-slow) var(--ease-out);
}

.bh-page [data-part].is-future {
  opacity: 0.22;
}

/* ---------- 02 G05: four stages towards a decision ---------- */

.bh-g05 {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: var(--space-6) var(--space-12);
  align-items: center;
}

.bh-g05 > .bh-steps {
  grid-column: 2;
  grid-row: 1;
}

.bh-g05 > figcaption {
  grid-column: 1 / -1;
}

.bh-g05__svg {
  display: block;
  width: 100%;
  max-width: 620px;
  height: auto;
}

.bh-g05__ground {
  stroke: var(--color-line-strong);
  stroke-width: 2;
}

.bh-g05__step rect {
  fill: #d6e7e0;
  transition: fill var(--dur-slow) var(--ease-out);
}

.bh-g05__step text {
  fill: var(--case-accent-dark);
  font: var(--weight-semibold) 18px var(--font-sans);
}

.bh-g05__step use {
  fill: var(--case-accent);
  transition: fill var(--dur-slow) var(--ease-out);
}

.bh-g05__step.is-current rect {
  fill: var(--case-accent);
}

.bh-g05__step.is-current text {
  fill: var(--color-ink-on-dark);
}

.bh-g05__step.is-current use {
  fill: var(--case-accent-dark);
}

/* ---------- 03 G02: four scenarios ---------- */

.bh-g02__steps li > .bh-g02__icon {
  grid-column: 1 / -1;
  display: block;
  width: 132px;
  height: 88px;
  margin: 0 0 var(--space-4) -8px;
  fill: none;
  stroke: var(--color-ink);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: opacity var(--dur-slow) var(--ease-out);
}

/* The chosen scenario keeps the accent. */
.bh-g02__steps li.is-chosen > .bh-g02__icon {
  stroke: var(--color-accent);
}

.bh-g02 .bh-steps.is-live li:not(.is-current) > .bh-g02__icon {
  opacity: 0.25;
}

.bh-g02 > figcaption {
  margin-top: var(--space-8);
}

.bh-page .bh-direction-note {
  max-width: 840px;
  margin-top: var(--space-block);
  color: var(--color-ink-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

@media (min-width: 768px) {
  .bh-g02__steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ---------- 04 Game: the stage ---------- */

/* The game screens are about 2 : 1, so the frame takes that shape; it takes
   two thirds of the width from 1024 px and sticks in the middle of the
   window below navigation and chapter bar (pattern Moving Types). */
.bh-page .bh-stage.is-staged {
  --bh-gap: var(--space-8);
  container-type: inline-size;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  column-gap: var(--bh-gap);
}

.bh-page .bh-stage.is-staged > .case-stage__frame {
  --bh-frame-w: min((100cqi - var(--bh-gap)) * 2 / 3, (100vh - var(--scroll-offset) - var(--space-24)) * 2);
  width: var(--bh-frame-w);
  top: calc(var(--scroll-offset) + max(var(--space-6), (100vh - var(--scroll-offset) - var(--bh-frame-w) / 2 - var(--space-12)) / 2));
}

@media (min-width: 1280px) {
  .bh-page .bh-stage.is-staged {
    --bh-gap: var(--space-12);
  }
}

.bh-page .bh-stage .case-stage__screen {
  aspect-ratio: 2 / 1;
  border: 0;
  background: #0c2e28;
}

.bh-page .bh-stage .case-stage__screen .case-stage__media img {
  padding: 4%;
  background: none;
}

/* The circles beside the steps and the bars under the frame show the
   position; the "02 / 05" counter is left out. */
.bh-page .case-stage__count {
  display: none;
}

/* On the light green chapter 0.86 keeps dimmed text above 4.5 : 1. */
.bh-page .case-stage.is-staged .case-stage__step:not(.is-active) .case-stage__text {
  opacity: 0.86;
}

/* As a list the screens sit on the dark game ground as well. */
.bh-page .bh-stage:not(.is-staged) .case-stage__media img {
  padding: 3%;
  border: 0;
  background: #0c2e28;
}

/* ---------- 04 G03: the game loop ---------- */

.bh-g03 {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: var(--space-6) var(--space-12);
  align-items: center;
  margin-top: var(--space-section);
}

.bh-g03__stage {
  grid-column: 2;
  grid-row: 1;
}

.bh-g03 > .bh-steps {
  grid-column: 1;
  grid-row: 1;
  gap: var(--space-4);
}

.bh-g03 > figcaption {
  grid-column: 1 / -1;
}

.bh-g03__svg {
  display: block;
  width: 100%;
  max-width: 520px;
  height: auto;
  margin-left: auto;
}

.bh-g03__ring {
  fill: none;
  stroke: var(--color-line-strong);
  stroke-width: 2;
}

/* The full ring at rest; during a run it grows to the current station. */
.bh-g03__progress {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 3;
  stroke-dasharray: 1068.1;
  stroke-dashoffset: calc(1068.1px * (1 - var(--bh-progress, 1)));
  transition: stroke-dashoffset var(--dur-slow) var(--ease-out);
}

.bh-g03__chevron {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bh-g03__restart {
  fill: none;
  stroke: var(--color-ink-muted);
  stroke-width: 2;
  stroke-dasharray: 6 6;
}

#bh-arrow path {
  fill: var(--color-ink-muted);
}

.bh-g03__node circle {
  fill: var(--case-accent-surface);
  stroke: var(--color-accent);
  stroke-width: 2;
  transition: fill var(--dur-base) var(--ease-out);
}

.bh-g03__node text {
  fill: var(--color-accent);
  font: var(--weight-semibold) 17px var(--font-sans);
  text-anchor: middle;
}

.bh-g03__node.is-current circle {
  fill: var(--color-accent);
}

.bh-g03__node.is-current text {
  fill: var(--color-ink-on-dark);
}

.bh-g03__centre {
  fill: var(--case-accent-dark);
  font: var(--weight-semibold) 22px var(--font-sans);
  letter-spacing: -0.02em;
  text-anchor: middle;
}

.bh-g03__steps li {
  row-gap: 0;
}

.bh-beside {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: var(--space-8) var(--space-12);
  align-items: center;
  margin-top: var(--space-block);
}

/* ---------- 05 Campaign ---------- */

.bh-touchpoint {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: var(--space-8) clamp(28px, 7vw, 115px);
  align-items: center;
}

.bh-touchpoint + .bh-touchpoint {
  margin-top: var(--space-section);
}

.bh-touchpoint--reverse {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
}

.bh-touchpoint--reverse figure {
  order: -1;
}

/* Portrait pictures keep their shape: no grey bars beside them. */
.bh-touchpoint .bh-photo img {
  width: auto;
  max-height: 720px;
}

.bh-page .bh-microsite img {
  width: 100%;
  height: 650px;
  max-height: none;
  object-fit: cover;
  object-position: top;
}

.bh-page .bh-cards img {
  width: 100%;
  border: 0;
}

.bh-more {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: var(--space-6) clamp(24px, 4vw, 64px);
  align-items: start;
  margin-top: var(--space-section);
}

/* ---------- 06 What remains ---------- */

.bh-page .bh-reflection__status {
  max-width: var(--measure);
  margin-top: var(--space-intro);
  color: var(--color-ink-on-dark-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

.bh-page .bh-section--dark .case-credits {
  border-color: var(--color-line-on-dark);
}

.bh-page .bh-section--dark .case-credits dd,
.bh-page .bh-section--dark .case-credits a {
  color: var(--color-ink-on-dark);
}

.bh-page .bh-section--dark a {
  text-decoration: underline !important;
}

/* ---------- Reveal on scroll (only with JS and without reduced motion) ---------- */

.bh-motion .bh-reveal {
  opacity: 0;
  transform: translateY(var(--reveal-distance));
  transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out);
}

.bh-motion .bh-reveal.is-visible {
  opacity: 1;
  transform: none;
}

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

@media (max-width: 1023.98px) {
  .bh-page .bh-hero__grid {
    grid-template-columns: 1fr;
    gap: 22px;
    padding-top: 145px;
  }

  .bh-page .bh-hero__art {
    width: 100%;
    max-width: 900px;
    margin: auto;
  }

  .bh-page .bh-hero__art img {
    width: 100%;
    margin: 0;
  }

  .bh-g05,
  .bh-g03,
  .bh-beside {
    grid-template-columns: minmax(0, 1fr);
  }

  /* One column: graphic, caption with its pause control, then the steps. */
  .bh-g05 > .bh-steps,
  .bh-g03 > .bh-steps {
    grid-column: auto;
    grid-row: 3;
  }

  .bh-g05 > figcaption,
  .bh-g03 > figcaption {
    grid-row: 2;
  }

  .bh-g03__stage {
    grid-column: auto;
  }

  .bh-g05__svg,
  .bh-g03__svg {
    max-width: 480px;
    margin-inline: auto;
  }

  .bh-touchpoint,
  .bh-touchpoint--reverse {
    grid-template-columns: 1fr;
  }

  .bh-touchpoint--reverse figure {
    order: 0;
  }

  .bh-touchpoint .bh-photo {
    max-width: 640px;
  }

  .bh-page .bh-microsite img {
    height: 580px;
  }
}

@media (max-width: 767.98px) {
  .bh-steps {
    gap: var(--space-5);
  }

  .bh-g02__steps li > .bh-g02__icon {
    width: 108px;
    height: 72px;
  }

  .bh-gap__row {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .bh-page .case-stage__steps {
    gap: var(--space-12);
  }
}

@media (max-width: 639.98px) {
  .bh-page .bh-hero {
    min-height: 0;
  }

  .bh-page .bh-hero__grid {
    padding-top: 130px;
    padding-bottom: 28px;
  }

  .bh-page h1 {
    margin-bottom: 22px;
  }

  .bh-page .bh-lead {
    margin-bottom: 24px;
  }

  .bh-page .bh-hero__facts {
    padding-bottom: 28px;
  }

  .bh-page .bh-hero__facts .case-facts {
    gap: 20px;
  }

  .bh-page .bh-heading {
    margin-bottom: 40px;
  }

  .bh-page .bh-microsite img {
    height: 460px;
  }

  .bh-more {
    grid-template-columns: 1fr;
  }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .bh-page *,
  .bh-page *::before,
  .bh-page *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .bh-reveal {
    opacity: 1 !important;
    transform: none !important;
  }

  .bh-motion .bh-gap__track i {
    width: var(--amount);
  }
}