/* Shared photo-map styles for every place archive template.
 *
 * These previously lived only in place-city.css, with a partial copy in
 * place-state.css and none at all in place-country.css -- so country maps
 * got no height and Leaflet rendered them 0px tall: present in the DOM,
 * invisible on screen. One copy here, loaded alongside whichever
 * per-template stylesheet applies, so a template can't silently miss it.
 *
 * Sizing comes from the place-state.css version (340px, bordered frame);
 * popup/control/marker styling from the richer place-city.css set.
 *
 * No tile-pane filter: the basemap is Carto's native dark theme now, not
 * light tiles inverted in CSS, so there is nothing to recolour.
 */

.placeArchivePhotoMapWrap {
  position: relative;
  margin-top: 14px;
  overflow: hidden;
  border: 1px solid var(--place-border);
  background:
    radial-gradient(circle at 18% 18%, rgba(229, 66, 159, 0.08), transparent 24%),
    linear-gradient(180deg, rgba(11, 15, 22, 0.98), rgba(7, 10, 16, 1));
}

.placeArchivePhotoMap {
  width: 100%;
  min-height: 340px;
  background: linear-gradient(180deg, rgba(16, 22, 32, 0.95), rgba(8, 11, 18, 0.98));
}

.placeArchivePhotoMapPopup {
  display: grid;
  gap: 0;
  min-width: 150px;
  max-width: 190px;
}

/* Padding lives here, not on the popup shell, so the thumbnail can sit
   flush to the edges instead of floating inside a wide margin. */
.placeArchivePhotoMapPopup__body {
  display: grid;
  gap: 3px;
  padding: 7px 9px 8px;
}

.placeArchivePhotoMapPopup__set {
  color: rgba(255, 214, 237, 0.72);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
}

a.placeArchivePhotoMapPopup__set:hover {
  color: #ff8bc5;
  text-decoration: underline;
}

.placeArchivePhotoMapPopup__open {
  margin-top: 2px;
  font-size: 0.76rem;
}

.placeArchivePhotoMapPopup__groupCount {
  color: rgba(255, 244, 251, 0.84);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.placeArchivePhotoMapPopup__list {
  display: grid;
  gap: 10px;
  max-height: 320px;
  overflow: auto;
  padding-right: 4px;
}

.placeArchivePhotoMapPopup__item {
  display: grid;
  gap: 8px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.placeArchivePhotoMapPopup__item:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.placeArchivePhotoMapPopup img {
  display: block;
  width: 100%;
  height: 74px;
  object-fit: cover;
  border-radius: 0;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.placeArchivePhotoMapPopup strong {
  display: block;
  color: #fff4fb;
  line-height: 1.25;
  font-size: 0.82rem;
  font-weight: 700;
}

.placeArchivePhotoMapPopup a {
  color: #ff8bc5;
  font-weight: 700;
  text-decoration: none;
}

.placeArchivePhotoMap .leaflet-control-container .leaflet-top.leaflet-left {
  top: 12px;
  left: 12px;
}

.placeArchivePhotoMap .leaflet-control-zoom {
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.28);
}

.placeArchivePhotoMap .leaflet-control-zoom a {
  width: 38px;
  height: 38px;
  line-height: 38px;
  border-radius: 0 !important;
  border: 0 !important;
  background: rgba(12, 16, 24, 0.92);
  color: rgba(255, 255, 255, 0.92);
  font-size: 22px;
  font-weight: 400;
}

.placeArchivePhotoMap .leaflet-control-zoom a:hover,
.placeArchivePhotoMap .leaflet-control-zoom a:focus {
  background: rgba(229, 66, 159, 0.88);
  color: #fff;
}

.placeArchivePhotoMap.leaflet-container .leaflet-control-attribution {
  background: rgba(7, 10, 16, 0.9);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.68);
  padding: 4px 8px;
  backdrop-filter: blur(10px);
}

.placeArchivePhotoMap.leaflet-container .leaflet-control-attribution a {
  color: rgba(255, 255, 255, 0.86);
}

.placeArchivePhotoMap .leaflet-popup-content-wrapper,
.placeArchivePhotoMap .leaflet-popup-tip {
  background: linear-gradient(
    180deg,
    rgba(41, 14, 33, 0.97),
    rgba(16, 10, 20, 0.98)
  );
  color: #fff6fb;
  border: 1px solid rgba(255, 139, 197, 0.22);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.35);
}

.placeArchivePhotoMap .leaflet-popup-content {
  margin: 0;
  width: auto !important;
}

.placeArchivePhotoMap .leaflet-popup-content-wrapper {
  padding: 0;
  overflow: hidden;
}

.placeArchivePhotoMap .leaflet-popup-close-button {
  color: rgba(255, 214, 237, 0.86) !important;
}

.placeArchivePhotoMap__marker {
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.28));
}

.placeArchivePhotoMap__marker.is-grouped {
  filter: drop-shadow(0 12px 24px rgba(240, 81, 173, 0.26));
}

.placeArchivePhotoMap__groupBadgeWrap {
  background: transparent;
  border: 0;
}

.placeArchivePhotoMap__groupBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: #fff4fb;
  color: #831843;
  font-size: 0.76rem;
  font-weight: 800;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
  border: 2px solid rgba(240, 81, 173, 0.9);
}