/*=========================
	ROLE CARDS BLOCK
	Volunteer roles grid: framed thumbnail | title + icon rows + 2 buttons
=========================*/
.block-role-cards .header {
	max-width: 900px;
	margin-bottom: 50px;
}
@media only screen and (max-width: 1199.98px) {
	.block-role-cards .header {
		margin-bottom: 36px;
	}
}
.block-role-cards .header .title {
	margin-bottom: 12px;
}
.block-role-cards .header .copy p {
	margin-bottom: 0;
}

/* ---------- grid ---------- */
.block-role-cards .roles {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 72px 60px;
}
.block-role-cards.cols-3 .roles {
	grid-template-columns: repeat(3, 1fr);
	gap: 72px 40px;
}

/* ---------- role ---------- */
.block-role-cards .role {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 24px;
	align-items: start;
	color: var(--color-p); /* accent — used by frame + underline */
}
.block-role-cards .role.accent-accent-green { color: var(--accent-green); }
.block-role-cards .role.accent-accent-pink { color: var(--accent-pink); }
.block-role-cards .role.accent-accent-light-blue { color: var(--accent-light-blue); }
.block-role-cards .role.accent-accent-peach { color: var(--accent-peach); }
.block-role-cards .role.accent-accent-grey { color: var(--accent-grey); }
.block-role-cards .role.accent-color-n-black { color: var(--color-n-black); }

.block-role-cards .role__media {
	position: relative;
	aspect-ratio: 1 / 1;
	border: 0.5rem solid currentColor; /* same as the top-title accent bar */
	overflow: hidden;
	background: var(--accent-grey, #f1f1f3);
}
.block-role-cards.ratio-landscape .role__media { aspect-ratio: 4 / 3; }
.block-role-cards.ratio-portrait .role__media { aspect-ratio: 4 / 5; }
.block-role-cards .role__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.block-role-cards .role__body {
	color: var(--color-n-black);
	min-width: 0;
}
.block-role-cards .role__title {
	position: relative;
	display: inline-block;
	margin: 0 0 18px;
	padding-bottom: 14px;
	font-size: 22px !important;
	font-weight: 600 !important;
	line-height: 1.2;
	color: var(--color-n-black);
}
.block-role-cards .role__title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 48px;
	height: 0.5rem; /* same as the top-title accent bar + thumbnail frame */
	background: currentColor;
}
.block-role-cards .role.accent-accent-green .role__title::after { background: var(--accent-green); }
.block-role-cards .role.accent-accent-pink .role__title::after { background: var(--accent-pink); }
.block-role-cards .role.accent-accent-light-blue .role__title::after { background: var(--accent-light-blue); }
.block-role-cards .role.accent-accent-peach .role__title::after { background: var(--accent-peach); }
.block-role-cards .role.accent-accent-grey .role__title::after { background: var(--accent-grey); }
.block-role-cards .role.accent-color-p .role__title::after { background: var(--color-p); }
.block-role-cards .role.accent-color-n-black .role__title::after { background: var(--color-n-black); }

.block-role-cards .role__copy {
	margin: 0 0 16px;
	font-size: 16px !important;
	line-height: 1.5 !important;
}

.block-role-cards .role__features {
	list-style: none;
	margin: 0 0 22px;
	padding: 0;
}
.block-role-cards .role__feature {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin: 0 0 12px;
	font-size: 16px;
	line-height: 1.35;
	color: var(--color-n-black);
}
.block-role-cards .role__feature:last-child {
	margin-bottom: 0;
}
.block-role-cards .role__feature-icon {
	flex: 0 0 26px;
	width: 26px;
	height: 26px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--color-n-black);
}
.block-role-cards .role__feature-icon svg,
.block-role-cards .role__feature-icon img {
	width: 24px;
	height: 24px;
	display: block;
}
.block-role-cards .role__feature-text {
	padding-top: 2px;
}

.block-role-cards .role__actions {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
}
.block-role-cards .role__actions .c-btn {
	min-width: 190px;
	justify-content: center;
	padding: 0.8em 1.6em;
	font-size: 16px !important;
}
.block-role-cards .role__actions .c-btn__icon {
	display: inline-flex;
	width: 14px;
	height: 14px;
	margin-left: 10px;
}
.block-role-cards .role__actions .c-btn__icon svg {
	width: 100%;
	height: 100%;
}

/* ---------- responsive ---------- */
@media only screen and (max-width: 1199.98px) {
	.block-role-cards .roles,
	.block-role-cards.cols-3 .roles {
		grid-template-columns: repeat(2, 1fr);
		gap: 56px 30px;
	}
	.block-role-cards .role {
		grid-template-columns: 1fr;
	}
	.block-role-cards .role__media {
		max-width: 420px;
	}
}
@media only screen and (max-width: 767.98px) {
	.block-role-cards .roles,
	.block-role-cards.cols-3 .roles {
		grid-template-columns: 1fr;
		gap: 48px;
	}
	.block-role-cards .role__media {
		max-width: none;
	}
	.block-role-cards .role__actions .c-btn {
		width: 100%;
	}
}