/**
 * Rich Content pattern.
 *
 * White rounded card with the LFBC ring logo top-right, an eyebrow,
 * headings + body copy, lists, a primary CTA, and an inlined
 * FAQ accordion (from the lfbc-ollie-child/accordion pattern).
 *
 * Global heading/list/button styles come from typography.css + buttons.css;
 * this file only handles the wrapping card, eyebrow, logo placement, and
 * inter-block spacing specific to this layout.
 */

/* Chain `.wp-block-group` to bump specificity above core's editor rule
 *   `.has-global-padding :where(... .has-global-padding ...) { padding-inline: 0 }`
 * which has (0,1,0) — same as `.lfbc-rich-content` alone — and loads after
 * our editor stylesheet, so it would otherwise zero out our horizontal
 * padding on nested has-global-padding groups (which we are, since
 * theme.json sets useRootPaddingAwareAlignments: true). */
.lfbc-rich-content.wp-block-group {
	background-color: var(--wp--preset--color--white);
	border-radius: clamp(24px, 5vw, 80px);
	margin-bottom: 40px;
	padding-block: clamp(40px, 6vw, 60px) clamp(50px, 6vw, 70px);
	padding-inline: clamp(20px, 5vw, 80px);
	box-sizing: border-box;
}

/* Card width comes from core's constrained-layout rule (capped at the global
 * content-size, 1360px). Its contents are narrowed to a 932px column by
 * overriding max-width on exactly the children core's content rule targets —
 * mirroring its `:where(:not(.alignleft):not(.alignright):not(.alignfull))`
 * selector (plus `:not(.alignwide)`) so `alignwide`/`alignfull` children keep
 * their own widths. `margin-inline: auto` still comes from core, so the 932px
 * column stays centred. Our selector's specificity (0,2,0) beats core's
 * all-`:where` rule (0,0,0). */
.lfbc-rich-content.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignwide):not(.alignfull):not(.lfbc-rich-content__banner)) {
	max-width: 932px;
}

/* Vertical rhythm between top-level blocks inside the card. Mirrors the
 * Figma 20px gap; theme blockGap is 1rem so we lift it a touch here. */
.lfbc-rich-content > * {
	margin-block-start: 20px;
}

/* Logo row: full-width flex strip with the ring pushed to the right edge.
 * Subsequent blocks (eyebrow, title, body) flow underneath at full width
 * rather than wrapping around the image. */
.lfbc-rich-content__logo-row {
	width: 100%;
}

.lfbc-rich-content__logo {
	margin-block: 0;
	filter: drop-shadow(0 16px 24px rgba(0, 0, 0, 0.17));
}

.lfbc-rich-content__logo img {
	width: 57px;
	height: auto;
	display: block;
}

/* OPEN CALL eyebrow: 8px nootka-rose left border, uppercase, extra-bold. */
.lfbc-rich-content__eyebrow {
	margin: 0;
	padding-inline-start: 16px;
	border-inline-start: 8px solid var(--wp--preset--color--nootka-rose-900);
	font-family: var(--wp--preset--font-family--noto-sans);
	font-weight: 800;
	font-size: 16px;
	line-height: 1.42;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	color: var(--wp--preset--color--soft-black-500);
}

/* Title sits closer to the eyebrow than the default block rhythm. */
.lfbc-rich-content > .lfbc-rich-content__eyebrow + .lfbc-rich-content__title {
	margin-block-start: 20px;
}

/* h3 sections (Eligibility, Grant Award Details, etc.) get extra room above. */
.lfbc-rich-content > h3 {
	margin-block-start: 40px;
}

/* CTA button row: 40px above, no list marker influence, left-aligned. */
.lfbc-rich-content__cta.wp-block-buttons {
	margin-block-start: 40px;
	justify-content: flex-start;
}

/* The embedded accordion pattern brings its own internal spacing; just give
 * it some breathing room above. */
.lfbc-rich-content > .lfbc-accordion {
	margin-block-start: 40px;
}