/* ================================
   FULL BLEED SITEPLAN (JOEKAARU STYLE)
   1800x1200 (3:2) cropped: 25% top, 20% bottom
   Visible height = 55% => wrapper ratio = 3 / 1.1
   ================================ */

/* Full-width breakout even inside theme containers */
.natura-siteplan{
  position: relative;
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  overflow-x: hidden;
}

/* Visible crop window (full width) */
.natura-siteplan__wrap{
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 1.25; /* cropped visible ratio */
  overflow: hidden;
}

/* Coordinate layer (image + bubbles live here) */
.natura-siteplan__inner{
  position: absolute;
  left: 0;
  top: -35%;            /* crop 25% from top */
  width: 100%;
  aspect-ratio: 3 / 2;  /* original image ratio */
}

/* Image fills coordinate layer */
.natura-siteplan__img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* ================================
   BUBBLES
   ================================ */

.natura-bubble{
  position: absolute;
  transform: translate(-50%, -100%);
  background: #fff;
  border: 2px solid #e3e3e3;
  border-radius: 10px;
  padding: 12px 10px;
  min-width: 140px;
  text-align: left;
  cursor: pointer;
  font-family: 'Roboto Slab', serif;
  box-shadow: 0 10px 24px rgba(0,0,0,0.10);
  z-index: 5;
}

.natura-bubble::after{
  content: "";
  position: absolute;
  left: 22px;
  bottom: -10px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-right: 2px solid #e3e3e3;
  border-bottom: 2px solid #e3e3e3;
  transform: rotate(45deg);
}

.natura-bubble__title{
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 6px;
  color: #141617;
  letter-spacing: .03em;
}

.natura-bubble__meta{
  font-size: 14px;
  color: #5ba043;
  display: flex;
  gap: 6px;
  align-items: baseline;
}

.natura-bubble__note{
  margin-top: 6px;
  font-size: 12px;
  color: #667173;
}

.natura-bubble:hover{
  border-color: #589741;
}

/* ================================
   MOBILE: Horizontal scroll
   ================================ */

@media (max-width: 768px){
  .natura-siteplan{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .natura-siteplan__inner{
    top: -26%; /* mobile anchor */
    left: 50%;
    transform: translate(-50%);
    width: 100%;
    aspect-ratio: 3 / 2;
  }

  /* Make the coordinate system wider so bubbles are not too close */
  .natura-siteplan__wrap{
    width: 140%;
    min-width: 750px;
    aspect-ratio: 3 / 1.4;
  }

  
}

@media (max-width: 768px){
  .natura-bubble{
    transform: translate(-50%, -100%) scale(0.72);
    transform-origin: bottom center;
  }
}

/* Hide scrollbar (optional) */
.natura-siteplan::-webkit-scrollbar{
  display: none;
}