/* ==========================================================================
   Progression journey pages (مسار الجراميز / مسار الكشافة), v2
   Same language as the rest of the site: .page-hero photo + navy overlay +
   torn edge, .torn-photo figures, .intro-tag pills, Cairo age numbers like
   .troop-chapter, gradient icon tiles, scout pattern. Motion in journey.js;
   without JS (or with reduced motion) every chapter renders in its final state.
   ========================================================================== */

.journey {
  --jr-a: var(--navy);
  --jr-b: var(--red-600);
  --jr-tile: var(--tile-navy, linear-gradient(140deg, #3d43a3, #2c3178));
  --jr-soft: var(--navy-100);
}
.journey--cubs {
  --jr-a: var(--green);
  --jr-b: #c27a00;
  --jr-tile: var(--tile-green, linear-gradient(140deg, #34a35a, #1d6331));
  --jr-soft: var(--green-100);
}

/* ---------- Hero (extends .page-hero) ---------- */
.jr-hero { min-height: clamp(620px, 88vh, 820px); padding-bottom: calc(var(--space-9) + 30px); }
.jr-hero .page-hero__img { height: 115%; top: -7%; }
.journey--cubs .jr-hero::before {
  background:
    linear-gradient(to left, rgba(16, 56, 30, .92) 0%, rgba(20, 70, 36, .74) 45%, rgba(27, 31, 82, .35) 100%),
    linear-gradient(to top, rgba(16, 56, 30, .6), transparent 50%);
}
.jr-hero__grid { display: grid; gap: var(--space-7); align-items: center; width: min(100% - 2rem, var(--container)); }
.jr-hero__text { max-width: 640px; }
.jr-hero .intro-tag { margin-bottom: var(--space-3); }
.jr-hero h1 { font-size: clamp(2.4rem, 6vw, 4.2rem); line-height: 1.12; text-wrap: balance; }
.jr-facts { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.jr-facts li {
  display: flex; align-items: baseline; gap: .45em; padding: .5em 1em; border-radius: 14px;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); backdrop-filter: blur(6px);
}
.jr-facts b { font-family: var(--font-display); font-size: 1.35rem; font-weight: 800; color: var(--yellow); line-height: 1.2; }
.jr-facts span { font-size: .92rem; color: #e6e7f3; }
.jr-hero__actions { margin-top: var(--space-5); }
.jr-hero__actions .btn svg { width: 20px; height: 20px; }

/* Collage of torn photos */
.jr-collage { position: relative; height: clamp(300px, 70vw, 420px); max-width: 520px; width: 100%; margin-inline: auto; }
.jr-collage__item { position: absolute; margin: 0; filter: drop-shadow(0 18px 28px rgba(0, 0, 0, .45)); }
.jr-collage__item::before { background: #fff !important; }
.jr-collage__item > div { width: 100%; height: 100%; }
.jr-collage__item--1 { inset-inline-end: 4%; top: 0; width: 58%; aspect-ratio: 3 / 4; rotate: 3deg; z-index: 2; }
.jr-collage__item--2 { inset-inline-start: 0; top: 14%; width: 46%; aspect-ratio: 4 / 5; rotate: -6deg; z-index: 1; }
.jr-collage__item--3 { inset-inline-start: 22%; bottom: -4%; width: 44%; aspect-ratio: 4 / 3; rotate: -1deg; z-index: 3; }
.jr-collage__stamp {
  position: absolute; z-index: 4; inset-inline-end: 0; bottom: 6%;
  display: grid; place-items: center; align-content: center; width: 96px; height: 96px; border-radius: 50%;
  background: var(--red-600); color: #fff; font-family: var(--font-display); line-height: 1; text-align: center;
  border: 3px dashed rgba(255, 255, 255, .75); outline: 4px solid var(--red-600);
  box-shadow: 0 14px 26px -10px rgba(0, 0, 0, .6); rotate: -12deg;
}
.jr-collage__stamp b { font-size: 2rem; font-weight: 800; }
.jr-collage__stamp span { font-size: .9rem; font-weight: 700; margin-top: .15em; }
@media (min-width: 960px) {
  .jr-hero__grid { grid-template-columns: 1.1fr 1fr; gap: var(--space-8); }
  .jr-collage { height: 480px; }
}

/* ---------- Sticky rail ---------- */
.jr-rail { position: sticky; top: calc(var(--header-stack) + 8px); z-index: 30; margin-top: -1.6rem; }
.jr-rail .container {
  position: relative; width: min(100% - 24px, var(--container));
  background: rgba(255, 255, 255, .94); backdrop-filter: blur(10px);
  border-radius: 999px; padding: .5rem .75rem;
  box-shadow: 0 16px 34px -18px rgba(30, 33, 64, .45), 0 0 0 1px rgba(30, 33, 64, .06);
}
.jr-rail__list { list-style: none; margin: 0; padding: 0; display: flex; justify-content: space-between; gap: .25rem; position: relative; z-index: 1; }
.jr-rail__list a {
  display: flex; align-items: center; gap: .45em; min-height: 44px; padding: .3em .55em; border-radius: 999px;
  text-decoration: none; color: var(--ink-soft); font-weight: 700; font-size: .88rem; white-space: nowrap;
  transition: background-color .25s, color .25s;
}
.jr-rail__dot {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; flex: none;
  background: var(--paper-2); color: var(--ink-soft); font-family: var(--font-display); font-weight: 800; font-size: .9rem;
  transition: background .3s, color .3s, transform .3s;
}
.jr-rail__list a.is-reached .jr-rail__dot { background: var(--jr-tile); color: #fff; }
.jr-rail__list a.is-current { background: var(--jr-soft); color: var(--navy-900); }
.jr-rail__list a.is-current .jr-rail__dot { transform: scale(1.1); box-shadow: 0 0 0 3px var(--yellow); }
.jr-rail__bar { position: absolute; inset-inline: 1.5rem; bottom: 4px; height: 3px; border-radius: 3px; background: rgba(30, 33, 64, .08); overflow: hidden; }
.jr-rail__fill { display: block; height: 100%; width: calc(var(--p, 0) * 100%); background: linear-gradient(to left, var(--jr-a), var(--yellow)); border-radius: inherit; }
@media (max-width: 899px) {
  .jr-rail__name { display: none; }
  .jr-rail__list a.is-current .jr-rail__name { display: inline; }
  .jr-rail__list a { padding: .2em; }
}

/* ---------- Trail ---------- */
.jr-trail { position: relative; padding-block: var(--space-8) var(--space-9); background: var(--paper); }
.jr-path { position: absolute; top: 0; left: 0; overflow: visible; pointer-events: none; z-index: 0; }
.jr-path__base { fill: none; stroke: rgba(30, 33, 64, .18); stroke-width: 3; stroke-dasharray: 1 11; stroke-linecap: round; }
.jr-path__done { fill: none; stroke: var(--jr-a); stroke-width: 5; stroke-linecap: round; }
.jr-walker {
  position: absolute; top: 0; left: 0; z-index: 3; width: 48px; height: 48px; margin: -24px 0 0 -24px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--yellow); color: var(--navy-900);
  box-shadow: 0 0 0 6px rgba(244, 234, 11, .35), 0 12px 24px -8px rgba(0, 0, 0, .4);
  opacity: 0; transition: opacity .3s;
}
.jr-walker svg { width: 26px; height: 26px; }
.js-journey .jr-walker { opacity: 1; }

.jr-stages { list-style: none; margin: 0; padding: 0; position: relative; z-index: 1; display: grid; gap: var(--space-8); }

/* Phone: pin column + stacked figure and text */
.jr-stage { display: grid; grid-template-columns: 52px 1fr; column-gap: var(--space-4); row-gap: var(--space-5); align-items: start; }
.jr-stage__pin {
  grid-column: 1; grid-row: 1; justify-self: center; position: relative; z-index: 2;
  width: 52px; height: 52px; display: grid; place-items: center; border-radius: 18px;
  background: #fff; border: 3px solid rgba(30, 33, 64, .12);
  box-shadow: 0 10px 22px -12px rgba(30, 33, 64, .5);
  transition: background .4s, border-color .4s, rotate .4s var(--ease);
}
.jr-stage__num { font-family: var(--font-display); font-weight: 800; font-size: 1.35rem; color: var(--ink-soft); transition: color .4s; }
.jr-stage.is-reached .jr-stage__pin { background: var(--jr-tile); border-color: transparent; rotate: -6deg; }
.jr-stage.is-reached .jr-stage__num { color: #fff; }
.jr-stage.is-current .jr-stage__pin { box-shadow: 0 0 0 6px rgba(244, 234, 11, .55), 0 14px 26px -10px rgba(30, 33, 64, .55); }
.jr-figure { grid-column: 2; grid-row: 1; }
.jr-card { grid-column: 2; grid-row: 2; }

/* Figure: torn photo, gradient icon sticker, caption */
.jr-figure { position: relative; margin: 0; }
.jr-figure__photo { aspect-ratio: 4 / 3; rotate: -1.5deg; }
.jr-figure__photo::before { background: #fff !important; }
.jr-stage:nth-child(even) .jr-figure__photo { rotate: 1.5deg; }
.jr-figure__icon {
  position: absolute; top: -14px; inset-inline-start: -10px; z-index: 2;
  display: grid; place-items: center; width: 60px; height: 60px; border-radius: 19px; color: #fff;
  background: var(--jr-tile); rotate: -8deg;
  box-shadow: 0 14px 24px -10px rgba(0, 0, 0, .5), var(--tile-shine, inset 0 1px 0 rgba(255,255,255,.25));
}
.jr-figure__icon svg { width: 30px; height: 30px; }
@media (max-width: 959px) {   /* keep the sticker away from the trail pins on the start side */
  .jr-figure__icon { inset-inline-start: auto; inset-inline-end: -8px; width: 52px; height: 52px; border-radius: 16px; rotate: 8deg; }
  .jr-figure__icon svg { width: 26px; height: 26px; }
}
.jr-figure figcaption {
  margin-top: var(--space-3); display: flex; align-items: center; gap: .5em;
  font-size: .9rem; color: var(--ink-soft); line-height: 1.6;
}
.jr-figure figcaption::before { content: ""; flex: none; width: 22px; height: 2px; border-radius: 2px; background: var(--jr-a); }

/* Text: like .troop-chapter */
.jr-card { position: relative; }
.jr-card__step { margin-bottom: var(--space-2); background: var(--jr-soft); color: var(--jr-a); }
.jr-card__age { margin: 0; display: flex; align-items: baseline; gap: .4em; line-height: 1; }
.jr-card__age b { font-family: var(--font-display); font-weight: 800; font-size: clamp(3rem, 7vw, 4.6rem); color: var(--jr-a); letter-spacing: -.01em; }
.jr-card__age span { font-family: var(--font-display); font-weight: 700; color: var(--ink-soft); font-size: 1.15rem; }
.jr-card__title { margin: var(--space-2) 0 var(--space-3); font-size: clamp(1.7rem, 3.4vw, 2.4rem); line-height: 1.25; color: var(--navy-900); }
.jr-card__intro { margin: 0 0 var(--space-5); font-size: clamp(1.05rem, 1.6vw, 1.18rem); line-height: 1.9; color: var(--ink); }
.jr-card__sub { margin: 0 0 var(--space-3); font-size: 1.05rem; color: var(--navy); }
.jr-card__list { list-style: none; margin: 0 0 var(--space-5); padding: 0; display: grid; gap: var(--space-2); }
.jr-card__list li { display: flex; align-items: flex-start; gap: .65em; line-height: 1.7; color: var(--ink); }
.jr-tick {
  flex: none; display: grid; place-items: center; width: 24px; height: 24px; margin-top: .15em; border-radius: 8px;
  background: var(--tile-yellow, var(--yellow)); color: var(--navy-900); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4);
}
.jr-tick svg { width: 14px; height: 14px; stroke-width: 3; }
.jr-card__badge {
  margin: 0; display: inline-flex; align-items: center; gap: .8em; padding: .75em 1.2em .75em 1.4em; border-radius: 18px;
  background: #fff; box-shadow: var(--shadow-sm); border: 1px solid rgba(30, 33, 64, .06);
}
.jr-card__badge-ico {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; flex: none;
  background: var(--tile-red, var(--red-600)); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25);
}
.jr-card__badge-ico svg { width: 22px; height: 22px; }
.jr-card__badge > span:last-child { display: flex; flex-direction: column; font-weight: 700; color: var(--navy-900); line-height: 1.4; }
.jr-card__badge small { font-size: .8rem; font-weight: 500; color: var(--ink-soft); }

/* Desktop: figure | trail | text, swapping sides each stage */
@media (min-width: 960px) {
  .jr-stages { gap: var(--space-9); }
  .jr-stage { grid-template-columns: 1fr 150px 1fr; column-gap: 0; row-gap: 0; align-items: center; }
  .jr-stage__pin { grid-column: 2; grid-row: 1; width: 72px; height: 72px; border-radius: 24px; translate: var(--wobble, 0) 0; }
  .jr-stage__num { font-size: 1.75rem; }
  .jr-stage:nth-child(odd)  { --wobble: 26px; }
  .jr-stage:nth-child(even) { --wobble: -26px; }
  .jr-stage:nth-child(odd)  .jr-figure { grid-column: 1; grid-row: 1; }
  .jr-stage:nth-child(odd)  .jr-card   { grid-column: 3; grid-row: 1; }
  .jr-stage:nth-child(even) .jr-figure { grid-column: 3; grid-row: 1; }
  .jr-stage:nth-child(even) .jr-card   { grid-column: 1; grid-row: 1; }
  .jr-figure__icon { width: 68px; height: 68px; border-radius: 22px; }
}

/* Reveal (only with JS and motion allowed): figures slide in from their side, text rises */
@media (prefers-reduced-motion: no-preference) {
  .js-journey .jr-figure { opacity: 0; transform: translateX(var(--from, 40px)) rotate(var(--rot, 2deg)); transition: opacity .8s var(--ease), transform .8s var(--ease); }
  .js-journey .jr-stage:nth-child(even) .jr-figure { --from: -40px; --rot: -2deg; }
  .js-journey .jr-card { opacity: 0; transform: translateY(36px); transition: opacity .8s var(--ease) .12s, transform .8s var(--ease) .12s; }
  .js-journey .jr-stage.is-seen .jr-figure, .js-journey .jr-stage.is-seen .jr-card { opacity: 1; transform: none; }
  .js-journey .jr-figure__icon { scale: .4; transition: scale .6s cubic-bezier(.34, 1.56, .64, 1) .45s; }
  .js-journey .jr-stage.is-seen .jr-figure__icon { scale: 1; }
  .js-journey .jr-card__list li { opacity: 0; translate: 14px 0; transition: opacity .5s var(--ease), translate .5s var(--ease); }
  .js-journey .jr-stage.is-seen .jr-card__list li { opacity: 1; translate: 0 0; }
  .js-journey .jr-stage.is-seen .jr-card__list li:nth-child(1) { transition-delay: .35s; }
  .js-journey .jr-stage.is-seen .jr-card__list li:nth-child(2) { transition-delay: .45s; }
  .js-journey .jr-stage.is-seen .jr-card__list li:nth-child(3) { transition-delay: .55s; }
  .js-journey .jr-stage.is-seen .jr-card__list li:nth-child(4) { transition-delay: .65s; }
  .jr-collage__item { animation: jr-drop .9s var(--ease) both; }
  .jr-collage__item--2 { animation-delay: .15s; }
  .jr-collage__item--3 { animation-delay: .3s; }
  .jr-collage__stamp { animation: jr-stamp 3.5s var(--ease) 1s infinite; }
  .jr-hero__actions .btn--yellow svg { animation: jr-bob 1.8s ease-in-out infinite; }
}
@keyframes jr-drop { from { opacity: 0; transform: translateY(-30px) scale(.94); } }
@keyframes jr-stamp { 0%, 100% { scale: 1; } 50% { scale: 1.06; rotate: -8deg; } }
@keyframes jr-bob { 50% { transform: translateY(4px); } }

/* ---------- Summit: photo band ---------- */
.jr-summit {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--navy-900); color: #fff; text-align: center;
  padding: calc(var(--space-9) + 30px) 0 var(--space-9);
}
.jr-summit__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.jr-summit::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(70% 80% at 50% 50%, rgba(27, 31, 82, .7), rgba(27, 31, 82, .92));
}
.journey--cubs .jr-summit::before { background: radial-gradient(70% 80% at 50% 50%, rgba(16, 56, 30, .7), rgba(16, 56, 30, .93)); }
.jr-summit::after {   /* torn paper edge from the trail above (same polygon as .page-hero, flipped) */
  content: ""; position: absolute; inset: -1px 0 auto; height: 42px; background: var(--paper); transform: scaleY(-1);
  clip-path: polygon(0.0% 34.0%, 1.0% 56.4%, 2.8% 41.2%, 4.6% 42.2%, 6.3% 53.3%, 7.4% 24.3%, 8.4% 45.5%, 9.3% 71.3%, 11.3% 27.1%, 13.1% 23.3%, 14.1% 56.4%, 16.2% 20.2%, 17.9% 43.5%, 19.9% 53.6%, 20.9% 46.0%, 22.7% 38.7%, 23.5% 23.7%, 25.3% 35.9%, 26.9% 55.0%, 28.1% 34.3%, 30.1% 54.7%, 31.1% 45.7%, 33.1% 45.5%, 34.8% 35.6%, 36.9% 28.2%, 38.8% 46.6%, 40.2% 58.6%, 41.3% 46.8%, 43.3% 31.7%, 44.7% 55.2%, 46.5% 27.0%, 47.3% 25.6%, 48.2% 28.0%, 49.3% 31.8%, 51.0% 23.0%, 52.6% 47.9%, 54.1% 58.8%, 56.1% 19.3%, 58.2% 44.8%, 59.9% 25.4%, 61.8% 21.0%, 63.4% 32.8%, 65.5% 56.1%, 66.5% 53.9%, 68.5% 54.5%, 70.1% 30.7%, 71.9% 28.0%, 73.5% 27.8%, 75.0% 21.0%, 77.1% 72.6%, 78.9% 66.9%, 80.0% 51.7%, 81.3% 25.2%, 82.4% 54.7%, 83.4% 45.5%, 84.3% 52.6%, 85.1% 50.2%, 86.4% 25.8%, 88.1% 47.0%, 89.6% 48.3%, 90.7% 38.3%, 92.6% 53.8%, 94.4% 22.5%, 95.3% 53.1%, 97.1% 49.6%, 99.0% 21.6%, 100.0% 40.0%, 100% 100%, 0% 100%);
}
.jr-summit__inner { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }
.jr-summit__icon {
  display: grid; place-items: center; width: 96px; height: 96px; border-radius: 30px; margin-bottom: var(--space-2);
  background: var(--tile-yellow, var(--yellow)); color: var(--navy-900); rotate: -6deg;
  box-shadow: 0 0 0 10px rgba(244, 234, 11, .15), 0 20px 40px -14px rgba(0, 0, 0, .6);
}
.jr-summit__icon svg { width: 50px; height: 50px; }
.jr-summit .intro-tag { margin: 0; }
.jr-summit h2 { margin: 0; color: #fff; font-size: clamp(2.1rem, 5vw, 3.4rem); }
.jr-summit p:not(.intro-tag) { margin: 0; max-width: 52ch; font-size: 1.15rem; line-height: 1.85; color: #e6e7f3; }
.jr-summit__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin-top: var(--space-4); }
.jr-summit__actions .btn svg { width: 20px; height: 20px; }

.jr-confetti { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.jr-confetti i {
  position: absolute; top: 40%; left: 50%; width: 10px; height: 16px; border-radius: 3px; opacity: 0;
  background: hsl(calc(var(--c) * 47deg) 90% 60%);
}
.jr-confetti i:nth-child(3n) { background: var(--yellow); }
.jr-confetti i:nth-child(4n) { background: var(--red); width: 8px; height: 8px; border-radius: 50%; }
@media (prefers-reduced-motion: no-preference) {
  .jr-summit.is-reached .jr-confetti i { animation: jr-burst 1.8s var(--ease) forwards; animation-delay: calc(var(--c) * 18ms); }
  .jr-summit.is-reached .jr-summit__icon { animation: jr-pop .9s var(--ease) .2s; }
}
@keyframes jr-pop { 40% { scale: 1.18; rotate: -14deg; } }
@keyframes jr-burst {
  0%   { opacity: 1; transform: translate(-50%, -50%) rotate(0) scale(.4); }
  100% { opacity: 0; transform: translate(calc(-50% + cos(calc(var(--c) * 15deg)) * 46vw), calc(-50% + sin(calc(var(--c) * 15deg)) * 260px + 120px)) rotate(calc(var(--c) * 80deg)) scale(1); }
}