/* "Find us" map, blended into its section card (Richard, 29 Sept): the map fills the card edge to
   edge, its land colour IS the card fill (assets/map/ddc-dark.json), and the canvas fades out to
   the card at every edge, so there is no box - just the map dissolving into the card.
   Pins: brand green with the mock's purple halo pulse. Zoom: our glass pill. Popups: dark pills. */

/* A section card holding ONLY the map loses its shell padding so the map reaches the card edge; the card's
   own radius and overflow clip it. Scoped to a map-only shell (30 Sept): the old :has(.ukmap) form also hit
   Home's contact section, whose map sits inside Find us, and pushed the whole section to the card edge. */
:is(.section-card, .section) > .shell:only-child:has(> :only-child .ddc-sc.ukmap) { padding: 0; max-width: none; gap: 0; }

.ddc-sc.ukmap { --map-ground: var(--card); position: relative; width: 100%; overflow: hidden; background: var(--map-ground); border-radius: 0; isolation: isolate; }
.ddc-sc .ukmap__canvas { width: 100%; height: clamp(calc(var(--tile-min) + var(--gap-60)), 42vw, calc(var(--tile-min) + var(--gap-120) * 2)); background: var(--map-ground); }

/* Inside the mock's .place panel (text left, map right): the map sits INSIDE the panel's padding with its
   own rounded corners, exactly as the signed-off mock - never bleeding to the panel's edges (1 Oct, Richard:
   "nothing touching edges"; replaces the 29 Sept edge bleed). Takes the panel's --paper ground. */
.place .ddc-sc.ukmap { --map-ground: var(--paper); border-radius: var(--r-card); overflow: hidden; }
.place > :has(.ddc-sc.ukmap) { align-self: stretch; min-width: 0; }
.place > :has(.ddc-sc.ukmap) :is(.elementor-widget-shortcode, .elementor-widget-container, .elementor-shortcode, .ddc-sc.ukmap, .ukmap__canvas) { height: 100%; }
.place .ukmap__canvas { min-height: clamp(var(--tile-min), 60vw, calc(var(--tile-min) + var(--gap-120))); }
@media (width >= 900px) {
  .place .ukmap__canvas { min-height: clamp(calc(var(--tile-min) + var(--gap-40)), 30vw, calc(var(--tile-min) + var(--gap-100))); }
}
.ddc-sc .ukmap__img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Soft fade to the card at every edge. Masking the canvas (not overlaying it) keeps the pins,
   popups and controls crisp on top. */
.ddc-sc.ukmap .maplibregl-canvas {
  -webkit-mask-image: radial-gradient(ellipse 72% 78% at 50% 50%, var(--white) 52%, transparent 100%);
          mask-image: radial-gradient(ellipse 72% 78% at 50% 50%, var(--white) 52%, transparent 100%);
}
.ddc-sc.ukmap .maplibregl-canvas:focus-visible { outline: none; }
/* In Find us the map is a crisp rounded panel, as the mock: no edge fade. */
.place .ddc-sc.ukmap .maplibregl-canvas { -webkit-mask-image: none; mask-image: none; }

/* Pins */
.mappin {
  position: relative; display: block; width: calc(var(--gap-10) + var(--gap-4)); height: calc(var(--gap-10) + var(--gap-4));
  border-radius: 50%; background: var(--ddc-green); box-shadow: 0 0 0 calc(var(--mark-w) + var(--hair)) var(--card); cursor: pointer;
}
/* Head office (Richard, 1 Oct): purple, not green. Purple on the dark map is ~1.6:1, so a white ring
   carries the 3:1 edge; the ping swaps to green so the two pin types stay opposites. */
.mappin--hq {
  width: var(--gap-20); height: var(--gap-20); background: var(--ddc-purple);
  box-shadow: 0 0 0 var(--mark-w) var(--white), 0 0 0 calc(var(--mark-w) * 2 + var(--hair)) var(--card);
}
.mappin--hq::before { background: var(--ddc-green); }
.mappin::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%;
  background: var(--ddc-purple); opacity: .6; animation: ddc-pin-ping calc(var(--dur-slow) * 5) var(--ease) infinite;
}
.mappin--hq::before { animation-delay: calc(var(--dur-slow) * -2); }
@keyframes ddc-pin-ping {
  0% { transform: scale(1); opacity: .6; }
  70%, 100% { transform: scale(3.2); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .mappin::before { animation: none; opacity: 0; } }

/* Zoom controls: glass pill. MapLibre's icons are dark SVGs, inverted to white. */
.ddc-sc .maplibregl-ctrl-top-right { top: var(--gap-20); right: var(--gap-20); }
.ddc-sc .maplibregl-ctrl-top-right .maplibregl-ctrl { margin: 0; }
.ddc-sc.ukmap .maplibregl-ctrl.maplibregl-ctrl-group {
  display: grid; overflow: hidden; background: var(--glass); border: var(--hair) solid var(--glass-line);
  border-radius: var(--r-pill); box-shadow: none; -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
}
.ddc-sc .maplibregl-ctrl-group button {
  width: var(--icon-circle); height: var(--icon-circle); padding: 0; margin: 0; border: 0; border-radius: 0;
  background: transparent; color: var(--white); transition: background-color var(--dur-fast) var(--ease);
}
.ddc-sc .maplibregl-ctrl-group button + button { border-top: var(--hair) solid var(--glass-line); }
.ddc-sc .maplibregl-ctrl-group button:is(:hover, :focus) { background: var(--ddc-green); color: var(--on-green); border-color: var(--ddc-green); outline: none; }
.ddc-sc .maplibregl-ctrl-group button:focus-visible { box-shadow: inset 0 0 0 var(--mark-w) var(--white); }
.ddc-sc .maplibregl-ctrl-group .maplibregl-ctrl-icon { filter: invert(1); opacity: .9; }

/* Attribution: kept (OpenFreeMap / OpenStreetMap licence), small and muted. */
.ddc-sc .maplibregl-ctrl-bottom-right { right: var(--gap-10); bottom: var(--gap-6); }
.ddc-sc.ukmap .maplibregl-ctrl.maplibregl-ctrl-attrib {
  margin: 0; padding: 0; background: transparent;
  font: 400 var(--fs-label)/1.4 var(--font); letter-spacing: 0; color: var(--muted); opacity: .75;
}
.ddc-sc .maplibregl-ctrl-attrib a { color: inherit; text-decoration: none; }
.ddc-sc .maplibregl-ctrl-attrib a:hover { color: var(--white); }

/* Popups: dark pills, never MapLibre's white boxes. */
.ddc-sc.ukmap .maplibregl-popup .maplibregl-popup-content {
  padding: var(--gap-6) var(--gap-10); border-radius: var(--r-pill); background: var(--paper); color: var(--white);
  font: 500 var(--fs-small)/1.3 var(--font); box-shadow: var(--shadow-pill); border: var(--hair) solid var(--line);
}
.ddc-sc .maplibregl-popup-anchor-bottom .maplibregl-popup-tip,
.ddc-sc .maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip,
.ddc-sc .maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip { border-top-color: var(--paper); }
.ddc-sc .maplibregl-popup-anchor-top .maplibregl-popup-tip,
.ddc-sc .maplibregl-popup-anchor-top-left .maplibregl-popup-tip,
.ddc-sc .maplibregl-popup-anchor-top-right .maplibregl-popup-tip { border-bottom-color: var(--paper); }

/* "Use ctrl + scroll to zoom" hint, in our type on a card-coloured scrim. */
.ddc-sc .maplibregl-cooperative-gesture-screen { background: var(--scrim-ink); font: 500 var(--fs-body)/1.4 var(--font); color: var(--white); }