/* =============================================================================
 * LITSLINK BLOCKS — Capabilities · intro + list (acf/ll-capabilities-intro-list)
 * Self-contained: block-scoped palette, literal font fallback. No global .block-head.
 *
 * Job Search §03 cut "What LITSLINK AI Agents for Job Search Can Do":
 * a 2-column split on a LIGHT section — LEFT = compact DARK intro card (#1c2237)
 * over a faint circuit mesh (eyebrow #1690d3 + white title + light-grey body);
 * RIGHT = tall vertical stack of white bordered rows (light-blue #e8f4fb icon tile
 * + bold title + grey body). Below: optional full-width light CTA bar.
 *
 * NB: the SECTION background is a single var (--cil-section-bg). The cut renders
 * it LIGHT; flip it to --cil-dark for a dark full-bleed section if desired.
 * ========================================================================== */
.block-ll-capabilities-intro-list {
	--cil-dark: #010005;
	--cil-card-dark: #1c2237;
	--cil-section-bg: #f9fafb;
	--cil-ink: #10151c;
	--cil-muted: #4b5563;
	--cil-eyebrow: #1690d3;
	--cil-accent: #1690d3;
	--cil-accent-hover: #127bb4;
	--cil-white: #ffffff;
	--cil-card-border: #eaecef;
	--cil-icon-bg: #e8f4fb;
	--cil-intro-body: #b6c0d4;
	--cil-bar-bg: #f4f6f9;
	--cil-bar-border: #ebedf0;
	font-family: var(--ll-font, 'Montserrat', 'Montserrat-fallback', Arial, sans-serif);
	background: var(--cil-section-bg);
	padding: 80px 0;
	box-sizing: border-box;
}
.block-ll-capabilities-intro-list *,
.block-ll-capabilities-intro-list *::before,
.block-ll-capabilities-intro-list *::after { box-sizing: border-box; }

.block-ll-capabilities-intro-list__inner {
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 20px;
}

/* ---------------------------------------------------------------- split -- */
.block-ll-capabilities-intro-list__split {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	align-items: start;
	gap: 40px;
}

/* ------------------------------------------------------ LEFT dark intro -- */
.block-ll-capabilities-intro-list__intro {
	position: sticky;          /* default: pin the left card and let the right list scroll past it */
	top: 96px;                 /* clears the fixed site header */
	align-self: start;         /* keep natural height so sticky travels within the row */
	overflow: hidden;
	background: var(--cil-card-dark);
	border-radius: 18px;
	padding: 48px 44px;
}
/* Faint circuit-mesh texture (self-contained; no external asset). */
.block-ll-capabilities-intro-list__intro::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		repeating-linear-gradient(0deg, rgba(120, 180, 235, 0.07) 0 1px, transparent 1px 26px),
		repeating-linear-gradient(90deg, rgba(120, 180, 235, 0.07) 0 1px, transparent 1px 26px),
		radial-gradient(circle at 30% 120%, rgba(22, 144, 211, 0.25) 0%, transparent 55%);
	opacity: 0.9;
	pointer-events: none;
}
/* Optional real background IMAGE (lazy <img>) — replaces the solid colour + mesh.
 * When cil_intro_bg is set the card carries --has-bg; the image sits at z-index 0
 * under the text layer (z-index 1) and the CSS mesh is suppressed. No image = the
 * default dark background + ::before circuit mesh render exactly as before. */
.block-ll-capabilities-intro-list__intro--has-bg { position: sticky; background: var(--cil-card-dark); }
.block-ll-capabilities-intro-list__intro--has-bg::before { display: none; content: none; }
/* Navy→cyan gradient over the bg image (opt-in --overlay) so text stays legible.
   ::after is the last child → paints above the z-index:0 bg image, below the
   z-index:1 content. Figma spec gradient. */
.block-ll-capabilities-intro-list__intro--overlay::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(145deg, rgba(8, 19, 30, 0.85) 6.17%, rgba(18, 168, 224, 0.60) 93.83%);
	pointer-events: none;
}
.block-ll-capabilities-intro-list__intro-bg-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
	display: block;
	border-radius: inherit;
	pointer-events: none;
}
.block-ll-capabilities-intro-list__intro-content { position: relative; z-index: 1; }
.block-ll-capabilities-intro-list__eyebrow {
	margin: 0 0 16px;
	font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
	color: var(--cil-eyebrow);
}
.block-ll-capabilities-intro-list__title {
	margin: 0;
	font-size: 32px; line-height: 1.25; font-weight: 700; letter-spacing: -.5px;
	color: var(--cil-white);
}
.block-ll-capabilities-intro-list__subtitle {
	margin: 18px 0 0;
	font-size: 15px; line-height: 1.7;
	color: var(--cil-intro-body);
}
.block-ll-capabilities-intro-list__intro-text {
	margin: 24px 0 0;
	font-size: 14px; line-height: 1.7;
	color: var(--cil-intro-body);
}

/* ------------------------------------------------------ RIGHT list rows -- */
.block-ll-capabilities-intro-list__list {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.block-ll-capabilities-intro-list__row {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	background: var(--cil-white);
	border: 1px solid var(--cil-card-border);
	border-radius: 16px;
	padding: 26px 30px;
	box-shadow: 0 1px 3px rgba(16, 24, 40, .04);
}
.block-ll-capabilities-intro-list__icon {
	flex: 0 0 48px;
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 12px;
	background: var(--cil-icon-bg);
	color: var(--cil-accent);
}
.block-ll-capabilities-intro-list__icon svg { display: block; }
.block-ll-capabilities-intro-list__icon-img { width: 24px; height: 24px; object-fit: contain; display: block; }
.block-ll-capabilities-intro-list__icon picture { display: flex; }
.block-ll-capabilities-intro-list__row-text { flex: 1 1 0; min-width: 0; }
.block-ll-capabilities-intro-list__row-title {
	margin: 0;
	font-size: 18px; line-height: 1.4; font-weight: 700;
	color: var(--cil-ink);
}
.block-ll-capabilities-intro-list__row-body {
	margin: 10px 0 0;
	font-size: 15px; line-height: 1.7;
	color: var(--cil-muted);
}

/* ------------------------------------------------ RIGHT cards (opt-in) --
 * Rendered when cil_items_style = "cards" (E-Commerce §04). Separate white
 * bordered rounded cards: bold title + thin divider under it + body text
 * (paragraphs and bullet lists). No icon tile. Default "list" is untouched. */
.block-ll-capabilities-intro-list__list--cards { gap: 24px; }
.block-ll-capabilities-intro-list__card {
	background: var(--cil-white);
	border: 1px solid var(--cil-card-border);
	border-radius: 16px;
	padding: 26px 32px;
	box-shadow: 0 1px 3px rgba(16, 24, 40, .04);
}
.block-ll-capabilities-intro-list__card-title {
	margin: 0 0 18px;
	padding: 0 0 18px;
	border-bottom: 1px solid var(--cil-card-border);
	font-size: 20px; line-height: 1.3; font-weight: 700; letter-spacing: -.2px;
	color: var(--cil-ink);
}
.block-ll-capabilities-intro-list__card-body > :first-child { margin-top: 0; }
.block-ll-capabilities-intro-list__card-body > :last-child { margin-bottom: 0; }
.block-ll-capabilities-intro-list__card-p {
	margin: 0 0 14px;
	font-size: 15px; line-height: 1.7;
	color: var(--cil-muted);
}
.block-ll-capabilities-intro-list__card-list {
	margin: 0 0 14px;
	padding: 0 0 0 22px;
	list-style: none;
}
.block-ll-capabilities-intro-list__card-list li {
	position: relative;
	margin: 0 0 8px;
	font-size: 15px; line-height: 1.7;
	color: var(--cil-muted);
}
.block-ll-capabilities-intro-list__card-list li:last-child { margin-bottom: 0; }
.block-ll-capabilities-intro-list__card-list li::before {
	content: "";
	position: absolute;
	left: -16px; top: .62em;
	width: 6px; height: 6px; border-radius: 50%;
	background: var(--cil-accent);
}

/* ------------------------------------------- RIGHT check-cards (opt-in) --
 * Rendered when cil_items_style = "cards-check" (EHR/EMR §06 "EHR
 * Interoperability & Integration"). Horizontal bordered white card: a light-blue
 * rounded tile with a blue check icon on the LEFT, bold title + grey body on the
 * RIGHT. Uses the row's icon image if set, else the built-in check SVG. Distinct
 * from "cards" (title+divider+body, no icon) and "list" (cycling demo icons). */
.block-ll-capabilities-intro-list__list--cards-check { gap: 20px; }
.block-ll-capabilities-intro-list__checkcard {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	background: var(--cil-white);
	border: 1px solid var(--cil-card-border);
	border-radius: 16px;
	padding: 26px 30px;
	box-shadow: 0 1px 3px rgba(16, 24, 40, .04);
}
.block-ll-capabilities-intro-list__checkicon {
	flex: 0 0 48px;
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 12px;
	background: var(--cil-icon-bg);
	color: var(--cil-accent);
}
.block-ll-capabilities-intro-list__checkicon svg { display: block; }
.block-ll-capabilities-intro-list__checkicon .block-ll-capabilities-intro-list__icon-img {
	width: 24px; height: 24px; object-fit: contain; display: block;
}
.block-ll-capabilities-intro-list__checkicon picture { display: flex; }
.block-ll-capabilities-intro-list__checkcard-text { flex: 1 1 0; min-width: 0; }
.block-ll-capabilities-intro-list__checkcard-title {
	margin: 0;
	font-size: 18px; line-height: 1.4; font-weight: 700;
	color: var(--cil-ink);
}
.block-ll-capabilities-intro-list__checkcard-body {
	margin: 10px 0 0;
	font-size: 15px; line-height: 1.7;
	color: var(--cil-muted);
}

/* --------------------------------------- in-panel white CTA pill (opt-in) --
 * Rendered when cil_cta_inpanel = 1: a full-width white pill inside the LEFT
 * dark panel (label left, arrow right). Suppresses the bottom bar. Default off. */
.block-ll-capabilities-intro-list__intro-cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	margin-top: 32px;
	background: var(--cil-white);
	color: var(--cil-accent);
	text-decoration: none;
	font-size: 15px; font-weight: 600; line-height: 1.3;
	padding: 16px 28px;
	border-radius: 999px;
	transition: background-color .15s ease, color .15s ease;
}
.block-ll-capabilities-intro-list__intro-cta:hover { background: #eef6fc; color: var(--cil-accent-hover); }
.block-ll-capabilities-intro-list__intro-cta svg { display: block; flex: 0 0 auto; }

/* --------------------------------------------------------- light CTA bar -- */
.block-ll-capabilities-intro-list__cta {
	margin-top: 40px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	background: var(--cil-bar-bg);
	border: 1px solid var(--cil-bar-border);
	border-radius: 20px;
	padding: 28px 40px;
}
.block-ll-capabilities-intro-list__cta-heading {
	margin: 0;
	font-size: 20px; line-height: 1.35; font-weight: 700; letter-spacing: -.2px;
	color: var(--cil-ink);
}
.block-ll-capabilities-intro-list__cta-btn {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--cil-accent);
	color: var(--cil-white);
	text-decoration: none;
	font-size: 15px; font-weight: 600; line-height: 1;
	padding: 15px 28px;
	border-radius: 999px;
	transition: background-color .15s ease;
}
.block-ll-capabilities-intro-list__cta-btn:hover { background: var(--cil-accent-hover); color: var(--cil-white); }
.block-ll-capabilities-intro-list__cta-btn svg { display: block; }

/* --------------------------------------------------------------- responsive -- */
@media (max-width: 1024px) {
	.block-ll-capabilities-intro-list { padding: 64px 0; }
	.block-ll-capabilities-intro-list__split { grid-template-columns: 1fr; gap: 28px; }
	.block-ll-capabilities-intro-list__intro { padding: 40px 32px; position: static; }
	.block-ll-capabilities-intro-list__title { font-size: 28px; }
}
@media (max-width: 782px) {
	.block-ll-capabilities-intro-list { padding: 48px 0; }
	.block-ll-capabilities-intro-list__intro { padding: 32px 24px; }
	.block-ll-capabilities-intro-list__title { font-size: 24px; }
	.block-ll-capabilities-intro-list__list { gap: 16px; }
	.block-ll-capabilities-intro-list__list--cards { gap: 16px; }
	.block-ll-capabilities-intro-list__card { padding: 22px 20px; }
	.block-ll-capabilities-intro-list__card-title { font-size: 17px; margin-bottom: 14px; padding-bottom: 14px; }
	.block-ll-capabilities-intro-list__intro-cta { padding: 14px 22px; }
	.block-ll-capabilities-intro-list__row { padding: 20px; gap: 16px; }
	.block-ll-capabilities-intro-list__icon { flex-basis: 44px; width: 44px; height: 44px; border-radius: 10px; }
	.block-ll-capabilities-intro-list__row-title { font-size: 16px; }
	.block-ll-capabilities-intro-list__list--cards-check { gap: 16px; }
	.block-ll-capabilities-intro-list__checkcard { padding: 20px; gap: 16px; }
	.block-ll-capabilities-intro-list__checkicon { flex-basis: 44px; width: 44px; height: 44px; border-radius: 10px; }
	.block-ll-capabilities-intro-list__checkcard-title { font-size: 16px; }
	.block-ll-capabilities-intro-list__cta { flex-direction: column; align-items: flex-start; padding: 24px; border-radius: 16px; }
	.block-ll-capabilities-intro-list__cta-heading { font-size: 18px; }
	.block-ll-capabilities-intro-list__cta-btn { width: 100%; justify-content: center; }
}