/* Map pin preview: Leaflet popup with the card from inc/market-map-preview.php (.map-preview).
   Replaces the theme's market-map-popup.css.
   - Leaflet and Gridbuilder style the popup container, so those overrides need !important
     (CLAUDE.md §1 plugin-override exception).
   - Gridbuilder resets every element inside its cards (.wp-grid-builder .wpgb-card a, div, …), so the
     card rules carry the .wpgb-map-facet .leaflet-popup prefix to outrank that reset. */

/* ---------- Popup container ---------- */
.wpgb-map-facet .leaflet-popup-content-wrapper {
  overflow: hidden;
  padding: 0 !important; /* Leaflet override */
  border: 0 !important; /* Leaflet override */
  border-radius: var(--radius) !important; /* Leaflet override */
  box-shadow: 0 var(--space-xs) var(--space-l) var(--neutral-trans-20) !important; /* Leaflet override */
}
.wpgb-map-facet .leaflet-popup-tip-container {
  margin-block-start: -1px;
}
.wpgb-map-facet .leaflet-popup-tip {
  background: var(--white) !important; /* Leaflet override */
  box-shadow: none !important; /* Leaflet override */
}
.wpgb-map-facet .leaflet-popup-content {
  --map-preview-width: calc(var(--width-s) * 1.25);
  inline-size: var(--map-preview-width) !important; /* Leaflet sets an inline width */
  min-inline-size: min(var(--map-preview-width), calc(100vw - var(--space-m))) !important; /* Leaflet override */
  max-inline-size: calc(100vw - var(--space-m)) !important; /* Leaflet override */
  margin: 0 !important; /* Leaflet override */
}

/* Gridbuilder card wrappers inside the popup. */
.wpgb-map-facet .leaflet-popup :is(.wp-grid-builder.wpgb-marker-content, .wpgb-card, .wpgb-card-wrapper, .wpgb-card-inner, .wpgb-card-content, .wpgb-card-body) {
  inline-size: 100% !important; /* Gridbuilder card override */
  max-inline-size: none !important; /* Gridbuilder card override */
  background: var(--white) !important; /* Gridbuilder card override */
}
.wpgb-map-facet .leaflet-popup .main-map-market-card {
  display: block !important; /* Gridbuilder card override */
  padding: 0 !important; /* Gridbuilder card override */
}

/* ---------- Card ---------- */
.wpgb-map-facet .leaflet-popup .map-preview {
  display: flex;
  flex-direction: column;
  inline-size: 100%;
  overflow: hidden;
  background: var(--white);
  color: var(--text-dark, var(--neutral-ultra-dark));
  white-space: normal;
}
.wpgb-map-facet .leaflet-popup .map-preview__media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.wpgb-map-facet .leaflet-popup .map-preview__image {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  border-radius: 0;
}
.wpgb-map-facet .leaflet-popup .map-preview__body {
  display: flex;
  flex-direction: column;
  gap: calc(var(--space-xs) / 2);
  padding: var(--space-xs) var(--space-xs) var(--space-s);
}
/* No photo: leave room for the close button. */
.wpgb-map-facet .leaflet-popup .map-preview--no-image .map-preview__body {
  padding-block-start: calc(var(--space-xs) * 3.5);
}
.wpgb-map-facet .leaflet-popup .map-preview__title {
  margin: 0;
  font-size: var(--text-m);
  font-weight: 600;
  line-height: var(--heading-line-height);
  overflow-wrap: anywhere;
}
.wpgb-map-facet .leaflet-popup .map-preview__title a {
  color: var(--primary-dark);
  font: inherit;
  text-decoration: none;
}
.wpgb-map-facet .leaflet-popup .map-preview__title a:hover {
  color: var(--primary-ultra-dark);
}
.wpgb-map-facet .leaflet-popup .map-preview__date {
  margin: 0;
  color: var(--text-dark-muted);
  font-size: var(--text-s);
}
/* Address box: one link to directions (pin, address, "Directions »"); dark with accent text on hover. */
.wpgb-map-facet .leaflet-popup .map-preview__address {
  display: flex;
  align-items: flex-start;
  gap: calc(var(--space-xs) / 2);
  margin: calc(var(--space-xs) / 2) 0 0;
  padding: calc(var(--space-xs) / 2) var(--space-xs);
  border: 1px solid var(--primary-light);
  border-radius: var(--radius);
  background: var(--primary-ultra-light);
  color: var(--text-dark, var(--neutral-ultra-dark));
  font-size: var(--text-s);
  line-height: var(--text-line-height, 1.5);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.wpgb-map-facet .leaflet-popup .map-preview__pin {
  flex: none;
  inline-size: 1.2em !important; /* Gridbuilder sizes card icons to 100% */
  block-size: 1.2em !important; /* Gridbuilder sizes card icons to 100% */
  margin-block-start: .15em;
  color: var(--primary-dark);
}
.wpgb-map-facet .leaflet-popup .map-preview__directions {
  color: var(--primary-dark);
  white-space: nowrap;
}
.wpgb-map-facet .leaflet-popup a.map-preview__address:hover {
  border-color: var(--neutral-ultra-dark);
  background: var(--neutral-ultra-dark);
}
.wpgb-map-facet .leaflet-popup a.map-preview__address:hover :is(span, .map-preview__pin, .map-preview__directions) {
  color: var(--accent);
}
@media (prefers-reduced-motion: no-preference) {
  .wpgb-map-facet .leaflet-popup a.map-preview__address {
    transition: background-color 150ms ease, border-color 150ms ease;
  }
}
.wpgb-map-facet .leaflet-popup .map-preview a:focus-visible {
  outline: var(--focus-width) solid var(--focus-color);
  outline-offset: var(--focus-offset);
}

/* ---------- Close: white circle with a 44px hit area ---------- */
.wpgb-map-facet .leaflet-popup a.leaflet-popup-close-button {
  display: flex !important; /* Leaflet override */
  align-items: center;
  justify-content: center;
  inset-block-start: var(--space-xs) !important; /* Leaflet override */
  inset-inline-end: var(--space-xs) !important; /* Leaflet override */
  z-index: 2;
  inline-size: calc(var(--space-xs) * 2.5) !important; /* Leaflet override */
  block-size: calc(var(--space-xs) * 2.5) !important; /* Leaflet override */
  border-radius: var(--radius-circle) !important; /* Leaflet override */
  background: var(--white) !important; /* Leaflet override */
  box-shadow: 0 1px 3px var(--neutral-trans-20);
  color: var(--text-dark-muted) !important; /* Leaflet override */
  font-size: var(--text-xl) !important; /* Leaflet override */
}
.wpgb-map-facet .leaflet-popup a.leaflet-popup-close-button::before {
  content: "";
  position: absolute;
  inset: calc(var(--space-xs) * -.4);
}

/* ---------- Drawer layout: the preview sits above the drawer bar, centred on the map pane ---------- */
@media (max-width: 1439px) {
  .is-map-drawer .wpgb-map-facet .leaflet-popup {
    position: fixed !important; /* Leaflet positions popups absolutely */
    inset-block: calc(100dvh - var(--market-header-bottom, 0px) - var(--market-drawer-bar) - var(--space-xs) - var(--market-popup-offset, 0px)) auto !important; /* Leaflet override */
    inset-inline-start: calc(50vw - var(--market-popup-offset-x, 0px)) !important; /* Leaflet override */
    margin: 0 !important; /* Leaflet override */
    transform: translate(-50%, -100%) !important; /* Leaflet override */
  }
  .is-map-drawer .wpgb-map-facet .leaflet-popup-tip-container {
    display: none;
  }
}
@media (max-width: 480px) {
  .wpgb-map-facet .leaflet-popup-content {
    --map-preview-width: calc(100vw - var(--space-l));
  }
  .wpgb-map-facet:has(.leaflet-popup) .leaflet-control-zoom {
    display: none;
  }
  .wpgb-map-facet .leaflet-popup .map-preview__media {
    aspect-ratio: 2 / 1;
  }
  .wpgb-map-facet .leaflet-popup .map-preview__body {
    padding: var(--space-xs);
  }
}