.com-basia-investment__scene {
  display: grid;
  gap: 1.25rem;
}

.com-basia-investment__scene h2 {
  margin: 0;
  color: var(--basia-investments-ink);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
}

.com-basia-investment__scene-canvas {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9 !important;
  overflow: hidden;
  background: #edf0ef;
}

.com-basia-investment__scene-canvas .rkonik-scenemap__image,
.com-basia-investment__scene-canvas .rkonik-scenemap__svg {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
}

.com-basia-investment__scene-canvas .rkonik-scenemap__image {
  object-fit: fill;
  pointer-events: none;
}

.com-basia-investment__scene-canvas.is-fitting-scene .rkonik-scenemap__image,
.com-basia-investment__scene-canvas.is-fitting-scene .rkonik-scenemap__svg {
  visibility: hidden;
}

.com-basia-investment__scene-canvas .rkonik-scenemap__object {
  transition: fill .15s ease, fill-opacity .15s ease, stroke .15s ease, opacity .15s ease;
}

.com-basia-investment__scene-canvas .rkonik-scenemap__object.has-action { cursor: pointer; }

.com-basia-investment__scene-canvas .rkonik-scenemap__object:hover,
.com-basia-investment__scene-canvas .rkonik-scenemap__object:focus-visible {
  fill: var(--scenemap-hover-fill);
  fill-opacity: var(--scenemap-hover-fill-opacity);
  stroke: var(--scenemap-hover-stroke);
  stroke-opacity: var(--scenemap-hover-stroke-opacity);
  stroke-width: var(--scenemap-hover-stroke-width);
  opacity: var(--scenemap-hover-opacity);
  outline: none;
}

.com-basia-investment__scene-canvas .rkonik-scenemap__object[fill="none"]:hover,
.com-basia-investment__scene-canvas .rkonik-scenemap__object[fill="none"]:focus-visible {
  fill: none;
}

.com-basia-investment__scene-popup {
  --scenemap-popup-background: #241f1c;
  --scenemap-popup-foreground: #fff;
  --scenemap-popup-secondary: #f3f0ed;
  position: absolute;
  z-index: 3;
  display: grid;
  gap: .5rem;
  min-width: 12rem;
  max-width: min(21rem, calc(100% - 16px));
  padding: 1rem 1.15rem;
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 1rem;
  box-shadow: 0 16px 40px rgb(0 0 0 / 30%), 0 3px 10px rgb(0 0 0 / 18%);
  color: var(--scenemap-popup-foreground);
  font-size: .9rem;
  line-height: 1.35;
  text-align: center;
  background: var(--scenemap-popup-background);
  pointer-events: none;
}

.com-basia-investment__scene-popup[hidden] { display: none; }

.com-basia-investment__scene-popup::after {
  position: absolute;
  background: var(--scenemap-popup-background);
  content: '';
}

.com-basia-investment__scene-popup[data-position="top"]::after {
  bottom: -7px;
  left: var(--scenemap-popup-pointer-x, 50%);
  width: 14px;
  height: 8px;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform: translateX(-50%);
}

.com-basia-investment__scene-popup[data-position="bottom"]::after {
  top: -7px;
  left: var(--scenemap-popup-pointer-x, 50%);
  width: 14px;
  height: 8px;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  transform: translateX(-50%);
}

.com-basia-investment__scene-popup[data-position="left"]::after {
  top: var(--scenemap-popup-pointer-y, 50%);
  right: -7px;
  width: 8px;
  height: 14px;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  transform: translateY(-50%);
}

.com-basia-investment__scene-popup[data-position="right"]::after {
  top: var(--scenemap-popup-pointer-y, 50%);
  left: -7px;
  width: 8px;
  height: 14px;
  clip-path: polygon(100% 0, 100% 100%, 0 50%);
  transform: translateY(-50%);
}

.com-basia-investment__scene-popup h3 {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--scenemap-popup-foreground);
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.3;
}

.com-basia-investment__scene-popup p {
  min-height: 1.35em;
  margin: 0;
  padding-top: .65rem;
  border-top: 1px solid rgb(255 255 255 / 18%);
  color: var(--scenemap-popup-secondary);
  font-size: .82rem;
}

.com-basia-investment__scene-popup p[hidden] { display: none; }

.com-basia-investment__scene-back,
.com-basia-investment__scene-title,
.com-basia-investment__scene-notice {
  position: absolute;
  z-index: 2;
  top: 1rem;
  left: 1rem;
  padding: .55rem .75rem;
  border: 0;
  border-radius: .4rem;
  color: #fff;
  background: #241f1c;
  box-shadow: 0 3px 10px rgb(0 0 0 / 18%);
}

.com-basia-investment__scene-back { cursor: pointer; }
.com-basia-investment__scene-back[hidden] { display: none; }
.com-basia-investment__scene-back:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.com-basia-investment__scene-title { left: auto; right: 1rem; }
.com-basia-investment__scene-notice { top: auto; bottom: 1rem; }