/**
 * Theme – Komitee-Seite
 * Nur auf der Komitee-Seite geladen (inc/enqueue.php, Stufe 2).
 */

/*
 * Personenraster: die Portraits liegen in sehr unterschiedlichen
 * Seitenverhältnissen vor (quadratisch bis hoch- und querformatig). Ein festes
 * aspect-ratio mit object-fit vereinheitlicht die Darstellung.
 */
.spnkt-komitee-grid {
	align-items: start;
	display: grid;
	gap: var( --wp--preset--spacing--klein );
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 600px) {
	.spnkt-komitee-grid {
		gap: var( --wp--preset--spacing--mittel );
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 900px) {
	.spnkt-komitee-grid {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

/*
 * WordPress setzt via .is-layout-flow einen margin-block-start auf alle
 * Kinder ausser dem ersten – im Grid führt das zu versetzten Karten.
 * Die Abstände kommen hier ausschliesslich über gap.
 */
.spnkt-komitee-grid > .spnkt-komitee-person {
	margin-block: 0;
}

.spnkt-komitee-person img {
	aspect-ratio: 3 / 4;
	border-radius: var( --wp--custom--border-radius--large );
	object-fit: cover;
	width: 100%;
}

.spnkt-komitee-person figure {
	margin-bottom: var( --wp--preset--spacing--mini );
}

/* Name – Abstand zum Bild kommt von der figure darüber. */
.spnkt-komitee-person p {
	margin-block: 0;
}

.spnkt-komitee-person .spnkt-komitee-name {
	font-weight: 700;
}

.spnkt-komitee-person .spnkt-komitee-funktion {
	font-size: var( --wp--preset--font-size--small );
	margin-top: 0.25em;
}

/* Weitere Mitglieder ohne Portrait: schlichte Liste, zwei Spalten ab Tablet. */
.spnkt-komitee-weitere {
	list-style: none;
	padding-left: 0;
}

.spnkt-komitee-weitere li {
	margin-bottom: var( --wp--preset--spacing--mini );
}

/* Funktion/Ort kleiner als der Name – wie im Portrait-Raster oben. */
.spnkt-komitee-weitere li {
	font-size: var( --wp--preset--font-size--small );
}

.spnkt-komitee-weitere li strong {
	font-size: var( --wp--preset--font-size--medium );
}

@media (min-width: 600px) {
	.spnkt-komitee-weitere {
		columns: 2;
		gap: var( --wp--preset--spacing--mittel );
	}

	.spnkt-komitee-weitere li {
		break-inside: avoid;
	}
}