/**
 * LFBC Impact pattern
 *
 * Pollen-backed rounded card with a portrait image paired to a title + intro +
 * two CTAs and a row of three big-number stats. Mobile (default): everything
 * stacks — image on top, content centered, stats wrap into 3 narrow columns.
 * Desktop (≥ 1024px container): image flush-left taking ~453px, content on the
 * right with title/intro/buttons stacked above the 3-up stats row.
 *
 * Container query lives on `.lfbc-impact` (align:full → inline-size equals the
 * viewport / editor-canvas width) so previews are stable regardless of the
 * Site Editor sidebar state — same approach as hero, 5050, lp-hero, etc.
 *
 * Title and stat numbers carry a pollen-tinted glow per the Figma effect
 * "pollen shadow" (color #ae7d2a, radius 25, spread 2). CSS drop-shadow has no
 * spread; the visual is close enough — matches the lp-hero title treatment.
 */

.lfbc-impact {
	container-type: inline-size;
	padding: 20px 12px;
}

.lfbc-impact__card {
	max-width: 1360px;
	margin-inline: auto;
	border-radius: 40px;
	overflow: clip;
	display: flex;
	flex-direction: column;
}

/* WP layout-flow injects `> * + * { margin-block-start: block-gap }` into
 * every default-layout group. Reset on our flex children. */
.lfbc-impact .lfbc-impact__card > *,
.lfbc-impact .lfbc-impact__content > *,
.lfbc-impact .lfbc-impact__stats > *,
.lfbc-impact .lfbc-impact__stat > * {
	margin-block-start: 0;
	margin-top: 0;
}

/* ----- Image cell ------------------------------------------------------- */

.lfbc-impact__image {
	margin: 0;
	width: 100%;
}

.lfbc-impact__image img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
	aspect-ratio: 358 / 234; /* mobile design crop */
}

/* ----- Content stack ---------------------------------------------------- */

.lfbc-impact__content {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 20px 20px 40px;
	align-items: center;
}

.lfbc-impact__title {
	margin: 0;
	width: 100%;
	line-height: 1.1;
	letter-spacing: -0.01em;
	text-align: center;
	filter: drop-shadow(0 0 12.5px #ae7d2a);
}

.lfbc-impact__intro {
	margin: 0;
	width: 100%;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
}

.lfbc-impact__buttons.wp-block-buttons {
	gap: 8px;
	flex-direction: column;
	align-items: stretch;
	width: 100%;
	margin: 0;
}

.lfbc-impact__buttons .wp-block-button {
	width: 100%;
}

.lfbc-impact__buttons .wp-block-button .wp-block-button__link {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ----- Stats row -------------------------------------------------------- */

.lfbc-impact__stats {
	display: flex;
	gap: 20px;
	align-items: flex-start;
	width: 100%;
	padding-top: 4px;
}

.lfbc-impact__stat {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 8px 0;
}

.lfbc-impact__stat-number {
	margin: 0;
	line-height: 1.2;
	letter-spacing: -0.01em;
	filter: drop-shadow(0 0 12.5px #ae7d2a);
	word-break: break-word;
}

.lfbc-impact__stat-label {
	margin: 0;
	font-weight: 700;
	line-height: 1.3;
}

/* -------------------------------------------------------------------------
 * Desktop: card ≥ 1024px wide. Image flush-left, content on the right.
 * ------------------------------------------------------------------------- */
@container (min-width: 1024px) {

	.lfbc-impact {
		padding: 40px;
	}

	.lfbc-impact__card {
		border-radius: 80px;
		flex-direction: row;
		align-items: stretch;
		gap: 80px;
		padding-right: 80px;
	}

	.lfbc-impact__image {
		flex: 0 0 453px;
		align-self: stretch;
		width: 453px;
		height: auto;
		position: relative;
		overflow: clip;
	}

	.lfbc-impact__image img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		max-width: none;
		object-fit: cover;
		aspect-ratio: auto;
	}

	.lfbc-impact__content {
		flex: 1 1 0;
		min-width: 0;
		align-items: flex-start;
		padding: 80px 0 40px;
		gap: 30px;
	}

	.lfbc-impact__title {
		text-align: left;
	}

	.lfbc-impact__intro {
		line-height: 1.4;
		text-align: left;
	}

	.lfbc-impact__buttons.wp-block-buttons {
		flex-direction: row;
		align-items: center;
		width: auto;
		gap: 20px;
	}

	.lfbc-impact__buttons .wp-block-button {
		width: auto;
	}

	.lfbc-impact__buttons .wp-block-button .wp-block-button__link {
		width: auto;
	}

	.lfbc-impact__stats {
		gap: 0;
		padding-top: 12px;
	}

	.lfbc-impact__stat {
		padding: 20px 20px 20px 0;
		gap: 8px;
	}

	.lfbc-impact__stat-number {
		line-height: 1.1;
	}

	.lfbc-impact__stat-label {
		line-height: 1.4;
	}
}