/* CTA Split — 65/35 per Figma (936px / 504px) */
.nk-cta-split {
	--nk-cta-split-min-height: var(--wp--custom--components--cta-split--min-height);
	--nk-cta-split-content-indent: var(--wp--custom--components--cta-split--content-indent);
	--nk-cta-split-block-gap: var(--wp--preset--spacing--12);
	--nk-cta-split-media-max-height: var(--wp--custom--components--cta-split--media-max-height);
	margin-top: var(--wp--preset--spacing--14);
	/* Full-bleed outer; the capped composition lives in __inner. Clip the left
	   image bleed so it can't trigger a horizontal scrollbar. */
	overflow-x: clip;
}

/* Cap the composition at the layout max-width and centre it so the content's right
   edge lines up with the header on screens wider than 1440 (the image fills the left
   gap). ≤1440 renders identically to the previous full-bleed grid. */
.nk-cta-split__inner {
	max-width: var(--wp--custom--layout--max-width);
	margin-inline: auto;
	display: grid;
	grid-template-columns: 936fr 504fr;
	min-height: var(--nk-cta-split-min-height);
}
/* Left image bleeds to the viewport edge above 1440 (see __inner): widen by the left
   inset and pull back with an equal negative margin so its right edge stays put. */
.nk-cta-split__media {
	--nk-cta-split-bleed: max(0px, (100vw - var(--wp--custom--layout--max-width)) / 2);
	width: calc(100% + var(--nk-cta-split-bleed));
	margin-left: calc(-1 * var(--nk-cta-split-bleed));
	overflow: hidden;
	/* Height follows the content column via the grid row (align-items: stretch is
	   the grid default), with the __inner min-height as a floor. The image is
	   absolute (below) so it never inflates the row past the content. ≤767 stacks
	   the columns, so the media gets an explicit height there. */
	position: relative;
}
.nk-cta-split__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.nk-cta-split__content { display: flex; flex-direction: column; justify-content: center; gap: var(--nk-cta-split-block-gap); padding: var(--wp--preset--spacing--12) calc(var(--wp--preset--spacing--12) + var(--wp--preset--spacing--6-5)) var(--wp--preset--spacing--12) var(--nk-cta-split-content-indent); }
.nk-cta-split__block { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--4); }
/* Size + case from the shared .nk-headline--structural class (mapped in render.php) — this block is the reference the class was derived from. */
.nk-cta-split__heading { font-weight: var(--wp--custom--font-weight--bold); line-height: var(--wp--custom--line-height--xl); color: var(--wp--preset--color--ink-primary); margin: 0; }
.nk-cta-split__text { font-size: var(--wp--preset--font-size--base); line-height: 1.3; color: var(--wp--preset--color--ink-secondary); margin: 0; }
.nk-cta-split__btn { display: inline-flex; align-items: center; justify-content: center; padding: var(--wp--preset--spacing--4) var(--wp--preset--spacing--8); font-size: var(--wp--preset--font-size--base); font-weight: var(--wp--custom--font-weight--semibold); text-decoration: none; border-radius: var(--wp--custom--radius--default); align-self: flex-start; transition: background-color 200ms ease, color 200ms ease; }
.nk-cta-split__btn--primary { background-color: var(--wp--preset--color--brand-black); color: var(--wp--preset--color--brand-white); }
.nk-cta-split__btn--primary:hover { background-color: var(--wp--preset--color--neutral-800); color: var(--wp--preset--color--brand-white); }
.nk-cta-split__btn--secondary { background: none; border: 1px solid var(--wp--preset--color--ink-primary); color: var(--wp--preset--color--ink-primary); }
.nk-cta-split__btn--secondary:hover { background-color: var(--wp--preset--color--ink-primary); color: var(--wp--preset--color--brand-white); }
.nk-cta-split__divider { border: none; border-top: 1px solid var(--wp--preset--color--border-subtle); margin: 0; }
@media (max-width: 1023px) {
	.nk-cta-split__inner { grid-template-columns: 1fr 1fr; }
	.nk-cta-split__content { padding: var(--wp--preset--spacing--8) var(--wp--preset--spacing--6); }
}
@media (max-width: 767px) {
	.nk-cta-split__inner { grid-template-columns: 1fr; min-height: auto; }
	/* Stacked: no content column to stretch against, so set an explicit media height
	   for the absolute image to fill. */
	.nk-cta-split__media { height: var(--nk-cta-split-media-max-height); }
	.nk-cta-split__content { padding: var(--wp--preset--spacing--8) var(--wp--preset--spacing--4); gap: var(--wp--preset--spacing--8); }
	.nk-cta-split__heading { font-size: var(--wp--preset--font-size--md); line-height: 1.2; }
	.nk-cta-split__btn { align-self: stretch; justify-content: center; }
}