/**
 * Pattern: Steps Band — How it works  (patterns/steps-band.php)
 *
 * Full-bleed purple band (Figma 10:278, 628px @1440) — yellow h2 beside a
 * 3-item numbered list (pink numerals, white step copy), a rotated flowers
 * illustration, and a yellow/navy button pair (10:349; the duplicate group
 * 10:354 is ignored). Row/flowers geometry is three-state, responsively
 * (DL-G, 2026-09-12):
 *   - ≥1080px: Figma's row layout — h2 beside the list, flowers absolute +
 *     bleeding off the band's own left edge (bottom edge comes close to,
 *     but does not bleed past, the band's own bottom @1440 — DL-B).
 *   - 769px–1079.98px: no Figma frame exists this narrow (apply-system). H2
 *     stacks above the list; flowers move into normal flow below the
 *     buttons instead of sitting absolutely behind the now-stacked text.
 *   - ≤768px: same stack, flowers hidden (no Figma comp, derived).
 *
 * One pattern = one CSS partial (auto-enqueued by inc/enqueue.php). All rules,
 * incl. responsive media queries, stay in this file. Colors/sizes come off
 * theme.json via block attributes (textColor/fontSize) wherever the block
 * supports them; the numeral size (66px, no matching fontSize preset) and the
 * band's own layout geometry are the only custom values here.
 */

.dfd-steps-band {
	position: relative; /* containing block for the absolutely positioned flowers */
	padding-block: var(--dfd-section-pad);
	overflow: visible; /* the flowers illustration is allowed to bleed past the band's left edge */
}

/* ── 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 152px from split-what-is's own presenter-logo
 * bottom (10:326, y1559) to this band's top (10:278, y1711). 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 — see split-what-is.css's own note on this.
 * Home-only by construction — a page reusing this pattern must re-check its gap.
 * DL-G round 1 gate fix: this used to switch at 1024px, one breakpoint
 * below the row/flowers layout switch at 1079.98px (see below) — for
 * 1024–1079px the stacked tablet band was carrying the 152px desktop gap,
 * then dropping to the owl's 96px tablet value at 1023.98px, a visible
 * 56px jump unrelated to any actual layout change. Moved to 1080px so both
 * switches move together; cross-referenced at the row/flowers breakpoint
 * below. */
@media (min-width: 1080px) {
	.entry-content > .kd-section.dfd-steps-band {
		--dfd-steps-band-gap-top: 9.5rem; /* 152px — PG1 rhythm */
		margin-block-start: var(--dfd-steps-band-gap-top);
	}
}

/* Neutralise WP core's default block-gap margin (margin-block-start on
   `> * + *`, :where() specificity) between this pattern's own nested groups —
   every gap here is expressed explicitly via flex row/column-gap instead, so
   the block-gap margin only double-counts and inflates the band's height.
   The steps list is a real `<ol>`/`<li>` (review round 1, semantic-list fix)
   so only `.dfd-steps-band__row` (still a `wp:group`) needs this. */
.dfd-steps-band__inner,
.dfd-steps-band__row > * {
	margin-top: 0;
}

/* ── Flowers illustration (10:279) — rotated PNG cut-out, bleeding off the
   band's own left edge. Sized/positioned against a pixel crop of the real
   Figma render rather than the layer's raw metadata bbox, which — being a
   pre-export design-tool value — didn't match what the comp actually
   renders (P3's original finding). Hidden below 768px, no mobile comp
   exists (derived responsive approach).
   DL-B 2026-09-11: DL9 — same asset, scaled 1.2292× (linear, both axes —
   Figma 10:279 old/new bbox, applied directly to P3's verified 340×329/
   230px: 340×1.2292=418, 329×1.2292=404, 230×1.2292=282.7). Top: ink-top of
   the cluster in the original's 1:1 band render moved 292→204 (matches the
   node's −104.6 delta within ink/shadow-edge padding — same measurement
   method P3 used for the original 292). Full forensics (metadata-vs-ink
   aspect mismatch this scale factor doesn't resolve) logged in the
   build-tracker DL-B entry, not repeated here. */
.dfd-steps-band__flowers {
	position: absolute;
	left: -1rem;
	top: 12.75rem; /* 204px — ink-measured, see note above */
	width: 26.125rem; /* 418px = 340 × 1.2292 */
	height: 25.25rem; /* 404px = 329 × 1.2292 */
	max-width: none;
	margin: 0;
	z-index: 0;
	pointer-events: none;
}

/* The source PNG is the upright (pre-rotation) artwork. Sizing it to a
   fraction of the wrapper and centring it with translate + rotate keeps the
   ROTATED bounding box matching the wrapper above, regardless of the
   trigonometry — rotating a 796×900 image 60° expands its footprint to
   ~1.48× the pre-rotation width, so the source is sized down accordingly.
   DL-B: pre-rotation width scaled by the same 1.2292× (230px → 282.7px);
   check: 282.7 × 1.4792 = 418.2 and 282.7 × 1.4314 = 404.6, filling the
   wrapper above with no clip. */
.dfd-steps-band__flowers img {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 17.6688rem; /* 282.7px pre-rotation = 230 × 1.2292 */
	height: auto;
	transform: translate(-50%, -50%) rotate(60deg);
	filter: drop-shadow(
		0 4px 4px rgba(0, 0, 0, 0.25)
	); /* Figma shadow, 10:279 */
}

/* ── Inner content column (1216px, centred — inherited from the outer
   alignfull group's `layout:constrained`). Sits above the flowers. ── */
.dfd-steps-band__inner {
	position: relative;
	z-index: 1;
}

/* ── Heading + steps-list row. Figma: h2 (379px wide) at the left, the
   numbered list starting 70px to its right (10:286 right edge 491 → 10:288
   left edge 561). ── */
.dfd-steps-band__row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	column-gap: 4.375rem; /* 70px */
	row-gap: 2rem;
}

.dfd-steps-band__heading {
	margin: 0;
	/* Fixed column, not just a cap: a `max-width` alone shrinks to the text's
	   own content width ("How it works" is far narrower than 379px), which
	   pulled the numeral column ~40px left of the Figma target. A hard
	   flex-basis reserves the full 379px regardless of content, so the list
	   column starts at exactly 379 + 70 (column-gap) = 449px from the content
	   edge — matching 10:288's left edge (561, i.e. 449 from the 112px
	   column edge). Review round 1, 2026-09-09. */
	flex: 0 0 23.6875rem; /* 379px — Figma h2 bbox width (10:286) */
}

/* ── Steps list — a real `<ol>`/`<li>` (review round 1: was a `wp:group`
   div-list, code-reviewed as not semantic; numerals conveyed the order twice
   over, so they're `aria-hidden` here and each `<li>` carries the real
   ordinal via the list itself). Un-style the native list chrome, keep the
   layout entirely on the flex properties below. ── */
.dfd-steps-band__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	row-gap: 0.625rem; /* ~10px — Figma numeral-row spacing (10:288/289/290) */
	flex: 1 1 28rem;
	min-width: 0;
}

.dfd-steps-band__step {
	display: flex;
	align-items: center; /* comp centres the copy on the numeral's vertical centre (10:288 vs 10:292), not top-aligned — review round 1 */
	column-gap: 1.25rem; /* 20px — numeral → copy gap (10:288 right to 10:292 left) */
	flex-wrap: nowrap;
}

.dfd-steps-band__numeral {
	display: block;
	margin: 0;
	flex: 0 0 auto;
	font-family: var(--kd-font-heading);
	font-weight: 700;
	font-size: var(--dfd-size-numeral); /* 66px @1440, fluid */
	line-height: 1.3; /* ~85px box at 66px — matches the Figma numeral bbox (10:288, "normal" line-height) */
	letter-spacing: var(--dfd-track-numeral); /* 10% */
	color: var(
		--kd-color-pink
	); /* alias for the accent-2 palette slot — NOT --kd-color-accent-2, which is the yellow slot of the decorative rotation set */
}

.dfd-steps-band__copy {
	display: block;
	margin: 0;
	font-family: var(--kd-font-body);
	font-weight: 500; /* Helvetica Neue Medium, per figma-analysis §1.2 */
	font-size: var(
		--wp--preset--font-size--xx-large
	); /* 24px — set directly: this is inline content inside a list-item's rich text, not a standalone paragraph block with its own fontSize/textColor attributes */
	color: var(--wp--preset--color--base); /* white */
	max-width: 38rem;
}

/* ── Buttons — left edge lines up with the heading's right edge (Figma
   10:349 group left 491 = 10:286 right 491). No button styling here: both
   pills come from the theme's default `wp:button` (yellow) and
   `.is-style-outline` (navy) — see theme.json + global.css. ── */
.dfd-steps-band__buttons {
	margin-top: 3.875rem !important; /* 62px — list bottom to buttons top */
	margin-left: 23.6875rem; /* 379px — aligns under the heading's own width */
}

/* ── DL-G — row-wrap zone (≤1079.98px) ───────────────────────────────────
 * Live-measured the natural fit boundary instead of trusting the tracker's
 * ~1059px estimate: bisected on the running page (worktree B :8101, home
 * page) — the row (h2 379px flex-basis + 70px column-gap + list) still
 * holds a single line at a 1077px viewport and wraps at 1075px. Below that
 * point the row previously wrapped WITHOUT a deliberate layout — flex-wrap
 * broke the heading/list wherever it happened to land, and the wrapped
 * list's lines then ran over the flowers illustration underneath (DL-G
 * evidence: 1024 overlap x110–464/y204–358, 900 overlap y204–337, full
 * flower width; 1 of 3 sampled text/illustration contrast pairs failed
 * WCAG AA at 3.53:1). Fix: force the same deliberate stack the band
 * already uses ≤768 (heading full width above the list) through this
 * whole zone too, switched a few px above the measured 1075–1077px fit
 * boundary rather than exactly at it. NOTE: 1077px is copy-dependent (the
 * step-2 line length, Q5) — re-bisect if that copy changes. The section-gap
 * override above switches at 1080px, one breakpoint higher, deliberately —
 * both moved together, see its own comment. ── */
@media (max-width: 1079.98px) {
	.dfd-steps-band__row {
		flex-direction: column;
		row-gap: 1.5rem;
	}

	.dfd-steps-band__heading {
		flex: 0 0 auto; /* column direction now — a fixed 379px basis would force a tall blank box */
	}

	.dfd-steps-band__list {
		/* `flex: 1 1 28rem` (base rule below) sizes the list's WIDTH for the
		   desktop row; once the row above flips to column-direction, that
		   same 28rem flex-basis is read as a HEIGHT basis instead, forcing
		   the list box to 448px tall regardless of its real (much shorter)
		   content — leaving ~250-300px of dead purple space before the
		   buttons (design-diff round 1 finding). Reproduces identically at
		   the pre-existing ≤768px stack (same root cause, previously
		   unnoticed since no illustration sat behind it there to make the
		   gap obvious) — fixed for both ranges by this one override. */
		flex: 0 1 auto;
	}

	.dfd-steps-band__buttons {
		margin-left: 0; /* the 379px offset aligned the buttons under the heading COLUMN, which no longer exists once the row stacks */
	}
}

/* ── DL-G — flowers, tablet wrap zone (769px–1079.98px) ──────────────────
 * No Figma frame this narrow (apply-system, needs designer review). A fixed
 * absolute offset here would need to clear whatever height the stacked
 * heading/list/buttons happen to render at a given width — brittle, and how
 * the original overlap bug happened. Kept in flow instead, ordered after
 * the content via flex `order` on the band (DOM/a11y order unchanged) —
 * clear regardless of wrap length, no per-width coordinate math. Round 1
 * gate fixes below; alternative considered: hide the illustration in this
 * range too (one `display: none`), same as ≤768 — Alain's call at review. ── */
@media (min-width: 769px) and (max-width: 1079.98px) {
	.dfd-steps-band {
		display: flex;
		flex-direction: column;
	}

	.dfd-steps-band__inner {
		order: 1;
		/* Round 1 gate fix: making the band a flex container turns `.inner`
		   into a flex item, and WP's constrained-layout centering rule
		   (`margin-left/right: auto`, :where() specificity) only centers a
		   flex item that does NOT stretch to fill the cross axis — an auto
		   margin on a stretched item cancels the stretch instead. `.inner`
		   was shrinking to its content width and re-centering within the
		   band, pulling the heading off the band's left padding edge
		   (measured: heading landed at x157 instead of x78 at 1024). Forced
		   back to full width/flush, matching its pre-flex block behaviour —
		   this is also what lets the flowers below line up at the heading's
		   x with a plain left-flush margin, no extra offset needed. */
		width: 100%;
		margin-inline: 0;
	}

	.dfd-steps-band .dfd-steps-band__flowers {
		order: 2;
		position: relative; /* was absolute — stays a positioning context for its own rotated <img>, but now participates in normal flow itself */
		left: auto;
		top: auto;
		/* Round 1 gate fix (design-diff): at the old ≤1024 tablet size
		   (22.125/21.4rem) the band jumped ~330px taller than the ≤768
		   stack right at the 769px edge, purely from the illustration's own
		   footprint. Scaled to half that tablet size (uniform ×0.5 on
		   wrapper width/height + the pre-rotation img width — preserves the
		   same rotation-trig ratios the tablet size itself preserved from
		   desktop, see the img rule's own comment) — measured band height
		   at 1024 lands within ~150px of 768's, once the list dead-gap fix
		   above removed the unrelated slack. Still a derived size, no
		   Figma frame this narrow — flagged above for designer review. */
		width: 11.0625rem; /* 177px = 22.125rem × 0.5 */
		height: 10.7rem; /* 171.2px = 21.4rem × 0.5 */
		/* !important + the doubled-up ancestor selector are both required,
		   confirmed by inspecting the live cascade (not a blind override):
		   two OTHER rules tie or beat a plain `.dfd-steps-band__flowers`
		   selector here — WP's own global-styles `:where(.is-layout-
		   constrained) > *(:not(align*))` sets `margin-left/right: auto
		   !important` (beaten only by another !important), and global.css's
		   `.entry-content > .wp-block-group > :first-child { margin-top: 0
		   }` (specificity 0,3,0 — flowers IS the band's first child) beats
		   even the bumped ancestor selector on its own. */
		margin: var(--kd-gap-tight) 0 0 !important; /* 8px top gap (tighter than the old bare 2rem, part of the same discontinuity fix above); flush left so it lines up with the heading's own x once .inner above is flush too — was centred */
	}

	.dfd-steps-band__flowers img {
		width: 7.478rem; /* 119.65px = 14.956rem × 0.5, matches the wrapper scale above */
	}
}

/* ── Mobile/tablet stack (≤768px, no mobile comp — derived per the build
   brief): h2 above the steps list, numerals stay left of their own copy,
   flowers hidden, buttons wrap full-width. The stack itself (row direction,
   heading basis, list sizing, buttons offset) is already inherited from the
   ≤1079.98px block above — only what differs at this width lives here:
   flowers hidden and the buttons collapsing to a full-width column. Note:
   the flowers' desktop absolute geometry (top/left/width/height) would
   return if ever un-hidden at this width — the 769–1079.98px tablet sizing
   rule above doesn't reach down here. ── */
@media (max-width: 768px) {
	.dfd-steps-band__flowers {
		display: none;
	}

	.dfd-steps-band__buttons {
		flex-direction: column !important;
		align-items: stretch !important;
		width: 100%;
	}

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

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