/* ==========================================================================
   Expeditions — index (world map of routes + timeline) and expedition pages
   (hero, stats, journal of steps synced with a sticky MapLibre map).
   Loaded only on /<lang>/expeditions/… pages. Uses site.css tokens.
   ========================================================================== */

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* ---------- small pill (draft badge) ---------- */
.exp-pill {
  display: inline-block; vertical-align: middle; margin-left: .9em; padding: .2em .75em .15em;
  border: 1px solid var(--line); border-radius: 99px; color: var(--fg-3);
  font: 400 .58rem/1.6 var(--f-ui); letter-spacing: .2em; text-transform: uppercase; white-space: nowrap;
}
.exp-pill--hero { border-color: rgba(255, 255, 255, .6); color: #fff; font-size: .62rem; padding: .3em .95em .25em; letter-spacing: .22em; transform: translateY(-.1em); }

/* ---------- hero ---------- */
.hero--exp { min-height: 100vh; min-height: 100svh; }
.hero--exp .hero-text { padding-bottom: clamp(4.5rem, 12vh, 7rem); }
.exp-hero-sub {
  font-family: var(--f-display); font-style: italic; font-weight: 300;
  font-size: clamp(1.35rem, 2.8vw, 2.1rem); line-height: 1.3; margin: .9rem 0 0; max-width: 32ch;
}
.hero--exp .hero-sub { margin-top: 1.6rem; }

/* ---------- stats bar + intro ---------- */
.exp-top { padding: clamp(1.5rem, 4vw, 3rem) 0 clamp(2.5rem, 6vw, 4.5rem); }
.exp-stats {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem 1rem;
  margin: 0 0 clamp(2.5rem, 7vw, 5rem); padding: clamp(1.4rem, 3vw, 2rem) 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
@media (min-width: 800px) {
  .exp-stats { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-auto-flow: column; }
  .exp-stat + .exp-stat { border-left: 1px solid var(--line); padding-left: clamp(1rem, 3vw, 2.5rem); }
}
.exp-stat { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.exp-stat dt { order: 2; font-size: .68rem; letter-spacing: .24em; text-transform: uppercase; color: var(--fg-3); font-weight: 400; }
.exp-stat dd { display: contents; margin: 0; }
.exp-stat-n { order: 1; }
.exp-stat-x { order: 3; }
.exp-stat-n { display: block; font-family: var(--f-display); font-weight: 300; font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1; font-variant-numeric: lining-nums; }
.exp-stat-x { display: block; margin-top: .15rem; font-size: .8rem; color: var(--fg-2); line-height: 1.45; }
.exp-intro { text-align: center; }

/* ---------- layout: journal + sticky map ---------- */
.exp-layout { position: relative; border-top: 1px solid var(--line); }
.exp-mapcol {
  position: sticky; top: var(--header-h); z-index: 20;
  height: 38vh; height: 38svh; min-height: 220px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
  transition: height .5s var(--ease), min-height .5s var(--ease);
}
.exp-map, .exp-map.maplibregl-map { position: absolute; inset: 0; overflow: hidden; background: var(--bg-2); }
.exp-map .maplibregl-canvas { outline: none; }
.exp-map.is-loading::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px;
  border: 1px solid var(--line); border-top-color: var(--accent); border-radius: 50%;
  animation: exp-spin 1s linear infinite;
}
@keyframes exp-spin { to { transform: rotate(360deg); } }
.exp-map-toggle {
  position: absolute; right: var(--gutter); top: 100%; margin-top: 10px; z-index: 2;
  display: inline-flex; align-items: center; gap: .35em; padding: .45em 1em .45em .7em;
  background: var(--bg); color: var(--fg-2); border: 1px solid var(--line); border-radius: 99px; box-shadow: var(--shadow);
  font-size: .64rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 400;
}
.exp-map-toggle .i { width: 16px; height: 16px; transition: transform .4s var(--ease); }
.exp-map-toggle:hover { color: var(--fg); }
.exp-layout.is-collapsed .exp-mapcol { height: 0; min-height: 0; border-bottom-color: transparent; }
.exp-layout.is-collapsed .exp-map-toggle .i { transform: rotate(180deg); }
.exp-layout.is-collapsed .exp-map { visibility: hidden; }

/* no JS: the map can't work, keep a plain readable journal */
html:not(.js) .exp-mapcol { display: none; }

.exp-journal {
  list-style: none; margin: 0 auto; padding: 1rem var(--gutter) 0 calc(var(--gutter) + 30px);
  max-width: calc(760px + 2 * var(--gutter)); position: relative;
}
/* the thread of the journey */
.exp-journal::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--gutter) + 7px); width: 1px;
  background: linear-gradient(to bottom, var(--line), var(--line) 92%, transparent);
}

@media (min-width: 900px) {
  .exp-layout { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } /* map 40% */
  .exp-layout--nomap { display: block; }
  .exp-mapcol {
    grid-column: 2; grid-row: 1; align-self: start;
    height: calc(100vh - var(--header-h)); min-height: 0;
    border-bottom: 0; border-left: 1px solid var(--line);
  }
  .exp-map-toggle { display: none; }
  .exp-layout.is-collapsed .exp-mapcol { height: calc(100vh - var(--header-h)); }
  .exp-layout.is-collapsed .exp-map { visibility: visible; }
  .exp-journal { grid-column: 1; grid-row: 1; margin: 0 0 0 auto; width: 100%; max-width: 760px; padding: 0 clamp(28px, 4vw, 64px) 0 calc(clamp(20px, 3vw, 48px) + 30px); }
  .exp-journal::before { left: calc(clamp(20px, 3vw, 48px) + 7px); }
}
@media (min-width: 1500px) {
  .exp-layout { grid-template-columns: minmax(0, 9fr) minmax(0, 7fr); } /* map ~44% */
}

/* ---------- steps ---------- */
.exp-step { position: relative; padding: clamp(2.6rem, 7vh, 4.6rem) 0; }
.exp-step + .exp-step, .exp-end { border-top: 1px solid var(--line); }
.exp-step::before, .exp-end::before {
  content: ""; position: absolute; left: -30px; top: calc(clamp(2.6rem, 7vh, 4.6rem) + .35rem);
  width: 15px; height: 15px; box-sizing: border-box; border-radius: 50%;
  background: var(--bg); border: 1.5px solid color-mix(in srgb, var(--accent) 70%, var(--bg));
  transition: background-color .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease);
}
.exp-step.is-past::before { background: color-mix(in srgb, var(--accent) 70%, var(--bg)); }
.exp-step.is-active::before { background: var(--accent); border-color: var(--accent); transform: scale(1.25); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }
.exp-leg {
  display: inline-flex; align-items: center; gap: .55em; margin: 0 0 1.1rem;
  font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--fg-3); font-weight: 400;
}
.exp-ico { width: 18px; height: 18px; stroke-width: 1.2; color: var(--fg-2); }
.exp-leg-km { font-variant-numeric: tabular-nums; }
.exp-step-meta { margin: 0 0 .7rem; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--fg-2); font-weight: 400; }
.exp-day { color: var(--accent); }
.exp-step-meta .dot { margin: 0 .6em; opacity: .5; }
.exp-step-place { font-size: clamp(2.1rem, 4.4vw, 3.3rem); line-height: 1.05; }
.exp-step-country { margin: .55rem 0 0; font-size: .72rem; letter-spacing: .26em; text-transform: uppercase; color: var(--fg-3); }
.exp-step-text { margin-top: 1.4rem; font-size: 1.06rem; line-height: 1.8; max-width: 62ch; }
.exp-step-text p:last-child { margin-bottom: 0; }
.exp-step-text em { font-style: italic; }
.exp-step-text a { border-bottom: 1px solid var(--accent); }
.exp-step-photos { margin-top: 1.7rem; }
/* small rows: 2–3 photos per row in the journal column */
.exp-step-photos .jg { --row: 88px; --gap: 5px; }
@media (min-width: 560px) { .exp-step-photos .jg { --row: 120px; } }
@media (min-width: 900px) { .exp-step-photos .jg { --row: 100px; } }
@media (min-width: 1200px) { .exp-step-photos .jg { --row: 112px; --gap: 6px; } }
.exp-step:target .exp-step-place { color: var(--accent); }

/* ---------- end of the journey ---------- */
.exp-end { position: relative; padding: clamp(3rem, 8vh, 5rem) 0 clamp(4rem, 12vh, 8rem); }
.exp-end::before { background: var(--accent); border-color: var(--accent); border-radius: 2px; transform: rotate(45deg) scale(.85); }
.exp-end-kicker { font-size: .7rem; letter-spacing: .28em; text-transform: uppercase; color: var(--fg-3); margin: 0 0 .7rem; }
.exp-end-title { font-size: clamp(2.4rem, 5vw, 3.8rem); font-style: italic; }
.exp-end-stats { margin: 1rem 0 0; font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; color: var(--fg-2); }
.exp-end-label { margin: 2.4rem 0 .9rem; font-size: .68rem; letter-spacing: .24em; text-transform: uppercase; color: var(--fg-3); }
.exp-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .55rem; }
.exp-chip {
  display: inline-block; padding: .55em 1.1em; border: 1px solid var(--line); border-radius: 99px;
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 400; transition: border-color .3s, color .3s;
}
.exp-chip:hover { border-color: var(--fg); }
.page-expedition .pager { margin-top: 0; }

/* ---------- map: current-step pulse (HTML marker) ---------- */
.exp-pulse { position: relative; width: 16px; height: 16px; pointer-events: none; }
.exp-pulse::before, .exp-pulse::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--accent);
}
.exp-pulse::before { box-shadow: 0 0 0 2.5px var(--bg), 0 1px 6px rgba(0, 0, 0, .3); }
.exp-pulse::after { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .exp-pulse::after { animation: exp-pulse 2s var(--ease) infinite; }
}
@keyframes exp-pulse { 0% { opacity: .55; transform: scale(1); } 100% { opacity: 0; transform: scale(3.4); } }

/* ---------- MapLibre controls, themed ---------- */
.exp-map .maplibregl-ctrl-group { background: var(--bg); border-radius: 2px; box-shadow: var(--shadow); }
.exp-map .maplibregl-ctrl-group:not(:empty) { box-shadow: 0 0 0 1px var(--line), var(--shadow); }
.exp-map .maplibregl-ctrl-group button + button { border-top-color: var(--line); }
.exp-map .maplibregl-ctrl button:not(:disabled):hover { background-color: var(--bg-2); }
.exp-map .maplibregl-ctrl-attrib, .exp-map .maplibregl-ctrl-attrib.maplibregl-compact {
  background: color-mix(in srgb, var(--bg) 82%, transparent); color: var(--fg-2); font: 300 10px/1.5 var(--f-ui);
}
.exp-map .maplibregl-ctrl-attrib a { color: var(--fg-2); }
.exp-map .maplibregl-cooperative-gesture-screen { font-family: var(--f-ui); font-size: .9rem; letter-spacing: .04em; }
html[data-theme="dark"] .exp-map .maplibregl-ctrl button .maplibregl-ctrl-icon,
html[data-theme="dark"] .exp-map .maplibregl-ctrl-attrib-button { filter: invert(1) hue-rotate(180deg); }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .exp-map .maplibregl-ctrl button .maplibregl-ctrl-icon,
  html:not([data-theme="light"]) .exp-map .maplibregl-ctrl-attrib-button { filter: invert(1) hue-rotate(180deg); }
}
.exp-map .maplibregl-popup-content {
  background: var(--bg); color: var(--fg); border-radius: 2px; box-shadow: var(--shadow); padding: .6rem .85rem .55rem;
  font: 300 .8rem/1.4 var(--f-ui);
}
.exp-map .maplibregl-popup-tip { border-top-color: var(--bg) !important; border-bottom-color: var(--bg) !important; }
.exp-tip-title { display: block; font-family: var(--f-display); font-size: 1.2rem; line-height: 1.15; }
.exp-tip-years { display: block; font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; color: var(--fg-3); margin-top: .2rem; }

/* ---------- index: world map of routes ---------- */
.section--expmap { padding-bottom: clamp(1.5rem, 4vw, 3rem); }
.band + .section--expmap { padding-top: 0; }
.exp-worldmap { position: relative; aspect-ratio: 4 / 3; max-height: 74vh; width: 100%; background: var(--bg-2); }
@media (min-width: 700px) { .exp-worldmap { aspect-ratio: 2 / 1; } }
.exp-soon { aspect-ratio: 2 / 1; }

/* ---------- index: timeline ---------- */
.exp-timeline { list-style: none; margin: 0; padding: 0 0 0 26px; position: relative; }
.exp-timeline::before { content: ""; position: absolute; left: 5px; top: .5rem; bottom: .5rem; width: 1px; background: var(--line); }
.exp-tl-item { position: relative; }
.exp-tl-item + .exp-tl-item { margin-top: clamp(2.2rem, 5vw, 3.6rem); }
.exp-tl-item::before {
  content: ""; position: absolute; left: -26px; top: 1.1rem; width: 11px; height: 11px; border-radius: 50%;
  background: var(--bg); border: 1.5px solid var(--route-c, var(--accent)); transition: background-color .3s, transform .3s;
}
.exp-tl-item:has(.is-hot)::before { background: var(--route-c, var(--accent)); transform: scale(1.25); }
.exp-card { display: grid; gap: 1rem; }
.exp-card-media { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 10; background: var(--bg-2); }
.exp-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease), opacity .6s; }
.exp-card-years {
  position: absolute; left: .8rem; top: .8rem; padding: .3em .8em .25em; border-radius: 99px;
  background: rgba(0, 0, 0, .42); color: #fff; font-size: .64rem; letter-spacing: .2em; font-weight: 400;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.exp-card-body { display: flex; flex-direction: column; gap: .45rem; border-bottom: 1px solid var(--line); padding-bottom: 1rem; transition: border-color .4s; }
.exp-card-title { font-family: var(--f-display); font-size: clamp(1.8rem, 3.4vw, 2.6rem); line-height: 1.08; transition: color .3s; }
.exp-card-sub { font-family: var(--f-display); font-style: italic; font-size: clamp(1.1rem, 1.8vw, 1.35rem); color: var(--fg-2); line-height: 1.35; }
.exp-card-stats { margin-top: .4rem; font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--fg-3); }
.exp-card .exp-pill { font-size: .52rem; transform: translateY(-.35em); }
@media (min-width: 760px) {
  .exp-card { grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); gap: clamp(1.5rem, 3.5vw, 3.2rem); align-items: center; }
  .exp-card-body { border-bottom: 0; padding-bottom: 0; }
  .exp-tl-item:nth-child(even) .exp-card { grid-template-columns: minmax(0, 9fr) minmax(0, 11fr); }
  .exp-tl-item:nth-child(even) .exp-card-media { order: 2; }
  .exp-tl-item::before { top: calc(50% - 6px); }
}
@media (hover: hover) {
  .exp-card:hover .exp-card-media img, .exp-card.is-hot .exp-card-media img { transform: scale(1.04); }
}
.exp-card:hover .exp-card-title, .exp-card.is-hot .exp-card-title { color: var(--accent); }

/* reading progress (expedition.js) */
.exp-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 450; pointer-events: none; opacity: 0; transition: opacity .4s; }
.exp-progress.is-visible { opacity: 1; }
.exp-progress-bar { display: block; height: 100%; background: var(--accent); transform-origin: 0 50%; transform: scaleX(0); }
.exp-chapter { position: fixed; left: 20px; bottom: 20px; z-index: 450; margin: 0; padding: .45em 1em; border-radius: 99px;
  background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--line); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-2);
  opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .4s; pointer-events: none; font-variant-numeric: tabular-nums; }
.exp-chapter.is-visible { opacity: 1; transform: none; }
@media (max-width: 899px) { .exp-chapter { display: none; } }
body.lb-open .exp-progress, body.lb-open .exp-chapter { display: none; }

.exp-step-videos { margin: 1.25rem 0; }

/* large screens: the map becomes a panel detached from the edges, its right side aligned with the header */
@media (min-width: 1300px) {
  .exp-mapcol { background: transparent; border-left: 0; }
  .exp-map, .exp-map.maplibregl-map { inset: 20px var(--gutter) 20px 20px; border-radius: 8px; border: 1px solid var(--line); }
}

/* ---------- mobile ---------- */
@media (max-width: 699px) {
  /* 3. step photos: one sideways strip instead of a tall gallery */
  .exp-step-photos .jg {
    display: flex; flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; gap: 4px;
    margin-right: calc(-1 * var(--gutter)); padding-right: var(--gutter); scrollbar-width: none;
  }
  .exp-step-photos .jg::-webkit-scrollbar { display: none; }
  .exp-step-photos .jg-item { flex: 0 0 auto; height: 230px; width: calc(230px * var(--r)); aspect-ratio: auto; scroll-snap-align: start; }
  /* the map band follows the header when it hides */
  .exp-mapcol { transition: top .35s var(--ease), height .5s var(--ease), min-height .5s var(--ease); }
  body.header-hidden .exp-mapcol { top: 0; }
}
/* 3. step picker (phones): a pill at the bottom, opens the list of steps */
.exp-jump { position: fixed; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); transform: translate(-50%, 12px); z-index: 450;
  max-width: calc(100vw - 90px); opacity: 0; pointer-events: none; transition: opacity .35s, transform .35s; }
.exp-jump.is-visible { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.exp-jump select { appearance: none; -webkit-appearance: none; max-width: 100%; font: inherit; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--fg); padding: .7em 2.2em .7em 1.1em; border-radius: 99px; border: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 90%, transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right .8em center / 14px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); text-overflow: ellipsis; }
@media (min-width: 900px) { .exp-jump { display: none; } }
body.lb-open .exp-jump { display: none; }