.ua-regional-board {
  position: relative;
  max-width: 1100px;
  margin-top: clamp(28px, 4vw, 52px);
}

.ua-regional-map {
  position: relative;
  aspect-ratio: 720 / 520;
  min-height: 420px;
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: clamp(20px, 3vw, 34px);
  background:
    radial-gradient(circle at 72% 20%, rgba(227, 218, 242, 0.42), transparent 28%),
    linear-gradient(145deg, var(--paper) 0%, #f3f0e9 100%);
  box-shadow: 0 28px 72px rgba(33, 30, 26, 0.08);
  isolation: isolate;
}

.ua-regional-geography,
.ua-regional-route,
.ua-regional-pins {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.ua-regional-geography { z-index: 0; object-fit: fill; }
.ua-regional-route { z-index: 1; pointer-events: none; }
.ua-regional-route path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 4px 8px rgba(46, 90, 120, 0.16));
}

.ua-regional-pins { z-index: 3; pointer-events: none; }
.ua-regional-pin {
  position: absolute;
  left: var(--map-x);
  top: var(--map-y);
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  pointer-events: auto;
  translate: -50% -50%;
}

.ua-regional-marker {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 3px;
  border: 1px solid rgba(33, 30, 26, 0.18);
  border-radius: 50% 50% 50% 14px;
  background: var(--paper);
  box-shadow: 0 9px 22px rgba(33, 30, 26, 0.18);
  rotate: -45deg;
  transition: scale 180ms var(--ease), box-shadow 180ms var(--ease);
}

.ua-regional-marker img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  rotate: 45deg;
}

.ua-regional-marker-sky { background: var(--sky); }
.ua-regional-marker-lilac { background: var(--lilac); }
.ua-regional-marker-paper { background: var(--paper); }
.ua-regional-marker-rose { background: var(--aurora-rose); }

.ua-regional-label {
  position: absolute;
  left: calc(100% - 2px);
  top: 50%;
  padding: 4px 7px 5px;
  border: 1px solid rgba(33, 30, 26, 0.08);
  border-radius: 7px;
  background: rgba(250, 248, 244, 0.9);
  box-shadow: 0 4px 12px rgba(33, 30, 26, 0.06);
  font-family: var(--font-brand);
  font-size: 0.75rem;
  font-weight: 620;
  line-height: 1;
  white-space: nowrap;
  translate: 0 -50%;
}

.ua-regional-pin-stockholm .ua-regional-label {
  left: auto;
  right: calc(100% - 2px);
}

.ua-regional-pin-potsdam .ua-regional-label {
  left: auto;
  right: calc(100% - 2px);
  top: 50%;
  bottom: auto;
  translate: 0 -50%;
}

.ua-regional-pin:hover .ua-regional-marker,
.ua-regional-pin[aria-expanded="true"] .ua-regional-marker {
  scale: 1.08;
  box-shadow: 0 12px 28px rgba(33, 30, 26, 0.22);
}

.ua-regional-pin:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 4px;
}

.ua-regional-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.ua-regional-card {
  padding: 18px;
  border: 1px solid var(--hairline);
  border-radius: 18px;
  background: var(--paper);
  box-shadow: 0 20px 54px rgba(33, 30, 26, 0.13);
}

.ua-regional-card-place {
  display: block;
  margin-bottom: 14px;
  font-family: var(--font-brand);
  font-size: 1rem;
  font-weight: 650;
  letter-spacing: -0.015em;
}

.ua-regional-lead {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.ua-regional-lead > img {
  width: 50px;
  height: 50px;
  border-radius: 15px;
  object-fit: cover;
}

.ua-regional-lead span,
.ua-regional-collaborators > span {
  display: block;
  color: var(--ink-soft);
  font-size: 0.68rem;
  font-weight: 560;
}

.ua-regional-lead strong,
.ua-regional-lead small { display: block; }
.ua-regional-lead strong {
  margin-top: 2px;
  font-family: var(--font-brand);
  font-size: 0.96rem;
}
.ua-regional-lead small {
  margin-top: 2px;
  color: var(--ink-soft);
  font-size: 0.73rem;
}

.ua-regional-collaborators {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--hairline);
}
.ua-regional-collaborators > div {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 7px;
}
.ua-regional-collaborator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink);
  font-size: 0.76rem;
  font-weight: 560;
}
.ua-regional-collaborator img {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  object-fit: cover;
}

.is-map-enhanced .ua-regional-cards {
  position: absolute;
  z-index: 5;
  inset: 0;
  display: block;
  margin: 0;
  pointer-events: none;
}
.is-map-enhanced .ua-regional-card {
  position: absolute;
  left: var(--map-x);
  top: var(--map-y);
  width: min(280px, calc(100% - 32px));
  opacity: 0;
  visibility: hidden;
  scale: 0.98;
  transition:
    opacity 180ms var(--ease),
    scale 180ms var(--ease),
    visibility 0s linear 180ms;
}
.is-map-enhanced .ua-regional-card.is-active {
  opacity: 1;
  visibility: visible;
  scale: 1;
  transition-delay: 0s;
}
.is-map-enhanced .ua-regional-card[data-card-side="right"] { translate: 30px -50%; }
.is-map-enhanced .ua-regional-card[data-card-side="left"] { translate: calc(-100% - 30px) -50%; }
.is-map-enhanced .ua-regional-card[data-card-side="top"] { translate: -50% calc(-100% - 30px); }
.is-map-enhanced .ua-regional-card[data-card-side="bottom"] { translate: -50% 30px; }

html.js .ua-regional-board[data-reveal] { opacity: 1; transform: none; }
html.js .ua-regional-board[data-reveal] .ua-regional-geography { opacity: 0; }
html.js .ua-regional-board[data-reveal] .ua-regional-route path {
  opacity: 0;
}
html.js .ua-regional-board[data-reveal] .ua-regional-pin {
  opacity: 0;
  scale: 0.82;
}
html.js .ua-regional-board.is-revealed .ua-regional-geography {
  opacity: 1;
  transition: opacity 520ms var(--ease);
}
html.js .ua-regional-board.is-revealed .ua-regional-route path {
  opacity: 1;
  transition: opacity 520ms var(--ease) 120ms;
}
html.js .ua-regional-board.is-revealed .ua-regional-pin {
  opacity: 1;
  scale: 1;
  transition: opacity 360ms var(--ease) var(--pin-delay), scale 360ms var(--ease) var(--pin-delay);
}

@media (max-width: 720px) {
  .ua-regional-map { min-height: 0; }
  .ua-regional-label { font-size: 0.64rem; }
  .ua-regional-cards { grid-template-columns: 1fr; }
  .is-map-enhanced .ua-regional-cards {
    position: relative;
    inset: auto;
    min-height: 154px;
    margin-top: 12px;
  }
  .is-map-enhanced .ua-regional-card {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    translate: none !important;
  }
  .is-map-enhanced .ua-regional-card[aria-hidden="true"] { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ua-regional-marker,
  .ua-regional-card,
  html.js .ua-regional-board[data-reveal] .ua-regional-geography,
  html.js .ua-regional-board[data-reveal] .ua-regional-route path,
  html.js .ua-regional-board[data-reveal] .ua-regional-pin {
    animation: none;
    transition: none;
  }
  html.js .ua-regional-board[data-reveal] .ua-regional-geography,
  html.js .ua-regional-board[data-reveal] .ua-regional-pin {
    opacity: 1;
    scale: 1;
  }
  html.js .ua-regional-board[data-reveal] .ua-regional-route path { opacity: 1; }
}