.staff-showcase {
  border-top: 1px solid #252d38;
  border-bottom: 1px solid #252d38;
}

.public-staff-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.public-staff-card {
  --role-color: #70a8ff;
  --role-rgb: 112, 168, 255;
  --role-gradient: linear-gradient(90deg, #70a8ff, #70a8ff);
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 118px;
  padding: 1.25rem;
  border: 1px solid #28313d;
  border-left-color: var(--role-color);
  background: linear-gradient(135deg, #151d29, #0d1219);
  position: relative;
  overflow: hidden;
}

.public-staff-card:before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(10, 15, 22, .96) 0%, rgba(10, 15, 22, .78) 58%, rgba(10, 15, 22, .56) 100%);
}

.public-staff-card.has-discord-accent {
  background: linear-gradient(135deg, color-mix(in srgb, var(--discord-accent) 22%, #151d29), #0d1219 72%);
}

.public-staff-banner {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: .72;
}

.public-staff-card:after {
  content: "";
  position: absolute;
  right: -32px;
  bottom: -50px;
  width: 130px;
  height: 130px;
  border: 1px solid rgba(var(--role-rgb), .24);
  transform: rotate(35deg);
  z-index: 1;
}

.public-staff-card > :not(.public-staff-banner) {
  position: relative;
  z-index: 2;
}

.public-staff-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 58px;
  width: 58px;
  height: 58px;
  border: 1px solid var(--role-color);
  background: rgba(var(--role-rgb), .12);
  color: #fff;
  font: 700 1.4rem 'Barlow Condensed', Impact, sans-serif;
  letter-spacing: .05em;
  overflow: hidden;
}

.public-staff-avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #101722;
}

.public-staff-card h3 {
  margin: 0;
  color: #fff;
  font: 700 1.35rem 'Barlow Condensed', Impact, sans-serif;
  text-transform: none;
}

.public-staff-title {
  margin: .25rem 0 0;
  color: var(--role-color);
  background: var(--role-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.public-staff-card[data-staff-role="human-resources"] {
  --role-color: #ff7897;
  --role-rgb: 255, 120, 151;
  --role-gradient: linear-gradient(90deg, #ff9259, #ff65a2);
}

.public-staff-card[data-staff-role="network-administrator"] {
  --role-color: #d79155;
  --role-rgb: 215, 145, 85;
  --role-gradient: linear-gradient(90deg, #d79155, #d79155);
}

.public-staff-card[data-staff-role="lead-administrator"] {
  --role-color: #e5a252;
  --role-rgb: 229, 162, 82;
  --role-gradient: linear-gradient(90deg, #e5a252, #e5a252);
}

.public-staff-card[data-staff-role="head-administrator"] {
  --role-color: #c12ee1;
  --role-rgb: 193, 46, 225;
  --role-gradient: linear-gradient(90deg, #aa19dd, #e250b4);
}

.public-staff-card[data-staff-role="administrator"] {
  --role-color: #ffacb7;
  --role-rgb: 255, 172, 183;
  --role-gradient: linear-gradient(90deg, #fff0e9, #ff9faf);
}

.public-staff-card[data-staff-role="head-moderator"] {
  --role-color: #bd2343;
  --role-rgb: 189, 35, 67;
  --role-gradient: linear-gradient(90deg, #bd1739, #ac8fc6);
}

.public-staff-card[data-staff-role="senior-moderator"] {
  --role-color: #a8174f;
  --role-rgb: 168, 23, 79;
  --role-gradient: linear-gradient(90deg, #b50934, #2457ae, #9f1b68);
}

.public-staff-card[data-staff-role="moderator"] {
  --role-color: #a9323b;
  --role-rgb: 169, 50, 59;
  --role-gradient: linear-gradient(90deg, #af1835, #24bbae, #a23b43);
}

.public-staff-card[data-staff-role="trainee"] {
  --role-color: #3248d7;
  --role-rgb: 50, 72, 215;
  --role-gradient: linear-gradient(90deg, #292ac3, #295cca);
}

.public-staff-card[data-staff-role="trader-manager"] {
  --role-color: #ff9a80;
  --role-rgb: 255, 154, 128;
  --role-gradient: linear-gradient(90deg, #ffd4d2, #ff8052, #ff9ac0);
}

.public-staff-card[data-staff-role="trader-helper"] {
  --role-color: #ff9c84;
  --role-rgb: 255, 156, 132;
  --role-gradient: linear-gradient(90deg, #ffb6ad, #ff8d5d);
}

.public-staff-loading,
.public-staff-empty {
  grid-column: 1 / -1;
  padding: 2rem;
  border: 1px solid #28313d;
  color: #8492a4;
  text-align: center;
}

.public-staff-empty[hidden] {
  display: none;
}

@media (max-width: 900px) {
  .public-staff-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .public-staff-grid {
    grid-template-columns: 1fr;
  }
}