/* Shared full-width presentation for connected simulators. */
.integrated-simulator {
  --integrated-hero-image: url('/resources/pic/categories/finance-hero.webp');
}

.integrated-simulator .wrap {
  padding-top: 0;
}

.integrated-simulator .hero.hero--compact {
  min-height: 258px;
  margin: 0;
  padding: 88px 28px 24px;
  border: 0;
  background: var(--color-surface);
}

.integrated-simulator .hero.hero--compact::after {
  display: block;
  background:
    linear-gradient(90deg, var(--color-surface) 0%, var(--color-surface) 32%, transparent 78%),
    var(--integrated-hero-image) right center / cover no-repeat;
}

.integrated-simulator .hero .lead {
  position: relative;
  z-index: 2;
  display: block;
  max-width: 65%;
}

.integrated-simulator .hero .hero-label {
  display: block;
}

.integrated-simulator .live-workspace {
  grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
}

.integrated-simulator .simulator-button {
  min-height: 44px;
}

.integrated-simulator :is(button, select):focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 3px;
}

@media (max-width: 900px) {
  .integrated-simulator .live-workspace {
    grid-template-columns: minmax(280px, 320px) minmax(0, 1fr);
    gap: 14px;
  }
}

@media (max-width: 768px) {
  .integrated-simulator .live-workspace {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .integrated-simulator .live-results {
    gap: 0;
  }

  .integrated-simulator .hero.hero--compact {
    min-height: 350px;
    padding: 78px 20px 170px;
  }

  .integrated-simulator .hero.hero--compact::after {
    inset: auto 0 0;
    height: 175px;
    background:
      linear-gradient(180deg, var(--color-surface), transparent 70%),
      var(--integrated-hero-image) 63% center / cover no-repeat;
  }

  .integrated-simulator .hero .lead {
    max-width: 100%;
  }

  .integrated-simulator .simulator-panel {
    padding: 20px 16px;
  }

  .integrated-simulator .live-controls {
    position: static;
    grid-template-columns: minmax(0, 1fr);
    max-height: none;
  }

  .integrated-simulator .live-control-head {
    align-items: center;
    flex-direction: row;
  }

  .integrated-simulator .live-control-head input[type='number'] {
    width: 116px;
    max-width: 46%;
  }
}