/* ===========================
   TEAM GRID LAYOUT
=========================== */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, max-content));
  gap: 5%;                  /* spacing between cards */
  justify-content: center;    /* center the whole grid */
  justify-items: center;      /* center cards in their grid cells */
  max-width: 1200px;
  margin-bottom: 5%;
}

@media (max-width: 768px) {
  .team-container {
    align-items: flex-start;
    min-height: auto;
    padding: 1rem;
  }
  .team-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

/* ===========================
   TEAM CARD
=========================== */
.team-card {
  background: rgba(22,22,22,0.45);
  border: 1px solid rgba(180,228,255,0.06);
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  padding: 1.5rem 1rem;
  border-radius: 12px;
  text-align: center;
  color: white;
  width: 100%;
  max-width: 260px;   /* fixed card size so gap works */
  margin: 0;          /* let grid gap handle spacing */
}

/* ===========================
   AVATAR WITH STATUS RING
=========================== */
.pulsating-circle {
  position: relative;
  width: 96px;
  height: 96px;
  margin-bottom: 0.75rem;
}

.pulsating-circle::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border-radius: 50%;
  border: 4px solid transparent;
  box-sizing: border-box;
  animation: pulse-ring 1.5s cubic-bezier(0.215,0.61,0.355,1) infinite;
}

.pulsating-circle img {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

/* Status ring colors */
.pulsating-circle.online::before  { border-color: #43b581; }
.pulsating-circle.idle::before    { border-color: #faa61a; }
.pulsating-circle.dnd::before     { border-color: #f04747; }
.pulsating-circle.offline::before { border-color: #747f8d; }

/* ===========================
   TEXT STYLING
=========================== */
.team-card h3 {
  margin: 0 0 0.2rem 0;   /* consistent bottom margin */
  font-size: 1.1rem;
}

.team-card .username {
  margin: 0;
  font-size: 0.9rem;
  color: #ccc;
}

.team-card .position {
  margin-top: 0.4rem;
  font-size: 0.85rem;
  color: #43b581;
}

/* ===========================
   SHIMMER PLACEHOLDER
=========================== */
.shimmer {
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* ===========================
   RING PULSE ANIMATION
=========================== */
@keyframes pulse-ring {
  0%   { transform: scale(0.9); opacity: 0.6; }
  70%  { transform: scale(1.3); opacity: 0; }
  100% { transform: scale(0.9); opacity: 0; }
}