/* ==========================================================================
   coordination.css — secciones propias de la página Coordination:
   Executive committee / External Advisory Committee (tarjetas de persona).
   Los iconos-tarjeta (resumen de arriba y Working groups) ya vienen de
   nothome.css.
   ========================================================================== */

/* REDISEÑO: secciones separadas con más aire y títulos alineados a la izquierda (antes centrados). */
.coordination-section {
  margin: var(--space-section-lg) 0 0;
}

.coordination-section h2 {
  margin-bottom: 1.5rem;
}

.person-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.5rem;
}

.person-card {
  background-color: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: 1.5rem 1rem;
  text-align: center;
}

.person-card-photo {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 50%;
  margin: 0 auto 0.75rem;
  display: block;
}

/* Icono Lucide cuando no hay foto: mismo tamaño que la foto */
.person-card-photo-placeholder {
  display: block;
  margin: 0 auto 0.75rem;
  width: 100px;
  height: 100px;
  color: var(--text-muted);
}

.person-card-role {
  margin: 0 0 0.2rem;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--accent-primary);
}

.person-card-name {
  margin: 0 0 0.4rem;
  font-family: var(--font-heading);
}

.person-card-desc {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.person-card--link {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.person-card--link:hover {
  border-color: var(--accent-primary);
  transform: translateY(-2px);
}

.person-card--compact {
  padding: 1.25rem 1rem;
}

.person-card--compact .person-card-photo-placeholder {
  width: 80px;
  height: 80px;
}

.person-card-photo--compact {
  width: 80px;
  height: 80px;
}

/* Variante en filas (EAC): foto pequeña a la izquierda, nombre e institución a la derecha.
   - grid de 2 columnas (foto | texto); la foto ocupa las dos filas de texto. */
.person-card-grid--rows {
  grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr));
  gap: 0.75rem;
}
.person-card-grid--rows .person-card {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 1rem;
  padding: 0.85rem 1rem;
  text-align: left;
}
.person-card-grid--rows .person-card-photo,
.person-card-grid--rows .person-card-photo-placeholder {
  grid-row: span 2;
  width: 56px;
  height: 56px;
  margin: 0;
}
.person-card-grid--rows .person-card-name {
  margin: 0;
  align-self: end;
}
.person-card-grid--rows .person-card-desc {
  align-self: start;
}

.working-group-members-label {
  margin-top: 1.5rem;
  margin-bottom: 0.3rem;
  font-weight: 700;
}

.working-group-members {
  margin: 0;
  font-size: 0.9rem;
}