/* ==============================================================================
   MAP BLOCK
   ============================================================================== */

/* The block is the same paper card the events block is, so the map page
   reads like the rest of the site. The intro, the map and the list stack
   with the page's own rhythm. */
.block-map {
  display: grid;
  gap: var(--spacing-lg);
  background: var(--paper-bg);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  box-shadow: var(--shadow-sm);
}

.block-map > h2 {
  margin: 0;
}

.map__intro {
  margin: 0;
}

/* The map box: tall enough to read the island's coast on a phone and
   capped on a wide screen, the same clamp the contact map uses but a
   notch taller, since this one holds several points. The paper colour
   shows until the style loads. */
.map__canvas {
  width: 100%;
  height: clamp(20rem, 60vh, 32rem);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--paper-secondary-bg);
  box-shadow: var(--shadow-sm);
  isolation: isolate;
}

/* Mapbox's popup is white by default; its text takes a dark ink so the
   title and the link read on it in every theme. The three inks are local
   properties so a skin can swap sobria's reds for its own hue (skins.css)
   without restyling the popup. */
.map__popup {
  --popup-ink: #2b0f12;
  --popup-muted: #6b4a4d;
  --popup-link: #8a444a;
  display: grid;
  gap: var(--spacing-xs);
  color: var(--popup-ink);
  font-family: var(--font-text);
}

.map__popup-date {
  color: var(--popup-muted);
  font-size: 0.85rem;
}

.map__popup .event__link {
  margin: 0;
  color: var(--popup-link);
}

/* The list of points: the events block's calendar tile on the left and
   the text on the right, the same two-column row, so an action looks the
   same here and in Actividades. */
.map__points {
  display: grid;
  gap: var(--spacing-lg);
  margin: 0;
  padding: 0;
  list-style: none;
}

.map__point {
  display: grid;
  grid-template-columns: var(--event-tile, 4.5rem) minmax(0, 1fr);
  column-gap: var(--spacing-md);
  align-items: start;
}

.map__point-title {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--font-size-lg);
  line-height: 1.3;
}

.map__point .prose {
  margin-top: var(--spacing-xs);
}

.map__point .prose > :first-child {
  margin-top: 0;
}

.map__point .prose > :last-child {
  margin-bottom: 0;
}

/* The note under an action with no marker: quiet, so it reads as a
   policy ("we do not publish where"), not as a missing piece. */
.map__unplaced {
  margin: var(--spacing-xs) 0 0;
  color: var(--text-muted);
  font-size: 0.9rem;
  font-style: italic;
}