/**
 * Band member cards — circle photos with goofy hover swap.
 */

.wrl-band-members {
	--wrl-member-circle: clamp(4.75rem, 21vw, 11.25rem);
	--wrl-member-gap-y: clamp(0.85rem, 2.5vw, 2rem);
	--wrl-member-gap-x: clamp(0.5rem, 2vw, 1.5rem);

	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wrl-member-gap-y) var(--wrl-member-gap-x);
	margin-block: clamp(1.25rem, 4vw, 2rem);
	margin-inline: 0;
	max-width: none;
	padding-inline: 0;
	align-items: start;
}

.wrl-member-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	min-width: 0;
	width: 100%;
}

.wrl-member-card__photo-wrap {
	position: relative;
	width: var(--wrl-member-circle);
	max-width: 100%;
	aspect-ratio: 1;
	margin-inline: auto;
	border-radius: 50%;
	overflow: hidden;
	border: clamp(1px, 0.2vw, 2px) solid rgba(91, 164, 201, 0.2);
	box-shadow:
		0 0 clamp(12px, 3vw, 32px) rgba(91, 164, 201, 0.12),
		0 clamp(4px, 1.5vw, 8px) clamp(12px, 3vw, 24px) rgba(0, 0, 0, 0.35);
}

.wrl-member-card__photo {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Match photo wall sepia treatment (Tomatillo pw-filter-sepia). */
	filter: sepia(80%) saturate(90%);
}

.wrl-member-card__photo--goofy {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.wrl-member-card:hover .wrl-member-card__photo--goofy,
.wrl-member-card:focus-within .wrl-member-card__photo--goofy {
	opacity: 1;
}

.wrl-member-card__name {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: clamp(0.55rem, 2vw, 0.85rem) 0 clamp(0.2rem, 1vw, 0.3rem);
	width: 100%;
	max-width: 100%;
	font-family: "industry-black", sans-serif;
	font-size: clamp(1.05rem, 2.1vw, 1.3rem);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: 0.01em;
	color: var(--wrl-text-heading, #dce8f1);
}

/* Bio section h3 styles are huge — reset member names to a readable size. */
.wrl-section .entry-content .wrl-member-card__name {
	font-size: clamp(1.05rem, 2.1vw, 1.3rem);
	font-weight: 400;
	line-height: 1.15;
}

.wrl-member-card__name-line {
	display: block;
	max-width: 100%;
}

.wrl-member-card__credits {
	margin: 0;
	width: 100%;
	max-width: 100%;
	font-size: clamp(0.65rem, 1.4vw, 0.78rem);
	font-weight: 400;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wrl-text-secondary, #8fa3b6);
	line-height: 1.35;
}

@media (prefers-reduced-motion: reduce) {
	.wrl-member-card__photo--goofy {
		transition: none;
	}
}

/* Mobile — stack members vertically, centered, with room to breathe. */
@media (max-width: 640px) {
	.wrl-band-members-section {
		width: 100%;
	}

	.wrl-band-members {
		grid-template-columns: 1fr;
		justify-items: center;
		width: 100%;
		max-width: none;
		margin-inline: auto;
		--wrl-member-circle: clamp(12rem, 72vw, 17rem);
		--wrl-member-gap-y: clamp(2.75rem, 9vw, 3.5rem);
		--wrl-member-gap-x: 0;
	}

	.wrl-member-card {
		width: auto;
		max-width: var(--wrl-member-circle);
	}

	.wrl-member-card__name {
		display: block;
		text-align: center;
		margin-top: clamp(0.85rem, 3.5vw, 1.1rem);
		margin-bottom: clamp(0.4rem, 2vw, 0.55rem);
	}

	.wrl-member-card__name-line {
		display: inline;
	}

	.wrl-member-card__name-line + .wrl-member-card__name-line::before {
		content: ' ';
	}
}