/* ============================================================
   Ride X — Why Jeddah (.wj-)
   The market case: editorial claim lines + verified stat blocks.
   Logical properties only; motion inherits from base attributes.
   ============================================================ */

/* ---------- anchor stat row ---------- */
.wj-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--sp-6);
  margin-block-start: clamp(2.5rem, 2rem + 3vw, 4rem);
}
.wj-stat {
  border-block-start: 1px solid var(--line-on-light);
  padding-block-start: var(--sp-5);
}

/* stat labels sit on light bands here — slate, not mist */
.wj-stat .stat__label,
.wj-fig .stat__label {
  color: var(--slate);
  max-inline-size: 36ch;
}

/* small unit next to the big number (baseline-aligned in .stat__value) */
.wj-suffix {
  font-size: 0.45em;
  font-weight: 600;
  color: var(--slate);
  letter-spacing: 0;
}

/* keep symbol-only clusters like “+14%” in visual LTR order in Arabic */
.wj-ltr { direction: ltr; }

/* ---------- signal sections (copy + figure aside) ---------- */
.wj-sig {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(15rem, 1fr);
  gap: clamp(2rem, 1.5rem + 3vw, 4.5rem);
  align-items: start;
}
.wj-sig__copy p + p { margin-block-start: var(--sp-4); }

.wj-fig { padding: var(--sp-6); }

/* ---------- events ledger ---------- */
.wj-events {
  margin-block-start: clamp(2.5rem, 2rem + 3vw, 4rem);
}
.wj-event {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: baseline;
  padding-block: var(--sp-5);
  border-block-start: 1px solid var(--line-on-light);
}
.wj-event:last-child { border-block-end: 1px solid var(--line-on-light); }
.wj-event h3 { font-size: var(--text-h3); }
.wj-event p { color: var(--slate); font-size: var(--text-small); }

/* ---------- journey route figure ---------- */
.wj-journey {
  max-inline-size: 54rem;
  margin-inline: auto;
  margin-block-start: clamp(3rem, 2.5rem + 4vw, 5.5rem);
}
.wj-journey .rt { inline-size: 100%; block-size: auto; }
.wj-stop { fill: #9aa3b5; }
.wj-journey__labels {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-block-start: var(--sp-2);
  font-size: var(--text-small);
  color: var(--slate);
}
.wj-journey__labels span { text-align: center; }

/* ---------- proof points ---------- */
.wj-points {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--sp-6);
  margin-block-start: clamp(3rem, 2.5rem + 4vw, 5rem);
}
.wj-point {
  border-block-start: 1px solid var(--line-on-light);
  padding-block-start: var(--sp-4);
}
.wj-point h3 { font-size: 1.0625rem; }
.wj-point p {
  margin-block-start: var(--sp-2);
  font-size: var(--text-small);
  color: var(--slate);
}

/* ---------- mid-page breathe band ---------- */
.wj-break { text-align: center; }
.wj-break .display-breathe {
  max-inline-size: 26ch;
  margin-inline: auto;
}
.wj-break .route-divider { margin-block-start: var(--sp-7); }

/* ---------- sources footnote ---------- */
.wj-sources h2 {
  font-family: var(--font-body);
  font-size: var(--text-eyebrow);
  font-weight: 600;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--slate);
}
html[lang="ar"] .wj-sources h2 { text-transform: none; letter-spacing: 0; }
.wj-sources__note {
  margin-block-start: var(--sp-3);
  font-size: var(--text-small);
  color: var(--slate);
  max-inline-size: 52ch;
}
.wj-sources ol {
  counter-reset: wj-src;
  margin-block-start: var(--sp-5);
}
.wj-sources li {
  counter-increment: wj-src;
  display: flex;
  gap: var(--sp-4);
  padding-block: var(--sp-3);
  border-block-start: 1px solid var(--line-on-light);
  font-size: var(--text-small);
  color: var(--slate);
}
.wj-sources li::before {
  content: counter(wj-src, decimal-leading-zero);
  font-family: var(--font-display);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  flex: none;
  min-inline-size: 2ch;
}
/* awaiting a confirmed source — intentionally provisional */
.wj-sources li.is-pending { border-block-start-style: dashed; }
.wj-sources li.is-pending::before { color: var(--slate); }

/* ---------- responsive ---------- */
@media (max-width: 62rem) {
  .wj-sig { grid-template-columns: 1fr; }
  .wj-fig { max-inline-size: 28rem; }
  .wj-stats { gap: var(--sp-5); }
}

@media (max-width: 48rem) {
  .wj-event { grid-template-columns: 1fr; gap: var(--sp-1); }
}

@media (max-width: 40rem) {
  .wj-journey__labels { font-size: 0.75rem; }
}