/* Race-village map: shared by the home page (Locations section in map display) and the race guide.
   Carries its own tokens so it reads the same on the navy link hub and on the paper content pages.
   Marker colours come from /styles/courses.css (.mk-<link id>); CSP forbids inline styles. */

.village-block {
  --vm-surface: #fffdf8;
  --vm-ground: #f6f0e6;
  --vm-line: #e2d6c4;
  --vm-ink: #080632;
  --vm-muted: #625e72;
  --vm-accent: #086a9c;
  display: grid;
  gap: 10px;
  color: var(--vm-ink);
}

.village-fallback {
  display: block;
  overflow: hidden;
  border-radius: 12px;
  background: #fff;
}

.village-fallback img {
  display: block;
  width: 100%;
  height: auto;
}

/* Legend: one row per place, opening it on the map (or in Google Maps without the live map). */
.village-legend {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 12px;
  margin: 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--vm-surface);
  list-style: none;
  font-size: .86rem;
}

.village-legend a {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  margin: 0 -6px;
  padding: 4px 6px;
  border-radius: 8px;
  color: var(--vm-ink);
  text-decoration: none;
}

.village-legend a:hover,
.village-legend a.is-active {
  background: var(--vm-ground);
}

.village-legend a.is-active {
  font-weight: 700;
}

/* A featured place takes its own full row, slightly emphasised, without leaving its group order. */
.village-legend .is-featured {
  grid-column: 1 / -1;
}

.village-legend .is-featured a {
  min-height: 52px;
  margin: 2px -6px 4px;
  padding: 8px 10px;
  background: var(--vm-ground);
}

.village-legend .is-featured .village-legend-text > span {
  font-weight: 800;
  font-size: .95rem;
}

.village-legend .is-featured .village-badge {
  min-width: 36px;
  height: 26px;
  font-size: .8rem;
}

.village-legend-text {
  display: grid;
  min-width: 0;
  line-height: 1.2;
}

.village-legend-text small {
  color: var(--vm-muted);
  font-size: .74rem;
  font-weight: 500;
}

.village-pin {
  flex: none;
  width: 14px;
  height: 14px;
  margin-inline-start: auto;
  color: var(--vm-accent);
}

.village-badge {
  display: inline-grid;
  flex: none;
  place-items: center;
  min-width: 30px;
  height: 22px;
  padding: 0 4px;
  border-radius: 3px;
  font-size: .72rem;
  font-weight: 800;
}

/* Marker colours (.mk-<id>) load from courses.css before this file; only uncoloured badges fall back. */
.village-badge:not([class*="mk-"]) {
  background: var(--vm-ink);
  color: #fff;
}

.village-hint {
  margin: 0;
  color: var(--vm-muted);
  font-size: .78rem;
}

/* Live map (public/scripts/village-map.js) */
.village-live {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  background: #e9e4da;
}

.village-canvas {
  height: 360px;
}

.village-dot {
  display: grid;
  place-items: center;
  min-width: 28px;
  height: 28px;
  padding: 0 6px;
  border: 2px solid #fff;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(8, 6, 50, .35);
  color: #fff;
  font: 800 11px/1 system-ui, sans-serif;
  cursor: pointer;
}

.village-dot.is-light {
  color: var(--vm-ink);
}

.village-dot.is-active {
  z-index: 5;
  box-shadow: 0 0 0 4px rgba(8, 6, 50, .22), 0 2px 6px rgba(8, 6, 50, .35);
}

/* Far out the village points overlap: small dots without labels; codes appear as you zoom in. */
.village-canvas.is-far .village-dot:not(.is-active) {
  min-width: 14px;
  height: 14px;
  padding: 0;
  font-size: 0;
}

.village-live.is-satellite .village-dot {
  box-shadow: 0 0 0 1px rgba(8, 6, 50, .55), 0 2px 8px rgba(0, 0, 0, .5);
}

.village-card {
  position: absolute;
  inset: auto 10px 10px;
  z-index: 4;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 10px;
  align-items: center;
  padding: 12px;
  padding-inline-end: 36px;
  border-radius: 12px;
  background: var(--vm-surface);
  box-shadow: 0 8px 24px rgba(8, 6, 50, .2);
  color: var(--vm-ink);
}

.village-card[hidden],
.village-live[hidden],
.village-layers[hidden],
.village-reset[hidden],
.village-hint[hidden],
.village-fallback[hidden] {
  display: none;
}

.village-card-text strong {
  display: block;
  font-size: .98rem;
}

.village-card-text small {
  display: block;
  color: var(--vm-muted);
  font-size: .78rem;
}

.village-actions {
  display: flex;
  flex-wrap: wrap;
  grid-column: 1 / -1;
  gap: 8px;
  margin-top: 6px;
}

.village-btn {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 15px;
  border: 1.5px solid var(--vm-line);
  border-radius: 999px;
  background: var(--vm-surface);
  color: var(--vm-ink);
  font-size: .88rem;
  font-weight: 700;
  text-decoration: none;
}

.village-btn.is-primary {
  border-color: var(--vm-accent);
  background: var(--vm-accent);
  color: #fff;
}

.village-close {
  position: absolute;
  top: 4px;
  inset-inline-end: 6px;
  width: 32px;
  height: 32px;
  border: 0;
  background: none;
  color: var(--vm-muted);
  font-size: 1.3rem;
  cursor: pointer;
}

/* Map controls sit top-right in every language, so these stay physically on the left. */
.village-layers {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 3;
  display: flex;
  padding: 3px;
  border-radius: 999px;
  background: var(--vm-surface);
  box-shadow: 0 2px 8px rgba(8, 6, 50, .2);
}

.village-layers button {
  min-height: 30px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--vm-muted);
  font-size: .78rem;
  font-weight: 700;
  cursor: pointer;
}

.village-layers button[aria-pressed="true"] {
  background: var(--vm-ink);
  color: #fff;
}

.village-reset {
  position: absolute;
  top: 52px;
  left: 10px;
  z-index: 3;
  min-height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: var(--vm-surface);
  box-shadow: 0 2px 8px rgba(8, 6, 50, .2);
  color: var(--vm-ink);
  font-size: .8rem;
  font-weight: 700;
  cursor: pointer;
}

.village-live .maplibregl-ctrl-attrib {
  font-size: 10px;
}

/* On the navy link hub the hint reads on the dark field. */
.utility-field .village-hint {
  color: var(--muted-on-dark);
}

@media (min-width: 640px) {
  .village-canvas {
    height: 440px;
  }

  .page .village-legend {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 359px) {
  .village-legend {
    grid-template-columns: 1fr;
  }
}