/* ============================================================
   BlueSyndicate — Member Map Section
   Add to: assets/css/front-page.css
   ============================================================ */

/* ── Member Map Section ───────────────────────────────────── */
.member-map {
  padding: var(--space-20) 0 0;
  border-top: 1px solid var(--border);
}

.member-map__inner {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.member-map__inner h2 {
  font-family: var(--font-heading);
  font-size: var(--text-4xl);
  font-weight: var(--weight-light);
  letter-spacing: var(--tracking-wide);
  color: var(--text);
  margin-bottom: var(--space-3);
}

.member-map__sub {
  font-size: var(--text-base);
  color: var(--silver);
  margin-bottom: var(--space-8);
}

/* Map wrap */
.member-map__map-wrap {
  position: relative;
  background: #0d2035;
  border: 1px solid var(--border);
  overflow: hidden;
}

.member-map__map-wrap svg {
  width: 100%;
  height: auto;
  display: block;
}

/* Country paths */
.map-country {
  fill: #3a6a8a;
  stroke: rgba(100, 160, 255, 0.3);
  stroke-width: 0.5;
  transition: fill var(--transition-base);
}

.map-country--active {
  fill: #00c2e0;
  stroke: #00c2e0;
  stroke-width: 0.8;
  cursor: pointer;
}

.map-country--active:hover {
  fill: #33cee6;
}

/* Tooltip */
.map-tooltip {
  position: absolute;
  background: var(--card);
  border: 1px solid rgba(91, 163, 201, 0.3);
  padding: var(--space-3) var(--space-4);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition-fast);
  white-space: nowrap;
  z-index: var(--z-card);
}

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

.map-tooltip__country {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--cyan);
  letter-spacing: 0.08em;
  margin-bottom: var(--space-1);
}

.map-tooltip__count {
  font-size: var(--text-xs);
  color: var(--silver);
  letter-spacing: 0.06em;
}

.map-tooltip__roles {
  font-size: var(--text-xs);
  color: var(--muted);
  margin-top: var(--space-1);
}

/* Stats strip */
.member-map__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--border);
  border-top: none;
}

.member-map__stat {
  padding: var(--space-5) var(--space-4);
  text-align: center;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.member-map__stat:last-child {
  border-right: none;
}

.member-map__stat-val {
  font-size: var(--text-3xl);
  font-weight: var(--weight-light);
  color: var(--cyan);
  line-height: 1;
}

.member-map__stat-label {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  color: var(--muted);
  text-transform: uppercase;
}

/* ── Responsive ───────────────────────────────────────────── */
@media ( max-width: 640px ) {
  .member-map__stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .member-map__stat:nth-child(2) {
    border-right: none;
  }
  .member-map__stat:nth-child(3),
  .member-map__stat:nth-child(4) {
    border-top: 1px solid var(--border);
  }
}