/**
 * Styling for the Commission Page Layout pattern.
 * Enqueued on both front-end and inside the block editor so coordinators
 * see an accurate preview while editing.
 */

/* Grid of coordinator cards: wraps responsively, no fixed column count
   so it self-adjusts whether there are 1, 2, 6, or 10 coordinators. */
.cib-coordinator-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 24px;
	width: 100%;
}

/* Each coordinator card: image on top, text stacked below, centered. */
.cib-coordinator-entry {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 4px;
}

.cib-coordinator-photo {
	margin: 0 0 8px 0;
}

.cib-coordinator-photo img {
	width: 120px;
	height: 150px;
	object-fit: cover;
	display: block;
}

.cib-coordinator-name {
	margin: 0;
}

.cib-coordinator-affiliation,
.cib-coordinator-country {
	margin: 0;
	font-size: 0.9em;
	opacity: 0.85;
}

.cib-locked-heading {
	/* Visual cue (admin + coordinator) that this heading is structural,
	   not freely editable. Adjust/remove to match site typography. */
	color: #00425e;
}

.cib-section {
	margin-bottom: 32px;
}

/* Small-screen safety net: even with auto-fill, force single column
   below ~480px so cards don't get squeezed too narrow. */
@media (max-width: 480px) {
	.cib-coordinator-grid {
		grid-template-columns: 1fr;
	}
}