/* Scroll-controlled Spitsbergen route — Life Expeditions */

.route-page-hero{
  width:100%;
  padding:56px var(--section-x) 40px;
  background:#fff;
}

.route-page-hero-inner{
  width:100%;
  max-width:1220px;
  margin:0 auto;
}

.route-page-back{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:0 0 22px;
  color:var(--color-primary);
  text-decoration:none;
  font-size:13px;
  font-weight:700;
  letter-spacing:0.4px;
}

.route-page-back:hover{
  text-decoration:underline;
}

.route-page-kicker{
  margin:0 0 12px;
  font-size:12px;
  font-weight:800;
  letter-spacing:2.4px;
  text-transform:uppercase;
  color:var(--color-primary);
}

.route-page-hero h1{
  margin:0 0 14px;
  max-width:18ch;
  font-size:clamp(34px, 5vw, 52px);
  line-height:1.05;
  letter-spacing:-1.4px;
  color:#111;
}

.route-page-hero p{
  margin:0;
  max-width:58ch;
  font-size:18px;
  line-height:1.65;
  color:#4a5568;
}

/* Tall scroll stage: map pinned left; ocean continues as the same photo color. */
.route-stage{
  --route-ocean:#5668a1;
  position:relative;
  width:100%;
  height:340vh;
  background:var(--route-ocean);
  color:#fff;
}

.route-stage-sticky{
  --route-map-natural:calc(100vh * 3368 / 3592);
  --route-map-natural:calc(100dvh * 3368 / 3592);
  /* Cap width on mid desktops so the map crops a little and text keeps room */
  --route-map-w:min(var(--route-map-natural), 52vw);
  position:relative;
  top:0;
  height:100vh;
  height:100dvh;
  width:100%;
  overflow:hidden;
  box-sizing:border-box;
  background:var(--route-ocean);
}

/* Soft right vignette — same idea as gallery tile overlays */
.route-stage-sticky::after{
  content:"";
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  width:min(48vw, 680px);
  z-index:2;
  pointer-events:none;
  background:linear-gradient(
    90deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,.10) 50%,
    rgba(0,0,0,.28) 100%
  );
}

.route-stage-sticky.is-fixed{
  position:fixed;
  inset:0 auto auto 0;
  z-index:2;
}

.route-stage-sticky.is-bottom{
  position:absolute;
  top:auto;
  bottom:0;
  left:0;
  width:100%;
}

.route-stage-frame{
  position:relative;
  width:100%;
  height:100%;
  margin:0;
  padding:0;
}

/* Map glued left; ocean blue continues on the right */
.route-map{
  position:absolute;
  inset:0;
  display:flex;
  align-items:stretch;
  justify-content:flex-start;
  overflow:hidden;
  background:var(--route-ocean);
  box-sizing:border-box;
}

.route-map-fit{
  position:relative;
  height:100%;
  width:var(--route-map-w);
  max-height:100%;
  overflow:hidden;
  flex:0 0 auto;
  z-index:1;
}

.route-map-fit img,
.route-map img{
  height:100%;
  width:auto;
  max-width:none;
  /* Full-height natural aspect; east side crops when --route-map-w is capped */
  display:block;
  user-select:none;
  -webkit-user-drag:none;
  pointer-events:none;
}

/* Soft fade at the map's eastern ocean edge into the stage fill */
.route-map-fit::after{
  content:"";
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  width:40px;
  background:linear-gradient(
    90deg,
    rgba(86,104,161,0) 0%,
    rgba(86,104,161,.55) 70%,
    rgba(86,104,161,1) 100%
  );
  pointer-events:none;
  z-index:3;
}

.route-map-svg{
  position:absolute;
  top:0;
  left:0;
  height:100%;
  width:auto;
  aspect-ratio:3368 / 3592;
  overflow:visible;
  pointer-events:none;
  z-index:2;
}

.route-trail-ghost{
  fill:none;
  stroke:rgba(255,255,255,.32);
  stroke-width:0.35;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.route-trail-ghost.is-snowmobile{
  stroke:rgba(255,122,26,.45);
  stroke-width:0.38;
}

.route-trail{
  fill:none;
  stroke:#e10600;
  stroke-width:0.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.route-trail.is-snowmobile{
  stroke:#ff7a1a;
  stroke-width:0.48;
}

.route-legend{
  display:flex;
  flex-wrap:wrap;
  gap:14px 18px;
  margin:0;
  padding:0;
  list-style:none;
}

.route-legend li{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  font-weight:700;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:rgba(255,255,255,.72);
}

.route-legend-swatch{
  width:18px;
  height:1.5px;
  border-radius:999px;
  background:#e10600;
}

.route-legend-swatch.is-snowmobile{
  background:#ff7a1a;
}

.route-trail.is-ski{
  stroke:#e10600;
  stroke-width:0.42;
}

.route-marker{
  fill:#fff;
  stroke:#ff7a1a;
  stroke-width:0.28;
  filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.4));
  transition:stroke .15s ease;
}

.route-marker.is-ski{
  stroke:#e10600;
}

.route-marker.is-snowmobile{
  stroke:#ff7a1a;
}

.route-lyb,
.route-point{
  fill:#ff7a1a;
  stroke:#fff;
  stroke-width:0.22;
}

.route-point.is-ski{
  fill:#e10600;
}

.route-lyb-label,
.route-point-label{
  fill:#fff;
  font-size:2.05px;
  font-weight:600;
  letter-spacing:0.05px;
  paint-order:stroke fill;
  stroke:#0b1c28;
  stroke-width:0.45px;
  stroke-linejoin:round;
  pointer-events:none;
}

.route-lyb-label{
  text-anchor:end;
  font-size:1.85px;
}

.route-mode{
  margin:0;
  font-size:11px;
  font-weight:800;
  letter-spacing:1.6px;
  text-transform:uppercase;
  color:#bfe7ff;
}

/* Story floats on the ocean */
.route-side{
  position:absolute;
  top:0;
  /* Sit just after the (possibly capped) map */
  left:calc(var(--route-map-w) + 28px);
  right:clamp(16px, 2.5vw, 36px);
  bottom:0;
  z-index:3;
  width:auto;
  max-width:none;
  display:flex;
  flex-direction:column;
  min-width:0;
  padding:22px 24px 20px 0;
  background:transparent;
  box-sizing:border-box;
  pointer-events:none;
}

.route-side-chrome{
  display:flex;
  flex-direction:column;
  gap:10px;
  flex:0 0 auto;
  margin-bottom:8px;
}

.route-title{
  margin:0;
  font-size:clamp(22px, 2.6vw, 32px);
  line-height:1.1;
  letter-spacing:-0.6px;
  font-weight:700;
  color:#fff;
  text-shadow:0 1px 8px rgba(8,24,36,.25);
}

.route-stats{
  position:absolute;
  z-index:4;
  /* Over the visible map area */
  left:calc(var(--route-map-w) * 0.78);
  bottom:clamp(56px, 10vh, 100px);
  display:flex;
  flex-direction:row;
  align-items:flex-end;
  gap:28px;
  margin:0;
  width:auto;
  max-width:none;
  pointer-events:none;
}

.route-stat{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
  min-width:4.5ch;
  text-align:left;
}

.route-stat strong{
  font-size:clamp(26px, 3vw, 36px);
  line-height:1;
  letter-spacing:-0.8px;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  color:#fff;
  text-shadow:0 1px 8px rgba(8,24,36,.25);
}

.route-stat span{
  font-size:11px;
  font-weight:700;
  letter-spacing:1.4px;
  text-transform:uppercase;
  color:rgba(255,255,255,.65);
  text-shadow:0 1px 8px rgba(8,24,36,.25);
}

.route-story{
  position:relative;
  flex:1 1 auto;
  min-height:0;
  overflow:hidden;
  mask-image:linear-gradient(
    180deg,
    transparent 0%,
    #000 12%,
    #000 58%,
    transparent 92%
  );
  -webkit-mask-image:linear-gradient(
    180deg,
    transparent 0%,
    #000 12%,
    #000 58%,
    transparent 92%
  );
}

.route-story-track{
  display:flex;
  flex-direction:column;
  gap:32px;
  padding:22vh 0 45vh;
  will-change:transform;
}

.route-story-beat{
  margin:0;
  opacity:0.12;
  transition:none;
}

.route-story-beat.is-active{
  opacity:1;
}

.route-story-beat h3{
  margin:0 0 8px;
  font-size:clamp(20px, 2.3vw, 27px);
  line-height:1.15;
  letter-spacing:-0.5px;
  font-weight:700;
  text-shadow:0 1px 8px rgba(8,24,36,.25);
}

.route-story-beat p{
  margin:0;
  font-size:clamp(14px, 1.35vw, 15px);
  line-height:1.65;
  color:rgba(255,255,255,.88);
  max-width:52ch;
  text-shadow:0 1px 8px rgba(8,24,36,.25);
}

.route-story-beat p + p{
  margin-top:14px;
}

.route-live{
  text-shadow:0 1px 8px rgba(8,24,36,.25);
}

.route-live{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:0;
  font-size:12px;
  font-weight:700;
  letter-spacing:1.4px;
  text-transform:uppercase;
  color:#e10600;
}

.route-live-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#e10600;
  box-shadow:0 0 0 0 rgba(225,6,0,.55);
  animation:route-live-pulse 2.2s ease-out infinite;
}

@keyframes route-live-pulse{
  0%{ box-shadow:0 0 0 0 rgba(225,6,0,.55); }
  70%{ box-shadow:0 0 0 10px rgba(225,6,0,0); }
  100%{ box-shadow:0 0 0 0 rgba(225,6,0,0); }
}

@media (prefers-reduced-motion: reduce){
  .route-live-dot{ animation:none; }
  .route-trail,
  .route-marker,
  .route-story-beat{
    transition:none !important;
  }
}

@media (max-width: 1200px) and (min-width: 901px){
  .route-stage-sticky{
    --route-map-w:min(var(--route-map-natural), 44vw);
  }

  .route-side{
    left:calc(var(--route-map-w) + 20px);
  }

  .route-story-beat p{
    font-size:clamp(14px, 1.5vw, 15px);
  }
}

@media (max-width: 900px){
  .route-page-hero{
    padding:40px var(--section-x-mobile) 28px;
  }

  .route-stage{
    height:380vh;
  }

  .route-stage-sticky{
    --route-map-w:100%;
  }

  .route-map{
    justify-content:center;
  }

  .route-map-fit{
    height:100%;
    width:100%;
    max-width:none;
    overflow:hidden;
  }

  /* Hide the desktop east-edge fade — both sides crop on mobile */
  .route-map-fit::after{
    display:none;
  }

  .route-map-fit img,
  .route-map img,
  .route-map-svg{
    position:absolute;
    top:0;
    left:50%;
    height:100%;
    width:auto;
    max-width:none;
    aspect-ratio:3368 / 3592;
    /* Landmass sits ~40% across the asset — pin that to the viewport center */
    transform:translateX(-40%);
    object-fit:unset;
  }

  .route-map-svg{
    overflow:visible;
    pointer-events:none;
    z-index:2;
  }

  .route-stats{
    left:clamp(14px, 4vw, 28px);
    bottom:clamp(18px, 3vh, 36px);
    flex-direction:row;
    gap:22px;
  }

  .route-stat{
    align-items:flex-start;
  }

  .route-stat strong{
    font-size:26px;
  }

  .route-side{
    left:0;
    right:0;
    width:100%;
    max-width:none;
    padding:clamp(18px, 4vh, 32px) var(--section-x-mobile) clamp(72px, 12vh, 110px);
    background:transparent;
    justify-content:flex-start;
  }

  .route-stage-sticky::after{
    width:100%;
    background:linear-gradient(
      180deg,
      rgba(0,0,0,.58) 0%,
      rgba(0,0,0,.44) 28%,
      rgba(0,0,0,.40) 55%,
      rgba(0,0,0,.68) 100%
    );
  }

  .route-side-chrome{
    display:flex;
    margin-bottom:10px;
  }

  .route-live{
    display:inline-flex;
  }

  .route-title{
    font-size:clamp(24px, 6.5vw, 30px);
  }

  .route-story{
    flex:1 1 auto;
    max-height:none;
    min-height:0;
    mask-image:linear-gradient(
      180deg,
      transparent 0%,
      #000 8%,
      #000 72%,
      transparent 96%
    );
    -webkit-mask-image:linear-gradient(
      180deg,
      transparent 0%,
      #000 8%,
      #000 72%,
      transparent 96%
    );
  }

  .route-story-track{
    gap:28px;
    padding:12vh 0 40vh;
  }

  .route-story-beat h3{
    font-size:clamp(22px, 6vw, 26px);
  }

  .route-story-beat p{
    font-size:16px;
    max-width:none;
  }
}

@media (max-width: 520px){
  .route-trail-ghost{
    stroke-width:0.38;
  }

  .route-trail,
  .route-trail.is-ski,
  .route-trail.is-snowmobile{
    stroke-width:0.55;
  }
}