.grs-recipients,
.grs-recipients *,
.grs-recipients *::before,
.grs-recipients *::after {
	box-sizing: border-box;
}

.grs-recipients__controls {
	margin-bottom: 1.25em;
}

.grs-recipients__controls label {
	display: flex;
	align-items: center;
	gap: 0.5em;
}

.grs-recipients__controls select {
	max-width: 100%;
}

.grs-recipients__results {
	position: relative;
	min-height: 4em;
}

.grs-recipients__results.is-loading {
	opacity: 0.5;
}

.grs-recipients__empty {
	text-align: center;
	padding: 2em 0;
}

/* Card */
.grs-card {
	background: #fff;
	border: 1px solid #e2e2e2;
	border-radius: 8px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.grs-card__photo img {
	width: 100%;
	height: 220px;
	object-fit: cover;
	/* Every photo box here is wider than tall. A landscape photo just loses
	   its left/right edges under a centered crop, which is fine. A portrait
	   photo instead gets scaled up to fill the width and loses its top and
	   bottom evenly — centered vertically, that typically crops off heads.
	   Biasing the crop toward the top keeps faces in frame for portrait
	   photos and has no effect on landscape photos (which never crop
	   vertically in a wide box to begin with). */
	object-position: center 20%;
	display: block;
}

.grs-card__body {
	padding: 1em 1.25em 1.5em;
}

.grs-card__name {
	margin: 0 0 0.25em;
	font-size: 1.1em;
}

.grs-card__location,
.grs-card__year {
	margin: 0.2em 0;
	color: #666;
	font-size: 0.9em;
}

.grs-card__bio {
	margin-top: 0.75em;
	font-size: 0.95em;
	line-height: 1.5;
	overflow: hidden;
}

.grs-card__bio.is-collapsible {
	max-height: 4.75em;
}

.grs-card__bio.is-expanded {
	max-height: none;
}

.grs-card__bio-toggle {
	display: inline-block;
	margin-top: 0.4em;
	padding: 0;
	background: none;
	border: none;
	color: #1452a0;
	font-weight: 600;
	font-size: 0.9em;
	cursor: pointer;
}

.grs-card__bio-toggle[hidden] {
	display: none;
}

/* Grid */
.grs-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 1.5em;
}

/* List */
.grs-list .grs-card {
	flex-direction: row;
	/* Without this, the photo column stretches to match the text column's
	   height (flex's default align-items: stretch) — a long bio would make
	   the row tall and turn the photo into a narrow, zoomed-in sliver since
	   its width stays fixed. Sizing the photo to its own content instead
	   keeps it a normal, fixed-size rectangle no matter how long the bio is. */
	align-items: flex-start;
	margin-bottom: 1em;
}

.grs-list .grs-card__photo {
	flex: 0 0 213px;
}

.grs-list .grs-card__photo img {
	height: 160px;
}

/* Carousel */
.grs-carousel {
	position: relative;
	overflow: hidden;
}

.grs-carousel__track {
	display: flex;
	gap: 1.5em;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding-bottom: 0.5em;
}

.grs-carousel__slide {
	flex: 0 0 280px;
	scroll-snap-align: start;
}

.grs-carousel__prev,
.grs-carousel__next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: rgba(255, 255, 255, 0.9);
	border: 1px solid #ccc;
	border-radius: 50%;
	width: 2.25em;
	height: 2.25em;
	cursor: pointer;
	font-size: 1.25em;
	line-height: 1;
}

.grs-carousel__prev {
	left: 0.5em;
}

.grs-carousel__next {
	right: 0.5em;
}

/* Pagination */
.grs-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4em;
	justify-content: center;
	margin-top: 1.5em;
}

.grs-pagination__link {
	border: 1px solid #ccc;
	background: #fff;
	padding: 0.4em 0.75em;
	border-radius: 4px;
	cursor: pointer;
}

.grs-pagination__link.is-current {
	background: #333;
	color: #fff;
	border-color: #333;
}

/* Mobile */
@media (max-width: 600px) {
	.grs-grid {
		grid-template-columns: 1fr;
		gap: 1em;
	}

	.grs-card__photo img {
		height: 200px;
	}

	/* Stack the photo above the text instead of side-by-side — a fixed-width
	   photo column left too little room for the name/bio on narrow screens. */
	.grs-list .grs-card {
		flex-direction: column;
	}

	.grs-list .grs-card__photo {
		flex: none;
		width: 100%;
	}

	.grs-list .grs-card__photo img {
		height: 200px;
	}

	/* One card per swipe instead of a fixed 280px width, which either
	   overflowed or looked cramped depending on the device. */
	.grs-carousel__slide {
		flex: 0 0 85%;
	}

	.grs-recipients__controls label {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.35em;
	}

	.grs-recipients__controls select {
		width: 100%;
	}

	.grs-pagination__link {
		padding: 0.5em 0.85em;
	}
}