/*
 * Team - ledengrid met portretkaarten (intro komt uit het page-intro component)
 */

.team-members {
  padding:    var(--space-20) 0 var(--space-24);
  background: var(--color-bg-section);
}

.team-members__inner {
  max-width: var(--container-max);
  margin:    0 auto;
  padding:   0 var(--section-padding-x);
}

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

.team-card {
  display:         block;
  color:           inherit;
  text-decoration: none;
  transition:      transform var(--transition-fast);
}

.team-card:hover {
  transform: translateY(-2px);
}

.team-card__photo {
  width:         100%;
  aspect-ratio:  4 / 5;
  margin-bottom: var(--space-5);
  border-radius: 16px;
  overflow:      hidden;
  background:    var(--color-primary);
  transition:    box-shadow var(--transition-fast),
                 filter var(--transition-fast);
}

.team-card__photo img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
}

.team-card:hover .team-card__photo {
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.14);
  filter:     saturate(1.05);
}

.team-card__name {
  margin:         0 0 var(--space-1);
  font-size:      17px;
  font-weight:    var(--font-bold);
  letter-spacing: -0.2px;
  color:          var(--color-text-heading);
}

.team-card__role {
  margin:      0;
  font-size:   var(--text-sm);
  line-height: 1.4;
  color:       var(--color-text-meta);
}

@media (max-width: 768px) {
  .team-members__grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
}