/*
 * Rejilla de personas. Se apoya en las variables del tema cuando existen y
 * lleva su propio valor de respaldo, para que el plugin siga siendo legible
 * con cualquier otro tema.
 */

/*
 * La medida de lectura del tema alcanza a cualquier <ul> del contenido y
 * dejaba la rejilla en media pagina. Aqui no aplica: manda la rejilla.
 */
.entry-content .mcc-staff { max-width: none; }

.mcc-staff {
	display: grid;
	grid-template-columns: repeat(var(--mcc-staff-cols, 4), minmax(0, 1fr));
	/* Mas aire entre filas que entre columnas: es lo que separa una fila de
	   la siguiente sin tener que dibujar una linea. */
	column-gap: var(--sp-6, 1.75rem);
	row-gap: var(--sp-9, 5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (max-width: 1180px) {
	.mcc-staff { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
	.mcc-staff { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
	.mcc-staff { grid-template-columns: 1fr; }
}

.mcc-staff__item {
	display: flex;
	flex-direction: column;
	gap: var(--sp-4, 1rem);
	margin: 0;
	padding: 0;
}

/* El retrato, redondo y cuadrado de caja: es lo que unifica la fila. */
.mcc-staff__photo {
	width: min(100%, 200px);
	margin-inline: auto;
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: 50%;
	background: var(--c-surface, rgba(255, 255, 255, 0.04));
}

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

.mcc-staff__body {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: var(--sp-2, 0.5rem);
	text-align: center;
}

.mcc-staff__name {
	margin: 0;
	font-size: var(--fs-17, 1.0625rem);
	font-weight: 700;
	letter-spacing: var(--ls-caps, 0.05em);
	text-transform: uppercase;
	color: var(--c-text, #fff);
}

.mcc-staff__country {
	margin: 0;
	font-size: var(--fs-13, 0.8125rem);
	font-weight: 700;
	letter-spacing: var(--ls-caps, 0.05em);
	text-transform: uppercase;
	color: var(--c-accent, #e48205);
}

.mcc-staff__bio {
	font-size: var(--fs-14, 0.875rem);
	line-height: 1.55;
	color: var(--c-text-soft, rgba(255, 255, 255, 0.72));
}

.mcc-staff__bio p { margin: 0 0 0.6em; max-width: none; }
.mcc-staff__bio p:last-child { margin-bottom: 0; }

.mcc-staff__contact {
	display: flex;
	flex-direction: column;
	gap: 0.15em;
	margin: auto 0 0;
	padding-top: var(--sp-2, 0.5rem);
	font-size: var(--fs-13, 0.8125rem);
	word-break: break-word;
}

.mcc-staff__contact a {
	/* 26 px de alto: correo y telefono apilados quedaban a menos de 24 px
	   entre si para el dedo. */
	padding-block: 3px;
	color: var(--c-accent, #e48205);
	text-decoration: none;
}

.mcc-staff__contact a:hover { text-decoration: underline; }