/* ============================================
   Componente: Team Card
   Diseño editorial: foto grande protagonista, texto mínimo.
   ============================================ */

.team-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.team-card__image-wrap {
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: var(--color-grey-200);
}

.team-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(15%);
  transition: filter var(--duration-slow) var(--ease-elegant),
              transform var(--duration-slow) var(--ease-elegant);
}

.team-card:hover .team-card__image {
  filter: grayscale(0%);
  transform: scale(1.02);
}

.team-card__name {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  color: var(--color-text);
}

.team-card__role {
  font-size: var(--fs-small);
  color: var(--color-gold-dark);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.team-card__bio {
  font-size: var(--fs-small);
  color: var(--color-text-muted);
  max-width: 42ch;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

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

@media (max-width: 600px) {
  .team-grid { grid-template-columns: 1fr; max-width: 320px; margin-inline: auto; }
}