/**
 * LFBC Grant Callout pattern
 *
 * A rounded nootka-rose banner for open-grant announcements. Mobile (default)
 * stacks title / body / button vertically and centers them; desktop lays them
 * out horizontally with the title on the left, body in the middle, and the
 * ghost CTA on the right.
 *
 * The outer `.lfbc-grant-callout` is align:full and only provides the
 * containment context + edge padding; all visual styling lives on the inner
 * `.lfbc-grant-callout__card` (max-width 1024px, centered). Container queries
 * apply to descendants of the container, not the container itself — that's
 * why the responsive switch is on `__card`, not on the outer section. Same
 * structural approach as hero / lp-hero.
 *
 * The CTA reuses the existing `.is-style-ghost` button style; the trailing
 * arrow is rotated 90° here to point down, matching the Figma "Grant
 * Requirements" affordance without adding a second SVG asset.
 */

.lfbc-grant-callout {
	container-type: inline-size;
	/* Breathing room from viewport edges; the card caps its own width below. */
	padding: 35px 24px 20px 24px;
}

.lfbc-grant-callout__card {
	max-width: 1024px;
	margin-inline: auto;
	border-radius: 40px;
	/* Mobile: centered column. */
	padding: 44px 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	text-align: center;
}

.lfbc-grant-callout__title {
	margin: 0;
}

.lfbc-grant-callout__body {
	margin: 0;
	line-height: 1.5;
}

.lfbc-grant-callout__buttons.wp-block-buttons {
	margin: 0;
}

/* Rotate the trailing arrow on the ghost CTA so it points down — the design
   affordance is "scroll to requirements below" rather than "go forward".
   Scoped to the callout's own button wrapper (not any descendant button) so
   the rotation can't leak into other content accidentally nested inside the
   callout section — e.g. a rich-content block whose buttons should keep the
   normal right-arrow. */
.lfbc-grant-callout__buttons .wp-block-button.is-style-ghost .wp-block-button__link::after {
	transform: rotate(90deg);
}

/* Desktop (≥ 1024px container = viewport, since the wrapper is align:full).
 *
 * Title is fixed-width on the left, body grows to fill, button sits flush
 * right. Gaps match Figma: 20px between title and body, 40px between body
 * and button — achieved with a 20px row gap plus 20px left margin on the
 * button so the effective gap is 40px. */
@container (min-width: 860px) {

	.lfbc-grant-callout__card {
		flex-direction: row;
		align-items: center;
		text-align: left;
		gap: 20px;
		padding: 44px 40px 44px 80px;
	}

	.lfbc-grant-callout__title {
		flex: 0 0 219px;
	}

	.lfbc-grant-callout__body {
		flex: 1 1 0;
		min-width: 0;
	}

	.lfbc-grant-callout__buttons {
		flex: 0 0 auto;
		margin-left: 20px;
	}
}