/* =========================================================================
   15 · GET INVOLVED — 3 cards (Donate / Volunteer / Partner)
   Reference: V4-BUILD-SPEC §4 #11
   ========================================================================= */

.jj-involved {
	background: var(--jj-bg);
}

.jj-involved__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--sp-6);
	grid-template-columns: 1fr;
}
@media (min-width: 36em) {
	.jj-involved__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (min-width: 48em) {
	.jj-involved__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.jj-involved__card {
	background: var(--jj-bg-warm);
	border-radius: var(--radius-lg);
	padding: var(--sp-8) var(--sp-6);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--sp-3);
	border: 1px solid var(--jj-border);
	transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.jj-involved__card:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-md);
}

.jj-involved__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: var(--radius-md);
	background: var(--jj-primary);
	color: var(--jj-accent-gold);
}

.jj-involved__title {
	font-size: var(--fs-xl);
	margin: 0;
}

.jj-involved__text {
	font-size: var(--fs-sm);
	color: var(--jj-muted);
	line-height: 1.55;
	margin: 0;
	flex: 1;
}

.jj-involved__card .jj-btn {
	margin-top: var(--sp-4);
}