/**
 * Pattern: Split — What is the Duck Fest Derby  (patterns/split-what-is.php)
 *
 * Figma H3 (1:2, y1001-1560): h2 10:287 ("What is the / Duck Fest Derby?",
 * DynaPuff 50px navy, 2 hard lines, line-height 56), body 10:291 (3
 * paragraphs, Helvetica Neue 18/28, 14px paragraph gap, 532px column),
 * photo 10:295 (598x366, radius 12, shadow 0 4px 4px rgba(0,0,0,.25)),
 * presenter logo 10:326 (523px wide, centred under the photo). No band —
 * the section sits directly on the page's lavender `surface` background.
 *
 * Column math: 532 (text) + 86 (gap) + 598 (media) = 1216 = --kd-composition,
 * so at the 1440 design width the flex layout below needs zero correction —
 * it already lands on the Figma numbers exactly.
 *
 * This is an UNBANDED section (sits on the plain lavender page background,
 * no colour of its own) — per global.css ("plain sections: no vertical
 * padding — the margin-gap is the only space; banded sections set their own
 * padding-block"), it carries NO padding-block. `.kd-section` on the
 * pattern's outer group (see the .php file) already zeroes it; the sitewide
 * `.entry-content > * + *` owl supplies the between-section rhythm instead.
 * See the desktop gap-override rule below for the one place that rhythm
 * needs correcting against the comp.
 *
 * One pattern = one CSS partial. All responsive rules stay here.
 */

/* ── Two-column row ─────────────────────────────────────────────────────────
 * Both columns get the SAME flex-grow/flex-shrink (1/1) with a flex-basis
 * equal to their own Figma width. Capping .inner's max-width to the 1216px
 * composition means growth never actually fires (the cap already equals the
 * basis sum), so in practice this only ever shrinks — and it shrinks each
 * column proportional to its own basis, which keeps the 532:598 ratio close
 * at any width down to the mobile stack. That is the full "derive 1024"
 * behaviour: no separate tablet breakpoint needed, it falls out of the same
 * rule that produces the 1440 pixel-match.
 *
 * Selector depth mirrors patterns/split-text-image.css's documented reason:
 * WP core ships `.wp-block-columns:not(.is-not-stacked-on-mobile) >
 * .wp-block-column { flex-basis:0; flex-grow:1 }` at >=782px, specificity
 * (0,3,0). Adding the pattern's own class to the parent selector brings ours
 * to (0,4,0) — an unambiguous win, no !important needed on the column rules
 * themselves (the container rules still need it, see below). ───────────── */
.dfd-split-what-is .dfd-split-what-is__inner {
	display: flex !important;
	align-items: flex-start;
	gap: 5.375rem; /* 86px @1440 — 1216 - 532 - 598 */
	max-width: var(--kd-measure-split);
	margin: 0 auto !important;
}

.dfd-split-what-is .dfd-split-what-is__inner > .wp-block-column {
	margin: 0 !important;
	min-width: 0;
}

.dfd-split-what-is
	.dfd-split-what-is__inner.wp-block-columns
	> .dfd-split-what-is__col-text {
	flex: 1 1 33.25rem; /* 532px */
}

.dfd-split-what-is
	.dfd-split-what-is__inner.wp-block-columns
	> .dfd-split-what-is__col-media {
	flex: 1 1 37.375rem; /* 598px */
}

/* ── Section-gap override — desktop only (code-review round 1) ────────────
 * The sitewide owl (.entry-content > * + *, global.css) gives every pair of
 * stacked sections --kd-section-gap of margin-top — 120px at desktop
 * (>=1024px). The comp measures 93px from the info band's bottom (10:327,
 * y919) to this section's h2 (y1012): the sitewide 120px overshoots that by
 * ~27px. Selector shape mirrors global.css's own
 * `.entry-content > .wp-block-group` "zero the trailing margin" rule
 * (specificity beats the owl without !important).
 *
 * No comp exists for the tablet/mobile gap (no mobile Figma frame — see the
 * .php file's reading-order note), so only the desktop breakpoint is
 * corrected here; tablet/mobile keep the system default (96px / 64px) per
 * the project's derive-and-flag convention for anything without a comp
 * number to build against.
 *
 * The bottom gap (logo's bottom, y1559, to the next section at y1711 in the
 * comp = 152px) is NOT this pattern's to fix — .entry-content zeroes each
 * section's own trailing margin by design, so that space is entirely the
 * FOLLOWING section's margin-top to own once Home (PG1) is assembled.
 * Measured and flagged in the tracker for whichever pattern composes after
 * this one. */
@media (min-width: 1024px) {
	.entry-content > .kd-section.dfd-split-what-is {
		--dfd-split-what-is-gap-top: 5.8125rem; /* 93px — comp-measured */
		margin-block-start: var(--dfd-split-what-is-gap-top);
	}
}

/* ── Text column ────────────────────────────────────────────────────────── */

.dfd-split-what-is .dfd-split-what-is__heading {
	font-family: var(--kd-font-heading);
	font-weight: 700;
	font-size: var(--dfd-size-h2-section);
	line-height: 1.12; /* Figma 56/50 */
	letter-spacing: var(--dfd-track-heading);
	color: var(--kd-color-contrast); /* navy #1C1355 — 10:287 */
	margin: 0 0 1.5rem; /* 24px to first paragraph, measured on the comp crop */
}

.dfd-split-what-is .dfd-split-what-is__body {
	font-family: var(--kd-font-body);
	font-size: 1.125rem; /* 18px */
	/* This section's body is 28px line-height (1.5556), not the sitewide
	   18/26 default (figma-analysis §1.2) — 10:291 measures 28px. Set here,
	   not in a shared spec, since it's this node's own override. */
	line-height: 1.5556;
	color: var(--kd-color-body); /* black — 10:291 */
	margin: 0 0 0.875rem; /* 14px paragraph gap, per node */
}

.dfd-split-what-is .dfd-split-what-is__body:last-child {
	margin-bottom: 0;
}

/* ── Media column — photo + presenter logo, stacked ───────────────────────── */

.dfd-split-what-is .dfd-split-what-is__col-media {
	display: flex;
	flex-direction: column;
}

.dfd-split-what-is .dfd-split-what-is__photo {
	margin: 0 !important;
	width: 100%;
}

.dfd-split-what-is .dfd-split-what-is__photo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 598 / 366;
	object-fit: cover;
	border-radius: var(--kd-radius-md); /* 12px — 10:295 */
	/* No --kd-shadow-* token matches this node's shadow (closest is
	   --kd-shadow-image at 0 4px 10px rgba(0,0,0,.15) — different blur/alpha).
	   Literal per node 10:295, flagged for a token addition later. */
	box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}

.dfd-split-what-is .dfd-split-what-is__logo {
	margin: 2.1875rem auto 0; /* ~35px — 10:326 sits y1431, photo bottom ~y1396 */
	width: 100%;
	max-width: 523px; /* 10:326 native width — never upscale past it */
}

.dfd-split-what-is .dfd-split-what-is__logo img {
	display: block;
	width: 100%;
	height: auto;
}

/* ── Mobile (<=767px) — stack: heading, copy, photo, logo ─────────────────
 * DOM order is text column then media column, so a plain column stack
 * already reads h2 -> 3 paragraphs -> photo -> logo, satisfying "heading
 * above the photo" with no reordering trick needed. No mobile Figma frame
 * exists for this section — derived, flag for designer review. ─────────── */
@media (max-width: 767.98px) {
	.dfd-split-what-is .dfd-split-what-is__inner {
		flex-direction: column !important;
		gap: 2rem;
	}

	.dfd-split-what-is
		.dfd-split-what-is__inner.wp-block-columns
		> .dfd-split-what-is__col-text,
	.dfd-split-what-is
		.dfd-split-what-is__inner.wp-block-columns
		> .dfd-split-what-is__col-media {
		flex: 1 1 100%;
		width: 100%;
		max-width: 100%;
	}

	.dfd-split-what-is__heading,
	.dfd-split-what-is__body {
		text-align: left;
	}
}