.ecosystem-suite {
  position: relative;
}

.team-grid .team-profile {
  overflow: visible;
}

.team-profile:hover,
.team-profile:focus-within {
  z-index: 4;
}

.team-profile__media {
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}

.team-profile__heading {
  flex-direction: column;
  gap: 0.75rem;
}

.team-profile__name {
  white-space: nowrap;
}

.team-profile__role {
  align-self: flex-start;
  max-width: 100%;
  white-space: nowrap;
}

.team-profile__role.tooltip-trigger[data-tooltip]::after {
  left: 0;
  z-index: 10;
  width: min(320px, calc(100vw - 2rem));
  max-width: none;
  border: 1px solid var(--color-border);
  text-align: left;
  white-space: normal;
  transform: translateY(0);
}

.team-profile__role.tooltip-trigger:hover::after,
.team-profile__role.tooltip-trigger:focus-visible::after {
  transform: translateY(-4px);
}

@media (max-width: 620px) {
  .team-profile__media {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
}

.ecosystem-suite--fronts {
  padding-bottom: clamp(3rem, 6vw, 5rem);
}

.ecosystem-suite--fronts::before {
  content: "";
  position: absolute;
  inset: 15% 8% -6rem;
  z-index: -1;
  background: radial-gradient(
    circle at 50% 100%,
    color-mix(in srgb, var(--color-accent) 8%, transparent),
    transparent 58%
  );
  /* O radial ainda tem alfa quando alcança a base do box, então a borda do
     pseudo-elemento cortava a luz numa reta visível. A máscara garante o fade
     independente da altura que a seção assumir. */
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent);
  mask-image: linear-gradient(to bottom, #000 55%, transparent);
  pointer-events: none;
}

.ecosystem-suite--journey {
  padding-top: 0;
}

/* Da continuidade a luz da secao anterior atraves da faixa "Como as frentes se
   conectam", que antes caia para preto puro por nao ter halo proprio. */
.ecosystem-suite--journey::before {
  content: "";
  position: absolute;
  inset: -6rem 8% auto;
  height: 26rem;
  z-index: -1;
  background: radial-gradient(
    ellipse 55% 100% at 50% 0%,
    color-mix(in srgb, var(--color-accent) 7%, transparent),
    transparent 70%
  );
  pointer-events: none;
}

.ecosystem-bridge {
  display: grid;
  grid-template-columns: minmax(2rem, 1fr) auto minmax(2rem, 1fr);
  align-items: center;
  gap: clamp(0.8rem, 2vw, 1.5rem);
  margin-bottom: clamp(2.5rem, 6vw, 4rem);
  color: var(--color-accent-readable);
}

.ecosystem-bridge span {
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--color-accent) 52%, var(--color-border))
  );
}

.ecosystem-bridge span:last-child {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--color-accent) 52%, var(--color-border)),
    transparent
  );
}

.ecosystem-bridge strong {
  font: 600 0.68rem/1.3 "JetBrains Mono", monospace;
  letter-spacing: 0.1em;
  text-align: center;
  text-transform: uppercase;
}

@media (max-width: 760px) {
  .ecosystem-suite--fronts {
    padding-bottom: 2.75rem;
  }

  .ecosystem-bridge {
    grid-template-columns: minmax(1rem, 1fr) auto minmax(1rem, 1fr);
    margin-bottom: 2.5rem;
  }

  .ecosystem-bridge strong {
    max-width: 22ch;
    font-size: 0.62rem;
  }
}