/* ==========================================================================
   Hotspot Cards

   Colour and size controls set custom properties on the widget wrapper rather
   than the properties themselves, and this file consumes those variables. That
   sidesteps a specificity standoff: Elementor's generated post CSS and this
   stylesheet would both sit at (0,2,0) with no guaranteed load order, so
   declaring the same property in both would make a control silently stop
   working. Going through a variable means a control always wins, and the
   widget still renders legibly if the generated CSS is missing or late.
   ========================================================================== */

.hsc {
  max-width: 100%;
}

/* NOTE: defaults live in the var() fallbacks at each use site below, never as
   declarations on .hsc. The controls set these variables on {{WRAPPER}}, which
   is an ANCESTOR of .hsc -- and a declaration on the element itself always beats
   a value inherited from an ancestor, so declaring them here would silently
   override every control. */

.hsc__stage {
  position: relative;
  display: inline-block;
  max-width: 100%;
  line-height: 0;          /* kills the inline-image descender gap */
}
.hsc__stage > img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}

/* ------------------------------------------------------------------- pins */
.hsc__pin-wrap {
  position: absolute;
  transform: translate(-50%, -50%);
  line-height: normal;
  z-index: 2;
}
.hsc__pin-wrap.is-open { z-index: 5; }

/* hello-elementor (and plenty of other themes) style every bare <button>:
   border 1px #c36, border-radius 3px, padding .5rem 1rem, display inline-block,
   width auto. Two classes beats their single attribute selector regardless of
   load order, which is why size and radius come through variables here too. */
.hsc .hsc__pin {
  width: var(--hsc-pin-size, 28px);
  height: var(--hsc-pin-size, 28px);
  background-color: var(--hsc-pin-bg, #0b2163);
  color: var(--hsc-pin-color, #ffffff);
  border-radius: var(--hsc-pin-radius, 50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: var(--hsc-pin-border-width, 0) solid var(--hsc-pin-border-color, transparent);
  margin: 0;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  text-transform: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}
.hsc .hsc__pin:hover,
.hsc .hsc__pin-wrap.is-open .hsc__pin {
  background-color: var(--hsc-pin-bg-active, var(--hsc-pin-bg, #0b2163));
  border-color: var(--hsc-pin-border-color-active, var(--hsc-pin-border-color, transparent));
}
.hsc .hsc__pin:hover { transform: scale(1.08); }
.hsc .hsc__pin:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

.hsc__pin-label { pointer-events: none; }

/* pulse */
.hsc__pin-wrap--pulse::before {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--hsc-pulse, rgba(11, 33, 99, .4));
  animation: hsc-pulse 2s ease-out infinite;
  pointer-events: none;
  z-index: -1;
}
@keyframes hsc-pulse {
  0%   { transform: translate(-50%, -50%) scale(1);   opacity: .9; }
  70%  { transform: translate(-50%, -50%) scale(2.4); opacity: 0; }
  100% { transform: translate(-50%, -50%) scale(2.4); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hsc__pin-wrap--pulse::before { animation: none; }
  .hsc .hsc__pin { transition: none; }
  .hsc .hsc__pin:hover { transform: none; }
}

/* ------------------------------------------------------------------ cards */
.hsc__card {
  background-color: var(--hsc-card-bg, #ffffff);
  border-radius: 10px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .18);
  position: absolute;
  left: 50%;
  transform: translateX(calc(-50% + var(--hsc-shift, 0px)));
  max-width: calc(100vw - 32px);
  overflow: hidden;
  line-height: normal;
  text-align: left;
  opacity: 0;
  visibility: hidden;         /* not display:none -- it must stay measurable
                                 so the flip logic can size it before opening */
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 6;
}

/* vertical placement, decided per-pin by the script */
.hsc__pin-wrap.hsc--above .hsc__card { bottom: calc(100% + 14px); }
.hsc__pin-wrap.hsc--below .hsc__card { top: calc(100% + 14px); }

.hsc__pin-wrap.is-open .hsc__card {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.hsc__card-media {
  display: block;
  width: 100%;
  overflow: hidden;
  line-height: 0;
}
.hsc__card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hsc .hsc__card-title {
  color: var(--hsc-title-color, #0b2163);
  margin: 0 0 6px;
  padding: 0;
  font-size: 16px;
  line-height: 1.35;
}
.hsc__card-text { color: var(--hsc-text-color, #5b6b7a); margin: 0; font-size: 13.5px; line-height: 1.55; }

.hsc .hsc__card-link {
  color: var(--hsc-link-color, #0b2163);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
.hsc .hsc__card-link:hover { text-decoration: underline; }

/* screen-reader-only label for pins with no visible text */
.hsc .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* On narrow screens a pin-anchored card gets cramped, so let it use the
   full stage width instead of tracking the pin. */
@media (max-width: 480px) {
  .hsc__card {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;
    top: auto !important;
    width: auto !important;
    max-width: none;
    transform: none;
  }
  .hsc__pin-wrap.hsc--above .hsc__card,
  .hsc__pin-wrap.hsc--below .hsc__card { top: auto; bottom: 16px; }
}