.team-finder-shell {
  max-width: 1240px;
}

.team-finder-hero-layout {
  align-items: center;
}

.team-finder-hero-note,
.team-meta-group,
.team-tag-group,
.team-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.team-finder-illustration img {
  min-height: 240px;
  object-fit: cover;
}

.team-finder-filter-grid {
  display: grid;
  gap: 12px;
}

.team-finder-filter-grid label {
  display: grid;
}

.team-directory-grid {
  display: grid;
  gap: 14px;
  margin-top: 14px;
}

.team-directory-grid .surface-card + .surface-card {
  margin-top: 0;
}

.team-directory-card {
  display: grid;
  gap: 14px;
  padding: 18px;
}

.team-card-top,
.team-card-copy {
  display: grid;
  gap: 12px;
}

.team-card-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.team-name,
.team-description,
.team-intro {
  margin: 0;
}

.team-name {
  font-size: clamp(24px, 4vw, 30px);
  line-height: 1.08;
}

.team-description,
.team-intro {
  color: var(--ui-muted);
  line-height: 1.7;
}

.team-logo-slot {
  width: 96px;
  min-width: 96px;
  min-height: 96px;
  justify-self: start;
  background:
    radial-gradient(circle at 30% 24%, rgba(107, 166, 255, 0.2), transparent 45%),
    rgba(255, 255, 255, 0.96);
}

.team-logo-slot img {
  object-fit: contain;
  padding: 12px;
}

.team-logo-slot .image-slot-fallback {
  padding: 12px;
}

.team-logo-slot .image-slot-fallback img {
  width: 42px;
  height: 42px;
}

.team-actions {
  margin-top: 2px;
}

.team-actions .ui-btn {
  flex: 1 1 180px;
}

.team-directory-grid .empty-state {
  grid-column: 1 / -1;
}

@media (min-width: 768px) {
  .team-finder-filter-grid {
    grid-template-columns: minmax(0, 1.5fr) minmax(220px, 0.7fr);
  }

  .team-card-top {
    grid-template-columns: 96px minmax(0, 1fr);
    align-items: center;
  }
}

@media (min-width: 980px) {
  .team-directory-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .team-actions .ui-btn {
    width: 100%;
  }
}