/* ==========================================================================
   Banexco Traders Inc. — css/markets.css
   Page-local styles for markets.html (§4.7 / §6-map). Additive: linked
   AFTER css/main.css. Tokens only — no token redefinition, no color literals.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Page head
   -------------------------------------------------------------------------- */
.page-head { padding-bottom: 0; }
.page-head .lede { font-size: 1.125rem; max-width: 38rem; }

/* --------------------------------------------------------------------------
   Export map (§6) — inline SVG, ink-soft coastlines on paper
   -------------------------------------------------------------------------- */
.map-section { padding-top: clamp(2.5rem, 5vw, 4rem); }
.map-figure { margin: 0; }
.export-map { display: block; width: 100%; height: auto; }

.map-coast {
  fill: none;
  stroke: var(--ink-soft);
  stroke-width: 1.25;
  stroke-linejoin: round;
  stroke-linecap: round;
  opacity: 0.6;
}

.map-arc {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
}
.map-arc--japan { stroke: var(--pine); }
.map-arc--sage { stroke: var(--sage); }

.map-origin { fill: var(--pine); }
.map-origin-ring { fill: none; stroke: var(--pine); opacity: 0.35; }
.map-dot--pine { fill: var(--pine); }
.map-dot--sage { fill: var(--sage); }

.map-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px; /* SVG user units — scales with the viewBox */
  letter-spacing: 0.1em;
  text-transform: uppercase;
  fill: var(--ink);
}
.map-label--origin { font-size: 13px; fill: var(--ink-soft); }

/* Arcs draw once on scroll (0.6s stroke-dashoffset), piggybacking the shared
   .fade-in IntersectionObserver from js/main.js. Paths carry pathLength="1".
   No-JS default (no html.js) = fully drawn; reduced-motion = drawn. */
html.js .map-figure .map-arc {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 0.6s ease-out;
}
html.js .map-figure.is-visible .map-arc { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) {
  html.js .map-figure .map-arc { stroke-dashoffset: 0; transition: none; }
}

/* --------------------------------------------------------------------------
   Market sections — Japan / China / Middle East
   -------------------------------------------------------------------------- */
.market-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.market-body p { color: var(--ink-soft); }
.market-media { max-width: 26rem; width: 100%; justify-self: center; }
.market-media img { width: 100%; height: auto; border-radius: var(--radius); }

.market-grid--flip .market-body { order: 2; }
.market-grid--flip .market-media { order: 1; }

@media (max-width: 820px) {
  .market-grid { grid-template-columns: 1fr; }
  .market-grid--flip .market-body { order: 0; }
  .market-grid--flip .market-media { order: 1; }
  .market-media { justify-self: start; max-width: 22rem; }
}

/* --------------------------------------------------------------------------
   Stat band — prefix/suffix wrapper (#2 · ~75%) around the animated span.
   Outer .stat-number carries the type styles; inner animated span flows inline.
   -------------------------------------------------------------------------- */
.stat-number > .stat-number {
  display: inline;
  font-size: inherit;
  line-height: inherit;
}

/* --------------------------------------------------------------------------
   Testimonials — full set, grouped by market, sage-tint cards
   -------------------------------------------------------------------------- */
.quote-groups { display: grid; gap: clamp(2.5rem, 5vw, 3.5rem); }
.quote-group-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pine);
  margin: 0 0 1.1rem;
}
.market-quote { background: var(--sage-tint); margin: 0; }
.quote-grid > .quote-card:only-child { grid-column: 1 / -1; max-width: 44rem; }