/*
 * Popup card shared by every map that renders /winery/_popup-content.php or
 * /travel-activity/_popup-content.php.
 *
 * These rules used to live in style.css scoped under #fullscreenMapModal. That
 * made them unreachable for the standalone "around you" map, which renders the
 * very same partial inside a plain Leaflet popup and therefore showed the card
 * completely unstyled. The rules are container agnostic, so they are extracted
 * here and both consumers load them: MapOverlayAsset depends on this bundle,
 * and winery/map_around-you.php registers it directly.
 *
 * Keep the declaration order below: .content-popup .image-background is
 * intentionally declared twice, the second block overriding the first.
 */

.content-popup .image-background {
  display: block;
  padding-bottom: 25%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border: 1px solid transparent;

  position: relative;
  z-index: 1;
}

.content-popup .btn-closepopup {
  position: absolute;
  border: 0px;
  background-color: #fff;
  border-radius: 9px;
  top: 2%;
  left: 2%;
  padding: 2px 12px;
  pointer-events: auto;
  z-index: 2;
  font-weight: bold;
}

.content-popup .image-background {
  background-size: cover;
  border: 0px;
  border-radius: 0px;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

.content-popup {
  display: block;
  border-radius: 20px;
}

.content-popup .row {
  display: flex;
  margin: 0px;
}

.content-popup .col-popup-text {
  padding: 0px 10px;
}

/*
 * The two partials that render this card disagree on the heading class: the
 * travel-activity one emits .name, the winery one .winery-name. Clamp both, or a
 * long winery name pushes the card past the photo it sits next to.
 */
.content-popup .name,
.content-popup .winery-name {
  min-height: auto;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 3em;
}