/* Mapfield Spots — front-end map + list.
   Palette vars live in palette.css. */
:root {
  /* Own tokens per Map Type theme config, not reused -light/-medium/etc. */
  --mapfield_spots-list-bg: var(--mapfield_spots-light);
  --mapfield_spots-list-item-bg: #fff;
  /* Map_Types 'map.marker_size' small/medium/large = 25/35/45px; this is medium. */
  --mapfield_spots-marker-size: 35px;
}

/* Only margin is ours — theme H2 margins assume text follows, not a map. */
.mapfield_spots-map-title {
  margin: 0 0 12px;
}
.mapfield_spots-map-wrap {
  position: relative;
  /* Set inline per-instance via shortcode/block height; this is the fallback. */
  height: var(--mapfield_spots-map-height, 640px);
  font-family: inherit;
  /* No border-radius: MapLibre's WebGL canvas won't clip reliably in Firefox regardless. */
  /* Clips the list panel as it slides off-screen on collapse. */
  overflow: hidden;
  /* Some themes give block content no vertical spacing; stacked maps would touch otherwise. */
  margin-bottom: var(--mapfield_spots-gap);
}
/* Page-builder editor stand-in for the real map; same height to avoid a jump on front end. */
.mapfield_spots-map-editor-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
  background: var(--mapfield_spots-light);
  border: 1px solid var(--mapfield_spots-medium);
}
.mapfield_spots-map-editor-placeholder p {
  margin: 0;
  color: var(--mapfield_spots-text);
}
/* Overrides the fixed 640px height above, which would otherwise beat fullscreen sizing. */
.mapfield_spots-map-wrap:fullscreen,
.mapfield_spots-map-wrap:-webkit-full-screen {
  width: 100%;
  height: 100%;
}

.mapfield_spots-map-canvas {
  width: 100%;
  height: 100%;
}
/* cursor:grab/grabbing (MapLibre default) fails to render on some systems — cursor:move instead;
   scoped via ancestor to outrank MapLibre's rule. */
.mapfield_spots-map-wrap .maplibregl-canvas-container.maplibregl-interactive {
  cursor: move;
}
.mapfield_spots-map-wrap .maplibregl-canvas-container.maplibregl-interactive:active {
  cursor: move;
}

/* Overlays the map (avoids a map.resize() on toggle). Kept separate from __scroll below: combining
   would let pimp-scrollbar's 2-class `position: relative` outrank our 1-class absolute. */
.mapfield_spots-map-list {
  position: absolute;
  top: 12px;
  right: 12px;
  bottom: 45px; /* clears MapLibre's own attribution/copyright link */
  /* clamp() instead of a flat 380px so a narrow map isn't overwhelmed while staying readable. */
  width: clamp(220px, 35%, 300px);
  display: flex;
  flex-direction: column;
  background: var(--mapfield_spots-list-bg);
  border-radius: var(--mapfield_spots-radius);
  box-shadow: 0 4px 24px rgba(0,0,0,.18);
  z-index: 4; /* above a hovered/active marker's z-index:3, so its label bubble paints behind this panel */
  transition: transform .3s ease, visibility 0s linear 0s;
}
.mapfield_spots-map-list.is-collapsed {
  transform: translateX(calc(100% + 12px));
  /* Delayed so it stays hit-testable through the whole slide-out; comes back immediately on re-expand. */
  visibility: hidden;
  transition: transform .3s ease, visibility 0s linear .3s;
}

/* Top padding here (not on __scroll) clears the toggle button floating over the panel's top-right corner. */
.mapfield_spots-map-list__search {
  padding: 20px 13px 0 13px;
  flex: 0 0 auto;
}
.mapfield_spots-map-list__search-field {
  position: relative;
}
.mapfield_spots-map-list__search-icon {
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  width: 13px;
  height: 13px;
  color: var(--mapfield_spots-text);
  opacity: 1;
  pointer-events: none;
}
.mapfield_spots-map-list__search-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
}
/* !important throughout: a theme's input[type="search"] rule outranks our plain class by specificity,
   was pushing text under the icon. */
.mapfield_spots-map-list__search-input {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  box-shadow: none !important;
  background-image: none !important;
  margin: 0 !important;
  line-height: normal !important;
  width: 100%;
  box-sizing: border-box !important;
  padding: 8px 28px 8px 30px !important;
  font-size: 14px;
  font-family: inherit;
  color: var(--mapfield_spots-text);
  background-color: #fff;
  border: 1px solid var(--mapfield_spots-medium);
  border-radius: var(--mapfield_spots-radius-sm);
  outline: none;
  transition: border-color var(--mapfield_spots-transition);
}
.mapfield_spots-map-list__search-input:focus {
  border-color: var(--mapfield_spots-link);
}
/* Suppresses Chrome/Edge's native clear button (Firefox/Safari have none) in favour of the custom one below. */
.mapfield_spots-map-list__search-input::-webkit-search-cancel-button {
  display: none;
}
.mapfield_spots-map-list__search-clear {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  border: none;
  border-radius: 50%;
  color: var(--mapfield_spots-text);
  opacity: .45;
  transition: opacity var(--mapfield_spots-transition), background-color var(--mapfield_spots-transition);
}
/* display set only here, not unconditionally, so JS-toggled [hidden] still wins while empty. */
.mapfield_spots-map-list__search-clear:not([hidden]) {
  display: flex;
}
.mapfield_spots-map-list__search-clear:hover,
.mapfield_spots-map-list__search-clear:focus-visible {
  opacity: 1;
  background: var(--mapfield_spots-medium);
}
.mapfield_spots-map-list__search-empty {
  margin: 10px 0 0;
  font-size: 13px;
  font-style: italic;
  opacity: .7;
  color: var(--mapfield_spots-text);
}

.mapfield_spots-map-list__scroll {
  flex: 1 1 auto;
  min-height: 0; /* lets this flex item shrink below content height instead of growing to fit it */
  padding: 16px 13px;
  /* Overrides pimp-scrollbar's grey default — --mapfield_spots-medium was nearly invisible. */
  --pimp-scrollbar-hover: #bbb;
  --pimp-scrollbar-active: var(--mapfield_spots-alert);
}
/* Separate class, not `hidden` — independent of wireLegend()'s category filter; either can hide the item. */
.mapfield_spots-map-list__item--search-hidden {
  display: none;
}

.mapfield_spots-map-list__item {
  background: var(--mapfield_spots-list-item-bg);
  border: 1px solid var(--mapfield_spots-medium);
  border-radius: var(--mapfield_spots-radius);
  padding: 16px 20px;
  margin-bottom: 14px;
  transition: box-shadow var(--mapfield_spots-transition), opacity var(--mapfield_spots-transition), border-color var(--mapfield_spots-transition);
}
.mapfield_spots-map-list__item p {
  margin: 0;
}
.mapfield_spots-map-list__item:hover { box-shadow: 0 2px 10px rgba(0,0,0,.08); border-color: var(--mapfield_spots-link); }
/* Same specificity as :hover — source order after it keeps the active outline red even while hovered. */
.mapfield_spots-map-list__item.is-active { background: var(--mapfield_spots-medium); border-color: var(--mapfield_spots-link); }

/* ── Spot card auto-appended to its own page (Frontend::maybe_append_spot_card()) ──
   Shares inner classes with the map list item but skips .mapfield_spots-map-list__item's
   click-to-focus affordance and border/padding — the theme's template already frames the
   content, so no second box; title/image/description also skipped (see $show_identity).
   __media (gallery) and __info stack narrow, sit side by side once there's room (see min-width query below). */
.mapfield_spots-spot-card {
  background: none;
  border: none;
  padding: 0;
  max-width: 880px;
}
.mapfield_spots-spot-card__info {
  display: flex;
  flex-direction: column;
}
/* Seam between sections; empty __media collapses to nothing (min-width query below) so no
   stray line appears above the first section. */
.mapfield_spots-spot-card .mapfield_spots-spot-card__info > * {
  margin-top: 16px;
  border-top: 1px solid var(--mapfield_spots-medium);
}
/* Skipped on <a> (the CTA button) — it already has its own padding; adding more unbalances it. */
.mapfield_spots-spot-card .mapfield_spots-spot-card__info > *:not(a) {
  padding-top: 16px;
}
.mapfield_spots-spot-card .mapfield_spots-spot-card__info > :first-child {
  padding-top: 0;
  margin-top: 0;
  border-top: none;
}
/* render_spot_card() omits __media entirely when there's no image/gallery (CSS :empty can't
   distinguish whitespace from content), so __info takes full width instead of leaving a stray column. */
@media (min-width: 700px) {
  .mapfield_spots-spot-card:has(.mapfield_spots-spot-card__media) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: 32px;
  }
}
/* "View on map" sits before __media in source order (renders right under the
   theme's own title) — without this it becomes a 3rd grid item above, auto-
   placed into col 1 and stretched to __media's own row height by default. */
.mapfield_spots-spot-card > .mapfield_spots-map-list__view-map {
  grid-column: 1 / -1;
  align-self: start;
  justify-self: start;
}
/* render_spot_card() already renders the image inside __media, so the theme's separate
   featured-image block would show it twice. Core block-theme markup only; inert on classic themes. */
body.mapfield_spots-single .wp-block-post-featured-image {
  display: none;
}
/* Twenty Twenty-Five's "Written by [author] in [terms]" byline is meaningless for Spots and
   reads as a stray "in" once terms are empty. Same block-theme-only caveat as above. */
body.mapfield_spots-single .wp-block-group.has-small-font-size.is-layout-flex {
  display: none;
}

.mapfield_spots-map-list__title-row {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 5px;
}
.mapfield_spots-map-list__item h3 { margin: 0; font-size: 19px; color: var(--mapfield_spots-text); }
.mapfield_spots-map-list__directions {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  /* Keeps it flush right even with no title to space-between against ($show_title off). */
  margin-left: auto;
  /* !important: theme `a`/`button` globals (underline, chrome, :focus/:active colors) can
     outrank a plain class regardless of load order. Both variants below need their own too. */
  color: var(--mapfield_spots-link) !important;
  text-decoration: none !important;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--mapfield_spots-transition), background var(--mapfield_spots-transition);
}
/* directions.svg has no width/height of its own — this is the one place controlling its size. */
.mapfield_spots-map-list__directions svg {
  width: 18px;
  height: 18px;
}
.mapfield_spots-map-list__directions:hover { color: var(--mapfield_spots-alert) !important; }
/* Own page: visible label + filled-pill treatment like the CTA button, left-aligned not pinned right. */
.mapfield_spots-spot-card .mapfield_spots-map-list__directions {
  flex: 0 0 auto;
  margin-left: 0;
  gap: 8px;
  padding: 10px 16px;
  border-radius: var(--mapfield_spots-radius);
  background: var(--mapfield_spots-link);
  color: #fff !important;
  font-size: 16px;
  font-weight: 700;
}
.mapfield_spots-spot-card .mapfield_spots-map-list__directions:hover {
  background: var(--mapfield_spots-alert);
  color: #fff !important;
}
.mapfield_spots-spot-card .mapfield_spots-map-list__directions svg {
  width: 20px;
  height: 20px;
}

.mapfield_spots-map-list__rating {
  margin: -4px 0 10px;
  font-size: 15px;
  font-weight: 700;
  color: var(--mapfield_spots-link);
}
.mapfield_spots-spot-card .mapfield_spots-map-list__rating {
  display: flex;
  align-items: end;
  gap: 8px;
  font-size: 20px;
}
.mapfield_spots-map-list__rating-label {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--mapfield_spots-text);
}
/* Icon symbols (assets/icons/rating/); currency symbols are plain text sized by font-size above. */
.mapfield_spots-rating-glyph {
  display: inline-block;
  width: 14px;
  height: 14px;
  vertical-align: middle;
}
.mapfield_spots-rating-glyph + .mapfield_spots-rating-glyph {
  margin-left: 2px;
}
.mapfield_spots-rating-glyph svg,
.mapfield_spots-rating-glyph img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.mapfield_spots-spot-card .mapfield_spots-rating-glyph {
  width: 18px;
  height: 18px;
}

.mapfield_spots-map-list__thumb {
  width: 100%;
  height: 140px;
  background-size: cover;
  background-position: center;
  border-radius: calc(var(--mapfield_spots-radius) - 6px);
  margin-bottom: 8px;
}
/* Own page: replaces the featured image at top of media column; bigger, own bottom gap since
   it's not followed by the gallery grid's margin-top like the sidebar's __thumb is. */
.mapfield_spots-spot-card__thumb {
  width: 100%;
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
  border-radius: var(--mapfield_spots-radius);
  margin-bottom: 14px;
}

.mapfield_spots-map-list__categories {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
  margin-bottom: 8px;
}
.mapfield_spots-map-list__category {
  display: inline-block;
  /* Without this the badge's line-box inherits the theme's line-height, adding invisible
     leading that stacks with the margin once badges wrap onto a second line. */
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  background: var(--mapfield_spots-bg, var(--mapfield_spots-medium));
  padding: 2px 6px;
  border-radius: var(--mapfield_spots-radius-sm);
}
.mapfield_spots-spot-card .mapfield_spots-map-list__category { font-size: 14px; }

.mapfield_spots-map-list__desc { font-size: 15px; color: var(--mapfield_spots-text); }
.mapfield_spots-map-list__desc-toggle {
  display: inline;
  /* Theme's generic `button` styling can outrank this — same fix as the search input above. */
  padding: 0 !important;
  margin-top: 4px;
  border: none !important;
  background: none !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  text-decoration: none !important;
  /* inherit: also sits inside the zone popup's 12px description, so a fixed size would be wrong in one context. */
  font-size: inherit;
  font-weight: 700;
  /* !important: theme's :focus/:active button color (often white) otherwise wins after click. */
  color: var(--mapfield_spots-link) !important;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--mapfield_spots-transition);
}
.mapfield_spots-map-list__desc-toggle:hover { color: var(--mapfield_spots-alert) !important; }
/* Caps the expanded description (same reasoning as the zone popup's, further down) so a very
   long one doesn't push every card below it down the list. Scrollbar colors inherit from
   .mapfield_spots-map-list__scroll, no need to repeat them. */
.mapfield_spots-map-list__desc-full {
  max-height: 200px;
}

.mapfield_spots-map-list__contact {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}
.mapfield_spots-map-list__contact a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 700;
  /* Theme's generic `a` styling can outrank a plain class here — same fix as the search input. */
  color: var(--mapfield_spots-link) !important;
  text-decoration: none !important;
  outline: none;
  /* Removes Chromium/WebKit's tap-highlight rectangle (distinct from the focus outline). */
  -webkit-tap-highlight-color: transparent;
  transition: color var(--mapfield_spots-transition);
}
.mapfield_spots-spot-card .mapfield_spots-map-list__contact a { font-size: 16px; }

.mapfield_spots-map-list__contact a:is(:hover, :focus, :active, :visited) {
  outline: none;
}
.mapfield_spots-map-list__contact a:hover { color: var(--mapfield_spots-alert) !important; }
.mapfield_spots-map-list__contact .dashicons {
  font-size: 14px;
  width: 12px;
  height: 15px;
}

.mapfield_spots-map-list__cta {
  display: block;
  text-align: center;
  margin-top: 12px;
  padding: 10px 16px;
  border-radius: var(--mapfield_spots-radius);
  background: var(--mapfield_spots-link);
  /* !important: theme's :focus/:active/:visited color otherwise wins after click, low-contrast on this bg. */
  color: #fff !important;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none !important;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--mapfield_spots-transition);
}
.mapfield_spots-spot-card .mapfield_spots-map-list__cta { font-size: 16px; }
.mapfield_spots-map-list__cta:is(:hover, :focus, :active, :visited) {
  color: #fff !important;
  outline: none;
}
.mapfield_spots-map-list__cta:hover { background: var(--mapfield_spots-alert); }
/* Full-width fits the narrow sidebar item but stretches awkwardly on the wider own-page column. */
.mapfield_spots-spot-card .mapfield_spots-map-list__cta {
  width: fit-content;
}

/* Secondary variant of .__cta above (outlined, not filled) — the Spot's own
   single page's "View on map" link, native-only so shares its sizing rules. */
.mapfield_spots-map-list__view-map {
  display: inline-block;
  margin-bottom: 12px;
  padding: 10px 16px;
  border: 1px solid var(--mapfield_spots-link);
  border-radius: var(--mapfield_spots-radius);
  color: var(--mapfield_spots-link) !important;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none !important;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--mapfield_spots-transition), color var(--mapfield_spots-transition);
}
.mapfield_spots-spot-card .mapfield_spots-map-list__view-map { font-size: 16px; }
.mapfield_spots-map-list__view-map:is(:hover, :focus, :active, :visited) {
  outline: none;
}
.mapfield_spots-map-list__view-map:hover {
  background: var(--mapfield_spots-link);
  color: #fff !important;
}

/* ── Social links (see Social_Field) ────────────────────────────────────── */
.mapfield_spots-map-list__social {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.mapfield_spots-map-list__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--mapfield_spots-link);
  outline: none;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--mapfield_spots-transition);
}
.mapfield_spots-map-list__social-link:hover { background: var(--mapfield_spots-alert); }
.mapfield_spots-map-list__social-link svg {
  width: 13px;
  height: 13px;
  fill: #fff;
}

/* ── Opening hours (collapsed by default, grouped consecutive days —
   see Hours_Field) ──────────────────────────────────────────────────── */
.mapfield_spots-map-list__hours { margin-top: 8px; }
.mapfield_spots-map-list__hours-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* A theme's own generic `button` styling (background/border/padding,
     often its native OS chrome too) can otherwise outrank a plain class
     here — that's the "boxed" look this toggle can pick up on some
     themes even after being clicked. Same reasoning as the search input
     fix further up. */
  padding: 0 !important;
  border: none !important;
  background: none !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  text-decoration: none !important;
  font-size: 13px;
  font-weight: 700;
  /* !important here too: a theme's own :focus/:active button color
     (often white, meant to pair with a background this toggle no longer
     has) otherwise wins once the button has been clicked, even after
     the pointer moves away — leaving invisible white-on-white text. */
  color: var(--mapfield_spots-link) !important;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--mapfield_spots-transition);
}
.mapfield_spots-spot-card .mapfield_spots-map-list__hours { max-width: 320px; }
.mapfield_spots-map-list__hours-toggle:hover { color: var(--mapfield_spots-alert) !important; }
.mapfield_spots-map-list__hours-toggle svg {
  transition: transform var(--mapfield_spots-transition);
}
.mapfield_spots-map-list__hours-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}
.mapfield_spots-map-list__hours-list {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  font-size: 12px;
  color: var(--mapfield_spots-text);
}
.mapfield_spots-map-list__hours-list li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 2px 0;
}
.mapfield_spots-map-list__hours-list li.is-today {
  font-weight: 700;
  color: var(--mapfield_spots-alert);
}

/* ── ACF fields (PRO, see Acf_Fields) ────────────────────────────────── */
.mapfield_spots-map-list__acf-field {
  margin-top: 10px;
  font-size: 14px;
  font-weight: bold;
  color: var(--mapfield_spots-text);
}
.mapfield_spots-map-list__acf-field-label {
  display: block;
  font-weight: initial;
  border-bottom: solid 0.5px var(--mapfield_spots-medium);
  margin-bottom: 4px;
  font-size: 11px;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--mapfield_spots-text) 70%, transparent);
}
/* color_picker --inline: swatch stays on the label's line, doesn't need its own row. */
.mapfield_spots-map-list__acf-field--inline .mapfield_spots-map-list__acf-field-label {
  display: inline;
}
/* link/url/email fields: same bold-link look as Website/Phone above, any anchor in an ACF row. */
.mapfield_spots-map-list__acf-field a {
  font-weight: 700;
  color: var(--mapfield_spots-link);
  text-decoration: none;
}
.mapfield_spots-map-list__acf-field a:hover {
  color: var(--mapfield_spots-alert);
}
/* color_picker: small swatch ahead of the hex/rgba value, not a replacement for it. */
.mapfield_spots-map-list__acf-swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 4px;
  margin-left: 4px;
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, .15);
  vertical-align: middle;
}
/* checkbox/select with multiple values: one tag per value instead of comma-joined text. */
.mapfield_spots-map-list__acf-tags {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
}
.mapfield_spots-map-list__acf-tag {
  display: inline-block;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--mapfield_spots-link);
  background: color-mix(in srgb, var(--mapfield_spots-link) 12%, transparent);
  border-radius: 999px;
}

/* ── Gallery thumbnails (list card) + lightbox ─────────────────────────── */
.mapfield_spots-map-list__gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-top: 8px;
}
/* Own page: __media column is narrower, so 3 columns reads better than 4. */
.mapfield_spots-spot-card__media .mapfield_spots-map-list__gallery {
  grid-template-columns: repeat(3, 1fr);
  margin-top: 0;
  margin-bottom: 1em;
}
.mapfield_spots-map-list__gallery-thumb {
  aspect-ratio: 1;
  background-size: cover;
  background-position: center;
  border: none;
  border-radius: calc(var(--mapfield_spots-radius) - 6px);
  padding: 0;
  outline: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity var(--mapfield_spots-transition);
}
.mapfield_spots-map-list__gallery-thumb:hover { opacity: .8; }
/* Past the 7 visible thumbs + "+N" tile, the rest stay in the DOM (lightbox can browse them) but are hidden. */
.mapfield_spots-map-list__gallery-thumb:nth-child(n+9) { display: none; }
.mapfield_spots-map-list__gallery-thumb--more { position: relative; }
.mapfield_spots-map-list__gallery-more {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.55);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  border-radius: inherit;
}

.mapfield_spots-lightbox {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.9);
  /* One above .mapfield_spots-preview-modal's z-index:99999 — a gallery from inside its
     iframe must sit on top; DOM order alone isn't reliable enough to depend on. */
  z-index: 100000;
  /* Opacity/visibility, not display:none, so it stays transitionable and hit-testable through
     the fade-out (visibility delayed). Same pattern as .mapfield_spots-map-list.is-collapsed. */
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility 0s linear .25s;
}
.mapfield_spots-lightbox.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity .25s ease, visibility 0s linear 0s;
}
.mapfield_spots-lightbox__img {
  max-width: 90vw;
  max-height: 90vh;
  border-radius: var(--mapfield_spots-radius);
  opacity: 1;
  transition: opacity .15s ease;
}
/* Toggled by gallery-lightbox.js around the src swap, so next/prev fades instead of popping. */
.mapfield_spots-lightbox__img.is-fading { opacity: 0; }
.mapfield_spots-lightbox__close,
.mapfield_spots-lightbox__nav {
  position: absolute;
  background: none;
  border: none;
  color: #fff;
  line-height: 1;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  transition: opacity var(--mapfield_spots-transition);
}
/* Repeats background/border-color: Astra's global Buttons setting injects an inline
   `button:hover{background-color:...}` that otherwise wins on hover alone (per-property
   cascade). This selector's two classes still outrank Astra's bare button:hover, no !important needed. */
.mapfield_spots-lightbox__close:hover,
.mapfield_spots-lightbox__nav:hover {
  opacity: .7;
  background: none;
  border-color: currentcolor;
}
.mapfield_spots-lightbox__close {
  top: 20px;
  right: 24px;
  font-size: 34px;
}
.mapfield_spots-lightbox__nav {
  top: 50%;
  transform: translateY(-50%);
  font-size: 48px;
  padding: 0px 8px 7px;
}
.mapfield_spots-lightbox__prev { left: 6px; }
.mapfield_spots-lightbox__next { right: 6px; }
/* Single-image galleries: no point offering prev/next, either would just re-show it. */
.mapfield_spots-lightbox:not(.has-multiple) .mapfield_spots-lightbox__nav {
  display: none;
}
.mapfield_spots-lightbox__title {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 20px;
  margin: 0;
  padding: 0 60px; /* clears the close/nav buttons on narrow viewports */
  text-align: center;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .6);
}
body.mapfield_spots-lightbox-open { overflow: hidden; }

/* Marker — custom SVG pin (MARKER_SVG in frontend.js), colored per category via inline fill.
   No `position` here on purpose: MapLibre itself positions (transform) this outer element. */
.mapfield_spots-marker {
  width: var(--mapfield_spots-marker-size);
  height: var(--mapfield_spots-marker-size);
  /* Explicit, not DOM order: this map's Spots always read as primary, overlay Spots (PRO)
     as secondary, regardless of which happens to overlap. */
  z-index: 1;
  cursor: pointer;
}
/* Raised above sibling markers (and zone/marker popups, z-index 2) while its label shows,
   so a later-added marker can't paint over the label of the one being read. */
.mapfield_spots-marker:hover,
.mapfield_spots-marker.is-active {
  z-index: 3;
}
/* `position: relative` anchor for the category dots below. */
.mapfield_spots-marker__inner {
  position: relative;
  width: 100%;
  height: 100%;
}
.mapfield_spots-marker__inner svg {
  width: 100%;
  height: 100%;
  display: block;
  /* Scoped to the icon, not the whole marker — a `filter` on an ancestor would also shadow
     the name label below with no way to opt out. */
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.35));
}
/* PRO custom marker image: natural width (no object-fit/crop), fixed height since this is
   the one shape the plugin doesn't control the proportions of. */
.mapfield_spots-marker__inner img {
  height: var(--mapfield_spots-marker-size);
  display: block;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.35));
}
/* Extra categories beyond the pin's primary color (buildCategoryDots() in frontend.js) —
   dots at the corner, capped at MAX_CATEGORY_DOTS with a "+n" badge. */
.mapfield_spots-marker__categories {
  position: absolute;
  top: -7px;
  left: 5px;
  display: flex;
  align-items: center;
  gap: 2px;
}
.mapfield_spots-marker__category {
  /* 9px, not smaller — matches .mapfield_spots-marker__category--more's
     own comment just below, which already assumes this size ("small
     enough to sit flush with the 9px dots"). At anything much smaller a
     dot is essentially unreadable at normal viewing distance, especially
     with 2-3 of them stacked in a 35px-wide marker's own corner. */
  width: 9px;
  height: 9px;
  border-radius: 2px;
  border: 1.5px solid #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.3);
}
/* No pill/circle behind this one — at marker scale, a background small
   enough to sit flush with the 9px dots left no room to grow the text
   inside it and stay legible. Same soft-shadow-for-contrast approach as
   .mapfield_spots-lightbox__title above instead, since the pin sits on
   whatever the map tiles underneath happen to be. */
.mapfield_spots-marker__category--more {
  width: auto;
  height: auto;
  padding-bottom: 3px;
  border: none;
  box-shadow: none;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 1px 3px rgba(0,0,0,.7);
}

/* Location name — only shown above the currently active/selected pin
   (see focusItem() in frontend.js, which toggles .is-active on the
   marker's own element the same way it already does for the matching
   list item). Hidden via opacity/visibility rather than display so it
   can transition in instead of popping. */
.mapfield_spots-marker__label {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  /* Reset — this is now an <h3>, which otherwise brings its own
     browser-default margin that would throw off the 6px gap above the
     pin (only margin-bottom is meant to do anything here). */
  margin: 0 0 10px;
  padding: 3px 10px;
  border-radius: 10px;
  border: solid 1px var(--mapfield_spots-text);
  background: var(--mapfield_spots-light);
  color: var(--mapfield_spots-text);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity .15s ease;
  pointer-events: none;
  /* Column: overlay Spots get a map-name line (.marker__label-source) stacked above the title row. */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
/* Own row so .marker__label-source (below) can sit above it instead of inline. */
.mapfield_spots-marker__label-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
/* Other Map Type's name, above an overlay Spot's title. Italic sets it apart from the bold title
   without needing another color/size. */
.mapfield_spots-marker__label-source {
  font-style: italic;
  font-weight: 400;
}
/* :hover alongside .is-active — lets mouse users preview a name without clicking (touch has no :hover). */
.mapfield_spots-marker.is-active .mapfield_spots-marker__label,
.mapfield_spots-marker:hover .mapfield_spots-marker__label {
  opacity: 1;
  visibility: visible;
}

/* Shrinks MapLibre's own FullscreenControl icon via background-size without touching the button box. */
.maplibregl-ctrl-fullscreen .maplibregl-ctrl-icon {
  background-size: 80%;
}
/* MapLibre's top-left corner ships z-index:2, tied with markers/zone popups so either can paint
   over it. A bare `.maplibregl-ctrl-top-left` here ties maplibre-gl.css's own rule in specificity
   and loses on cascade order (it's enqueued after); the extra ancestor class outranks it for real. */
.mapfield_spots-map-wrap .maplibregl-ctrl-top-left {
  z-index: 4;
}

/* ResetViewControl (MapLibre IControl, lives inside the map canvas). */
.mapfield_spots-reset-ctrl button {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333;
  background: #fff;
  border: none;
  width: 29px;
  height: 29px;
  padding: 0;
  transition: background var(--mapfield_spots-transition);
}
.mapfield_spots-reset-ctrl button:hover {
  background: var(--mapfield_spots-medium);
}

/* BuildingsToggleControl — toggles the 3D view; .is-active tints the icon (currentColor). */
.mapfield_spots-buildings-ctrl button {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333;
  background: #fff;
  border: none;
  width: 29px;
  height: 29px;
  padding: 0;
  transition: background var(--mapfield_spots-transition), color var(--mapfield_spots-transition);
}
.mapfield_spots-buildings-ctrl button:hover {
  background: var(--mapfield_spots-medium);
}
.mapfield_spots-buildings-ctrl button.is-active {
  color: var(--mapfield_spots-link);
}

/* SatelliteToggleControl — same look, only when this map's style needs and can use it. */
.mapfield_spots-satellite-ctrl button {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333;
  background: #fff;
  border: none;
  width: 29px;
  height: 29px;
  padding: 0;
  transition: background var(--mapfield_spots-transition), color var(--mapfield_spots-transition);
}
.mapfield_spots-satellite-ctrl button:hover {
  background: var(--mapfield_spots-medium);
}
.mapfield_spots-satellite-ctrl button.is-active {
  color: var(--mapfield_spots-link);
}

/* TerrainToggleControl — same look, offered on any style. */
.mapfield_spots-terrain-ctrl button {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333;
  background: #fff;
  border: none;
  width: 29px;
  height: 29px;
  padding: 0;
  transition: background var(--mapfield_spots-transition), color var(--mapfield_spots-transition);
}
.mapfield_spots-terrain-ctrl button:hover {
  background: var(--mapfield_spots-medium);
}
.mapfield_spots-terrain-ctrl button.is-active {
  color: var(--mapfield_spots-link);
}

/* List toggle — a plain button, direct sibling of canvas/list panel (not a MapLibre control), so
   it stacks above both via real z-index rather than MapLibre's own stacking contexts. */
.mapfield_spots-map-list-toggle {
  position: absolute;
  top: 8px;
  right: 8px; /* off the panel's 12px inset so it reads as detached, not flush */
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 29px;
  height: 29px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: #fff;
  color: #333;
  box-shadow: 0 1px 4px rgba(0,0,0,.3);
  transition: background var(--mapfield_spots-transition);
}
/* Explicit `none`, not just deleting the rule, so no browser/theme default can reintroduce it. */
.mapfield_spots-map-list-toggle:focus {
  outline: none;
}
.mapfield_spots-map-list-toggle:hover {
  background: var(--mapfield_spots-medium);
  color: #333;
}
/* Astra's `button:focus{color:#fff;background:var(--ast-global-color-1)}` otherwise wins after
   a click leaves this button :focus-ed (neither property was contested before). :not(:hover)
   keeps the :hover rule above working unaffected while still hovering. */
.mapfield_spots-map-list-toggle:focus:not(:hover),
.mapfield_spots-map-list-toggle.is-collapsed:focus:not(:hover) {
  background: #fff;
  color: #333;
}
.mapfield_spots-map-list-toggle svg {
  transition: transform .3s ease;
}
.mapfield_spots-map-list-toggle.is-collapsed svg {
  transform: rotate(180deg);
}

/* Category legend — bottom-left, the one corner of the map not already
   used by another control. Reuses .mapfield_spots-map-list__category
   for the pill look (same styling as the list's own category badges,
   per feedback) — this class only adds the legend-specific interactive
   bits: layout, hover/focus feedback, and the active (filtered) state. */
.mapfield_spots-map-legend {
  position: absolute;
  left: 12px;
  bottom: 12px;
  /* Same tier as .maplibregl-ctrl-top-left further up — a hovered/active
     marker (z-index:3) or a zone popup (z-index:2, further down) can
     otherwise paint over these category pills too. */
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  max-width: calc(100% - 24px);
}
.mapfield_spots-map-legend__item {
  cursor: pointer;
  transition: var(--mapfield_spots-transition) ease;
  border: 2px solid var(--mapfield_spots-bg, var(--mapfield_spots-medium));
}
.mapfield_spots-map-legend__item:hover {
  border: 2px solid white;
}
/* :focus-visible (not a blanket :focus removal) so a keyboard user
   tabbing through categories still gets the same visible white border
   as :hover just above — a real WCAG 2.4.7 gap this used to have (the
   item is keyboard-focusable, tabindex="0", but was fully invisible
   once focused: no outline, no hover-style fallback, nothing). */
.mapfield_spots-map-legend__item:focus {
  outline: none;
}
.mapfield_spots-map-legend__item:focus-visible {
  border: 2px solid white;
}
/* Isolated/active category — clicking it again (or any other category)
   clears this. See wireLegend() in frontend.js. */
.mapfield_spots-map-legend__item.is-active {
  box-shadow: 0 0 0 2px var(--mapfield_spots-light);
}
/* While one category is isolated, dim the others so the active one reads
   clearly as the current filter — .has-filter is toggled on the legend
   container itself (not derived per-item) since exactly one item is ever
   active at a time. */
.mapfield_spots-map-legend.has-filter .mapfield_spots-map-legend__item:not(.is-active) {
  opacity: .5;
}

/* Right-click-drag has no visible affordance — this is the only hint it exists. Sits right of
   MapLibre's top-left control stack (39px = 29px button + 10px margin), styled to match its
   .maplibregl-ctrl-group look. See wireRotateHint() in frontend.js. */
.mapfield_spots-rotate-hint {
  position: absolute;
  top: 0;
  left: 39px;
  margin: 10px 0 0 10px;
  /* Same tier as .maplibregl-ctrl-top-left — a marker/zone popup can paint over this hint too. */
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px 4px 7px;
  border-radius: 4px;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, .1);
  background: #fff;
  color: #333;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  pointer-events: none; /* an instruction, not a control — never blocks the drag it's explaining */
  opacity: 1;
  transition: opacity .3s ease;
}
.mapfield_spots-rotate-hint svg {
  flex: none;
  fill: #333;
  /* SVG root clips to its viewBox by default — the scale(1.5) pulse pokes past that. */
  overflow: visible;
}
/* Picked out in the plugin's red, pulsing to draw the eye. fill-box + center: an SVG <path>
   has no natural box to scale from, so it'd otherwise scale from the icon's corner. */
.mapfield_spots-rotate-hint__btn {
  fill: var(--mapfield_spots-alert);
  transform-box: fill-box;
  transform-origin: center;
  /* steps(1): a hard blink reads as "look here" better than a smooth pulse. */
  animation: mapfield_spots-rotate-hint-pulse 1s steps(1) infinite;
}
@keyframes mapfield_spots-rotate-hint-pulse {
  0%, 49%   { transform: scale(1); }
  50%, 100% { transform: scale(1.5); }
}

/* spot-preview-modal.js trigger, next to every marker's name label (buildExpandButtonHtml()).
   Bare icon, no button chip: background/border explicitly reset since a theme's generic `button`
   would otherwise fill it in (confirmed live as a solid blue square on Astra). Two classes deep
   already outranks a theme's plain `button`, no !important needed. */
.mapfield_spots-marker__label .mapfield_spots-overlay-popup__expand {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background: none;
  color: var(--mapfield_spots-link);
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  transition: var(--mapfield_spots-transition);
  /* Label is pointer-events:none by default; inherited, so this button needs its own auto override. */
  pointer-events: auto;
}
.mapfield_spots-marker__label .mapfield_spots-overlay-popup__expand:hover {
  color: var(--mapfield_spots-medium);
}
/* Sized here, not via the <svg>'s own attributes — one place to change this icon's size. */
.mapfield_spots-overlay-popup__expand-icon {
  width: 18px;
  height: 18px;
}
/* .mapfield_spots-marker__inner svg (above) shadows every svg under it, including this icon
   once nested in the label — reads as a stray smudge at this size. Not needed in the overlay
   popup's own separate DOM copy of this icon. */
.mapfield_spots-marker__label .mapfield_spots-overlay-popup__expand-icon {
  filter: none;
}
/* frontend.js also adds this button onto list card roots for the mobile compact card
   (@media max-width:782px) — hidden here, that breakpoint styles/reveals it. */
.mapfield_spots-map-list__item > .mapfield_spots-overlay-popup__expand {
  display: none;
}

/* maybe_render_spot_preview() has no theme to size/center its content; .mapfield_spots-spot-card
   already caps width (880px), this just keeps it off the viewport edges. */
.mapfield_spots-spot-preview {
  max-width: 880px;
  margin: 24px auto;
  padding: 0 20px;
}

/* Front-end "View details" modal — same skeleton as admin's "Full preview" (map-preview-modal.js,
   admin.css), rebuilt here since this stylesheet must work standalone. */
.mapfield_spots-preview-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--mapfield_spots-transition) ease, visibility 0s linear var(--mapfield_spots-transition);
}
.mapfield_spots-preview-modal--open {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--mapfield_spots-transition) ease, visibility 0s linear;
}
.mapfield_spots-preview-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .55);
}
.mapfield_spots-preview-dialog {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(.96);
  width: min(96vw, 900px);
  /* Capped, not fixed height (used to be `height: min(90vh,800px)`) — content height varies a
     lot per Spot; the iframe follows real content height via syncHeight(), .preview-body's
     overflow-y takes over once taller than this ceiling. */
  max-height: min(90vh, 800px);
  background: #fff;
  border-radius: var(--mapfield_spots-radius);
  box-shadow: 0 12px 48px rgba(0, 0, 0, .28);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  transition: transform var(--mapfield_spots-transition) ease, opacity var(--mapfield_spots-transition) ease;
}
.mapfield_spots-preview-modal--open .mapfield_spots-preview-dialog {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}
.mapfield_spots-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--mapfield_spots-medium);
  flex-shrink: 0;
}
.mapfield_spots-preview-close {
  background: none;
  border: none;
  font-size: 22px;
  line-height: 1;
  color: var(--mapfield_spots-text);
  opacity: .6;
  padding: 1px 5px 5px 5px;
}
.mapfield_spots-preview-close:hover { opacity: 1; }
.mapfield_spots-preview-body {
  position: relative;
  flex: 1 1 auto;
  /* Scrolls the dialog's content, not the iframe's own, once content+header exceed max-height.
     Themed via pimp-scrollbar (added in spot-preview-modal.js), which already carries its
     own no-JS overflow-y:auto fallback. */
}
.mapfield_spots-preview-body .mapfield_spots-preview-iframe {
  display: block;
  width: 100%;
  /* Placeholder before JS sets real height (spot-preview-modal.js); invisible the whole time
     (is-loading below) so exact value doesn't matter. No transition — would flash an inner
     scrollbar while animating shorter than loaded content. */
  height: 400px;
  border: 0;
}
/* Same stale-paint fix as the admin modal's is-loading rule — hidden until 'load' fires. */
.mapfield_spots-preview-body .mapfield_spots-preview-iframe.is-loading {
  visibility: hidden;
}

/* "View on map" popup (spot-map-modal.js) — fixed-size skeleton copied from
   the admin's own "Full preview" modal (map-preview-modal.js/admin.css),
   not spot-preview-modal.js above: the embedded page is always
   height:100vh, not a card with a natural height to size to. */
.mapfield_spots-map-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--mapfield_spots-transition) ease, visibility 0s linear var(--mapfield_spots-transition);
}
.mapfield_spots-map-modal.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--mapfield_spots-transition) ease, visibility 0s linear;
}
.mapfield_spots-map-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .55);
}
.mapfield_spots-map-modal__dialog {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(.96);
  width: min(96vw, 1000px);
  height: min(90vh, 800px);
  background: #fff;
  border-radius: var(--mapfield_spots-radius);
  box-shadow: 0 12px 48px rgba(0, 0, 0, .28);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  transition: transform var(--mapfield_spots-transition) ease, opacity var(--mapfield_spots-transition) ease;
}
.mapfield_spots-map-modal.is-open .mapfield_spots-map-modal__dialog {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}
.mapfield_spots-map-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--mapfield_spots-medium);
  flex-shrink: 0;
}
.mapfield_spots-map-modal__close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  color: var(--mapfield_spots-text);
  opacity: .6;
  padding: 0;
}
.mapfield_spots-map-modal__close:hover { opacity: 1; }
.mapfield_spots-map-modal__body {
  position: relative;
  flex: 1 1 auto;
}
.mapfield_spots-map-modal__iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.mapfield_spots-map-modal__iframe.is-loading {
  visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .mapfield_spots-rotate-hint__btn { animation: none; }
}
.mapfield_spots-rotate-hint.is-hidden {
  opacity: 0;
}

/* Some classic themes (confirmed Astra) fix the featured image's height with no matching
   object-fit, squishing it vertically. .wp-post-image is core's universal class for it,
   a safe hook regardless of theme/template type. */
body.mapfield_spots-archive .wp-post-image {
  object-fit: cover;
}

/* ── Category archive / search results with a Spot (is_own_archive()); Twenty Twenty-Five's
   search template reuses the same Query Loop markup as taxonomy archives. ──
   Reflows the stacked image/title/date/description into image-beside-text via a float
   (add_archive_body_class()). CSS Grid was tried first but a spanning item taller than its rows
   distributes extra height across them even at min-content, stretching gaps unevenly; float
   sidesteps that since the image is out of flow. Reliable on block themes, inert on classic. */
body.mapfield_spots-archive .wp-block-query-title {
  /* Same "constrained layout" behaviour as the post title below — otherwise inset from the left edge. */
  max-width: none;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}
@media (min-width: 700px) {
  body.mapfield_spots-archive .wp-block-post > .wp-block-group {
    /* Own block-formatting context so height properly contains the float below. */
    display: flow-root;
  }
  /* !important: page builders (Elementor's "elementor-kit-*" body class) commonly ship a
     global image-margin reset that otherwise wins regardless of source order. */
  body.mapfield_spots-archive .wp-block-post-featured-image {
    float: left;
    width: 400px;
    margin: 0 16px 0 0 !important;
  }
  /* Twenty Twenty-Five's "constrained" layout centers/shrinks title and date under its
     content-width preset while the "alignfull" description escapes it — neutralized so all
     three wrap the float at the same left edge. */
  body.mapfield_spots-archive .wp-block-post-title,
  body.mapfield_spots-archive .wp-block-post-date {
    max-width: none;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
  body.mapfield_spots-archive .wp-block-post-title {
    margin-top: 0;
    margin-bottom: 8px;
  }
  /* This block's "alignfull" bleed + "has-global-padding" fight the float, misaligning the
     description from the title above; flattened to 0 so it wraps at the same left edge. */
  body.mapfield_spots-archive .wp-block-post-content {
    margin-top: 0;
    margin-bottom: 8px;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    /* Capped to a readable line length on a wide screen. */
    max-width: 700px;
  }
  /* Date renders last in this template; its margin is an inline style from its spacing preset,
     overridable only with !important. */
  body.mapfield_spots-archive .wp-block-post-date {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}

@media (max-width: 782px) {
  .mapfield_spots-map-wrap { height: auto; overflow: visible; }
  /* A flat 380px left too little vertical room on short viewports, forcing fitBounds() into an
     aggressively zoomed-out fit (see getFitPadding()). Scaled to viewport height instead, clamp()-bounded. */
  .mapfield_spots-map-canvas { height: clamp(320px, 55vh, 480px); }
  /* Right-click-drag isn't a touch gesture — nothing to hint at here. */
  .mapfield_spots-rotate-hint { display: none; }
  /* Overlay-and-toggle only makes sense with desktop room — plain block below the map instead,
     toggle hidden rather than shown disabled. */
  .mapfield_spots-map-list {
    position: static;
    width: auto;
    margin-top: 20px;
    box-shadow: none;
    transform: none !important;
    visibility: visible !important;
  }
  /* No floating toggle button to clear here — back to plain, even padding. */
  .mapfield_spots-map-list__scroll {
    padding: 16px 8px 16px 16px;
    overflow-x: auto; /* no-JS fallback, mirrors base class's overflow-y:auto */
  }
  .mapfield_spots-map-list-toggle { display: none; }
  /* iOS Safari's Fullscreen API on a plain element never truly hides Safari's own chrome
     (confirmed live) — hide the control. A media query, not a JS check, keeps tracking a
     desktop window resized narrower. .maplibregl-ctrl-group button is (0,1,1); a bare class loses to it regardless of order. */
  .maplibregl-ctrl-group button.maplibregl-ctrl-fullscreen,
  .maplibregl-ctrl-group button.maplibregl-ctrl-shrink {
    display: none;
  }
  /* Horizontal card row, not a vertical stack: keeps the already-short mobile map's footprint
     fixed regardless of card count. pimp-scrollbar.js wraps children in
     .pimp-scrollbar__content at init; no max-height so the row's height always matches
     its tallest card, leaving nothing for the scrollbar to detect as vertical overflow. */
  .mapfield_spots-map-list__scroll .pimp-scrollbar__content {
    display: flex;
    align-items: stretch;
    gap: 14px;
  }
  .mapfield_spots-map-list__item {
    flex: 0 0 260px;
    margin-bottom: 0;
    /* Overrides the row's align-items:stretch — a shorter card stretching to the tallest
       card's height just added empty background instead of showing more. */
    align-self: start;
    /* Positioning context for the expand button below, pinned to this card's corner. */
    position: relative;
  }
  /* A full-field card made the row track its tallest card, bad for sideways scrolling. Cut down
     to title/photo/categories, rest one tap away via the expand button (buildExpandButtonHtml()),
     reusing the same "View details" popup an overlay marker already opens. */
  .mapfield_spots-map-list__item .mapfield_spots-map-list__directions,
  .mapfield_spots-map-list__item .mapfield_spots-map-list__rating,
  .mapfield_spots-map-list__item .mapfield_spots-map-list__gallery,
  .mapfield_spots-map-list__item .mapfield_spots-map-list__desc,
  .mapfield_spots-map-list__item .mapfield_spots-map-list__contact,
  .mapfield_spots-map-list__item .mapfield_spots-map-list__social,
  .mapfield_spots-map-list__item .mapfield_spots-map-list__hours,
  .mapfield_spots-map-list__item .mapfield_spots-map-list__cta,
  .mapfield_spots-map-list__item .mapfield_spots-map-list__acf-field {
    display: none;
  }
  /* Same button buildExpandButtonHtml() gives an overlay marker popup, pinned to this card's
     top-right corner as a badge instead of inline text. `color` is needed since the icon's
     currentColor fill would otherwise pick up Astra's white default, white-on-white. */
  .mapfield_spots-map-list__item > .mapfield_spots-overlay-popup__expand {
    position: absolute;
    top: -10px;
    right: -10px;
    z-index: 1;
    display: inline-flex;
    width: 34px;
    height: 34px;
    background: var(--mapfield_spots-light);
    color: var(--mapfield_spots-link);
    border: none;
    border-radius: 50%;
    /* Explicit none clears a theme's (Astra's) default button shadow. */
    box-shadow: none;
    padding: 0;
    transition: var(--mapfield_spots-transition);
  }
  .mapfield_spots-map-list__item > .mapfield_spots-overlay-popup__expand:hover {
    color: var(--mapfield_spots-medium);
  }
  /* No `>` here — the icon is the button's child, not the card's; without this it fell back
     to an unconstrained <svg>'s tiny default size. */
  .mapfield_spots-map-list__item > .mapfield_spots-overlay-popup__expand .mapfield_spots-overlay-popup__expand-icon {
    width: 34px;
    height: 34px;
  }
  /* .map-list__item:hover also fires when hovering the badge (its -10px offset sits on the
     card's border), making the border look like it cuts across the icon; keeps card hover at
     rest while the badge itself is what's under the pointer. */
  .mapfield_spots-map-list__item:has(> .mapfield_spots-overlay-popup__expand:hover) {
    border-color: var(--mapfield_spots-medium);
    box-shadow: none;
  }
  /* Desktop overlays the legend on the map's bottom-left corner; the short mobile canvas can't
     spare that room (also fights the control stack/attribution). Dropped to a static block in
     normal flow, wrapping into a compact chip cluster. */
  .mapfield_spots-map-legend {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    max-width: none;
    margin: 12px 0 0;
  }
}