/* map_list.css — shared styles for the map+list view (map on top,
 * scrolling list below). Extracted from studio_page.css so studio,
 * supplier, and the public /projects map+list view share one source.
 *
 * Hovered rows + hovered markers share an `.is-highlighted` visual
 * emphasis, driven from both directions by map_hover_sync.js.
 */
.portfolio-map-view {
  display: grid;
  grid-template-rows: auto auto;
  gap: 16px;
  margin-top: 8px;
}

/* Author `display: grid` above beats the UA `[hidden] { display:none }`,
 * so force the override or the hidden attribute is ignored. */
.portfolio-grid[hidden],
.portfolio-map-view[hidden] { display: none !important; }

.portfolio-map {
  height: 480px;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}

.portfolio-map-list {
  list-style: none; padding: 0; margin: 0;
  border: 1px solid var(--border); border-radius: 6px;
  /* 8 rows × ~56px = 448px before chrome; tune slightly higher to
     accommodate row padding without clipping. */
  max-height: 464px;
  overflow-y: auto;
  background: var(--bone);
}
/* List-only view (no map above): drop the scroll cap so the full list
   flows down the page instead of nesting a 464px scroll box. */
.portfolio-map-list.pml-full { max-height: none; }
.portfolio-map-list .pml-row {
  border-bottom: 1px solid var(--border);
  transition: background-color 120ms ease;
}
.portfolio-map-list .pml-row:last-child { border-bottom: none; }
.portfolio-map-list .pml-row.is-hovered,
.portfolio-map-list .pml-row.is-highlighted { background: var(--bone-2); }
.portfolio-map-list .pml-link {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 12px;
  color: inherit; text-decoration: none;
  min-height: 56px;
}
.portfolio-map-list .pml-thumb {
  width: 48px; height: 36px; flex: 0 0 48px;
  background: var(--bone-2);
  border-radius: 3px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.portfolio-map-list .pml-thumb img {
  width: 100%; height: 100%; object-fit: cover;
}
.portfolio-map-list .pml-text {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.portfolio-map-list .pml-name {
  font-size: 13px; font-weight: 500; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.portfolio-map-list .pml-sub {
  font-size: 11px; color: var(--muted-2);
  font-family: var(--mono); letter-spacing: 0.02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.portfolio-map-list .pml-role {
  font-size: 11px; color: var(--muted-2);
  font-family: var(--mono); letter-spacing: 0.02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Marker hover emphasis. Applies to the default Leaflet
 * <img class="leaflet-marker-icon"> (no inner element). Shared
 * `.is-highlighted` class is also driven from list-row hover. */
.leaflet-marker-icon.is-hovered,
.leaflet-marker-icon.is-highlighted {
  transform: scale(1.25);
  transform-origin: bottom center;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.55));
  z-index: 1000 !important;
  transition: transform 120ms ease, filter 120ms ease;
}