/* V11 — spatial hut compositions and a single, fluid mobile gesture model. */
.sr-hut-instruction {
  padding-inline: clamp(22px, 4vw, 64px);
  color: rgba(32,55,45,.5);
  letter-spacing: .19em;
}

.sr-hut-hotspot,
.sr-hut-hotspot:hover,
.sr-hut-hotspot.is-active {
  width: 21%;
  background: transparent !important;
  -webkit-tap-highlight-color: transparent;
}

.sr-hut-hotspot:nth-of-type(1) { left: 13.5%; }
.sr-hut-hotspot:nth-of-type(2) { left: 35.5%; }
.sr-hut-hotspot:nth-of-type(3) { left: 63.5%; }

.sr-hut-hotspot__pulse {
  top: 34%;
  width: 18px;
  height: 18px;
  border: 4px solid rgba(251,248,242,.96);
  background: rgba(251,248,242,.96);
  box-shadow: 0 5px 20px rgba(18,35,28,.24);
}

.sr-hut-hotspot__label {
  position: absolute;
  top: 49%;
  left: 50%;
  min-width: max-content;
  padding: 11px 16px 9px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid rgba(32,55,45,.14);
  border-radius: 2px;
  color: var(--sr-forest);
  background: rgba(251,248,242,.97);
  box-shadow: 0 12px 30px rgba(18,35,28,.16);
  transform: translateX(-50%);
  transition: transform .35s cubic-bezier(.2,.75,.25,1), box-shadow .35s ease;
  pointer-events: none;
}

.sr-hut-hotspot:hover .sr-hut-hotspot__label {
  box-shadow: 0 17px 38px rgba(18,35,28,.22);
  transform: translate(-50%,-4px);
}

.sr-hut-hotspot b,
.sr-hut-hotspot small {
  position: static;
  min-width: 0;
  padding: 0;
  background: transparent;
  opacity: 1;
  transform: none;
}

.sr-hut-hotspot b {
  font-size: clamp(19px,1.5vw,25px);
  line-height: 1;
}

.sr-hut-hotspot small {
  margin-top: 7px;
  padding-top: 6px;
  border-top: 1px solid rgba(32,55,45,.14);
  color: rgba(32,55,45,.58);
  font-size: 6px;
  letter-spacing: .18em;
}

.sr-hut-label__mobile { display: none; }
.sr-hut-map.is-panning .sr-hut-profile,
.sr-hut-map.is-panning .sr-hut-switcher { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }
.sr-hut-map.is-panning .sr-hut-hotspot { pointer-events: none; }

@media (min-width: 901px) {
  .sr-hut-profile__copy {
    width: min(500px,30.5%);
    top: 50%;
    right: auto;
    bottom: auto;
  }

  .sr-hut-profile[data-sr-hut-profile="0"] .sr-hut-profile__copy {
    left: 3.25%;
    transform: translateY(calc(-50% + 24px));
  }
  .sr-hut-profile[data-sr-hut-profile="0"].is-active .sr-hut-profile__copy { transform: translateY(-50%); }

  .sr-hut-profile[data-sr-hut-profile="1"] .sr-hut-profile__copy {
    left: 50%;
    transform: translate(-50%,calc(-50% + 24px));
  }
  .sr-hut-profile[data-sr-hut-profile="1"].is-active .sr-hut-profile__copy { transform: translate(-50%,-50%); }

  .sr-hut-profile[data-sr-hut-profile="2"] .sr-hut-profile__copy {
    left: auto;
    right: 3.25%;
    transform: translateY(calc(-50% + 24px));
  }
  .sr-hut-profile[data-sr-hut-profile="2"].is-active .sr-hut-profile__copy { transform: translateY(-50%); }

  .sr-hut-profile[data-sr-hut-profile="0"] .sr-hut-profile__image--1 { left: 37%; top: 4%; width: 27%; height: 42%; }
  .sr-hut-profile[data-sr-hut-profile="0"] .sr-hut-profile__image--2 { left: auto; right: 3%; top: 6%; width: 27%; height: 34%; }
  .sr-hut-profile[data-sr-hut-profile="0"] .sr-hut-profile__image--3 { left: 40%; top: auto; bottom: 5%; width: 25%; height: 38%; }
  .sr-hut-profile[data-sr-hut-profile="0"] .sr-hut-profile__image--4 { left: auto; right: 5%; top: auto; bottom: 4%; width: 26%; height: 42%; }

  .sr-hut-profile[data-sr-hut-profile="1"] .sr-hut-profile__image--1 { left: 2.5%; top: 4%; width: 29%; height: 47%; }
  .sr-hut-profile[data-sr-hut-profile="1"] .sr-hut-profile__image--2 { left: 5%; right: auto; top: auto; bottom: 5%; width: 27%; height: 35%; }
  .sr-hut-profile[data-sr-hut-profile="1"] .sr-hut-profile__image--3 { left: auto; right: 3%; top: 5%; bottom: auto; width: 29%; height: 35%; }
  .sr-hut-profile[data-sr-hut-profile="1"] .sr-hut-profile__image--4 { left: auto; right: 5.5%; top: auto; bottom: 5%; width: 27%; height: 40%; }

  .sr-hut-profile[data-sr-hut-profile="2"] .sr-hut-profile__image--1 { left: 3%; top: 5%; width: 27%; height: 38%; }
  .sr-hut-profile[data-sr-hut-profile="2"] .sr-hut-profile__image--2 { left: 36%; right: auto; top: 4%; width: 26%; height: 42%; }
  .sr-hut-profile[data-sr-hut-profile="2"] .sr-hut-profile__image--3 { left: 5%; right: auto; top: auto; bottom: 4%; width: 26%; height: 42%; }
  .sr-hut-profile[data-sr-hut-profile="2"] .sr-hut-profile__image--4 { left: 38%; right: auto; top: auto; bottom: 5%; width: 25%; height: 36%; }
}

@media (max-width: 600px) {
  .sr-hut-instruction { padding: 0 22px 14px; }
  .sr-hut-label__desktop { display: none; }
  .sr-hut-label__mobile { display: inline; }

  .sr-hut-map {
    width: 100%;
    height: 88svh;
    min-height: 690px;
    margin: 14px 0 42px;
    touch-action: pan-y;
  }

  .sr-hut-panorama { border-radius: 0; }
  .sr-hut-panorama__scene { width: 286vw; }

  .sr-hut-hotspot,
  .sr-hut-hotspot:hover,
  .sr-hut-hotspot.is-active {
    top: 43%;
    width: 21%;
    height: 27%;
  }

  .sr-hut-hotspot:nth-of-type(1) { left: 13.5%; }
  .sr-hut-hotspot:nth-of-type(2) { left: 35.5%; }
  .sr-hut-hotspot:nth-of-type(3) { left: 63.5%; }
  .sr-hut-hotspot__label { padding: 10px 13px 8px; }
  .sr-hut-hotspot b { font-size: 21px; }

  .sr-hut-profile__gallery { top: 3%; height: 42%; }
  .sr-hut-profile__copy { top: 47%; max-height: 46%; }
  .sr-hut-switcher { bottom: 1.1%; }
}