/**
 * "Choose your impact" giving cards — the bits theme.json can't express: the
 * photo-topped card with its rounded clip and shadow, the orange pill badge over
 * the image, and the full-width Donate button with its arrow. The cards are
 * rendered by the albasar/impact-cards block (inc/blocks.php) from the ab_impact
 * CPT; this sheet styles them. Loaded only on pages with the section.
 */

/* ---- Grid: four cards, reflowing to two then one ------------------------- */
.ab-impact-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--40, 1.5rem);
	margin-top: clamp(2rem, 4vw, 3.25rem);
}

@media (max-width: 900px) {
	.ab-impact-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.ab-impact-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---- Card --------------------------------------------------------------- */
.ab-impact-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--wp--preset--color--ab-white);
	border: 1px solid var(--wp--preset--color--ab-line);
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(12, 46, 78, 0.05);
}

/* Photo: fixed 16:10 ratio so every card lines up regardless of image size. */
.ab-impact-card__media {
	position: relative;
	aspect-ratio: 16 / 10;
	background-color: var(--wp--preset--color--ab-surface);
	background-size: cover;
	background-position: center;
}

/* Orange pill badge sitting over the top-left of the photo. */
.ab-impact-card__badge {
	position: absolute;
	top: 14px;
	left: 14px;
	display: inline-block;
	padding: 0.4rem 0.85rem;
	border-radius: 999px;
	background: var(--wp--preset--color--ab-orange);
	color: var(--wp--preset--color--ab-white);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1;
}

/* Body: title, description, then the button pinned to the bottom edge. */
.ab-impact-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	flex: 1 1 auto;
	padding: clamp(1.25rem, 1.8vw, 1.6rem);
}

.ab-impact-card__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 600;
	font-size: 1.1875rem;
	line-height: 1.3;
	color: var(--wp--preset--color--ab-navy);
}

.ab-impact-card__desc {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--wp--preset--color--ab-muted);
	/* Push the button to the bottom so buttons align across uneven cards. */
	flex: 1 1 auto;
}

/* Full-width Donate button with a nudging arrow. */
.ab-impact-card__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	margin-top: 0.5rem;
	padding: 0.875rem 1rem;
	border-radius: 10px;
	background: var(--wp--preset--color--ab-orange);
	color: var(--wp--preset--color--ab-white);
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.2;
	white-space: nowrap;
	text-decoration: none;
	transition: background-color 0.2s ease;
}

.ab-impact-card__btn:hover,
.ab-impact-card__btn:focus-visible {
	background: var(--wp--preset--color--ab-orange-600);
	color: var(--wp--preset--color--ab-white);
}

.ab-impact-card__arrow {
	transition: transform 0.2s ease;
}

.ab-impact-card__btn:hover .ab-impact-card__arrow,
.ab-impact-card__btn:focus-visible .ab-impact-card__arrow {
	transform: translateX(3px);
}

.ab-impact-card__btn:focus-visible {
	outline: 2px solid var(--wp--preset--color--ab-navy);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.ab-impact-card__arrow {
		transition: none;
	}
}

/* Editor-only hint when there are no cards yet. */
.ab-impact-empty {
	margin: 0;
	padding: 2rem;
	text-align: center;
	color: var(--wp--preset--color--ab-muted);
	background: var(--wp--preset--color--ab-surface);
	border: 1px dashed var(--wp--preset--color--ab-line);
	border-radius: 12px;
}