/* Persoonkaart. Alleen tokens van de site, geen vaste kleuren:
   Advanced Themer wisselt licht en donker via dezelfde variabelen. */

.ejk-personen {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 15rem, 1fr ) );
	gap: var( --at-space--m );
}

.ejk-persoon {
	display: flex;
	flex-direction: column;
	background-color: var( --ejk-surface-2 );
	border: 1px solid var( --ejk-hairline );
	border-radius: var( --at-radius--s );
	overflow: hidden;
}

.ejk-persoon__foto {
	aspect-ratio: 4 / 5;
	object-fit: cover;
	width: 100%;
	display: block;
	background-color: var( --ejk-surface-3 );
}

.ejk-persoon__body {
	display: flex;
	flex-direction: column;
	gap: var( --at-space--2xs );
	padding: var( --at-space--s );
}

.ejk-persoon__naam {
	font-family: var( --ejk-font-heading );
	font-weight: 700;
	line-height: 1.1;
	margin: 0;
}

.ejk-persoon__leeftijd {
	color: var( --ejk-text-muted );
}

.ejk-persoon__intro {
	color: var( --ejk-text-muted );
	line-height: 1.5;
}

/* Kwalificaties: een regel per sport, met de hoogste band erachter. */
.ejk-kwalificaties {
	display: flex;
	flex-direction: column;
	gap: var( --at-space--3xs );
	margin: 0;
	padding: var( --at-space--2xs ) 0 0;
	border-top: 1px solid var( --ejk-hairline );
	list-style: none;
}

.ejk-kwalificatie {
	display: flex;
	align-items: center;
	gap: var( --at-space--2xs );
	font-size: var( --at-text--2xs );
}

.ejk-kwalificatie__sport {
	font-weight: 600;
}

.ejk-kwalificatie__functie {
	color: var( --ejk-text-muted );
	margin-inline-end: auto;
}

/* De band zelf: kleur en streepjes komen uit het band-record. */
.ejk-band {
	display: inline-flex;
	align-items: center;
	gap: var( --at-space--3xs );
}

.ejk-band__balk {
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	gap: 2px;
	width: 2.4rem;
	height: 0.7rem;
	padding-inline: 3px;
	border-radius: 2px;
	border: 1px solid var( --ejk-hairline );
	flex: none;
}

.ejk-band__streep {
	width: 2px;
	height: 60%;
	border-radius: 1px;
	background-color: var( --ejk-secondary-l-4, #e3b23c );
}

.ejk-band__naam {
	white-space: nowrap;
}