/* journey.css — the Journey page (owner: the stem builder).
   The hero's count, the rail that runs down the record, the next chapter and the closing line.
   The pieces themselves (stem, event entries, cards) are in css/stem.css. */

/* ───────────────────────────────────────────────────────── hero ── */
.journey-count {
  display: grid;
  gap: 1rem;
  justify-items: start;
  inline-size: 100%;
}
.journey-count > * { margin-block-start: 0; }
.journey-count .numbers, .journey-count .numbers__list { display: block; margin: 0; padding: 0; }
.journey-count .numbers__item { --num-ink: var(--forest); padding: 0; background: none; }
.journey-count .numbers__item::before { content: none; }
.journey-count .stat__num { font-size: clamp(5.5rem, 3.6rem + 8vw, 9.5rem); line-height: .86; }
.journey-count .stat__label { max-inline-size: 14em; font-size: var(--fs-lead); }
.journey-count__icon { --size: 3.5rem; }
.journey-count__span {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .65rem;
  align-items: start;
  inline-size: 100%;
  color: var(--heading);
  font-size: var(--fs-small);   /* the two dates stay on one line where the language lets them (the card is wide enough for English, German, French) */
  font-weight: var(--fw-strong);
  line-height: var(--lh-sub);
}
.journey-count__span > .petal { --size: 1.15rem; margin-block-start: calc((1lh - 1.15rem) / 2); vertical-align: 0; }
.journey-count__span > span:last-child { text-wrap: balance; }
/* nine buds on one line: the stem in small */
.journey-count__buds {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: .25rem;
  padding-block-end: .5rem;
  padding-inline: .6rem;
  inline-size: 100%;
  max-inline-size: 22rem;
}
.journey-count__buds::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: .1875rem;
  border-radius: var(--r-full);
  background: var(--forest);
}
.journey-count__buds > .petal { --size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem); transform-origin: 50% 100%; vertical-align: 0; }
.journey-count__buds > .petal:nth-child(even) { --size: clamp(1.2rem, 1rem + .7vw, 1.6rem); }
@media (min-width: 56rem) {
  .journey-hero .page-hero__art { max-inline-size: 26.5rem; }
}
@media (max-width: 55.99rem) {
  .journey-count { grid-template-columns: auto minmax(0, 1fr); column-gap: 1.25rem; align-items: center; }
  .journey-count > :is(.journey-count__span, .journey-count__buds) { grid-column: 1 / -1; }
  .journey-count .stat { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 1rem; }
  .journey-count__icon { display: none; }
  .journey-count > .numbers { grid-column: 1 / -1; }
}

/* ───────────────────────────────────────────────────── the stem ── */
.journey-stem { padding-block: clamp(.5rem, 2vw, 2rem) clamp(2rem, 1rem + 4vw, 4.5rem); }

/* ─────────────────────────────────────────────────── the record ──
   One rail down the start side: the line, a bud at every entry, and an unopened bud where the next
   chapter will go. journey.js draws the line as the page is read. */
.journey-record {
  --entry-rail: clamp(1.5rem, .4rem + 4.6vw, 4.5rem);
  --entry-bud-y: clamp(3.25rem, 2.41rem + 3.43vw, 5.5rem);
  --record-gap: clamp(2rem, 1.2rem + 3.4vw, 4.5rem);
  position: relative;
  display: grid;
  gap: var(--record-gap);
  isolation: isolate;
}
.journey-record__entries { position: relative; display: grid; gap: var(--record-gap); }
/* From the first bud to the unopened one: the next chapter follows the entries after one more gap. */
.journey-record__line {
  position: absolute;
  z-index: -1;
  inset-block: var(--entry-bud-y) calc(-1 * (var(--record-gap) + var(--entry-bud-y)));
  inset-inline-start: calc(var(--entry-rail) * .3 - .09375rem);
  inline-size: .1875rem;
  border-radius: var(--r-full);
  background: var(--line);
  pointer-events: none;
}
.journey-record__fill { display: block; block-size: 100%; border-radius: inherit; background: var(--forest); transform-origin: 50% 0%; }

.journey-next {
  position: relative;
  display: grid;
  grid-template-columns: var(--entry-rail) minmax(0, 1fr);
  scroll-margin-block-start: .5rem;   /* html's scroll-padding already clears the header */
}
.journey-next:focus-visible { outline: none; }
.journey-next:focus-visible > .journey-next__panel { outline: 3px solid var(--focus); outline-offset: 3px; }
.journey-next__bud {
  grid-column: 1;
  align-self: start;
  inline-size: calc(var(--entry-rail) * .6);
  max-inline-size: 2rem;
  margin-block-start: calc(var(--entry-bud-y) - .25rem);
  translate: calc(var(--dir) * -50%) 0;
  margin-inline-start: calc(var(--entry-rail) * .3);
  color: var(--sage-deep);
  pointer-events: none;
}
.journey-next__bud > svg { display: block; inline-size: 100%; block-size: auto; overflow: visible; rotate: 180deg; transform-origin: 50% 50%; }
.journey-next__bud path { fill: var(--bone); stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 5 5; vector-effect: non-scaling-stroke; }
.journey-next__panel { grid-column: 2; display: grid; gap: 1rem; justify-items: start; overflow: clip; }
.journey-next__panel > * { margin-block-start: 0; }
/* the same unopened bud, large, at the far side of the panel: an outline waiting for its colour */
.journey-next__art {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: clamp(1.5rem, 8%, 7rem);
  inline-size: clamp(4.5rem, 3rem + 6vw, 8rem);
  translate: 0 -50%;
  color: var(--sage);
  pointer-events: none;
}
.journey-next__art > span { display: block; }
.journey-next__art svg { display: block; inline-size: 100%; block-size: auto; overflow: visible; rotate: calc(var(--dir) * 18deg); }
.journey-next__art path { fill: var(--white); stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 9 9; vector-effect: non-scaling-stroke; }
.journey-next__panel > :not(.journey-next__art) { position: relative; }
@media (min-width: 56rem) {
  .journey-next__panel { padding-inline-end: clamp(10rem, 24%, 20rem); }
}
@media (max-width: 55.99rem) {
  .journey-next__art { display: none; }   /* the bud on the rail says it; a phone has no room for two */
}
.journey-next__title { font-size: var(--fs-section); }
.journey-next__rule {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: .9rem;
  margin-block-start: .5rem;
  padding: .7rem 1.25rem .7rem .7rem;
  padding-inline: .7rem 1.25rem;
  border-radius: var(--r-row);
  background: var(--white);
  color: var(--heading);
  font-weight: var(--fw-strong);
}
.journey-next__rule > .medallion { --size: 2.75rem; background: var(--sage-mist); }

@media (prefers-reduced-motion: no-preference) {
  /* Armed by journey.js: a bud waits until the line reaches it (.is-on). */
  html.js:not(.dt-failsafe) .journey-record.is-armed .event-entry:not(.is-on) .event-entry__bud::before { scale: .2 .5; opacity: 0; }
  html.js:not(.dt-failsafe) .journey-record.is-armed .event-entry:not(.is-on) .event-entry__bud::after { scale: .3; }
  html.js:not(.dt-failsafe) .journey-record.is-armed .journey-next:not(.is-on) .journey-next__bud > svg { scale: .4; opacity: 0; }
  .journey-next__bud > svg { transition: scale var(--dur-5) var(--ease-pop), opacity var(--dur-3) ease; }
}

/* ────────────────────────────────────────────────────── closing ── */
.journey-closing > .container { display: grid; gap: clamp(2.5rem, 1.5rem + 4vw, 5rem); }
.journey-tagline {
  justify-self: center;
  max-inline-size: 18em;
  color: var(--forest);
  font-family: var(--font-display);
  font-size: var(--fs-section);
  font-weight: var(--fw-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  text-align: center;
  text-wrap: balance;
}