/*****************************************************
COLLECTION MAP

The map of the site's own pages: a wrapper that gives Leaflet a height, and
the card-shaped popups a marker opens.

The `.leaflet-*` selectors are Leaflet's own class names, overridden here so
popups match the site rather than the library's default blue-and-white. That is
what the !important flags below are for.

Loads:    every page
Used by:  nav/map.html
Needs:    base.css tokens; Leaflet's own stylesheet, which nav/map.html links
Not here: historic map overlays (story-map.css) — a different component that
          happens to use the same library
*****************************************************/

/*****************************************************
THE MAP ITSELF
*****************************************************/

/* Leaflet measures its container on init and silently renders nothing if that
   container has no height, so the wrapper always has one. It comes in as a
   custom property because the include takes it as a parameter. */
.map-wrap {
  height: var(--map-height, 700px);
}

.collection-map {
  display: block;
  height: 100%;
  width: var(--map-width, 100%);
}

/* A map is not prose and has no reading measure to respect, so it can take the
   wider block a text column would deny it. Matches .gallery-grid--wide and
   .wide-header, which is what keeps their left edges in agreement.
   👉 Pass class="map-wrap--wide" to the include. */
.container > .map-wrap--wide {
  grid-column: full;
  width: min(100% - 2 * var(--spacing-lg), 64rem);
  margin-inline: auto;
}

/*****************************************************
POPUPS
*****************************************************/

/* Override Leaflet's default max-width constraint */
.leaflet-popup {
  max-width: none !important;
}

/* Reset Leaflet popup padding */
.leaflet-popup-content-wrapper {
  padding: 0;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}

.leaflet-popup-content {
  margin: 0;
  padding: 0;
  width: auto !important;
  max-width: none !important;
}

.leaflet-popup-content p {
  margin: 0;
}

/* Horizontal card-style layout for popups */
.popup-wrapper {
  display: flex;
  flex-direction: row;
  width: 440px;
  max-height: 240px;
  font-family: var(--font-body);
  background: var(--bg-card);
  overflow: hidden;
}

/* The picture is a fixed column that stretches to whatever height the text
   comes to. Giving it a height of its own instead leaves a band of empty card
   under it whenever the text runs longer. */
.popup-wrapper img {
  flex: 0 0 160px;
  align-self: stretch;
  width: 160px;
  height: auto;
  margin-right: var(--spacing-sm);
  object-fit: cover;
  object-position: center;
}

/* Text content on the right */
.popup-text {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 0.25rem;
  padding: var(--spacing-sm);
  overflow: hidden;
  line-height: 1.4;
}

.popup-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-body);
  line-height: 1.2;
}

.popup-title a {
  color: var(--text-body);
  text-decoration: none;
  font-weight: 600;
}

.popup-title a:hover {
  color: var(--interactive-hover);
  text-decoration: underline;
}

.popup-placename {
  margin: 0;
  font-size: 0.9rem;
  font-style: italic;
  color: var(--text-muted);
  line-height: 1.2;
}

/* The catalogue line: whatever fields the include was asked to print, joined
   with middots. Smaller and quieter than the summary, because it is a label
   rather than a sentence. */
.popup-meta {
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.3;
}

/* A summary written for a card can be longer than a popup has room for. Clamp
   it to an ellipsis rather than letting the card scroll: a line cut in half at
   the fold reads as a rendering fault, and the whole text is one click away on
   the page itself. */
.popup-summary {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  margin: 0;
  overflow: hidden;
  font-size: 0.9rem;
  color: var(--text-body);
  line-height: 1.3;
}

/* Responsive: vertical on small screens */
@media (max-width: 768px) {
  .popup-wrapper {
    flex-direction: column;
    width: 280px;
    max-height: none;
  }

  .popup-wrapper img {
    flex: 0 0 auto;
    align-self: auto;
    width: 100%;
    height: 180px;
    margin-right: 0;
  }
}