/**
 * Member Gallery — front-end styles.
 *
 * Column count comes from --sn-mg-columns, set inline by the renderer from the
 * widget's Columns setting, and stepped down at each breakpoint.
 */

.sn-member-gallery {
	--sn-mg-columns: 7;
	--sn-mg-gap: 1.25rem;
	--sn-mg-card-border: #dcdcde;
	--sn-mg-card-bg: #fff;
	--sn-mg-placeholder-bg: #eceef0;
	--sn-mg-placeholder-fg: #b4b9bf;
	margin: 0 0 2rem;
}

.sn-member-gallery__section {
	margin: 0 0 2.5rem;
}

.sn-member-gallery__section:last-child {
	margin-bottom: 0;
}

.sn-member-gallery__heading {
	margin: 0 0 1rem;
}

.sn-member-gallery__grid {
	--sn-mg-min-card: 130px;
	display: grid;
	gap: var( --sn-mg-gap );
	margin: 0;
	padding: 0;
	list-style: none;

	/*
	 * Fallback for browsers without max(): sensibly sized cards, column count
	 * driven purely by available width.
	 */
	grid-template-columns: repeat( auto-fill, minmax( var( --sn-mg-min-card ), 1fr ) );

	/*
	 * Preferred: track width is the LARGER of the minimum card width and the
	 * share implied by the requested column count. At full width that yields
	 * exactly --sn-mg-columns columns; as the viewport narrows the implied
	 * share drops below the minimum, so fewer cards fit and the grid steps
	 * down on its own. It can never exceed the requested count.
	 *
	 * repeat() takes a literal integer, so the count itself cannot be
	 * computed — sizing the tracks is what makes this responsive without
	 * media queries.
	 */
	grid-template-columns: repeat(
		auto-fill,
		minmax(
			max(
				var( --sn-mg-min-card ),
				( 100% - ( var( --sn-mg-columns ) - 1 ) * var( --sn-mg-gap ) ) / var( --sn-mg-columns )
			),
			1fr
		)
	);
}

/* Nirvana adds list bullets and margins fairly aggressively. */
.sn-member-gallery__grid > li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sn-member-gallery__grid > li::before {
	content: none;
}

/* Card ------------------------------------------------------------------- */

.sn-member-card {
	display: flex;
	flex-direction: column;
	background: var( --sn-mg-card-bg );
	border: 1px solid var( --sn-mg-card-border );
	box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.06 );
}

.sn-member-card__media {
	display: block;
	position: relative;
	/* 300x360, the sn_member_card crop. */
	aspect-ratio: 5 / 6;
	overflow: hidden;
	background: var( --sn-mg-placeholder-bg );
}

.sn-member-card__photo {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	border: 0;
	object-fit: cover;
	/*
	 * Top-anchored: keeps faces in frame, and clips the name strip burned into
	 * the bottom of the legacy photos rather than someone's forehead.
	 */
	object-position: center top;
}

.sn-member-card__media--link {
	cursor: zoom-in;
}

.sn-member-card__media--link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.sn-member-card__silhouette {
	display: block;
	width: 55%;
	height: auto;
	margin: 12% auto 0;
	fill: var( --sn-mg-placeholder-fg );
}

.sn-member-card__name {
	display: block;
	padding: 0.5rem 0.4rem;
	font-weight: 700;
	font-size: 0.9rem;
	line-height: 1.3;
	text-align: center;
	overflow-wrap: break-word;
}

/* Responsive -------------------------------------------------------------
 *
 * The column count looks after itself (see the grid rules above). These only
 * tighten the spacing and the minimum card width on smaller screens, which is
 * what lets the grid drop to roughly 3 and then 2 columns.
 */

@media ( max-width: 900px ) {
	.sn-member-gallery {
		--sn-mg-gap: 1rem;
	}

	.sn-member-gallery__grid {
		--sn-mg-min-card: 150px;
	}
}

@media ( max-width: 560px ) {
	.sn-member-gallery__grid {
		--sn-mg-min-card: 120px;
	}

	.sn-member-card__name {
		font-size: 0.85rem;
	}
}