/* =============================================================================
 * LITSLINK BLOCKS — Intro · split + stat (acf/ll-aidef-split)
 * Self-contained: block-scoped palette, literal font fallback.
 * 1:1 with the Healthcare "What Are AI Agents?" cut @1440: light bg, bold
 * 3-line title + blue gradient stat card left (~440px), white rounded bordered
 * body card right. Gradient sampled from the cut: light hotspot top-center
 * (#5fb2e6) fading to deep blue edges (#1c60aa).
 * ========================================================================== */
.block-ll-aidef-split {
	--ads-ink: #10151c;
	--ads-body: #4b5563;
	--ads-bg: #f9fafb;
	--ads-stroke: #e5e7eb;
	--ads-accent: #1690d3;
	--ads-accent-dk: #0d6fa8;
	--ads-grad-light: #5fb2e6;
	--ads-grad-mid: #2f7bc0;
	--ads-grad-deep: #1c60aa;
	--ads-white: #ffffff;

	padding: 80px 0;
	background: var(--ads-bg);
	font-family: var(--ll-font, 'Montserrat', 'Montserrat-fallback', Arial, sans-serif);
	box-sizing: border-box;
}
.block-ll-aidef-split *,
.block-ll-aidef-split *::before,
.block-ll-aidef-split *::after { box-sizing: border-box; }

.block-ll-aidef-split__inner {
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 20px;
	display: grid;
	grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
	gap: 78px;
	align-items: stretch;
}

/* Aside is a flex column so the stat card can grow to fill the column height —
   the grid stretches both columns to the taller one (the white body card), and
   the growing stat card makes the blue card bottom line up with the body card. */
.block-ll-aidef-split__aside {
	display: flex;
	flex-direction: column;
}

/* ------ aside (eyebrow + title + stat card) ------ */
.block-ll-aidef-split__eyebrow {
	display: block;
	font: 700 12px/16px var(--ll-font, 'Montserrat', 'Montserrat-fallback', Arial, sans-serif);
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--ads-accent);
	margin-bottom: 16px;
}
.block-ll-aidef-split__title {
	margin: 0;
	font: 700 34px/48px var(--ll-font, 'Montserrat', 'Montserrat-fallback', Arial, sans-serif);
	letter-spacing: -0.3px;
	color: var(--ads-ink);
}

/* ------ stat card (always gradient) ------ */
.block-ll-aidef-split__stat {
	margin-top: 32px;
	flex: 1 1 auto;
	border-radius: 24px;
	padding: 30px 26px;
	color: var(--ads-white);
	/* Shared stats bg image (replaces the CSS gradient) — same asset as
	   ll-explained-cards-stat / ll-deliver-cards-stat for a consistent look. */
	background: #1d529e url(/wp-content/themes/litslink/sections/litslink-blocks/_shared/statsbg.webp) center / cover no-repeat;
	overflow: hidden;
}
.block-ll-aidef-split__stat-value {
	display: block;
	font: 700 48px/1 var(--ll-font, 'Montserrat', 'Montserrat-fallback', Arial, sans-serif);
	letter-spacing: -1px;
	margin-bottom: 14px;
}
.block-ll-aidef-split__stat-caption {
	display: block;
	font: 400 16px/24px var(--ll-font, 'Montserrat', 'Montserrat-fallback', Arial, sans-serif);
	color: rgba(255, 255, 255, 0.95);
}

/* ------ body card ------ */
.block-ll-aidef-split__body {
	background: var(--ads-white);
	border: 1px solid var(--ads-stroke);
	border-radius: 24px;
	padding: 30px 25px;
	box-shadow: 0 10px 30px rgba(16, 23, 38, 0.04);
	text-align: left;
}
.block-ll-aidef-split__body p {
	margin: 0 0 24px;
	font: 400 16px/24px var(--ll-font, 'Montserrat', 'Montserrat-fallback', Arial, sans-serif);
	color: var(--ads-body);
}
.block-ll-aidef-split__body p:last-child { margin-bottom: 0; }
.block-ll-aidef-split__body u { text-decoration: underline; text-underline-offset: 3px; }
.block-ll-aidef-split__body a { color: var(--ads-accent); text-decoration: underline; }
.block-ll-aidef-split__body a:hover { color: var(--ads-accent-dk); }

/* =========================================================== responsive -- */
@media (max-width: 1024px) {
	.block-ll-aidef-split__inner {
		padding: 0 40px;
		grid-template-columns: 1fr;
		gap: 28px;
	}
}
@media (max-width: 767px) {
	.block-ll-aidef-split { padding: 60px 0; }
	.block-ll-aidef-split__inner { padding: 0 20px; }
	.block-ll-aidef-split__title { font-size: 26px; line-height: 34px; }
	.block-ll-aidef-split__body { padding: 26px 24px; }
	.block-ll-aidef-split__stat-value { font-size: 38px; }
}