/* ==========================================================================
   Reizen overview - "trip map" (reizen.html and the homepage, index.html)
   Loads after styles.css and theme-groen.css. All selectors are scoped to
   trip-map__* (plus .trips-head, the heading above the map) so nothing
   leaks into other parts of a page. Both pages use the same markup; keep
   them equal.

   One swept ice-rink line (the same path as .baanlijn, stretched) with a stop
   per trip, and below it one horizontal row with every trip side by side.
   - The row is plain CSS scroll-snap, so it can be swiped or scrolled with or
     without JavaScript. The first trip lines up with the page content, the
     next one peeks in on the right and the row runs on to the screen edge:
     that is what shows there are more trips.
   - Without JavaScript the stops are plain anchor links to the panels.
   - With JavaScript (js/reizen.js) the stops, the row, the previous/next
     buttons and the "1 / 8" counter stay in sync, as a carousel.
   - Phones: stops and current trip fit one screen (see "Phones" below).
   ========================================================================== */

/* Heading and short intro above the trip map ("Onze schaatsreizen"). */
.trips-head { background: var(--paper); padding-block: 1.5rem 0.25rem; }
.trips-head .h-section { margin-top: 0; text-wrap: balance; }
.trips-head .lede-text { text-wrap: pretty; }

/* Reizen pages only: the short intro sits below the row of trips, under the
   trip buttons. The section's own bottom padding stays below it. */
.trip-map__outro { margin-top: 1.5rem; }
.trip-map__outro .lede-text { margin-top: 0; text-wrap: pretty; }
@media (min-width: 48rem) {
  .trip-map__outro { margin-top: 2rem; }
}

.trip-map {
  --ice: #e7eef1;          /* swept-lane tint and photo placeholder */
  --line-h: 2.75rem;       /* height of the line band above the labels */
  --stop-w: 7.75rem;       /* width of one stop in the swipe strip */
  --gap: 0.75rem;          /* space between two trips in the row */
  /* Width of one trip. In the row, 100% is the width of the page content.
     Phones: the next trip peeks in about 2.75rem (3.5rem minus the gap),
     enough to show its photo: that is the cue that the row swipes. */
  --panel-w: calc(100% + var(--pad) - 3.5rem);
  /* Distance from the screen edge to the page content, the same as .wrap.
     Used in padding and scroll-padding, where 100% is the full width. */
  --row-inset: max(var(--pad), calc((100% - var(--wrap)) / 2 + var(--pad)));
  /* Scroll padding on the right that leaves a snap area just one trip wide
     (100% - inset - trip width, a hair more). Anchor jumps and focus
     scrolling align "nearest"; this makes them line a trip up at the start
     instead of stopping halfway and snapping to the trip before it. */
  --snap-end: calc(3.5rem - 2px);
  background: var(--paper);
  padding-block: 1.25rem 5rem;
}

/* --------------------------------------------------------------------------
   The line with the stops
   Mobile first: a horizontal swipe strip. From 64rem all stops fit next to
   each other and the strip becomes a static line.
   -------------------------------------------------------------------------- */
.trip-map__rail {
  --fade-start: 0px;
  --fade-end: 3.5rem;
  position: relative;
  margin-inline: calc(-1 * var(--pad));
  padding: 0.5rem var(--pad) 0.75rem;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--pad);
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-start), #000 calc(100% - var(--fade-end)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-start), #000 calc(100% - var(--fade-end)), transparent 100%);
}
.trip-map__rail::-webkit-scrollbar { display: none; }

/* Edge fades follow the scroll position once js/reizen.js runs. */
.trip-map.has-more-start .trip-map__rail { --fade-start: 2.5rem; }
.trip-map.is-ready:not(.has-more-end) .trip-map__rail { --fade-end: 0px; }

/* A mouse gets a thin scrollbar as an extra cue; touch keeps the clean strip. */
@media (pointer: fine) {
  .trip-map__rail { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
}

.trip-map__track {
  position: relative;
  width: max-content;
}

.trip-map__line {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--line-h);
  overflow: visible;
  pointer-events: none;
}
.trip-map__line path {
  fill: none;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.trip-map__lane { stroke: var(--ice); stroke-width: 18; }
.trip-map__stroke { stroke: url(#tripMapGradient); stroke-width: 2; }

/* One equal column per stop, without gaps, so every stop centre sits at a
   known point of the path. The columns are implicit (one per item), so the
   number of trips on a page needs no setting, with or without JavaScript. */
.trip-map__stops {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--stop-w);
}
.trip-map__item {
  display: flex;
  scroll-snap-align: start;
}

/* Height of the path at each stop centre, as a share of the line band.
   Measured on "M0,20 C100,4 160,36 260,18 C310,8 350,26 400,14" in a
   viewBox from y=8 to y=32, at x = (i - 0.5) * 400 / count for stop i.
   :nth-child(i):nth-last-child(count - i + 1) picks stop i of a list with
   exactly that many stops. Another number of trips needs its own set. */

/* Nine stops (x = 22.2, 66.7, 111.1, 155.6, 200, 244.4, 288.9, 333.3 and 377.8), with --stop-color
   spread over the logo gradient like the eight-stop set. */
.trip-map__item:nth-child(1):nth-last-child(9) { --y: 0.381; --stop-color: #002845; }
.trip-map__item:nth-child(2):nth-last-child(8) { --y: 0.309; --stop-color: #36728a; }
.trip-map__item:nth-child(3):nth-last-child(7) { --y: 0.417; --stop-color: #6bbbd0; }
.trip-map__item:nth-child(4):nth-last-child(6) { --y: 0.583; --stop-color: #f3ecd8; }
.trip-map__item:nth-child(5):nth-last-child(5) { --y: 0.652; --stop-color: #fff3bd; }
.trip-map__item:nth-child(6):nth-last-child(4) { --y: 0.519; --stop-color: #ffe09a; }
.trip-map__item:nth-child(7):nth-last-child(3) { --y: 0.287; --stop-color: #ffcc77; }
.trip-map__item:nth-child(8):nth-last-child(2) { --y: 0.375; --stop-color: #ffa148; }
.trip-map__item:nth-child(9):nth-last-child(1) { --y: 0.400; --stop-color: #ff761a; }

/* Eight stops (x = 25, 75, 125, 175, 225, 275, 325 and 375). Each stop also
   gets --stop-color: its own point on the same five-colour logo gradient as
   .trip-map__stroke (see the <linearGradient> in the markup), so the current
   marker and name pick up the line's colour at their own position. */
.trip-map__item:nth-child(1):nth-last-child(8) { --y: 0.370; --stop-color: #002845; }
.trip-map__item:nth-child(2):nth-last-child(7) { --y: 0.319; --stop-color: #3d7c94; }
.trip-map__item:nth-child(3):nth-last-child(6) { --y: 0.470; --stop-color: #92c9d2; }
.trip-map__item:nth-child(4):nth-last-child(5) { --y: 0.633; --stop-color: #f8efcd; }
.trip-map__item:nth-child(5):nth-last-child(4) { --y: 0.606; --stop-color: #ffe8a9; }
.trip-map__item:nth-child(6):nth-last-child(3) { --y: 0.323; --stop-color: #ffd281; }
.trip-map__item:nth-child(7):nth-last-child(2) { --y: 0.348; --stop-color: #ffa74f; }
.trip-map__item:nth-child(8):nth-last-child(1) { --y: 0.409; --stop-color: #ff761a; }

/* Seven stops (x = 28.6, 85.7, 142.9, 200, 257.1, 314.3 and 371.4). */
.trip-map__item:nth-child(1):nth-last-child(7) { --y: 0.357; }
.trip-map__item:nth-child(2):nth-last-child(6) { --y: 0.339; }
.trip-map__item:nth-child(3):nth-last-child(5) { --y: 0.539; }
.trip-map__item:nth-child(4):nth-last-child(4) { --y: 0.652; }
.trip-map__item:nth-child(5):nth-last-child(3) { --y: 0.4375; }
.trip-map__item:nth-child(6):nth-last-child(2) { --y: 0.316; }
.trip-map__item:nth-child(7):nth-last-child(1) { --y: 0.418; }

/* Six stops (x = 33.3, 100, 166.7, 233.3, 300 and 366.7). */
.trip-map__item:nth-child(1):nth-last-child(6) { --y: 0.342; }
.trip-map__item:nth-child(2):nth-last-child(5) { --y: 0.379; }
.trip-map__item:nth-child(3):nth-last-child(4) { --y: 0.615; }
.trip-map__item:nth-child(4):nth-last-child(3) { --y: 0.574; }
.trip-map__item:nth-child(5):nth-last-child(2) { --y: 0.288; }
.trip-map__item:nth-child(6):nth-last-child(1) { --y: 0.426; }

/* Five stops (x = 40, 120, 200, 280 and 360). */
.trip-map__item:nth-child(1):nth-last-child(5) { --y: 0.326; }
.trip-map__item:nth-child(2):nth-last-child(4) { --y: 0.451; }
.trip-map__item:nth-child(3):nth-last-child(3) { --y: 0.652; }
.trip-map__item:nth-child(4):nth-last-child(2) { --y: 0.305; }
.trip-map__item:nth-child(5):nth-last-child(1) { --y: 0.429; }

.trip-map__stop {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: calc(var(--line-h) + 0.55rem) 0.55rem 0.6rem;
  border-radius: 1rem;
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
}
.trip-map__stop:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: -3px;
}

.trip-map__marker {
  position: absolute;
  top: calc(var(--y, 0.5) * var(--line-h));
  left: 50%;
  width: 0.8rem;
  height: 0.8rem;
  margin: -0.4rem 0 0 -0.4rem;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--ink);
  transition: transform 0.22s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.trip-map__name {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.02rem;
  line-height: 1.2;
  letter-spacing: -0.005em;
  text-wrap: balance;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
}
.trip-map__country {
  margin-top: 0.15rem;
  font-size: 0.82rem;
  color: var(--ink-soft);
}
.trip-map__price {
  margin-top: 0.4rem;
  font-family: var(--display);
  font-weight: 500;
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Current stop: a filled warm marker with a ring, warm name with underline.
   Colour is never the only cue (size and underline change too). */
.trip-map__stop[aria-current="true"] .trip-map__marker {
  background: var(--stop-color, var(--warm-deep));
  border-color: var(--stop-color, var(--warm-deep));
  transform: scale(1.45);
  box-shadow: 0 0 0 3px var(--paper), 0 0 0 4.5px var(--stop-color, var(--warm-deep));
}
.trip-map__stop[aria-current="true"] .trip-map__name {
  color: var(--stop-color, var(--warm-deep));
  text-decoration-color: currentColor;
}

@media (hover: hover) {
  .trip-map__stop:hover .trip-map__marker { border-color: var(--stop-color, var(--warm-deep)); transform: scale(1.2); }
  .trip-map__stop[aria-current="true"]:hover .trip-map__marker { transform: scale(1.45); }
  .trip-map__stop:hover .trip-map__name { text-decoration-color: var(--border); }
  .trip-map__stop[aria-current="true"]:hover .trip-map__name { text-decoration-color: currentColor; }
}

/* --------------------------------------------------------------------------
   Previous / next and the "1 / 8" counter
   Only with JavaScript. The .js class (set in the page head) keeps their
   space from the start, so the row does not jump when reizen.js runs.
   Phones keep only the hidden live text (see "Phones" below).
   -------------------------------------------------------------------------- */
.trip-map__controls { display: none; }
.js .trip-map__controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0;
  visibility: hidden;
}
.trip-map.is-ready .trip-map__controls { visibility: visible; }

.trip-map__count {
  margin-right: 0.55rem;
  font-family: var(--display);
  font-size: 0.95rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
  white-space: nowrap;
}
.trip-map__count-now { color: var(--ink); font-weight: 700; }

.trip-map__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.18s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.18s ease;
}
.trip-map__nav svg {
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.trip-map__nav:disabled { opacity: 0.28; cursor: default; }
.trip-map__nav:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.trip-map__nav:not(:disabled):active { transform: scale(0.93); }
@media (hover: hover) {
  .trip-map__nav:not(:disabled):hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
}

/* --------------------------------------------------------------------------
   The row of trips
   Full width of the screen; its padding lines the first trip up with the
   page content. The room after the last trip lets it line up there too.
   -------------------------------------------------------------------------- */
.trip-map__panels {
  display: flex;
  align-items: flex-start;
  gap: var(--gap);
  margin-top: 1.25rem;
  padding: 0.35rem var(--row-inset) 0.75rem;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--row-inset) var(--snap-end);
  scrollbar-width: none;
  /* A trip that moves past the page edge on the left fades out, so no
     cut-off text lingers there; the peek on the right stays crisp. */
  -webkit-mask-image: linear-gradient(90deg, transparent calc(var(--row-inset) - var(--gap)), #000 var(--row-inset));
  mask-image: linear-gradient(90deg, transparent calc(var(--row-inset) - var(--gap)), #000 var(--row-inset));
}
.trip-map__panels::-webkit-scrollbar { display: none; }
.trip-map__panels::after {
  content: "";
  flex: 0 0 calc(100% - var(--panel-w) - var(--gap));
}
.js .trip-map__panels { margin-top: 0.6rem; }

.trip-map__panel {
  /* Containing block for anything absolutely positioned inside a trip (the
     visually hidden .sr-only texts in the group trip buttons), so it stays
     inside the scrolling row instead of widening the page. */
  position: relative;
  flex: 0 0 var(--panel-w);
  min-width: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  /* Deep links (#orsa, #lulea, ...) without JavaScript land with the line
     still in view below the header (header + line + gap); js/reizen.js
     places the page itself. */
  scroll-margin-top: 17.25rem;
}

/* Photo composition: one main photo with the smaller ones overlapping its
   lower edge (cut out with a paper-coloured outline, no shadow). A portrait
   photo hangs furthest below, a landscape one sits a little higher next to
   it. Every other trip is mirrored: the odd ones, so Punkaharju (first)
   shows the cabin photo on the left and Orsa (second) keeps its original,
   unmirrored layout. */
.trip-map__media {
  --hang: 1.35rem;         /* how far the smaller photos hang below the main */
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto var(--hang);
  align-content: start;
  align-self: start;
}
.trip-map__photo {
  display: block;
  position: relative;
  overflow: hidden;
  background: var(--ice);
}
.trip-map__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.trip-map__photo--main {
  grid-column: 1 / -1;
  grid-row: 1;
  aspect-ratio: 16 / 10;
  border-radius: 1.25rem;
}
/* "Fly & drive" label: a slim paper pill on one line in the top corner of
   the main photo, on the side away from the side photo (top-left on even
   trips, top-right on the mirrored odd ones), clear of the smaller photos
   that overlap the lower edge. Compact on small screens to cover less of
   the photo. */
.trip-map__incl {
  grid-column: 1 / -1;
  grid-row: 1;
  align-self: start;
  justify-self: start;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  max-width: calc(100% - 1rem);
  margin: 0.45rem;
  padding: 0.16rem 0.48rem 0.16rem 0.4rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  font-size: 0.65rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}
.trip-map__panel:nth-child(odd) .trip-map__incl { justify-self: end; }
.trip-map__incl svg {
  flex: none;
  width: 1.8rem;
  height: 0.72rem;
  fill: none;
  stroke: var(--warm-deep);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (min-width: 48rem) {
  .trip-map__incl {
    gap: 0.4rem;
    margin: 0.9rem;
    padding: 0.3rem 0.7rem 0.3rem 0.55rem;
    font-size: 0.78rem;
  }
  .trip-map__incl svg { width: 2.3rem; height: 1rem; }
}
.trip-map__photo--side,
.trip-map__photo--below {
  z-index: 1;
  grid-row: 1 / 3;
  align-self: end;
  outline: 0.3rem solid var(--paper);
}
.trip-map__photo--side {
  grid-column: 9 / -1;
  margin-right: 0.8rem;
  aspect-ratio: 4 / 5;
  border-radius: 0.9rem;
}
.trip-map__photo--square { aspect-ratio: 1 / 1; }
.trip-map__photo--below {
  grid-column: 5 / 9;
  margin: 0 0.75rem calc(var(--hang) * 0.55) 0.25rem;
  aspect-ratio: 3 / 2;
  border-radius: 0.8rem;
}
.trip-map__panel:nth-child(odd) .trip-map__photo--side {
  grid-column: 1 / 5;
  margin: 0 0 0 0.8rem;
}
.trip-map__panel:nth-child(odd) .trip-map__photo--below {
  grid-column: 5 / 9;
  margin: 0 0.25rem calc(var(--hang) * 0.55) 0.75rem;
}

/* Two photos only (Weissensee has no third one): the one smaller photo is a
   little larger, so the pair still feels balanced. */
.trip-map__media:not(:has(.trip-map__photo--below)) .trip-map__photo--side { grid-column: 8 / -1; }
.trip-map__panel:nth-child(odd) .trip-map__media:not(:has(.trip-map__photo--below)) .trip-map__photo--side { grid-column: 1 / 6; }

/* Crops for photos whose subject is not in the middle. */
#weissensee .trip-map__photo--main img { object-position: 50% 30%; }
#falun .trip-map__photo--main img { object-position: 50% 20%; }
#wellness .trip-map__photo--side img { object-position: 50% 70%; }
#salen .trip-map__photo--side img { object-position: 40% 50%; }
/* The skaters sit right of centre, where the side photo covers them; the
   photo has no text, so mirror it to bring them into view. object-position
   is already at its edge, so a 10% zoom anchored on the visible right edge
   (origin 100% / 2.1 for scale -1.1) shifts them a little further left. */
#salen .trip-map__photo--main img { transform: scale(-1.1, 1.1); transform-origin: calc(100% / 2.1) 50%; object-position: 0% 50%; }

/* Text */
.trip-map__body { padding-top: 0.75rem; }
.trip-map__region {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--warm-deep);
}
.trip-map__title {
  margin-top: 0.15rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.65rem;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
/* Same lettering as the intro paragraph above the map (.lede-text): body
   size and line height at every width, in the soft ink colour. */
.trip-map__text {
  margin-top: 0.5rem;
  max-width: 54ch;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink-soft);
  text-wrap: pretty;
}
/* A trip's text is a few short paragraphs. */
.trip-map__text p + p { margin-top: 0.5em; }

.trip-map__facts {
  margin: 0.8rem 0 0;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  column-gap: 1rem;
}
/* Phones: a two-column sheet, label above value. From 48rem one fact per
   line, label left and value right. */
.trip-map__facts > div {
  padding-block: 0.35rem 0.4rem;
  border-top: 1px solid var(--border);
}
.trip-map__facts dt { font-size: 0.76rem; line-height: 1.35; color: var(--ink-soft); }
.trip-map__facts dd { margin: 0.05rem 0 0; font-size: 0.84rem; line-height: 1.35; font-weight: 500; }

.trip-map__actions {
  margin-top: 0.9rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.9rem;
}
/* Phones: a slightly smaller button, so button and link share one line. */
.trip-map__actions .btn { padding: 0.72rem 1.05rem; font-size: 0.88rem; }
.trip-map__actions .link-arrow {
  min-height: 2.75rem;
  font-size: 0.84rem;
  color: var(--warm-deep);
}

/* --------------------------------------------------------------------------
   Phones (below 48rem): one screen
   With the line just below the header, the stops and the current trip down
   to its "Bekijk deze reis" button fit on one screen (the small viewport,
   browser bars shown). Type and spacing stay exactly as above; the room
   comes from:
   - no previous/next buttons and no visible "1 / 8" counter (swiping and
     the stops still work; the hidden live text still names the trip);
   then js/reizen.js, each step only when the one before is not enough:
   1. clamping a long text to the whole lines that fit (at least two), with
      a "Lees meer" button right after it (.is-clamped);
   2. folding the facts behind that button as well (.is-folded); the price
      is also on the stop;
   3. lowering the main photo of every trip together (--photo-h, never
      below 7.5rem = 120px), and the smaller photos with it. object-fit:
      cover keeps the crop.
   "Lees meer" (.is-open) shows the text and the facts again. Without
   JavaScript nothing is hidden, clamped, folded or lowered.
   -------------------------------------------------------------------------- */

/* "Lees meer" / "Lees minder", added by js/reizen.js. A 44px touch target
   that takes only about 26px of height: the rest reaches into the space
   around it. */
.trip-map__more {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  width: fit-content;
  min-height: 2.75rem;
  margin: -0.375rem 0 -0.75rem;
  padding-right: 0.375rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--warm-deep);
  -webkit-tap-highlight-color: transparent;
}
.trip-map__more[hidden] { display: none; }
.trip-map__more::after {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-0.12rem) rotate(45deg);
  transition: transform 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.trip-map__more[aria-expanded="true"]::after { transform: translateY(0.12rem) rotate(-135deg); }
.trip-map__more:focus-visible { outline-offset: -3px; }

@media (max-width: 47.99rem) {
  /* "#bestemmingen" lands like js/reizen.js places the map: the line 8px
     below the 67px header (the section has 1.25rem above the line). */
  .trip-map { scroll-margin-top: calc(4.1875rem + 0.5rem - 1.25rem); }

  /* The row uses the base rules: one trip lined up with the page content
     and the next one peeking in on the right (--panel-w), so it is clear
     the row swipes. A swipe always stops on the very next trip
     (scroll-snap-stop). */

  /* Only the hidden live text stays; the controls then take no height. */
  .js .trip-map__nav,
  .js .trip-map__count > [aria-hidden="true"] { display: none; }

  .trip-map__panel.is-clamped:not(.is-open) .trip-map__text {
    max-height: var(--text-max, none);
    overflow: hidden;
    /* The last visible line fades a little: there is more. */
    -webkit-mask-image: linear-gradient(#000 calc(100% - 1.25em), rgba(0, 0, 0, 0.3));
    mask-image: linear-gradient(#000 calc(100% - 1.25em), rgba(0, 0, 0, 0.3));
  }
  .trip-map__panel.is-folded:not(.is-open) .trip-map__facts { display: none; }

  .trip-map.has-photo-h .trip-map__photo--main {
    aspect-ratio: auto;
    height: max(7.5rem, var(--photo-h, 0px));
  }
  /* The smaller photos keep overlapping just the lower edge of it. */
  .trip-map.has-photo-h .trip-map__photo--side,
  .trip-map.has-photo-h .trip-map__photo--below {
    max-height: calc(0.75 * max(7.5rem, var(--photo-h, 0px)) + var(--hang));
  }
}
/* Phones: the trip map is a soft anchor while scrolling the page. When a
   swipe comes to rest with the map's top within a quarter screen of its
   place (the line 8px below the header, the scroll-margin-top above),
   js/reizen.js scrolls it the last bit into place. The page is never a snap
   container (no scroll-snap-type on html): one changes how the page
   decelerates after every swipe, and turning it on or off while the page is
   still moving cuts the swipe short, so it stuttered before and after the
   map too. Only the trips snap, inside their own row. */
@media (min-width: 48rem) {
  .trip-map__more { display: none; }
}

/* A trip that is not the current one can be tapped to bring it in. */
.trip-map.is-ready .trip-map__panel:not(.is-current) { cursor: pointer; }

/* --------------------------------------------------------------------------
   Larger screens
   -------------------------------------------------------------------------- */
@media (min-width: 48rem) {
  .trip-map {
    --stop-w: 9rem;
    --gap: 1.25rem;
    --panel-w: 62%;
    --snap-end: calc(38% + 0.24 * var(--row-inset) - 2px);
    padding-block: 1.75rem 5.5rem;
  }
  .trip-map__panels { margin-top: 1.75rem; }
  .js .trip-map__panels { margin-top: 0.75rem; }
  .trip-map__panel { scroll-margin-top: 17.75rem; }
  .trip-map__media { --hang: 2.25rem; }
  .trip-map__photo--main { border-radius: 1.5rem; }
  .trip-map__photo--side { border-radius: 1rem; }
  .trip-map__body { padding-top: 1rem; }
  .trip-map__title { font-size: 2.1rem; }

  .trip-map__facts {
    display: block;
    margin-top: 0.9rem;
    border-bottom: 1px solid var(--border);
  }
  .trip-map__facts > div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1.25rem;
    padding-block: 0.45rem;
  }
  .trip-map__facts dt { flex: none; font-size: 0.8rem; }
  .trip-map__facts dd { margin: 0; font-size: 0.86rem; line-height: 1.4; text-align: right; }

  .trip-map__actions { gap: 0.5rem 1.25rem; }
  .trip-map__actions .btn { padding: 0.8rem 1.3rem; font-size: 0.94rem; }
  .trip-map__actions .link-arrow { font-size: 0.88rem; }
}

/* Side by side: the name spans the whole trip (so the start of the next
   trip's name shows in the peek), with the photos under it on the left and
   the text on the right. */
@media (min-width: 64rem) {
  .trip-map {
    --line-h: 3rem;
    --gap: 2rem;
    --panel-w: 74%;
    --snap-end: calc(26% + 0.48 * var(--row-inset) - 2px);
    padding-block: 2.25rem 6.5rem;
  }

  .trip-map__rail {
    margin-inline: 0;
    padding-inline: 0;
    overflow: visible;
    scroll-snap-type: none;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .trip-map__track { width: auto; }
  .trip-map__stops { grid-auto-columns: minmax(0, 1fr); }
  .trip-map__stop { padding-inline: 0.4rem; }
  .trip-map__name { font-size: 1.08rem; }

  .js .trip-map__controls { margin-top: 0.25rem; }
  .trip-map__panels { margin-top: 2rem; }
  .js .trip-map__panels { margin-top: 0.75rem; }
  .trip-map__panel {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr);
    grid-template-rows: auto auto auto auto 1fr;
    column-gap: 2.5rem;
    scroll-margin-top: 18.75rem;
  }
  .trip-map__body { display: contents; }
  .trip-map__region { grid-column: 1 / -1; grid-row: 1; }
  .trip-map__title { grid-column: 1 / -1; grid-row: 2; font-size: 2.6rem; }
  .trip-map__media { grid-column: 1; grid-row: 3 / -1; margin-top: 1.1rem; --hang: 2.5rem; }
  .trip-map__text { grid-column: 2; grid-row: 3; margin-top: 1.1rem; }
  .trip-map__facts { grid-column: 2; grid-row: 4; margin-top: 1.1rem; }
  .trip-map__actions { grid-column: 2; grid-row: 5; align-self: start; margin-top: 1.25rem; }

  .trip-map__photo--main { aspect-ratio: 3 / 2; }
}