.interactive-diagram-block {
  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 40px;

  margin: 0 auto;

  align-items: top;

  color: #fff;

  box-sizing: border-box;
}

/* Responsive pie container */

.interactive-diagram-block .pie-container {
  margin-top: 20px;
  --size: clamp(250px, 40vw, 620px);

  position: relative;

  width: var(--size);

  height: var(--size);

  display: flex;

  align-items: center;

  justify-content: center;
}

/* Background image */

.interactive-diagram-block .pie-bg {
  position: absolute;

  width: var(--size);

  height: var(--size);

  border-radius: 50%;

  background-image: url("neostella-platform-diagram.png");

  background-size: cover;

  background-position: center;

  z-index: 1;
}

/* Dark overlay */

.interactive-diagram-block .outer-ring-overlay {
  position: absolute;

  width: var(--size);

  height: var(--size);

  border-radius: 50%;

  background: #000;

  opacity: 0;

  pointer-events: none;

  transition: opacity 0.25s ease;

  z-index: 3;
}

/* SVG wedges */

.interactive-diagram-block svg {
  width: calc(var(--size) * 0.73);

  height: calc(var(--size) * 0.73);

  z-index: 10;
}

.interactive-diagram-block .segment {
  fill: #000;

  opacity: 0;

  stroke: #111;

  stroke-width: 1;

  cursor: pointer;

  transition: opacity 0.25s ease, stroke-width 0.25s ease, stroke 0.25s ease;
}

.interactive-diagram-block .segment.dimmed {
  opacity: 0.6;
}

.interactive-diagram-block .segment.active {
  opacity: 0;

  stroke: #00aaff;

  stroke-width: 2;
}

/* Right column */

.interactive-diagram-block #content-wrap {
  opacity: 1;

  transition: opacity 0.35s ease;
}

.interactive-diagram-block #content-wrap.fade-out {
  opacity: 0;
}

.interactive-diagram-block #content-wrap.fade-in {
  opacity: 1;
}

.interactive-diagram-block .segment-content img {
  max-width: 100%;

  border-radius: 10px;

  margin: 20px 0;
}

.interactive-diagram-block .segment-content button {
  padding: 10px 18px;

  border-radius: 4px;

  border: none;

  background: #00aaff;

  color: #fff;

  font-weight: bold;

  cursor: pointer;
}

.interactive-diagram-block .segment-content button:hover {
  background: #33bbff;
}

/* Mobile */

@media (max-width: 900px) {
  .interactive-diagram-block {
    grid-template-columns: 1fr;
  }

  .interactive-diagram-block .pie-container {
    margin: 0 auto 20px auto;
  }
}

/* FRONT-END ONLY: hide all segment content except the default state */
.interactive-diagram-block .segment-content {
  display: none;
}

.interactive-diagram-block .default-content {
  display: block;
}