/* ==========================================================================
   KF Elements — Map
   --------------------------------------------------------------------------
   A rounded, bordered frame per location, one to three across. The frame holds
   either the consented embed or the placeholder, and the placeholder LOADS
   NOTHING: no image, no `url()` to any host, no font — a flat panel on the
   deeper surface token with one link in the middle of it.

   THE FRAME'S RADIUS IS 14px AND NOT `--kfe-radius-card`, deliberately: a map
   is not a card, and the reference draws the two at different radii
   (post-323 :258-260 against :139-146). The height is the `--kfe-map-h` token
   that the widget's own `map_height` control writes on `{{WRAPPER}} .kfe`,
   read here with the reference's 420px as its fallback — a token and not a
   direct property, because a control selector writes from inside no media
   query and would outrank this file's own rules (the chrome lane's
   measurement, ADR-0004).

   Tokens only: every colour reads a --kfe-* custom property from base.css with
   today's value as its fallback (ADR-0004 decision 2).
   ========================================================================== */

.kfe .kfe-map .head { margin-bottom: 26px; text-align: var(--kfe-head-align, start); }
.kfe .kfe-map .head .kfe-map-title {
  font-family: var(--kfe-font-heading);
  font-weight: var(--kfe-heading-weight);
  color: var(--kfe-heading, var(--kfe-primary));
  letter-spacing: -0.01em;
  margin: 0;
  font-size: var(--kfe-title-size, var(--kfe-h2-size, clamp(1.8rem, 3.4vw, 2.7rem)));
  line-height: 1.22;
}
.kfe .kfe-map.kfe-dark .head .kfe-map-title { color: #fff; }
/* NO measure on the intro, for the reason compare-table.css gives: the
   reference's lead-in above the frame runs the wrap's full width. */
.kfe .kfe-map .intro {
  color: var(--kfe-body, var(--kfe-muted));
  font-size: var(--kfe-body-size, 17px);
  margin-bottom: 26px;
}
.kfe .kfe-map .intro p + p { margin-top: 16px; }
.kfe .kfe-map .intro ul, .kfe .kfe-map .intro ol { margin: 16px 0 0; padding-inline-start: var(--kfe-list-indent); }
.kfe .kfe-map .intro li + li { margin-top: 6px; }
.kfe .kfe-map .intro a { color: var(--kfe-link, var(--kfe-accent)); }

.kfe .kfe-map-grid { display: grid; grid-template-columns: repeat(1, 1fr); gap: 24px; }

.kfe .kfe-map .kfe-map-frame { margin: 0; }
.kfe .kfe-map .kfe-map-canvas {
  border-radius: 14px;
  border: 1px solid var(--kfe-line);
  overflow: hidden;
  block-size: var(--kfe-map-h, 420px);
  line-height: 0;
  background: var(--kfe-surface-deep);
}
.kfe .kfe-map .kfe-map-canvas iframe {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  border: 0;
}

/* The placeholder: a flat panel and a link, and nothing that fetches. */
.kfe .kfe-map .kfe-map-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 100%;
  block-size: 100%;
  padding: 24px;
  text-align: center;
  line-height: 1.5;
}

.kfe .kfe-map .kfe-map-caption {
  /* `font-style: normal` is not belt and braces: read on the lane's harness,
     the caption came out ITALIC, because a `<figcaption>` picks up a theme (or
     Elementor) default the reference's own caption — a plain `<p>` after the
     map — never sees. The element is right; the slant is not. */
  font-style: normal;
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  color: var(--kfe-body, var(--kfe-muted));
  font-size: 15px;
}
.kfe .kfe-map .kfe-map-caption .cap { color: var(--kfe-heading, var(--kfe-primary)); font-weight: 600; }

/* dark-ground treatment, in the pack's idiom (feature-grid.css) */
.kfe .kfe-map.kfe-dark .intro { color: var(--kfe-on-dark); }
.kfe .kfe-map.kfe-dark .intro a { color: #fff; }
.kfe .kfe-map.kfe-dark .kfe-map-canvas {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
}
.kfe .kfe-map.kfe-dark .kfe-map-caption { color: var(--kfe-on-dark); }
.kfe .kfe-map.kfe-dark .kfe-map-caption .cap { color: #fff; }

/* NO breakpoint rule on the grid, deliberately. `columns` is responsive and
   defaults to 1 on every device, and a rule here at (0,3,0) would outrank the
   control's own `{{WRAPPER}} .kfe-map-grid` at (0,2,0) and quietly undo a
   mobile column count an editor had set — the specificity trap the chrome lane
   measured (ADR-0004's w2.kfe-chrome.1 section). This widget is new, so there
   is no pre-control page to net. */