/* ══════════════════════════════════════
   WORLD MAP — inline SVG on the catalog
   page. The `journey-` prefix is a
   leftover from the retired /journey
   page these styles were written for.
   ══════════════════════════════════════ */

.journey-map-wrap {
  max-width: 900px;
  margin: 0 auto;
}

.journey-map {
  width: 100%;
  height: auto;
}

/* Base land (unvisited) */
.map-base path {
  fill: rgba(255,255,255,0.04);
  stroke: rgba(255,255,255,0.06);
  stroke-width: 0.4;
}

/* Active — currently traveling between (blue) */
.map-country-active path,
.map-country-active circle {
  fill: rgba(80, 150, 255, 0.5);
  stroke: rgba(80, 150, 255, 0.3);
  stroke-width: 0.5;
}

/* State/Province level — blue (home bases: California, Shanghai) */
.map-state-active path,
.map-state-active circle {
  fill: rgba(80, 150, 255, 0.65);
  stroke: rgba(80, 150, 255, 0.45);
  stroke-width: 0.8;
  transition: fill 0.2s ease, stroke 0.2s ease;
  cursor: pointer;
}

.map-state-active path:hover,
.map-state-active circle:hover {
  fill: rgba(80, 150, 255, 0.9);
  stroke: rgba(80, 150, 255, 0.7);
}

/* State/Province level — golden (other visited states/provinces) */
.map-state-golden path,
.map-state-golden circle {
  fill: rgba(122, 155, 181, 0.4);
  stroke: rgba(122, 155, 181, 0.25);
  stroke-width: 0.8;
  transition: fill 0.2s ease, stroke 0.2s ease;
  cursor: pointer;
}

.map-state-golden path:hover,
.map-state-golden circle:hover {
  fill: rgba(122, 155, 181, 0.65);
  stroke: rgba(122, 155, 181, 0.45);
}

/* Visited / past — white */
.map-country-visited path,
.map-country-visited circle {
  fill: rgba(255, 255, 255, 0.18);
  stroke: rgba(255, 255, 255, 0.12);
  stroke-width: 0.5;
}

/* Interactive hover for visited countries */
.map-country-visited [data-name] {
  transition: fill 0.2s ease, stroke 0.2s ease;
  cursor: pointer;
}

.map-country-visited [data-name]:hover {
  fill: rgba(255, 255, 255, 0.38);
  stroke: rgba(255, 255, 255, 0.25);
}

/* Map tooltip */
.journey-map-wrap {
  position: relative;
}

.map-tooltip {
  position: absolute;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.82);
  color: rgba(255, 255, 255, 0.92);
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  letter-spacing: 0.06em;
  font-weight: 300;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 10;
}

.map-tooltip.visible {
  opacity: 1;
}

/* Legend */
.legend-active { fill: rgba(80, 150, 255, 0.65); }
.legend-golden { fill: rgba(122, 155, 181, 0.5); }
.legend-visited { fill: rgba(255, 255, 255, 0.3); }

.map-legend-text {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  fill: rgba(255,255,255,0.45);
  letter-spacing: 0.08em;
  font-weight: 300;
}

/* City labels on active countries */
.map-city-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  fill: rgba(80, 150, 255, 0.8);
  letter-spacing: 0.08em;
  font-weight: 400;
}

.map-count {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  fill: rgba(255,255,255,0.25);
  letter-spacing: 0.1em;
  font-weight: 300;
}

/* Clickable map regions (mapped to an album) */
.journey-map .has-album { cursor: pointer; }
.journey-map .has-album:hover,
.journey-map .has-album:focus-visible { filter: brightness(1.5); outline: none; }