/* Shared scenario cards used by the homepage and the solutions catalog. */
.web4-scenario-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.web4-scenario-card {
  min-width: 0;
  min-height: 218px;
  padding: 24px;
  border: 1px solid #dce8f7;
  border-radius: 8px;
  background: #fff;
  transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}

.web4-scenario-card:hover,
.web4-scenario-card:focus-within {
  border-color: #b9d2fb;
  box-shadow: 0 16px 34px rgba(18, 62, 124, .09);
  transform: translateY(-3px);
}

.web4-scenario-card h3 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 10px;
  color: #071b3f;
  font-size: 19px;
  line-height: 1.35;
}

.web4-scenario-card h3 a {
  color: inherit;
  text-decoration: none;
}

.web4-scenario-card > p {
  min-height: 45px;
  margin: 0 0 14px;
  color: #63738d;
  font-size: 14px;
  line-height: 1.65;
}

.web4-scenario-icon {
  display: inline-grid;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 50%;
  color: #0b4b91;
  background: #e8f2ff;
}

.web4-scenario-icon svg { width: 23px; height: 23px; }
.web4-scenario-icon.violet { color: #fff; background: #7457f5; }
.web4-scenario-icon.blue { color: #fff; background: #2f70ef; border-radius: 9px; }
.web4-scenario-icon.cyan { color: #087eb2; background: #def7ff; }
.web4-scenario-icon.navy { color: #fff; background: #092653; }
.web4-scenario-icon.dark { color: #fff; background: #101821; }
.web4-scenario-icon.green { color: #087c5a; background: #e3f8ef; }
.web4-scenario-icon.orange { color: #ad4c08; background: #fff0df; }

.web4-scenario-platforms {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 8px 18px;
  margin: 0;
}

.web4-scenario-platform {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
  color: #17345f;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
}

.web4-scenario-platform:hover { color: #0867f5; }

.web4-scenario-platform img {
  flex: 0 0 26px;
  width: 26px !important;
  height: 26px !important;
  object-fit: contain;
}

.web4-scenario-more {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 14px;
  color: #0867f5;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.web4-scenario-more::after { content: "\2192"; }

.web4-scenario-section-link {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}

.web4-scenario-section-link a {
  min-height: 42px;
  padding: 0 24px;
  border: 1px solid #0867f5;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  color: #0867f5;
  font-weight: 700;
  text-decoration: none;
}

.web4-scenario-section-link a:hover { color: #fff; background: #0867f5; }

.web4-template-solutions-index .services .container { max-width: 1180px; }
.web4-template-solutions-index .web4-scenario-card { height: 100%; }
.web4-template-solutions-index .web4-scenario-card > p { min-height: 69px; }

@media (max-width: 991px) {
  .web4-scenario-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575px) {
  .web4-scenario-grid { grid-template-columns: 1fr; }
  .web4-scenario-card { min-height: 0; padding: 20px; }
  .web4-scenario-card > p,
  .web4-template-solutions-index .web4-scenario-card > p { min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .web4-scenario-card { transition: none; }
  .web4-scenario-card:hover,
  .web4-scenario-card:focus-within { transform: none; }
}