/**
 * Pattern: Split — Text + Image  (patterns/split-text-image.php)
 *
 * Two-column split section: circular photo one side, text block the other.
 * Image-left by default; `.kd-split--reverse` flips to image-right.
 * Button is optional — editor removes the wp:buttons block when not needed.
 *
 * Design source: Figma node 226:2311 (About Us page), sections:
 *   • "Who We Are"    — image-left  (nodes 226:2478 / 226:2479 / 226:2480–2482)
 *   • "What We Stand For" — image-right (nodes 226:2484 / 226:2488)
 *   • "Publications"    — image-left  (nodes 276:5384 / 226:2551)
 *
 * Extracted values (1440px canvas):
 *   Image:   500×500px, border-radius 50% (circle), shadow 0 4px 10px rgba(0,0,0,.15)
 *   Columns: ~equal split (~500px each) with ~100px gap; text starts at ~760px
 *   Heading: 50px / Montserrat Black / --blg-color-primary / line-height 46px
 *   Body:    16px / Inter Regular / --blg-color-body / line-height 1.625
 *   Button:  Montserrat Black 18px / purple fill / 60px tall / pill (200px radius)
 *            — inherits global wp-element-button styles, no override needed
 *   Eyebrow: 14px / Montserrat Black / --blg-color-primary / uppercase / tracked
 *
 * One pattern = one CSS partial. All responsive rules stay here.
 * Prefix: --blg-* / .kd-*  (never --kds-* or kds-*).
 */

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

.kd-split {
	width: 100%;

	/* Figma media sizes — FIXED, not proportional. The designer drew a 500×500
	   circle (About 226:2478 / 226:2484 / 276:5384) and a 555×500 square
	   (23:2517) on a 1440 canvas whose content column is ~1220. These are
	   design constants: the media does not grow with the viewport. */
	--blg-split-media: 500px;
	--blg-split-media-square: 555px;
}

/* ── Two-column inner layout ───────────────────────────────────────────────── */

/*
 * WP's wp:columns block is already flex. We keep flex and override alignment:
 * image (max 500px) and text (max 568px) are placed at opposite ends via
 * space-between — the remaining container space becomes the gap naturally,
 * so no hardcoded gap is needed. Both columns can shrink below their max-width
 * as the viewport narrows (flex-shrink:1), with a 2.5rem floor gap so they
 * never press against each other on narrow-but-not-yet-stacked viewports.
 */
.kd-split .kd-split__inner {
	display: flex !important;
	justify-content: flex-start;
	align-items: center;
	/* controlled gap — NOT space-between, which balloons on wide screens */
	gap: clamp(2.5rem, 4vw, 5rem);
	margin-block: 0 !important;

	/* Cap the COMPOSITION, not the columns. Figma's split is ~1170 wide (500
	   media + ~100 gap + 568 text on a 1220 column); with no cap the columns
	   simply divide whatever band they are handed, which is how the media came
	   to render 762px @1920 against the drawn 500.
	   WP's constrained layout auto-centers any child narrower than its
	   container (margin-inline:auto !important), so this centers for free —
	   the same mechanism that was centering the donation body.

	   --blg-measure-split and --blg-measure-grid are both min(--blg-composition,
	   100%), and the content band is derived from that same composition, so a
	   split, a card grid and the page column all share one edge by
	   construction rather than by coincidence. See tokens.css. */
	max-width: var(--blg-measure-split);
}

/* Override WP's injected inline widths on each column child. */
.kd-split .kd-split__inner > .wp-block-column {
	width: auto !important;
	margin-right: 0 !important;
	min-width: 0;
}

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

/* Balanced columns: media + text each take half the row (flex:1 1 0) and grow
   together, so the image FILLS its column instead of floating, and the gap stays
   controlled at every width. --blg-content-max caps the row, so the image never
   exceeds ~half the max content width (matches Figma proportions at the design
   width, scales up cleanly beyond it). */
.kd-split__media-col {
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Hold the Figma size (shrink allowed, grow NOT) — the text column absorbs
   whatever the composition cap leaves over. Below 1240px the tablet rule
   further down re-equalises both columns so the media scales with the text
   instead of squeezing it.

   Selector depth is deliberate. WP core ships, at >=782px:
       .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column
       { flex-basis: 0; flex-grow: 1 }
   :not() takes the specificity of its ARGUMENT, so that is three classes —
   (0,3,0) — not (0,2,1). A three-class theme rule would therefore only TIE it
   and win on stylesheet source order, which is not a guarantee: toggling
   should_load_separate_core_block_assets, a core update, or any CSS
   concatenating/deferring plugin would silently hand the media back to
   flex:1 1 0 with no error anywhere. Adding .wp-block-columns (already on
   this element) makes it (0,4,0) — an unambiguous specificity win, no
   !important, no dependence on load order. */
.kd-split .kd-split__inner.wp-block-columns > .kd-split__media-col {
	flex: 0 1 var(--blg-split-media);
}

/* Square variant is 555 wide in Figma (23:2517), not 500. Must carry the same
   (0,4,0) depth to win against core, and sit after the rule above. */
.kd-split--square .kd-split__inner.wp-block-columns > .kd-split__media-col {
	flex-basis: var(--blg-split-media-square);
}

/* Text column absorbs everything the fixed media column leaves (~644px at the
   1224 cap, vs Figma's 568 on its narrower 1220 canvas).

   basis MUST be 0, not auto. With `auto` the basis is the text's max-content
   width — far larger than the container — so the flex algorithm shrinks BOTH
   columns proportionally and the media lands wherever that arithmetic drops
   it (measured 242/362/407 across the three About splits, each different
   because each has different copy). With basis 0 the media's 500 is the only
   real basis, all free space grows into the text, and the media holds exactly
   500 at every width above the tablet breakpoint.
   Same (0,4,0) depth as the media column, same reason. */
.kd-split .kd-split__inner.wp-block-columns > .kd-split__text-col {
	flex: 1 1 0;
}

/* Empty-state placeholder. WordPress strips an unset core/image on the
   front-end, leaving the media column blank — a broken-looking half-section
   until an editor adds a photo. Render a neutral brand circle so the
   composition reads as intentional pre-content. Auto-removed once an <img>
   exists (:has — already used elsewhere in this theme). */
.kd-split__media-col:not(:has(img))::before {
	content: "";
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	background: var(--blg-color-neutral-100, #f4f4f5);
	box-shadow: var(--blg-shadow-image);
}

/* ── Circular image ─────────────────────────────────────────────────────────
   Figma: 500×500px circle, shadow 0px 4px 10px rgba(0,0,0,0.15).
   We use aspect-ratio + border-radius: 50% so the circle scales with the column
   rather than being a fixed 500px (which would overflow on tablet). The
   max-width cap lets it stay true to Figma on large viewports while breathing
   down on smaller ones.                                                       */

.kd-split .kd-split__image {
	margin: 0 !important; /* reset WP block margin */
	width: 100%;
}

.kd-split .kd-split__image img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 50%;
	box-shadow: var(--blg-shadow-image);
}

/* ── Square variant (.kd-split--square) ─────────────────────────────────────
   Same 1:1 media + shadow, but rounded-square corners instead of a circle.
   A second discrete pattern (Split — Square Image …) sets this class so a
   client picks circle vs square straight from the inserter — no per-image
   block edit. 16px (--blg-radius-card) — pixel-verified against Figma 6:20/
   6:510 (BLGA Home "Why"/About "Our Story"); NOT the 24px --blg-radius-lg
   used by the card family. */

.kd-split--square .kd-split__image img,
.kd-split--square .kd-split__media-col:not(:has(img))::before {
	border-radius: var(--blg-radius-card);
	aspect-ratio: 555 / 500; /* Figma split media 555×500 — landscape, not 1:1 */
}

/* Empty-state placeholder fill — BLGA square variant only (Figma 6:20/6:510
   sample: rgb(211,238,251) = #D3EEFB = --blg-color-tint, Sky Tint). The
   circle variant above keeps its neutral-100 fill (different consumer/spec,
   out of this build's lane). */
.kd-split--square .kd-split__media-col:not(:has(img))::before {
	background: var(--blg-color-tint);
	box-shadow: none;
}

/* Square media fills its balanced column (no fixed cap — see .kd-split__media-col). */

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

/* Figma: text column = 568px. flex:0 1 568px lets it shrink as the viewport
   narrows while space-between handles the gap on wide screens. */
.kd-split__text-col {
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0; /* vertical rhythm via individual element margins below */
}

/* Eyebrow — optional; matches global .kd-eyebrow but scoped for safety */
.kd-split .kd-split__eyebrow {
	font-family: var(--blg-font-heading);
	font-weight: var(--blg-fw-heading);
	font-size: var(--blg-size-eyebrow); /* 14px */
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--blg-color-contrast)
		/* BLGA comp: split headings are petrol (P2 flag) */;
	margin: 0 0 var(--blg-gap-tight) !important; /* 8px below eyebrow */
}

/* Heading — 50px Montserrat Black, primary purple.
   !important overrides the global `h2 { ...!important }` down-scale rules that
   ship in global.css and stomp display headings on mobile — scoped here. */
.kd-split .kd-split__heading {
	font-size: var(--blg-size-h2-section) !important; /* shared section scale */
	line-height: var(--blg-lh-h2-section) !important;
	color: var(--blg-color-contrast)
		/* BLGA comp: split headings are petrol (P2 flag) */;
	margin: 0 0 var(--blg-space-md) !important; /* 24px below heading → body */
	font-family: var(--blg-font-heading);
	font-weight: var(--blg-fw-heading);
}

/* Body — 16px Inter Regular, body ink, leading 26px (1.625) */
.kd-split .kd-split__body {
	font-size: var(--blg-size-body); /* 16px */
	line-height: 1.625;
	color: var(--blg-color-body);
	margin: 0 !important;
}

/* Two-paragraph rhythm (Figma 6:20/6:510 both run 2 body paragraphs) — gap
   between the first and second paragraph. Zero effect on single-paragraph
   compositions (no sibling to match). */
.kd-split .kd-split__body + .kd-split__body {
	margin-top: var(--blg-space-sm) !important; /* 16px */
}

/* Space above the button group */
.kd-split .kd-split__buttons {
	margin-top: var(
		--blg-space-lg
	) !important; /* 40px — Figma: button top=1032, body bottom≈998 → ~34px; use lg */
}

/* Button inherits the global wp-element-button purple-fill pill style.
   No override needed; the block default matches the Figma spec exactly. */

/* ── Text link (.kd-split__link) — "How to join →" (Figma 6:20) ─────────────
   A real inline link, not a wp:buttons pill — Inter Bold, Georgia Blue, small
   arrow suffix. Optional block; delete the paragraph when a composition (e.g.
   the About story split, 6:510) doesn't need a CTA.

   Specificity note (found via CDP CSS.getMatchedStylesForNode, not guessed):
   this pattern is composed inside `.entry-content` on a real page (Home/
   About), and global.css's `.entry-content a:not(.wp-element-button):not(
   [class*="kd-btn"])` rule — written for inline body-copy links, aliasing to
   --blg-color-link (= --blg-color-contrast, "Anchor Navy") — sits at (0,3,1)
   specificity and was winning over a plain `.kd-split .kd-split__link a`
   ((0,2,1)), silently repainting the link Deep Petrol instead of Georgia Blue.
   The selectors below thread the outer group's own `.wp-block-group.kd-
   section.kd-split` (3 real classes already on that element, not padding)
   to reach (0,4,1) — a clean, unconditional win, no !important. */
.kd-split .kd-split__link {
	margin-top: var(--blg-space-md) !important; /* 24px above the body */
}

.wp-block-group.kd-section.kd-split .kd-split__link a {
	font-family: var(--blg-font-body);
	font-weight: 700;
	font-size: var(--blg-size-body); /* 16px */
	color: var(--blg-color-contrast)
		/* BLGA comp: split headings are petrol (P2 flag) */;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	transition: gap 0.15s ease;
}

.kd-split .kd-split__link a::after {
	content: "\2192"; /* → */
	font-size: 0.9em;
}

.wp-block-group.kd-section.kd-split .kd-split__link a:hover,
.wp-block-group.kd-section.kd-split .kd-split__link a:focus-visible {
	color: var(--blg-color-secondary);
	text-decoration: underline;
	gap: 0.75em;
}

/* ── Image-right variant (.kd-split--reverse) ──────────────────────────────
   Swap column visual order without changing DOM order (preserves tab order /
   screen-reader flow). The media col is always col-1 in markup; reversing
   direction swaps the visual positions.                                        */

.kd-split.kd-split--reverse .kd-split__inner {
	direction: rtl;
}

/* Reset direction on inner content so text + buttons read LTR */
.kd-split.kd-split--reverse .kd-split__inner > .wp-block-column,
.kd-split.kd-split--reverse .kd-split__inner > .wp-block-column * {
	direction: ltr;
}

/* ── Tablet (≤1240px) ────────────────────────────────────────────────────────
   Below the design width, re-equalise the columns so the media scales DOWN
   with the text instead of holding 500 and crushing the heading.

   The 1240 breakpoint is derived, not picked. Below the content cap the gutter
   is 7.64vw a side, so content = 0.8472·vw and an equalised column is
   (0.8472·vw − gap)/2. Setting that equal to the 500 media and solving gives
   vw ≈ 1240 — i.e. the width where the equalised column ALREADY measures 500,
   so the handoff from "fixed 500" to "shared equally" is seamless with no jump
   in image size. (At the old 1100 the columns inverted: the media held 500
   while the text was squeezed to 374 — wider media than text, backwards from
   the design's 500/568.) Stacks fully at ≤768. */

@media (max-width: 1239.98px) {
	.kd-split .kd-split__inner {
		justify-content: flex-start;
		gap: var(--blg-space-lg) !important; /* 40px */
	}

	.kd-split__media-col,
	.kd-split__text-col {
		flex: 1 1 0 !important;
		max-width: none !important;
	}
}

/* ── Mobile (≤768px) — single-column stack ──────────────────────────────────
   Image above text, both full-width. Button stretches full-width.            */

@media (max-width: 768px) {
	.kd-split .kd-split__inner {
		flex-direction: column !important;
		justify-content: flex-start;
		gap: var(
			--blg-space-lg
		) !important; /* 40px between stacked image + text */
	}

	/* For the reverse variant on mobile: keep image on top (same as default).
	   Reset the rtl trick so columns stack in natural DOM order. */
	.kd-split.kd-split--reverse .kd-split__inner {
		direction: ltr;
	}

	.kd-split__media-col,
	.kd-split__text-col {
		flex: 1 1 100% !important;
		max-width: 100% !important;
	}

	/* Image: still circular, fills the column, max 360px so it doesn't
	   dominate a narrow phone screen */
	.kd-split .kd-split__image {
		max-width: 360px;
		margin-inline: auto !important;
	}

	/* Center text and button on mobile */
	.kd-split__text-col {
		align-items: center;
		text-align: center;
	}

	.kd-split .kd-split__eyebrow,
	.kd-split .kd-split__heading,
	.kd-split .kd-split__body {
		text-align: center !important;
	}

	/* Text link: centered on mobile, same as the other text elements */
	.kd-split .kd-split__link {
		text-align: center;
		width: 100%;
	}

	.kd-split .kd-split__link a {
		justify-content: center;
	}

	/* Button: full-width pill */
	.kd-split .kd-split__buttons {
		width: 100%;
	}

	.kd-split .kd-split__buttons .wp-block-button {
		width: 100%;
	}

	.kd-split .kd-split__buttons .wp-block-button__link {
		width: 100%;
		justify-content: center;
		text-align: center;
	}
}