/* The "at a glance" box of the itinerary pages and the route map inside it
   (includes generated by scripts/generate_route_maps.py). The land and the
   route are an SVG that scales with the width; stops, names and times are
   HTML laid over it at percentage positions, so they keep the type scale at
   every size. The box sits right after the intro: the map is the first thing
   after the words, not five screens down. */

.dest-glance {
  --glance-bg: #F9F7F5;
  background: var(--glance-bg);
  padding: 28px 32px;
  margin-top: 32px;
  border-left: 3px solid #947A7A;
}

.dest-glance .dest-glance-title {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: #7A6363;
  margin: 0 0 20px;
}

/* Facts on the left, the map (and its stages) on the right; on a phone the
   map comes first. */
.dest-glance-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 40px;
  align-items: start;
}

.dest-glance .dest-glance-facts {
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: var(--lh-airy);
  color: #333;
}

.route-map {
  margin: 0;
}

.route-map-canvas {
  position: relative;
}

.route-map-canvas svg {
  display: block;
  width: 100%;
  height: auto;
}

.route-map-land {
  fill: #E6DCD3;
  stroke: #D6C8BD;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.route-map-leg,
.route-map-trip {
  fill: none;
  stroke: #7A6363;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.route-map-leg {
  stroke-width: 1.8;
  stroke-dasharray: 1 5;
}

.route-map-leg--out {
  stroke: #A89A92;
}

.route-map-trip {
  stroke: #947A7A;
  stroke-width: 1;
}

/* Everything laid over the map is centred on its point. */
.route-map-stop,
.route-map-dot,
.route-map-name,
.route-map-time {
  position: absolute;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}

.route-map-stop,
.route-map-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #7A6363;
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--fs-md);
  line-height: 26px;
  flex: none;
}

.route-map-stop {
  box-shadow: 0 0 0 2px var(--glance-bg);
}

.route-map-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid #947A7A;
}

.route-map-dot--out {
  border-color: #A89A92;
}

.route-map-name,
.route-map-time {
  text-shadow: 0 0 3px var(--glance-bg), 0 0 3px var(--glance-bg), 0 0 3px var(--glance-bg);
}

.route-map-name {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: #221C1C;
}

.route-map-name--minor {
  letter-spacing: var(--ls-text);
  text-transform: none;
  color: #7A6363;
}

/* Name placement around its point: the offset clears a 26px marker. */
.route-map-name--e  { transform: translate(20px, -50%); }
.route-map-name--w  { transform: translate(calc(-100% - 20px), -50%); }
.route-map-name--n  { transform: translate(-50%, calc(-100% - 16px)); }
.route-map-name--s  { transform: translate(-50%, 16px); }
.route-map-name--ne { transform: translate(12px, calc(-100% - 10px)); }
.route-map-name--nw { transform: translate(calc(-100% - 12px), calc(-100% - 10px)); }
.route-map-name--se { transform: translate(10px, 6px); }
.route-map-name--sw { transform: translate(calc(-100% - 10px), 6px); }

/* The time sits beside its leg, on the outside of the curve (--nx/--ny, the
   unit vector the generator writes): half its own box plus a gap, so the
   dotted line is never written over. */
.route-map-time {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  color: #7A6363;
  transform: translate(calc(-50% + var(--nx) * 50% + var(--nx) * 10px),
                       calc(-50% + var(--ny) * 50% + var(--ny) * 10px));
}

/* Where the zoomed map sits in Japan: the whole country in the bottom-right
   corner (the Pacific on every itinerary), the map's frame drawn on it. */
.route-map-canvas .route-map-overview {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 14%;
  min-width: 64px;
  height: auto;
  background: var(--glance-bg);
  padding: 8px 0 0 8px;
}

.route-map-frame {
  fill: none;
  stroke: #7A6363;
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
}

/* The stages: number, city and nights, then the stage's highlights. */
.route-map-stages {
  list-style: none;
  margin: 18px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid #E2D8D1;
}

.route-map-stages li {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  column-gap: 12px;
  row-gap: 2px;
  align-items: start;
  margin: 0 0 14px;
  line-height: var(--lh-heading);
}

.route-map-stages .route-map-num {
  grid-row: span 2;
}

.route-map-highlights {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: #555;
}

.route-map-city {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: #221C1C;
}

.route-map-nights {
  white-space: nowrap;
  margin-left: 8px;
  text-transform: none;
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-text);
  color: #7A6363;
}

.route-map-note {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-text);
  line-height: var(--lh-body);
  color: #7A6363;
  margin-top: 12px;
}

@media (max-width: 780px) {
  .dest-glance {
    padding: 20px 16px;
  }

  .dest-glance-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
  }

  .dest-glance-grid .route-map {
    order: -1;
  }

  .route-map-stop {
    width: 20px;
    height: 20px;
    line-height: 20px;
    font-size: var(--fs-sm);
  }

  .route-map-name--e  { transform: translate(15px, -50%); }
  .route-map-name--w  { transform: translate(calc(-100% - 15px), -50%); }
  .route-map-name--n  { transform: translate(-50%, calc(-100% - 12px)); }
  .route-map-name--s  { transform: translate(-50%, 12px); }

  /* At phone width Kansai is a few pixels wide: the times would sit on
     the names. The page text and the stage list carry the journey. */
  .route-map-time,
  .route-map-note-times {
    display: none;
  }
}

/* Destination pages: where the city sits, beside the intro (includes
   city_map_<slug>.html, same generator). The region is drawn, the whole
   country sits in a framed corner overview. */
.dest-intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 48px;
  align-items: center;
}

.city-map {
  --glance-bg: #F9F7F5;
  background: var(--glance-bg);
  padding: 16px 16px 14px;
  margin: 0;
}

.city-map .route-map-canvas .route-map-overview {
  width: 30%;
  min-width: 0;
  padding: 4px;
  border: 1px solid #E2D8D1;
}

.city-map .route-map-canvas .route-map-overview--tl {
  top: 0;
  left: 0;
  right: auto;
  bottom: auto;
}

.city-map .route-map-canvas .route-map-overview--tr {
  top: 0;
  bottom: auto;
}

.city-map-marker {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #7A6363;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 3px var(--glance-bg), 0 0 0 9px rgba(148, 122, 122, .22);
}

.city-map .city-map-name {
  font-size: var(--fs-sm);
}

.city-map-caption {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-text);
  line-height: var(--lh-body);
  color: #7A6363;
  margin-top: 12px;
}

@media (max-width: 780px) {
  .dest-intro-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
}