/* =========================================================
   EXPEDITIONS PAGE — route-map hero + the Motorcycle / 4x4 bar
   ---------------------------------------------------------
   Loaded by expeditions.html only, after main.css and
   mobile.css, so the phone rules at the bottom of this file
   are the last word for these classes.

   The look: one moody mountain photograph with the raid
   network drawn over it — dashed trails, town pins, and a
   round photo marker for each route. The title sits low on
   the left; a quiet "Plan a Private Convoy" sits low right.
   Marker positions are set in expeditions.html (--x, --y).
   ========================================================= */

.rm-hero{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: max(100svh, 46rem);
  display: flex; flex-direction: column; justify-content: flex-end;
  color: var(--dark-ink);
  background: var(--dark);
}

/* ---- the photograph, cooled and darkened like an old print ---- */
.rm-media{ position: absolute; inset: 0; z-index: -1; }
.rm-media img{
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 40%;
  filter: saturate(.55) contrast(1.08) brightness(.78);
}
.rm-media::after{
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgb(var(--dark-rgb) / .75) 0, rgb(var(--dark-rgb) / 0) 8rem),
    linear-gradient(90deg, rgb(var(--dark-rgb) / .72) 0%, rgb(var(--dark-rgb) / .25) 42%, rgb(var(--dark-rgb) / 0) 70%),
    linear-gradient(0deg, rgb(var(--dark-rgb) / .85) 0%, rgb(var(--dark-rgb) / 0) 38%);
}

/* ---- the map layer: trails, towns and route markers ---- */
.rm-map{ position: absolute; inset: 0; z-index: 1; }
.rm-trails{ position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.rm-trail, .rm-line{
  fill: none;
  vector-effect: non-scaling-stroke;     /* same line weight at any size */
  stroke-linecap: round;
}
.rm-trail{
  stroke: rgb(var(--on-dark-rgb) / .82);
  stroke-width: 1.6;
  stroke-dasharray: 5 6;
  animation: rmTrailIn 1.4s .2s ease-out both;
}
.rm-line{ stroke: rgb(var(--on-dark-rgb) / .45); stroke-width: 1.2; }
@keyframes rmTrailIn{ from{ opacity: 0; } to{ opacity: 1; } }

/* towns: a small pin with the name beside it */
.rm-town{
  position: absolute; left: var(--x); top: var(--y);
  transform: translate(-6px, -50%);
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-mono); font-size: .58rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgb(var(--on-dark-rgb) / .8);
  text-shadow: 0 1px 3px rgb(0 0 0 / .8);
  white-space: nowrap;
  pointer-events: none;
}
.rm-town::before{
  content: ""; flex: none;
  width: 12px; height: 12px;
  border: 2px solid var(--dark-ink);
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: rgb(var(--dark-rgb) / .5);
}
.rm-town-left{ flex-direction: row-reverse; transform: translate(calc(-100% + 6px), -50%); }

/* a route: round photo + two-line label */
.rm-stop{
  --size: 56px;
  position: absolute; left: var(--x); top: var(--y);
  transform: translate(calc(var(--size) / -2), calc(var(--size) / -2));
  display: flex; align-items: center; gap: .75rem;
  color: var(--dark-ink);
  text-decoration: none;
  width: max-content;                    /* never squeezed by the right edge */
  animation: rmStopIn .6s .5s ease-out both;
}
.rm-stop[hidden]{ display: none; }
.rm-left{
  flex-direction: row-reverse; text-align: right;
  transform: translate(calc(-100% + var(--size) / 2), calc(var(--size) / -2));
}
@keyframes rmStopIn{ from{ opacity: 0; } to{ opacity: 1; } }

.rm-thumb{
  position: relative; flex: none;
  width: var(--size); height: var(--size);
  border-radius: 50%;
  border: 2px solid var(--dark-ink);
  box-shadow: 0 6px 18px rgb(0 0 0 / .5);
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.rm-thumb img{
  width: 100%; height: 100%; border-radius: 50%;
  object-fit: cover;
  filter: saturate(.7);
}
/* a slow ring breathing out from every marker */
.rm-thumb::after{
  content: ""; position: absolute; inset: -2px;
  border-radius: 50%;
  border: 1px solid rgb(var(--on-dark-rgb) / .7);
  animation: rmRing 3.2s ease-out infinite;
  pointer-events: none;
}
@keyframes rmRing{
  0%  { transform: scale(1);   opacity: .8; }
  70% { transform: scale(1.7); opacity: 0; }
  100%{ transform: scale(1.7); opacity: 0; }
}

.rm-label{ display: grid; gap: .2rem; text-shadow: 0 1px 4px rgb(0 0 0 / .85); }
.rm-k{
  white-space: nowrap;
  font-family: var(--font-mono); font-size: .56rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: rgb(var(--on-dark-rgb) / .72);
}
.rm-name{
  max-width: 13rem;
  font-family: var(--font-display); font-stretch: var(--wide); font-weight: 800;
  font-size: .74rem; line-height: 1.15; letter-spacing: .02em; text-transform: uppercase;
  transition: color .3s var(--ease);
}

.rm-stop:hover .rm-thumb,
.rm-stop:focus-visible .rm-thumb{ border-color: var(--rust); transform: scale(1.08); }
.rm-stop:hover .rm-name,
.rm-stop:focus-visible .rm-name{ color: var(--rust-soft); }
.rm-stop:focus-visible{ outline: none; }
.rm-stop:focus-visible .rm-thumb{ box-shadow: 0 0 0 3px var(--dark), 0 0 0 5px var(--rust); }

/* ---- the words, bottom-left ----
   The column spans the full width, so it lets clicks through to the
   markers except on its own text and button. */
.rm-copy{
  position: relative; z-index: 2;
  width: 100%;                           /* not shrink-wrapped by the flex column */
  padding-bottom: clamp(3rem, 8vh, 5rem);
  pointer-events: none;
}
.rm-copy > *{ pointer-events: auto; max-width: 34rem; }
.rm-eyebrow{
  font-family: var(--font-mono); font-size: .66rem; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase;
  color: rgb(var(--on-dark-rgb) / .7);
}
.rm-title{
  margin-top: .9rem;
  font-family: var(--font-display);
  font-stretch: 100%;
  font-weight: 600;
  font-size: clamp(2.8rem, 5.4vw, 5rem);
  line-height: .98;
  letter-spacing: -.025em;
  color: #fff;
}
.rm-lede{
  margin-top: 1.1rem;
  max-width: 40ch;
  font-size: .95rem; line-height: 1.55;
  color: rgb(var(--on-dark-rgb) / .8);
}
.rm-actions{ margin-top: 1.6rem; }
.rm-btn{
  display: inline-block;
  padding: .85rem 1.4rem;
  font-family: var(--font-mono); font-size: .66rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: #fff;
  border: 1px solid rgb(var(--on-dark-rgb) / .8);
  transition: background-color .25s var(--ease), color .25s var(--ease);
}
.rm-btn:hover, .rm-btn:focus-visible{ background: #fff; color: var(--dark); }

/* ---- bottom-right: the second, quieter door ---- */
.rm-private{
  position: absolute; z-index: 2;
  right: var(--gutter);
  bottom: clamp(3rem, 8vh, 5rem);
  padding: 1rem 1.7rem;
  font-family: var(--font-mono); font-size: .66rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgb(var(--on-dark-rgb) / .78);
  background: rgb(var(--dark-rgb) / .72);
  border: 1px solid var(--dark-line);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: background-color .25s var(--ease), color .25s var(--ease);
}
.rm-private:hover, .rm-private:focus-visible{ background: var(--rust); color: var(--on-accent); }

/* ---- the Motorcycle / 4x4 switch, on its own bar under the hero ---- */
.exp-kind-bar{
  scroll-margin-top: 5rem;
  padding-block: clamp(1.6rem, 3vw, 2.4rem);
  border-bottom: 1px solid var(--line);
  background: var(--paper-2);
}
.exp-kind-bar .raid-kind-switch{ max-width: 46rem; margin-inline: auto; }
.exp-kind-bar + .section{ padding-top: clamp(2.5rem, 5vw, 4rem) !important; }


/* ---------- laptops and tablets ---------- */
@media (max-width: 1100px){
  .rm-stop{ --size: 48px; }
  .rm-name{ max-width: 9rem; font-size: .66rem; }
  .rm-k{ font-size: .5rem; }
}

/* ---------- phones ----------
   The map keeps to the top half, above the title, and the markers drop
   their labels: a numbered photo is enough to tap. */
@media (max-width: 768px){
  .rm-hero{ min-height: 100svh; }
  .rm-media img{ object-position: 30% 40%; }
  .rm-map{ inset: calc(var(--m-top-h, 4rem) + 1.2rem) 6% 46% 6%; }
  .rm-stop, .rm-left{
    --size: 42px;
    transform: translate(calc(var(--size) / -2), calc(var(--size) / -2));
  }
  .rm-label{
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;   /* still read aloud */
  }
  .rm-town{ font-size: .5rem; }
  .rm-copy{ padding-bottom: 5.6rem; }
  .rm-title{ font-size: clamp(2.4rem, 12vw, 3.2rem); }
  .rm-lede{ font-size: .88rem; }
  .rm-actions{ margin-top: 1.1rem; }
  .rm-private{ left: var(--gutter); right: auto; bottom: 1.6rem; padding: .8rem 1.2rem; }
  .exp-kind-bar{ padding-block: 1rem; }
}

@media (prefers-reduced-motion: reduce){
  .rm-trail, .rm-stop{ animation: none; }
  .rm-thumb::after{ animation: none; opacity: 0; }
  .rm-thumb{ transition: none; }
}