/* Piramida map page */

.piramida-map-section {
  position: relative;
  padding: 140px var(--page-padding-desktop) 120px;
}

.piramida-map-stage {
  position: relative;
  z-index: 1;
}

/* Lime-to-green wedge behind the image: its left edge comes out from behind
   the image halfway down, drops just past the image's left side, and its
   bottom edge rises back up to meet the image's bottom edge at ~77% */
.piramida-map-stage::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -4.2%;
  top: 54.3%;
  width: 81.4%;
  height: 55.1%;
  background: linear-gradient(90deg, #6f8f2e 0%, #c5ef72 30%, #8fe07a 60%, #5fcf6a 100%);
  clip-path: polygon(5.1% 0, 0 100%, 100% 83%);
  pointer-events: none;
}

.piramida-map-frame {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 1600 / 920;
  overflow: hidden;
  border-radius: 12px;
}

.piramida-map-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.piramida-map-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.piramida-map-lines--mobile {
  display: none;
}

.piramida-map-lines path {
  fill: none;
  stroke: var(--color-lime);
  stroke-width: 1.5;
  stroke-dasharray: 4 4;
  opacity: 0.75;
  transition: opacity 200ms ease, stroke-width 200ms ease;
}

.piramida-map-lines circle {
  fill: var(--color-navy);
  stroke: var(--color-lime);
  stroke-width: 2;
  transition: fill 200ms ease;
}

.piramida-map-lines .is-active path {
  opacity: 1;
  stroke-width: 2.5;
}

.piramida-map-lines .is-active circle {
  fill: var(--color-lime);
}

/* Floor links: positions match the SVG viewBox (1000 x 575) so the
   connector lines start exactly at each pill's edge */
.piramida-map-floors {
  position: absolute;
  inset: 0;
}

/* Frosted glass panel behind the pills */
.piramida-map-floors::before {
  content: "";
  position: absolute;
  left: 41.1%;
  top: 28.6%;
  width: 17.7%;
  height: 48.5%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: clamp(14px, 1.8vw, 32px);
  background: rgba(10, 15, 40, 0.3);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  pointer-events: none;
}

.piramida-map-floor {
  position: absolute;
  left: 42.5%;
  width: 15%;
  height: 6.4%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--color-white);
  color: var(--color-black);
  font-size: clamp(10px, 1.05vw, 18px);
  font-weight: 500;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  transform: translateY(-50%);
  transition: background-color 200ms ease, transform 200ms ease;
}

.piramida-map-floor[data-floor="roof"] { top: 34%; }
.piramida-map-floor[data-floor="third"] { top: 43.5%; }
.piramida-map-floor[data-floor="ground"] { top: 52.9%; }
.piramida-map-floor[data-floor="minus-one"] { top: 62.3%; }
.piramida-map-floor[data-floor="exterior"] { top: 71.6%; }

.piramida-map-floor.is-active {
  background: var(--color-lime);
}

.piramida-map-floor:hover {
  transform: translateY(-50%) scale(1.04);
}

/* Mobile: portrait 4:5 crop. Pills stay absolutely positioned (in % of the
   frame) so they line up with the mobile SVG (viewBox 400 x 500) */
@media (max-width: 767px) {
  .piramida-map-section {
    padding: 100px var(--page-padding-mobile) 64px;
  }

  .piramida-map-frame {
    aspect-ratio: 4 / 5;
  }

  /* Mobile wedge sits flush under the image, matching its width */
  .piramida-map-stage {
    padding-bottom: 20px;
  }

  .piramida-map-stage::before {
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    width: auto;
    height: 20px;
    background: linear-gradient(90deg, #8fbf00 0%, var(--color-lime) 60%, #b8f000 100%);
    clip-path: polygon(0 0, 100% 0, 100% 10%, 12% 100%, 0 100%);
  }

  .piramida-map-lines--desktop {
    display: none;
  }

  .piramida-map-lines--mobile {
    display: block;
  }

  /* Panel: x 122-278, y 145-384 in viewBox units */
  .piramida-map-floors::before {
    left: 30.5%;
    top: 29%;
    width: 39%;
    height: 47.8%;
    border-radius: 14px;
  }

  /* Pill: x 132-268, height 31 in viewBox units */
  .piramida-map-floor {
    left: 33%;
    width: 34%;
    height: 6.2%;
    padding: 0 6px;
    font-size: clamp(10px, 3.2vw, 14px);
  }
}