/**
 * Pattern: Top Fundraisers  (patterns/top-fundraisers.php)
 *
 * Figma H6 (10:276 band, 10:314 h2, 10:365 View All button, 10:369 white
 * panel wrapping the BU3 leaderboard block, frame 1:2 y2776–3839 @1440).
 * One pattern = one CSS partial (auto-enqueued by inc/enqueue.php's glob) —
 * every rule for this pattern, including its responsive media queries,
 * lives here.
 *
 * ── Background — reuses hero-campaign's technique + assets verbatim ──────
 * D21 (orchestrator decision, 2026-09-10, recorded on hero-campaign.css):
 * CSS `background-image` + `image-set()` on this plain full-bleed group —
 * NOT a `wp:cover` block — for a raster band background that is a fixed
 * theme asset. `10:276` is the SAME gradient/skyline PNG as the hero
 * (figma-analysis §1.5: "Hero + Top fundraisers + Adopt lower half use the
 * same gradient PNG") — this partial points at the EXISTING
 * assets/images/hero-bg*.jpg/.webp files (no duplicate export). Real
 * fallback: the gradient is a second, lower `background-image` layer in
 * the SAME comma-separated value (raster on top, gradient underneath) —
 * multiple background layers load independently, so a 404'd raster paints
 * nothing and the gradient shows through with no cascade tricks (verified
 * on the hero; same mechanism, not re-verified file-by-file here since the
 * files are literally the same ones).
 */
.dfd-top-fundraisers {
	position: relative;
	background-color: var(
		--kd-color-pink
	); /* solid paint before any layer resolves */
	background-repeat: no-repeat;
	background-size: cover, cover;
	background-position:
		center bottom,
		center bottom; /* skyline flush with the band's own bottom edge; lavender top shows (comp) */
	background-image:
		url("../../images/hero-bg-1440.jpg"),
		linear-gradient(
			180deg,
			var(--kd-color-pink) 0%,
			var(--kd-color-surface) 100%
		);
}

@supports (background-image: image-set(url("a.jpg") 1x)) {
	.dfd-top-fundraisers {
		background-image:
			image-set(
				url("../../images/hero-bg-1440.webp") 1x type("image/webp"),
				url("../../images/hero-bg.webp") 2x type("image/webp"),
				url("../../images/hero-bg-1440.jpg") 1x type("image/jpeg"),
				url("../../images/hero-bg.jpg") 2x type("image/jpeg")
			),
			linear-gradient(
				180deg,
				var(--kd-color-pink) 0%,
				var(--kd-color-surface) 100%
			);
	}
}

/* Mobile/tablet crop fix — identical fix to hero-campaign.css's round-2
   correction (see that file for the full derivation): `cover` at a tall
   narrow stacked band crops most of the skyline's width; `auto 100%` fills
   the band's full height (matching the gradient layer beneath, so no
   exposed-gradient seam is possible) and crops horizontally instead, with
   the empirically-verified 80% position keeping the ferris wheel on-screen.
   Same asset, same aspect ratio, same band-type (tall/narrow at mobile) —
   reused rather than re-derived. Scoped to the same ≤1023.98px range this
   pattern's own header stack/panel-full-width breakpoint uses below. */
@media (max-width: 1023.98px) {
	.dfd-top-fundraisers {
		background-size:
			auto 100%,
			cover;
		background-position:
			80% bottom,
			center bottom;
	}
}

/* Figma-derived literal, not the generic --dfd-section-pad clamp — this
   pattern is pixel-match at 1440 and its own top inset (67px, h2 top minus
   band top) doesn't match the shared clamp's ~104px @1440, same reasoning
   as hero-campaign's own padding-top. */
.dfd-top-fundraisers {
	padding-top: 3.375rem; /* 54px — NOT the h2's own 67px (10:314 y2843): the View All
		button (10:365, y2830) sits 13px ABOVE the h2's box top, with both boxes
		sharing the same bottom edge (y2904/y2904) — Figma text-box leading, not
		true visual centring. 54px = button top offset (2830 − 2776), which is
		what actually sets the row's top; the header row's flex-end alignment
		(below) lands the h2's own top within ~1px of the comp's 67 by aligning
		bottoms, not by asserting 67 directly (verified live, see handoff). */
	padding-bottom: 7.375rem; /* 118px — band bottom 3839 − panel bottom (2995+726=3721) */
}

/* Neutralise WP's default block-gap margin on this pattern's own nested
   groups (documented sitewide footgun) — every gap here is an explicit
   rule below, not WP's blockGap. */
.dfd-top-fundraisers__inner > * {
	margin-top: 0;
}

/* ── Header row: h2 + View All, bottom-aligned (matches the comp's shared
   box-bottom edge, y2904/y2904 — see the padding-top comment above),
   space-between ─────────────────────────────────────────────────────────── */
.dfd-top-fundraisers__header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1.25rem 2.5rem; /* row-wrap fallback gap (fluid widths below the 1024 stack query) */
	min-height: 4.625rem; /* 74px — matches the View All button's fixed pill height (10:365/366) */
	margin: 0 0 5.6875rem; /* 91px gap down to the panel — 54 (pad-top) + 74 (row) + 91 = 219 = panel top offset, verified against 10:369 */
}

.dfd-top-fundraisers__heading {
	margin: 0;
	/* DynaPuff 700 / --dfd-size-h2-section (32→50px) / 0.03em / contrast navy
	   already matches the comp via theme.json's h2 element style — no
	   fontSize/textColor override, per theme-conventions' "one spec, don't
	   re-declare per partial" rule (same as search-band's h2). */
}

.dfd-top-fundraisers__cta {
	margin: 0;
	flex-shrink: 0;
}

/* ── Panel: white, radius 34, 25px padding, wraps the leaderboard block ── */
.dfd-top-fundraisers__panel {
	background: var(
		--kd-color-base
	); /* white — base = white per the project's semantic-palette contract */
	border-radius: var(--dfd-radius-panel); /* 34px, F1 token — 10:369 */
	padding: 1.5625rem; /* 25px, brief */
	margin: 0;
}

/* Plugin token-contract hookup (plugin readme "Token contract", D10): the
   panel above already supplies white bg + radius 34 + 25px padding, so the
   block's own 24px fallback padding must not stack on top of it — set only
   `--kd-bu-panel-padding: 0` here, scoped to this panel, and leave every
   other --kd-bu-* var at its default (never style .kd-bu-* internals). */
.dfd-top-fundraisers__panel .wp-block-kd-better-unite-leaderboard {
	--kd-bu-panel-padding: 0;
}

/* ── ≤1023.98px: no 1024 Figma frame exists (§0 "missing"); the panel and
   header row already flow at the shrinking constrained column's own width
   (no fixed pixel widths in this partial to override) — "narrower" is a
   natural consequence, not a rule added here. ── */

/* ── Section-gap override — desktop only, PG1 rhythm ───────────────────────
 * The sitewide owl (.entry-content > * + *, global.css) gives every pair of
 * stacked sections --kd-section-gap (120px @desktop) of margin-top. The
 * comp (frame 1:2) measures 84px from search-band's own bottom (10:360,
 * y2692) to this band's top (10:276, y2776). Mirrors split-what-is.css's
 * own gap-override selector shape (specificity beats the owl without
 * !important). No mobile comp exists, so only the desktop breakpoint is
 * corrected.
 * Home-only by construction — a page reusing this pattern must re-check its gap. */
@media (min-width: 1024px) {
	.entry-content > .kd-section.dfd-top-fundraisers {
		--dfd-top-fundraisers-gap-top: 5.25rem; /* 84px — PG1 rhythm */
		margin-block-start: var(--dfd-top-fundraisers-gap-top);
	}
}

/* ── ≤768px: h2 + button stack, panel stays full-width (derived, no mobile
   frame — flag for designer review, same as every sibling pattern's own
   undesigned breakpoint). ── */
@media (max-width: 768px) {
	.dfd-top-fundraisers__header {
		flex-direction: column;
		align-items: flex-start;
		min-height: 0;
		gap: 1.5rem;
		margin-bottom: 3rem;
	}

	.dfd-top-fundraisers__panel {
		padding: 1.25rem; /* 20px — slightly reduced inner padding at mobile, derived */
	}
}