/* Place-map popovers: inline place links, desktop popover, touch bottom sheet. */
/* Specificity must beat `.legal-section a` (sections.css), which colours all body links accent red. */
a.place-link, .legal-section a.place-link { color: inherit; text-decoration: underline dotted var(--ink2); text-decoration-thickness: 1px; text-underline-offset: 3px; cursor: pointer; }
.place-link::after { content: ""; display: inline-block; width: .7em; height: .7em; margin-left: .15em; vertical-align: -.05em;
  background: currentColor; opacity: .55;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") center/contain no-repeat; }
a.place-link:hover, a.place-link:focus-visible, a.place-link[aria-expanded="true"],
.legal-section a.place-link:hover, .legal-section a.place-link:focus-visible, .legal-section a.place-link[aria-expanded="true"] { color: var(--accent-600); text-decoration-color: var(--accent-600); }
.place-link:focus-visible { outline: 2px solid var(--accent-600); outline-offset: 2px; border-radius: var(--radius-xs); }

.pp-layer { position: fixed; inset: 0; z-index: 170; pointer-events: none; }
.pp-backdrop { position: absolute; inset: 0; background: rgba(38, 64, 58, .28); opacity: 0; transition: opacity .18s ease; pointer-events: auto; }
.pp-card { position: absolute; width: min(320px, calc(100vw - 32px)); background: var(--paper); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-3xl); box-shadow: var(--shadow-xl);
  padding: 14px 16px 12px; font-family: var(--font-sans); pointer-events: auto; opacity: 0; transform: translateY(4px);
  transition: opacity .16s ease, transform .16s ease; }
.pp-open .pp-card, .pp-open .pp-backdrop { opacity: 1; transform: none; }
.pp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.pp-title { font-family: var(--font-serif); font-size: 1.15rem; line-height: 1.25; margin: 0; }
.pp-cat { font-size: .8rem; color: var(--stone); margin: 2px 0 0; letter-spacing: .02em; }
.pp-close { flex: none; width: 44px; height: 44px; margin: -10px -10px 0 0; border: 0; background: none; color: var(--ink);
  border-radius: var(--radius-pill); cursor: pointer; font-size: 1.4rem; line-height: 1; }
.pp-close:focus-visible { outline: 2px solid var(--accent-600); }
.pp-map { display: block; width: 100%; height: auto; max-height: 34vh; margin: 8px 0 6px; }
.pp-land { fill: var(--sand); stroke: var(--mist); stroke-width: 1.2; }
.pp-other { fill: var(--ink2); opacity: .35; }
.pp-dot { fill: var(--accent-500); stroke: var(--paper); stroke-width: 3; }
.pp-ring { fill: none; stroke: var(--accent-500); stroke-width: 3; opacity: .55; }
.pp-blurb { font-size: .95rem; line-height: 1.45; margin: 0 0 8px; }
.pp-links { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0 0 6px; }
.pp-links a { color: var(--accent-600); font-size: .9rem; min-height: 44px; display: inline-flex; align-items: center; }
.pp-attr { font-size: .72rem; line-height: 1.4; color: var(--stone); margin: 0; }
.pp-attr a { color: var(--stone); text-decoration: underline; }

/* Photo next to the map. align-self:start + fixed aspect via width/height attrs: the grid row never clips the photo. */
.pp-card.pp-has-photo { width: min(540px, calc(100vw - 32px)); }
.pp-media { display: grid; grid-template-columns: 1.15fr 1fr; gap: 10px; align-items: center; margin: 8px 0 6px; }
.pp-media .pp-map { margin: 0; }
.pp-photo { margin: 0; align-self: start; background: var(--sand); border-radius: var(--radius-lg); }
.pp-photo img { display: block; width: 100%; height: auto; max-height: 34vh; object-fit: contain; border-radius: var(--radius-lg); }

@media (hover: none), (pointer: coarse) {
  .pp-card { left: 0 !important; right: 0; top: auto !important; bottom: 0; width: 100%; max-height: 45vh; overflow-y: auto;
    border-radius: var(--radius-3xl) var(--radius-3xl) 0 0; padding-bottom: calc(12px + env(safe-area-inset-bottom)); transform: translateY(24px); }
  .pp-card::before { content: ""; display: block; width: 40px; height: 4px; margin: -4px auto 8px; border-radius: 2px; background: var(--line); }
  .pp-map { max-height: 22vh; }
  .pp-card.pp-has-photo { width: 100%; max-height: 58vh; }
  .pp-has-photo .pp-map, .pp-photo img { max-height: 17vh; }
}
@media (hover: hover) and (pointer: fine) { .pp-backdrop { display: none; } }
@media (prefers-reduced-motion: reduce) { .pp-card, .pp-backdrop { transition: none; transform: none; } }