/**
 * Pattern: Search Band — Find a participant or team  (patterns/search-band.php)
 *
 * Figma H5 (10:360 band, 10:361 h2, 10:362 button, 24:17 illustration):
 * pink band 1263×267 @1440, radius 12; h2 left-aligned 53px in / 52px down;
 * "Find a Team" button (default yellow pill) 27px below the h2's own box;
 * ferris-wheel illustration 197×231, top +36px, right end of the band
 * (68px right-inset).
 *
 * DL-C (2026-09-11 delta vs Sara's original rUGBn1NQQxBTR6vHwW3MMv,
 * design-deltas-2026-09-11.md DL10/DL11 — verified live against the
 * original file via get_metadata, not the intake copy):
 *   - band 10:360 unchanged: x109 y2425 1263×267.
 *   - h2 10:361 / button 10:362 both moved from x182 to x162 (−20px);
 *     left-inset from the band is now 162−109 = 53px (was 73px). Y
 *     unchanged (h2 y2477 = +52 from band top; button y2564 = +139).
 *   - illustration swapped: "Duck-PalmTrees 1" (12:458, 133×204 at
 *     x1181/y2462, right-inset 58px, top-inset 37px) → "DuckDerby-
 *     FerrisWheel-01" (24:17, 197×231 at x1107/y2461) — right-inset
 *     (109+1263)−(1107+197) = 68px, top-inset 2461−2425 = 36px.
 *
 * The band bleeds ~23.5px past the 1216px content column on each side
 * (Figma: band 1263px vs --kd-composition 1216px). `align:"wide"` +
 * a pattern-scoped max-width was tried first and measured NOT to bleed at
 * all here: `.entry-content` itself carries `has-global-padding`
 * (padding-inline ≈ --kd-edge-pad), and WP's constrained-layout support has
 * no negative-margin rule for `.alignwide` (only `.alignfull` gets one) —
 * so an alignwide child's available width is capped by the padded parent's
 * *content box*, regardless of the child's own max-width. Confirmed live:
 * with align:"wide" + `max-width:calc(...) !important` the band still
 * rendered at the plain 1216px-column width (measured 1205px, the same
 * scrollbar-adjusted figure every other pattern gets).
 *
 * Fix: no `align` attribute at all (plain default-layout group) — bleed via
 * `width` + `margin-inline`, which pull the box out past the parent's own
 * padding the same way alignfull's negative margin does, instead of relying
 * on a max-width that the padded parent would just clip back down.
 *
 * `!important` audit (per property, against core's real rule — not every
 * property here needs it): the applicable core rule is
 * `.is-layout-constrained > :where(:not(.alignleft):not(.alignright)
 * :not(.alignfull)) { max-width: var(--wp--style--global--content-size);
 * margin-left: auto !important; margin-right: auto !important; }` — note
 * only `margin-left`/`margin-right` are declared `!important` there;
 * `max-width` on that same core rule is plain. So:
 *   - `max-width: none` — plain is enough. Core's `max-width` is also
 *     plain, tied (0,1,0) specificity, and this stylesheet loads after
 *     core's inline style, so ours wins on source order. Confirmed live.
 *   - `width: min(...)` — plain is enough. Core has no `width` rule here
 *     at all to compete with. Confirmed live.
 *   - `margin-inline: ...` — `!important` IS load-bearing. It expands to
 *     margin-left/margin-right, which tie core's `!important` pair on
 *     specificity; without matching `!important` core's `auto` wins
 *     outright (importance beats specificity/order), collapsing the
 *     bleed to an asymmetric ~0px/48px instead of the intended symmetric
 *     ~24px/24px (measured live when tested without it).
 *
 * `.entry-content`'s OWN padding is a flat viewport-relative gutter clamp
 * (`--kd-gutter`, capped at 9rem/144px) — it does NOT itself saturate at
 * the 1216px composition the way every *child's* max-width does, so its
 * available content box keeps growing past 1216px on very wide screens
 * (measured 1617px @1920). `width: calc(100% + 3rem)` alone would grow
 * right along with it (measured 1665px @1920 — no cap), so `width` is
 * `min(100% + 3rem, composition + 3rem)`: bleed by a fixed 3rem while the
 * padded column is the binding constraint (≤ composition), then cap at the
 * literal 1263px-ish band size once the column outgrows it. `margin-inline`
 * mirrors the same min/max split algebraically (see the two terms below) so
 * the band stays correctly centred in both regimes — plain `margin:auto`
 * can't do this alone because auto margins resolve to 0 (not negative) once
 * width exceeds the containing block, which would break the symmetric
 * bleed at 1440.
 *
 * One pattern = one CSS partial. All responsive rules stay here.
 */

.dfd-search-band {
	position: relative; /* containing block for the absolutely positioned illustration */
	background-color: var(
		--kd-color-pink
	); /* alias for accent-2 — NOT --kd-color-accent-2, the decorative-rotation slot's yellow (see tokens.css) */
	border-radius: var(
		--kd-radius-md
	); /* 12px — search-band is explicitly named on this token's own tokens.css comment (10:360) */
	max-width: none; /* neutralise the padded parent's content-size cap — no !important needed, see the per-property audit above */
	/* Target bleed is a fixed 3rem (23.5px/side, Figma) — but on a very
	   narrow viewport --kd-gutter itself shrinks below that, and bleeding
	   MORE than the page's own gutter would push the band past the
	   viewport edge (horizontal scroll). Guard: never bleed past 2×gutter.
	   `cta-band.css`'s `.alignfull` breakout is the sibling technique but
	   doesn't apply here unmodified — it bleeds ALL THE WAY to the gutter
	   edge (`margin: -1 * gutter`), where this band needs a small FIXED
	   bleed capped well short of that, not the full gutter. */
	--dfd-search-band-bleed: min(3rem, calc(2 * var(--kd-gutter)));
	/* min(): bleed --dfd-search-band-bleed past the padded column while
	   that column is ≤ the composition; cap at composition + bleed
	   (≈1263px, Figma) once the column outgrows it (wide screens) — see
	   the note above. */
	width: min(
		calc(100% + var(--dfd-search-band-bleed)),
		calc(var(--kd-composition) + var(--dfd-search-band-bleed))
	); /* no !important needed — core has no competing width rule here, see the per-property audit above */
	/* Algebraic twin of the width formula: margin = (100% - width) / 2.
	   Substituting width's min(...) and using -min(a,b) = max(-a,-b) gives
	   max(-bleed, 100% - composition - bleed) / 2 — negative (bleed) while
	   the column is the constraint, positive (auto-centre) once the
	   composition cap is. !important IS load-bearing here (unlike
	   max-width/width above) — see the per-property audit above. */
	margin-inline: calc(
		max(
				calc(-1 * var(--dfd-search-band-bleed)),
				calc(
					100% - var(--kd-composition) - var(--dfd-search-band-bleed)
				)
			) /
			2
	) !important;
	padding: 3.25rem 0 3.375rem 3.3125rem; /* 52px top / 0 right (h2 max-width below clears the illustration instead) / 54px bottom / 53px left — DL-C: Figma offsets (10:361 x162 - band x109 = 53; y2477 - y2425 = 52) */
	/* Illustration's own reserved box (width + right-inset) — the heading's
	   max-width below subtracts this so it can never run under the
	   illustration. Derived from the same values as .dfd-search-band__illustration;
	   redeclared per-breakpoint below wherever the illustration's box changes.
	   Round-1 gate fix: the previous static 60rem heading max-width was
	   correct for the 133px-wide palms but went stale (25px live overlap)
	   once DL-C grew the illustration to 197px. */
	--dfd-search-band-illus-reserve: calc(
		12.3125rem + 4.25rem
	); /* 197px width + 68px right-inset */
}

.dfd-search-band__heading {
	margin: 0;
	max-width: calc(
		100% - var(--dfd-search-band-illus-reserve) - 1.5rem
	); /* reserve the illustration's box + a 24px gutter — see --dfd-search-band-illus-reserve above */
}

.dfd-search-band__buttons {
	margin: 1.6875rem 0 0; /* 27px — h2's own box bottom (52+60=112px from band top) to button top (139px from band top) */
}

.dfd-search-band__illustration {
	position: absolute;
	top: 2.25rem; /* 36px — DL-C: Figma 24:17 y2461 − band y2425 */
	right: 4.25rem; /* 68px — DL-C: band right edge (1372) − illustration right edge (1304) */
	width: 12.3125rem; /* 197px */
	height: 14.4375rem; /* 231px */
	max-width: none;
	margin: 0;
	pointer-events: none;
}

.dfd-search-band__illustration img {
	display: block;
	width: 100%;
	height: 100%;
}

/* ── 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 86px from steps-band's own bottom (10:278,
 * y2339) to this band's top (10:360, y2425). 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-search-band {
		--dfd-search-band-gap-top: 5.375rem; /* 86px — PG1 rhythm */
		margin-block-start: var(--dfd-search-band-gap-top);
	}
}

/* ── Tablet (≤1024px) — band already shrinks to the column's own available
   width (no forced min-width, see the max-width comment above); only the
   illustration needs an explicit scale-down so it doesn't dominate a
   narrower band. Same ~66% derived scale ratio P4 used for the palms
   illustration, carried over to the ferris wheel (DL-C) — no mobile Figma
   frame exists for this section, derived per the project's convention,
   flagged for designer review (Q3/Q4). ── */
@media (max-width: 1024px) {
	.dfd-search-band {
		--dfd-search-band-illus-reserve: calc(
			8.125rem + 4.25rem
		); /* 130px width (below) + the unchanged 68px right-inset */
	}

	.dfd-search-band__illustration {
		width: 8.125rem; /* ~130px */
		height: 9.5275rem; /* 152.44px — 130 * (231/197), the asset's real aspect ratio (round 1 gate fix: 9.5625rem/153px was off-ratio and stretched the art) */
	}
}

/* ── Mobile/tablet stack (≤768px): band spans the full column, h2 wraps
   naturally, button drops full-width below it, illustration hidden (no
   room without crowding the button at this width). ── */
@media (max-width: 768px) {
	.dfd-search-band {
		padding: 2.5rem 1.5rem;
	}

	.dfd-search-band__heading {
		max-width: none;
	}

	.dfd-search-band__buttons {
		width: 100%;
	}

	.dfd-search-band__buttons .wp-block-button {
		width: 100%;
	}

	.dfd-search-band__buttons .wp-block-button__link {
		width: 100%;
		justify-content: center;
		text-align: center;
	}

	.dfd-search-band__illustration {
		display: none;
	}
}