/* =============================================================================
 * Block: Intro — explained split.  Handle: pb-ll-explained-split
 *
 * Self-contained: the design palette is scoped to .block-explained-split (no
 * :root leak) and the font is var(--ll-font, <literal Montserrat stack>) so the
 * block styles correctly even without the shared tokens sheet (e.g. inserter
 * preview). A per-page override hook class (<page-slug>-explained-split) is also
 * printed on the section.
 *
 * Cut §03 "What Are AI Fitness Agents?": centered head + 2-col split. LEFT card
 * = blue gradient (#1d529e→#4385c3) with faint grid texture, white bold lead
 * paragraph + lighter #82b3e0 supporting paragraph. RIGHT card = #f9fafb with a
 * light #e5e7eb border and grey #374151 body text.
 * ========================================================================== */
.block-explained-split {
	--c-dark: #010005;
	--c-muted: #768297;
	--c-grey1: #f9fafb;
	--c-grey3: #374151;
	--c-stroke: #e5e7eb;
	--c-blue-1: #1d529e;
	--c-blue-2: #4385c3;
	--c-blue-bold: #ffffff;
	--c-blue-soft: #82b3e0;
	--c-accent: #1690d3;
	--c-white: #fff;
}

/* Shared section header */
.block-head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 15px;
	text-align: center;
}
.block-head__eyebrow {
	font: 700 12px/16px var(--ll-font, 'Montserrat', 'Montserrat-fallback', Arial, sans-serif);
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--c-muted);
}
.block-head__title {
	margin: 0;
	font: 600 36px/48px var(--ll-font, 'Montserrat', 'Montserrat-fallback', Arial, sans-serif);
	letter-spacing: -1px;
	color: var(--c-dark);
}
.block-head__subtitle {
	margin: 0;
	font: 400 16px/27px var(--ll-font, 'Montserrat', 'Montserrat-fallback', Arial, sans-serif);
	color: var(--c-grey3);
}
@media (max-width: 1024px) {
	.block-head__title { font-size: 30px; line-height: 40px; }
}
@media (max-width: 767px) {
	.block-head__title { font-size: 24px; line-height: 32px; letter-spacing: -0.5px; }
}

/* Section */
.block-explained-split {
	background: var(--c-white);
	padding: 70px 0;
}
.block-explained-split__inner {
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 20px;
	display: flex;
	flex-direction: column;
	gap: 40px;
}
.block-explained-split__cards {
	display: flex;
	align-items: stretch;
	gap: 30px;
}
.block-explained-split__card { flex: 1 1 0; min-width: 0; }

/* Left blue-gradient card */
.block-explained-split__card--blue {
	position: relative;
	overflow: hidden;
	/* Shared stats bg image (replaces the CSS gradient + grid texture). */
	background: #1d529e url(/wp-content/themes/litslink/sections/litslink-blocks/_shared/statsbg.webp) center / cover no-repeat;
	border-radius: 18px;
	padding: 40px;
}
/* CSS grid texture disabled — the stats bg image already carries its own mesh. */
.block-explained-split__card--blue::before {
	display: none;
}
/* Image-background variant: drop the gradient + grid texture; the image comes
   from an inline style="background-image:url(...)" on the card. Show ONLY the
   image — no scrim/texture overlay (operator: the card must be just the image).
   The provided composite already carries its own gradient/legibility; text sits
   above via .block-explained-split__blue-content { z-index: 1 }. */
.block-explained-split__card--blue.--has-bg {
	background: none;
	background-color: var(--c-blue-1);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}
.block-explained-split__card--blue.--has-bg::before {
	display: none;
}
.block-explained-split__blue-content { position: relative; z-index: 1; }
.block-explained-split__stat {
	display: block;
	font: 700 48px/1 var(--ll-font, 'Montserrat', 'Montserrat-fallback', Arial, sans-serif);
	letter-spacing: -1px;
	color: var(--c-white);
	margin-bottom: 16px;
}
.block-explained-split__p1 {
	margin: 0;
	font: 700 15px/24px var(--ll-font, 'Montserrat', 'Montserrat-fallback', Arial, sans-serif);
	color: var(--c-blue-bold);
}
.block-explained-split__p2 {
	margin: 30px 0 0;
	font: 400 14px/24px var(--ll-font, 'Montserrat', 'Montserrat-fallback', Arial, sans-serif);
	color: #fff;
}

/* Right light bordered grey-text card */
.block-explained-split__card--grey {
	background: var(--c-grey1);
	border: 1px solid var(--c-stroke);
	border-radius: 18px;
	padding: 40px;
}
.block-explained-split__grey-p {
	margin: 0;
	font: 400 16px/27px var(--ll-font, 'Montserrat', 'Montserrat-fallback', Arial, sans-serif);
	color: var(--c-grey3);
}

/* Optional stat-on variant (default off): keep header spacing consistent. */
.block-explained-split--has-stat .block-explained-split__p2 { margin-top: 40px; }

/* Optional reverse layout (opt-in; default off). Blue/stat card moves RIGHT,
   light card LEFT — mirror of the default. Scoped to the desktop row layout so
   the mobile column stacking (below) is untouched. DOM order is unchanged, so
   the stat card still renders correctly, just on the right. */
@media (min-width: 1025px) {
	.block-explained-split.--reverse .block-explained-split__cards { flex-direction: row-reverse; }
}

/* Optional accent-stat card (third card; default off). */
.block-explained-split__card--accent {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 8px;
	background: rgba(22, 144, 211, 0.06);
	border: 1px solid rgba(22, 144, 211, 0.25);
	border-radius: 18px;
	padding: 40px;
}
.block-explained-split__accent-stat {
	font: 700 56px/1 var(--ll-font, 'Montserrat', 'Montserrat-fallback', Arial, sans-serif);
	letter-spacing: -1.5px;
	color: var(--c-accent);
}
.block-explained-split__accent-label {
	font: 700 16px/24px var(--ll-font, 'Montserrat', 'Montserrat-fallback', Arial, sans-serif);
	color: var(--c-dark);
}
.block-explained-split__accent-text {
	margin: 4px 0 0;
	font: 400 14px/23px var(--ll-font, 'Montserrat', 'Montserrat-fallback', Arial, sans-serif);
	color: var(--c-grey3);
}

@media (max-width: 1024px) {
	.block-explained-split { padding: 56px 0; }
	.block-explained-split__inner { padding: 0 40px; }
	.block-explained-split__cards { flex-direction: column; }
	/* column layout: cards size to content height (reset the row's flex:1 which
	   would otherwise divide the container HEIGHT and collapse the cards). */
	.block-explained-split__card { flex: none; }
}
@media (max-width: 767px) {
	.block-explained-split { padding: 44px 0; }
	.block-explained-split__inner { padding: 0 20px; }
	.block-explained-split__card--blue,
	.block-explained-split__card--grey,
	.block-explained-split__card--accent { padding: 24px; }
	.block-explained-split__stat { font-size: 40px; }
	.block-explained-split__grey-p { font-size: 15px; line-height: 24px; }
	.block-explained-split__accent-stat { font-size: 44px; }
}