/**
 * Member spotlight: the card of [raskin_home_spotlight]
 * (includes/raskin/home-spotlight.php), the prototype's MemberSpotlight. On
 * the front page until October 19, 2026 in home.css.
 *
 * The prototype's card is a flex row — a 160px logo tile, the text taking the
 * remaining space 48px away from both neighbors, the two figures side by
 * side 24px apart — and stacks everything, centered, below 1024px. Here it
 * stacks below 1200px: between the two, the row left the text a column too
 * narrow to read (October 3, 2026).
 */

.sba-c-member-spotlight .sba-spotlight-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
	padding: 32px;
	/* --sba-border at 30%. */
	border: 1px solid rgba(226, 228, 233, 0.3);
	border-radius: 0.75rem;
	background-image: linear-gradient(135deg, var(--sba-surface-warm) 0%, var(--sba-surface-cool) 100%);
}

/* The logo tile. Member logos are wordmarks as often as squares, so the image
   is bounded on both axes and centered rather than scaled to the box. It
   links to the profile and behaves as the value cards do: a hairline at
   rest, lifted 4px under the shadow on hover. */
.sba-c-member-spotlight .sba-spotlight-logo {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 128px;
	height: 128px;
	padding: 24px;
	border-radius: 1rem;
	border: 1px solid hsl(220 14% 90% / 0.5);
	background-color: var(--sba-surface);
	transition: box-shadow var(--sba-duration-hover) ease, transform var(--sba-duration-hover) ease;
}

.sba-c-member-spotlight .sba-spotlight-logo:hover,
.sba-c-member-spotlight .sba-spotlight-logo:focus-visible {
	transform: translateY(-4px);
	box-shadow: 0 10px 15px -3px hsl(var(--sba-charcoal-hsl) / 0.1), 0 4px 6px -4px hsl(var(--sba-charcoal-hsl) / 0.1);
}

.sba-c-member-spotlight .sba-spotlight-logo img {
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 80px;
	object-fit: contain;
}

.sba-c-member-spotlight .sba-spotlight-content {
	flex: 1 1 0;
	min-width: 0;
	text-align: center;
}

/* The Eyebrow component's card variant, with the award icon in brand red. */
.sba-c-member-spotlight .sba-spotlight-label {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 8px;
	margin: 0 0 12px;
	color: var(--sba-red-dark);
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
}

.sba-c-member-spotlight .sba-spotlight-label .sba-i {
	color: var(--sba-red);
	font-size: 20px;
}

/* Two classes: the theme sets heading sizes and margins on the element. */
.sba-c-member-spotlight .sba-spotlight-title {
	margin: 0 0 16px;
	font-size: 24px;
	font-weight: 700;
	letter-spacing: var(--sba-heading-tracking);
	line-height: 32px;
}

.sba-c-member-spotlight .sba-spotlight-text {
	max-width: 42rem;
	margin: 0 auto 24px;
	color: var(--sba-slate);
	font-size: 16px;
	line-height: 24px;
}

.sba-c-member-spotlight .sba-spotlight-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
}

/* The prototype's default-size button: 40px, 14px medium, 16px of side
   padding. */
.sba-c-member-spotlight .sba-spotlight-button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 40px;
	padding: 0 16px;
	border: 1px solid transparent;
	border-radius: var(--sba-radius-md);
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	text-decoration: none;
	transition: background-color var(--sba-duration-hover) ease;
}

.sba-c-member-spotlight .sba-spotlight-button .sba-i {
	font-size: 16px;
}

.sba-c-member-spotlight .sba-spotlight-button.is-outline {
	border-color: var(--sba-input);
	background-color: var(--sba-surface);
	color: var(--sba-charcoal);
}

.sba-c-member-spotlight .sba-spotlight-button.is-outline:hover {
	background-color: var(--sba-accent);
	color: var(--sba-charcoal);
}

.sba-c-member-spotlight .sba-spotlight-button.is-solid {
	background-color: var(--sba-red-dark);
	color: var(--sba-red-contrast);
}

.sba-c-member-spotlight .sba-spotlight-button.is-solid:hover {
	background-color: var(--sba-red-darker);
	color: var(--sba-red-contrast);
}

.sba-c-member-spotlight .sba-spotlight-stats {
	display: grid;
	flex: 0 0 auto;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
	align-self: stretch;
	margin: 0;
}

/* The caption comes first in the markup, as the term the figure belongs to;
   the tile shows the figure on top. */
.sba-c-member-spotlight .sba-spotlight-stat {
	display: flex;
	flex-direction: column-reverse;
	justify-content: center;
	padding: 16px;
	border-radius: var(--sba-radius);
	background-color: var(--sba-surface);
	text-align: center;
}

.sba-c-member-spotlight .sba-spotlight-figure {
	margin: 0;
	color: var(--sba-red);
	font-size: 24px;
	font-weight: 700;
	letter-spacing: var(--sba-heading-tracking);
	line-height: 32px;
}

.sba-c-member-spotlight .sba-spotlight-caption {
	margin: 0;
	color: var(--sba-slate);
	font-size: 12px;
	font-weight: 400;
	line-height: 16px;
}

@media (min-width: 1200px) {
	.sba-c-member-spotlight .sba-spotlight-card {
		flex-direction: row;
		gap: 48px;
	}

	.sba-c-member-spotlight .sba-spotlight-logo {
		width: 160px;
		height: 160px;
	}

	.sba-c-member-spotlight .sba-spotlight-content {
		text-align: left;
	}

	.sba-c-member-spotlight .sba-spotlight-label,
	.sba-c-member-spotlight .sba-spotlight-actions {
		justify-content: flex-start;
	}

	.sba-c-member-spotlight .sba-spotlight-text {
		margin-left: 0;
	}

	.sba-c-member-spotlight .sba-spotlight-title,
	.sba-c-member-spotlight .sba-spotlight-figure {
		font-size: 30px;
		line-height: 36px;
	}

	.sba-c-member-spotlight .sba-spotlight-stats {
		gap: 24px;
		align-self: center;
	}
}