/**
 * 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)
 *   • "Annual Reviews"    — 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 / --kd-color-primary / line-height 46px
 *   Body:    16px / Inter Regular / --kd-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 / --kd-color-primary / uppercase / tracked
 *
 * One pattern = one CSS partial. All responsive rules stay here.
 * Prefix: --kd-* / .kd-*  (never --gg-* or gg-*).
 */

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

.kd-split {
	width: 100%;
}

/* ── 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: space-between;
	align-items: center;
	gap: 2.5rem; /* floor — space-between handles the real gap on wide screens */
	margin-block: 0 !important;
}

/* 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 ──────────────────────────────────────────────────────────── */

/* Figma: 500px circle. flex:0 1 500px — shrinks as viewport narrows, never
   grows past the image size. space-between on the parent handles the gap. */
.kd-split__media-col {
	flex: 0 1 500px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* 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%;
	max-width: 500px;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	background: var(--kd-color-neutral-100, #f4f4f5);
	box-shadow: var(--kd-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%;
	max-width: 500px;
}

.kd-split .kd-split__image img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 50%;
	box-shadow: var(--kd-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. 24px (--kd-radius-lg) matches the card design language.        */

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

/* Square split media is a touch wider than the 500px circle (Figma 555px). */
.kd-split--square .kd-split__image {
	flex-basis: 555px;
	max-width: 555px;
}

/* ── 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 {
	flex: 0 1 568px;
	max-width: 568px;
	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(--kd-font-heading);
	font-weight: var(--kd-fw-heading);
	font-size: var(--kd-size-eyebrow); /* 14px */
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--kd-color-primary);
	margin: 0 0 var(--kd-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: clamp(2rem, 3.5vw, 3.125rem) !important; /* 32px → 50px */
	line-height: 1.08 !important; /* Figma: leading-[46px] on 50px font; unitless 1.08 */
	color: var(--kd-color-primary);
	margin: 0 0 var(--kd-space-md) !important; /* 24px below heading → body */
	font-family: var(--kd-font-heading);
	font-weight: var(--kd-fw-heading);
}

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

/* Space above the button group */
.kd-split .kd-split__buttons {
	margin-top: var(
		--kd-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. */

/* ── 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 (≤1100px) ────────────────────────────────────────────────────────
   Re-equalise the columns so the image scales DOWN with the text instead of
   holding 500px and squeezing the text column. (The desktop `500px 1fr` rule
   would otherwise pin the image at 500 and crush the heading on narrow tablets.)
   Stacks fully at ≤768.                                                          */

/* ── Tablet (≤1100px) ────────────────────────────────────────────────────────
   At this width the 500+568 columns start pressing the 2.5rem floor gap.
   Let both columns share space equally (flex:1 1 0) and use a fixed gap
   instead of space-between so the image scales with the text column. */

@media (max-width: 1100px) {
	.kd-split .kd-split__inner {
		justify-content: flex-start;
		gap: var(--kd-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(
			--kd-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;
	}

	/* 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;
	}
}