/* Team
   A leadership-team grid with a heading and member cards. The photo is a
   placeholder that shows the person's initials; replace with a real portrait.
   Colour and type from tokens.css (marketing theme). */

.dp-team {
  max-width: 72rem;
  margin: 0 auto;
  padding: var(--dp-space-12) var(--dp-space-6);
}

.dp-team-eyebrow {
  margin: 0 0 var(--dp-space-3);
  font-size: var(--dp-text-sm);
  font-weight: var(--dp-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--dp-link);
}

.dp-team-title {
  margin: 0 0 var(--dp-space-8);
  font-size: var(--dp-text-3xl);
  line-height: var(--dp-leading-tight);
  font-weight: var(--dp-weight-bold);
  color: var(--dp-navy);
}

.dp-team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--dp-space-8) var(--dp-space-6);
}

.dp-team-card {
  display: flex;
  flex-direction: column;
}

.dp-team-photo {
  position: relative;
  aspect-ratio: 1 / 1;
  margin-bottom: var(--dp-space-4);
  border-radius: var(--dp-radius-lg);
  background:
    linear-gradient(135deg, var(--dp-blue-200), var(--dp-blue-100));
  overflow: hidden;
}

.dp-team-photo::after {
  content: attr(data-initials);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--dp-text-3xl);
  font-weight: var(--dp-weight-bold);
  color: var(--dp-blue-700);
  opacity: 0.55;
}

.dp-team-role {
  margin: 0 0 var(--dp-space-1);
  font-size: var(--dp-text-xs);
  font-weight: var(--dp-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--dp-text-muted);
}

.dp-team-name-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--dp-space-3);
}

.dp-team-name {
  margin: 0;
  font-size: var(--dp-text-lg);
  font-weight: var(--dp-weight-bold);
  color: var(--dp-navy);
}

.dp-team-social {
  flex: none;
  display: inline-flex;
  color: var(--dp-navy);
  transition: color 0.15s ease;
}

.dp-team-social:hover { color: var(--dp-link); }
.dp-team-social svg { width: 1.15rem; height: 1.15rem; }