/* ==========================================================================
   The Adventure Path, drawn as a path.

   Amy, relaying Randy: "he wants this more infographic-y."

   He was right. The block was rendering through the generic .pillar card —
   four identical white boxes, each with a number in a pale grey square and a
   title, and an EMPTY paragraph underneath because content/pages/gymnastics.json
   never gave these four items a body. Four half-filled boxes in a row reads as
   a list of unrelated things. The Adventure Path is the opposite of that: it
   is one route with four stages, in order.

   So this draws a route. Four stops, each a coloured disc carrying an icon,
   joined by a dashed trail — and the colours run in the Jump! sequence (teal,
   orange, lime, pink) rather than four of the same navy, so the eye reads
   left-to-right progression instead of a grid.

   The trail is built per-stop rather than as one long line behind the row,
   because a single line has to be told where to stop and a per-stop segment
   does not: the last one just turns itself off. That is also what makes the
   phone layout a one-line change — the same segment rotates to vertical and
   the row becomes a timeline.

   September 23, 2026 — Amy, on the numbered badges: "remove the #s from here
   and make this about 30% larger without being too large for mobile."

   Both done, and the second one is why --node is a clamp rather than a fixed
   size. Every measurement in this block is expressed against --node, so the
   discs, the trail height and the gap all move together: the only number that
   changed is the clamp, from 64-92px to 84-120px. The FLOOR is what protects
   the phone — below 760px the row becomes a single column and the disc holds
   at 84px, which is a comfortable tap-sized target rather than a
   viewport-width monster.

   The numbers are gone from the drawing, not from the document. This is still
   an <ol>, so the order is still carried in the markup where a screen reader
   and a search engine can read it.

   Loaded by templates/page.mjs and templates/prose.mjs alongside pages.css, so
   it reaches Gymnastics, the Adventure Path, and any other page whose JSON
   defines a path block.
   ========================================================================== */

.pathway__track{
  --node:clamp(84px,9.1vw,120px);
  --trail:var(--lime);

  list-style:none;
  margin:clamp(2.5rem,5vw,3.5rem) 0 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(var(--stops,4),1fr);
  gap:clamp(.75rem,2vw,1.75rem);
}

.pathway__stop{
  position:relative;
  text-align:center;
  padding-inline:.25rem;
}

/* The trail. Anchored to the middle of the disc so it meets the next one at
   the same height whatever the headings below do. */
.pathway__stop::after{
  content:"";
  position:absolute;
  top:calc(var(--node) / 2 - 2px);
  left:calc(50% + var(--node) / 2 + .6rem);
  right:calc(-50% + var(--node) / 2 + .6rem);
  border-top:5px dashed var(--trail);
  opacity:.6;
}
.pathway__stop:last-child::after{content:none}

.pathway__node{
  position:relative;
  width:var(--node);
  height:var(--node);
  margin:0 auto 1.25rem;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--c,var(--sky));
  color:#fff;
  box-shadow:0 14px 30px -12px rgba(18,0,82,.55);
}

.pathway__node svg{
  width:48%;
  height:48%;
  display:block;
}

.pathway__stop h3{
  font-size:var(--step-1);
  margin:0 0 .5rem;
  text-wrap:balance;
}

.pathway__stop p{
  margin:0;
  font-size:var(--step-0);
  color:var(--text-soft);
  text-wrap:pretty;
}

/* ---- the path standing on a coloured band -------------------------------
   On the Adventure Path the track sits inside a .section--band, where a grey
   body colour and a lime dashed trail both disappear. Both are restated here
   rather than in waves.css, because they are properties of the path, and
   because .pathway__stop p (0,1,1) and .section--lime p (0,1,1) tie on
   specificity — path.css loads last, so without this rule the path wins the
   tie and keeps the grey. --black rather than --ink: --ink measures 3.3:1 on
   orange and fails; see the contrast note in waves.css.
   ------------------------------------------------------------------------- */
.section--band .pathway__track{--trail:#fff}
.section--band .pathway__stop p{color:var(--black)}
.section--band .pathway__node{box-shadow:0 14px 30px -14px rgba(18,0,82,.45)}

/* ---- phone: the same route, stood on its end ---------------------------- */
@media (max-width:760px){
  /* Three round dots between stops rather than one short dash, which read
     as a stray tick on a phone (Randy, BugHerd #154: "These connecting dots
     look weird on mobile, but great on desktop"). */
  .pathway__track{
    grid-template-columns:1fr;
    gap:3.25rem;
    max-width:26rem;
    margin-inline:auto;
  }
  .pathway__stop::after{
    top:auto;
    bottom:-2.75rem;
    left:50%;
    right:auto;
    width:8px;
    height:2.25rem;
    border:0;
    transform:translateX(-4px);
    opacity:.75;
    background:radial-gradient(circle,var(--trail) 3.5px,transparent 4px) center top/8px 0.75rem repeat-y;
  }
}

@media (prefers-reduced-motion:no-preference){
  .pathway__node{transition:transform .25s ease}
  .pathway__stop:hover .pathway__node{transform:translateY(-3px)}
}

/* Frog-head nodes (Adventure Path, BugHerd #80). White disc, the frog in the
   program's starting colour. Larger than the line icons because a filled
   silhouette needs the room to read as a face. */
.pathway__node--frog{background:transparent;box-shadow:none!important}
.pathway__frog{
  display:block;width:100%;height:100%;
  background:var(--f);
  -webkit-mask:url(/assets/img/frog-head.png) center/contain no-repeat;
          mask:url(/assets/img/frog-head.png) center/contain no-repeat;
}

/* A white outline round each frog head (Natalie via Randy, BugHerd #206), so
   the grey and yellow heads hold up on the colored band. The outline is drawn
   on the node, around its masked child, because a mask cuts away any
   shadow drawn on the masked element itself. */
/* BugHerd #267 (Randy, 11/9): thinner outline, and the whole head in.
   The outline used to be four drop-shadows on the holed frog, which also
   leaked into the eye holes and ate the top of each eye. It is now a solid
   white silhouette (frog-head-solid.png: eye holes filled, grown by about 2px) sitting
   under the frog, so the eyes read whole and white. (A drop-shadow can't do
   it here: the mask would cut it away.)
   The frog is inset slightly so the outline never meets the node's edge. */
.pathway__node--frog{filter:drop-shadow(0 10px 14px rgba(18,0,82,.25))}
.pathway__node--frog::before{
  content:"";
  position:absolute;inset:4%;
  background:#fff;
  -webkit-mask:url(/assets/img/frog-head-solid.png) center/contain no-repeat;
          mask:url(/assets/img/frog-head-solid.png) center/contain no-repeat;
}
.pathway__node--frog .pathway__frog{position:absolute;inset:4%;width:auto;height:auto}