/**
 * Pattern: Media + Text Split  (P3)
 *   patterns/split-square.php          — image LEFT  (.kd-mediasplit)
 *   patterns/split-square-reverse.php  — image RIGHT (.kd-mediasplit--reverse)
 *
 * SELF-CONTAINED partial for the Gracie P3 family. Decoupled from the NHC circle
 * split (split-text-image.css / .kd-split*) — this file owns a DISTINCT namespace
 * (.kd-mediasplit*) so the two families never fight over the cascade. Do not add
 * .kd-split* rules here.
 *
 * Design source (file g3BMymX7x188yz0AGwEMkL):
 *   • Home "What I do"        2:796 + 2:799   (image-right, with button) — PRIMARY
 *   • Home "About me"         2:797 + 2:800   (image-right, with button)
 *   • Home "How I support…"   2:798 + 2:757   (image-left,  with button)
 *   • "Chairs & Directors"    2:1234 + 2:1136 (image-right, 4-para body + button)
 *   • Portfolio project split 23:851 + 23:852 (image-right, with button)
 *
 * Verified node values (1440 canvas):
 *   Layout   two columns ~50/50 within the 1216 content column, vertically centred.
 *            Image col ≈559–598px, text col ≈546–585px; column gap measured 59–72px
 *            → --kd-space-xl (64px), the token that sits in the middle of that range.
 *   Image    flat #d9d9d9 placeholder, SHARP-SQUARE corners (radius 0), NO shadow.
 *            Aspect varies per instance (559×353, 598×353, 559×568) → real images
 *            keep their natural ratio; only the empty-state placeholder is given a
 *            neutral 3:2 default.
 *   Heading  <h2> — inherits the theme.json H2 (Public Sans Medium 30/46, #900000).
 *            No local font override (F1 already killed the stale NHC heading rules).
 *   Body     Inter Regular 16/24 black; multi-paragraph bodies get 16px between paras.
 *   Button   optional — the real F3 primary button (gg-buttons.css: #d62609, square,
 *            DM Sans 17, 49px). No local button styling here.
 *   NO eyebrow — the Gracie split comps carry none (unlike the NHC stock split).
 *
 * Responsive (decision-log D1): 2-col down to 768; below 768 stack IMAGE-FIRST
 * (media col is DOM-first in both variants; alternation ignored). isStackedOnMobile
 * is false in markup so core doesn't stack at ≤781 — this file owns the <768 stack.
 *
 * Every value references a --kd-*/--wp--preset--* token. Prefix: .kd-mediasplit*.
 */

/* ── Outer section ─────────────────────────────────────────────────────────── */

.kd-mediasplit {
	width: 100%;
}

/* ── Two-column inner layout ────────────────────────────────────────────────
   WP's wp:columns is flex. We force an explicit 50/50 with a fixed 64px gap and
   centre the columns vertically (verticalAlignment:center in the block). */
.kd-mediasplit .kd-mediasplit__inner {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--kd-space-xl); /* 64px — column gap (comps 59–72px) */
	margin-block: 0;
}

/* Image RIGHT variant: swap visual order without changing DOM order (media col
   stays DOM-first → mobile always stacks image-first). row-reverse keeps text
   reading LTR, unlike a direction:rtl flip. */
.kd-mediasplit--reverse .kd-mediasplit__inner {
	flex-direction: row-reverse;
}

/* Equalise the two columns. !important overrides ONLY WP's injected inline
   column width + block-gap margin (the sanctioned "neutralise WP's own inline
   output" case), not another stylesheet's rule. */
.kd-mediasplit .kd-mediasplit__inner > .wp-block-column {
	flex: 1 1 0;
	width: auto !important;
	margin: 0 !important;
	min-width: 0;
}

/* ── Media column ──────────────────────────────────────────────────────────── */

.kd-mediasplit__media-col {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ── Photo columns match the text block height ──────────────────────────────
   The image used to size itself (width:100% + height:auto = natural aspect), so
   its height scaled with COLUMN WIDTH while the text column scaled inversely —
   narrower viewport, more wrapped lines, taller text. The two diverged badly
   between the desktop comp and the stack point (measured 2026-08-18: Who I
   Support at 1024px = 615px of text beside a 407px image; at 768px the gap
   reached 576px). Stretching the column to the row height and cover-filling the
   image keeps them locked together at every width.

   Where the image is naturally TALLER than the text (the 1440 comp), the row
   height is already the image height, so this changes nothing there — the
   designed proportions are preserved and only the shortfall case is corrected.

   :has(> .kd-mediasplit__image) is load-bearing, not decoration: .kd-about and
   .kd-portfolio reuse this namespace with a LOGO GRID in the media column and
   deliberately anchor flex-start (gg-about.css:32, gg-portfolio.css:32). Scoping
   to columns holding a real photo figure leaves those compositions untouched. */
.kd-mediasplit .kd-mediasplit__inner > .kd-mediasplit__media-col:has(> .kd-mediasplit__image) {
	align-self: stretch; /* (0,4,0) beats WP's .is-vertically-aligned-center (0,2,0) */
	align-items: stretch; /* else the figure centres at its natural height */
}

.kd-mediasplit__media-col:has(> .kd-mediasplit__image) > .kd-mediasplit__image {
	flex: 1 1 auto;
	display: flex;
}

.kd-mediasplit__media-col:has(> .kd-mediasplit__image) > .kd-mediasplit__image img {
	height: 100%; /* (0,3,1) beats the natural-aspect rule below (0,2,1) */
	object-fit: cover;
}

/* Empty-state placeholder. WP strips an unset core/image on the front end, which
   would leave the media column blank. Render a neutral square so the composition
   reads as intentional pre-content. Auto-removed once an <img> exists. */
.kd-mediasplit__media-col:not(:has(img))::before {
	content: "";
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2; /* neutral landscape default (Home primary ≈ 559×353) */
	background: var(--kd-color-neutral-100);
	border-radius: var(--kd-radius-0); /* SQUARE — decision-log shape rule */
}

/* ── Square image ──────────────────────────────────────────────────────────
   Sharp-square corners (radius 0), NO shadow. Real image keeps its natural
   aspect ratio; it just fills the column width. */
.kd-mediasplit .kd-mediasplit__image {
	margin: 0 !important; /* reset WP block margin */
	width: 100%;
}

.kd-mediasplit .kd-mediasplit__image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--kd-radius-0); /* SQUARE — never rounded/circle */
}

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

.kd-mediasplit__text-col {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

/* Reset default block margins; rhythm is set per element below. */
.kd-mediasplit__text-col > * {
	margin-block: 0;
}

/* Heading (<h2>) inherits theme.json type (Public Sans Medium 30/46, maroon).
   Only the trailing rhythm to the body is set here. */
.kd-mediasplit .kd-mediasplit__heading {
	margin-bottom: var(--kd-space-md); /* 24px heading → body */
}

/* Body — 16/24 Inter black (inherits root). 16px between stacked paragraphs so a
   multi-paragraph body (e.g. Chairs & Directors, 4 paras) reads with even rhythm. */
.kd-mediasplit .kd-mediasplit__body,
.kd-mediasplit__text-col > p {
	font-size: var(--kd-size-body); /* 16px */
	line-height: var(--kd-lh-body); /* 1.5 → 24px */
	color: var(--kd-color-body);
	margin-bottom: var(--kd-space-sm); /* 16px between paragraphs */
	max-width: var(--kd-measure); /* cap the reading measure — text stays readable even when the container grows wide on x-large screens (the col/heading can be wider) */
}

/* Button group — optional (deletable). margin-top 24px + the last paragraph's
   16px bottom = 40px body → button (matches the primary node's ~43px). */
.kd-mediasplit .kd-mediasplit__buttons {
	margin-top: var(--kd-space-md); /* 24px (+16 = 40 to the button) */
}

/* No trailing margin on the last element in the column (button, or last para in
   the no-button variant). */
.kd-mediasplit__text-col > *:last-child {
	margin-bottom: 0;
}

/* ── Compact (<1024) — single-column stack, IMAGE-FIRST ─────────────────────
   Both variants stack in natural DOM order (media col first = image on top).
   Force column even on the reverse variant (row-reverse → column).
   Raised from 768 to 1024 on 2026-08-18. 1024 is already this site's compact
   boundary — F5 collapses the nav to a hamburger there and the P1 home hero
   stacks there — and the 768–1000 band was where a stretched photo column got
   extreme (Who I Support at 768: a 350px-wide column beside 861px of text, i.e.
   a 0.4-aspect sliver cropped from a 0.98 source). Stacking before that band
   removes the problem instead of cropping through it. */
@media (max-width: 1023.98px) {
	.kd-mediasplit .kd-mediasplit__inner,
	.kd-mediasplit--reverse .kd-mediasplit__inner {
		flex-direction: column;
		align-items: stretch;
		gap: var(--kd-space-lg); /* 40px between stacked image + text */
	}

	/* Full-width stack. align-self:stretch overrides WP's per-column
	   is-vertically-aligned-center (align-self:center) — in column direction that
	   centres on the CROSS (horizontal) axis and shrinks the media column, whose
	   only child is the width:100% placeholder, to 0 width (image invisible).
	   flex:0 0 auto restores natural (content) height per stacked block. */
	.kd-mediasplit .kd-mediasplit__inner > .wp-block-column {
		flex: 0 0 auto;
		align-self: stretch;
	}

	/* Stacked: there is no sibling text column to match, so the photo goes back to
	   its natural aspect. Leaving height:100% here would resolve against an
	   indefinite (content-sized) column height. */
	.kd-mediasplit__media-col:has(> .kd-mediasplit__image) > .kd-mediasplit__image {
		flex: 0 0 auto;
		display: block;
	}

	.kd-mediasplit__media-col:has(> .kd-mediasplit__image) > .kd-mediasplit__image img {
		height: auto;
		object-fit: fill;
	}

	/* Text stays left-aligned (matches desktop; no centred-mobile in the D1 spec). */
	.kd-mediasplit__text-col {
		align-items: flex-start;
	}
}