:root {
  --ia-bar-radius: 129px;
  --ia-shadow: 0 12px 28px rgb(0 0 0 / 25%);
  --ia-bar-height: clamp(108px, 14vw, 180px);
  --ia-side-gap: clamp(10px, 3vw, 18px);
  --ia-bar-bottom: 20px;
  --ia-inner-gap: clamp(14px, 2.2vw, 18px);
  --ia-inner-pad-x: clamp(18px, 3vw, 30px);
  --ia-emblem-size: clamp(52px, 7vw, 88px);
  --ia-emblem-border: clamp(3px, 0.7vw, 5px);
  --ia-tip-font: clamp(13px, 1.4vw, 18px);
  --ia-tip-line: 1.45;
}

/* Block wrapper */
.block.interactive-image-advanced {
  position: relative;
}

/* Relative inner wrap */
.ia-wrap {
  position: relative;
  width: 100%;

  --ia-bar-bottom: clamp(8px, 1vw, 16px);
}

/* Unified picture/img */
.ia-picture,
.ia-picture img {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 60px;
  margin-top: 15px;
}

/* Hotspots overlay (desktop only) */
.ia-hotspots {
  position: absolute;
  inset: 0;
  pointer-events: auto;
  z-index: 3;

  --ia-bubbles-shift: clamp(-22px, -2.8vw, -42px);

  transform: translateY(var(--ia-bubbles-shift));
}

/* Bubble button: large hit area ONLY (invisible) */
.ia-hotspot {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 160px;
  height: 160px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 50%;
  outline: none;
}

.ia-hotspot .dot {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  opacity: 0;
  box-shadow: none;
  background: transparent;
}

/* No visible highlight either */
.ia-hotspot:hover .dot,
.ia-hotspot:focus .dot,
.ia-hotspot.active .dot {
  transform: none;
  box-shadow: none;
}

.ia-hotspot:focus-visible {
  outline: none;
}

/* Bottom consolidated tooltip bar — contained & centered in the image wrapper */

.ia-bottombar {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  bottom: 6%;
  width: min(700px, calc(100% - (2 * var(--ia-side-gap))));
  border-radius: 999px;
  box-shadow: var(--ia-shadow);
  color: #fff;
  z-index: 4;
  background: #333;
  backdrop-filter: saturate(1.1);
  text-decoration: none !important;
}


/* Layout: emblem + content */
.ia-bottombar-inner {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--ia-inner-gap);
  padding: 20px 30px;
}


/* Emblem circle with the letter (fluid) */

.ia-emblem {
  display: flex;
  justify-content: center;
  align-items: center;
  width: clamp(52px, 7vw, 88px);
  height: clamp(52px, 7vw, 88px);
  border-radius: 50%;
  font-weight: 900;
  font-size: clamp(24px, 3vw, 42px);
  background: rgb(255 255 255 / 20%);
  border: clamp(3px, 0.7vw, 5px) solid rgb(255 255 255 / 85%);
}



/* Tip content area (fluid typography) */
.ia-tiptext {
  font-size: var(--ia-tip-font);
  line-height: var(--ia-tip-line);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;

}

.ia-tiptext p {
  margin: 0;
}

.ia-tiptext ul {
  margin: 0;
  align-self: flex-end;
  list-style: none;
  font-size: 9px;
}

.ia-tiptext p:last-child {
  margin-bottom: 0;
}

/* Theme colors */
.ia-bottombar.red {
  background: #ED1941;
}

.ia-bottombar.violet {
  background: #6F2C91;
}

.ia-bottombar.blue {
  background: #00AEEF;
}

.ia-bottombar.orange {
  background: #F7941D;
}

.ia-bottombar.green {
  background: #00AB4E;
}

.ia-bottombar.dark-blue {
  background: #005EAD;
}


@media (width >=1024px) and (width <=1366px) {
  .ia-bottombar {
    border-radius: calc(clamp(100px, 12vw, 160px) / 2);
  }

  .ia-hotspots {
    --ia-bubbles-shift: clamp(-26px, -3.2vw, -48px);
  }

  .ia-wrap {
    --ia-bar-bottom: clamp(6px, 0.8vw, 14px);
  }
}


/* CTA Styles — Desktop & Mobile */

/* Desktop CTA inside image (right-bottom) */
.ia-image-cta {
  position: absolute;
  right: 6%;
  bottom: 12%;
  display: inline-block;
  padding: 14px 22px;
  border-radius: 40% / 80%;
  background: #111 !important;
  color: #fff !important;
  font-weight: 800;
  border: 2px solid #111 !important;
  text-decoration: none !important;
  z-index: 4;
}

/* Reset link states for desktop CTA */
.ia-image-cta:link,
.ia-image-cta:visited,
.ia-image-cta:hover,
.ia-image-cta:active,
.ia-image-cta:focus {
  text-decoration: none !important;
  color: #fff !important;
}

/* Hover effect */
.ia-image-cta:hover {
  background: #111 !important;
  color: #fff !important;
}

/* Focus ring for accessibility */
.ia-image-cta:focus-visible {
  outline: 3px solid #ff4d4d;
  outline-offset: 3px;
}

/* Tablet/Mobile CTA (center-bottom inside image) */
.ia-below-cta {
  position: absolute;
  left: 50%;
  bottom: 40px;
  transform: translateX(-50%);
  z-index: 4;
  width: min(420px, calc(100% - 40px));
  text-align: center;
}

.ia-below-cta .ia-cta-link {
  display: inline-block;
  padding: 14px 22px;
  border-radius: 40% / 80%;
  background: #111 !important;
  color: #fff !important;
  font-weight: 800;
  border: 2px solid #111 !important;
  text-decoration: none !important;
  font-family: Altivo, 'Work Sans', arial, helvetica, sans-serif;
}

/* Reset link states for mobile CTA */
.ia-below-cta .ia-cta-link:link,
.ia-below-cta .ia-cta-link:visited,
.ia-below-cta .ia-cta-link:hover,
.ia-below-cta .ia-cta-link:active,
.ia-below-cta .ia-cta-link:focus {
  text-decoration: none !important;
  color: #fff !important;
}

/* Hover effect for mobile CTA */
.ia-below-cta .ia-cta-link:hover {
  background: #111 !important;
  color: #fff !important;
}

/* Focus ring for mobile CTA */
.ia-below-cta .ia-cta-link:focus-visible {
  outline: 3px solid #ff4d4d;
  outline-offset: 3px;
}

/* Hide desktop CTA on smaller screens */
@media (width <=1023px) {
  .ia-hotspots,
  .ia-bottombar,
  .ia-image-cta {
    display: none !important;
    bottom: 8px;
  }
}

/* Screen reader live region (hidden) */
.ia-live {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* Tablet cta */
@media (width >=768px) and (width <=1023px) {
  .interactive-image-advanced-container .ia-below-cta {
    margin-bottom: -120px;
  }

  .interactive-image-advanced-container .ia-below-cta .ia-cta-link {
    font-size: 18px;
    display: inline-block;
    padding: 15px 30px;
  }
}

/* Mobile cta */
@media (width <=767px) {
  .interactive-image-advanced-container .ia-below-cta {
    bottom: -70px;
  }

  .interactive-image-advanced-container .ia-below-cta .ia-cta-link {
    font-size: 16px;
    display: inline-block;
    padding: 4px 8px;
  }
}