/* =============================================================================
 * LITSLINK BLOCKS — Process · open stepper + CTA (acf/ll-process-stepper-open)
 * Centered header over an OPEN (card-less) horizontal numbered circle row
 * (01–0N) + active-step body in a plain full-width bordered box (no "Step N of
 * T" counter, no title) + a light-blue CTA banner (icon + text + blue pill
 * button). Mobile: vertical accordion. Self-contained: block-scoped palette,
 * literal font fallback. No global .block-head.
 * ========================================================================== */
.block-ll-process {
	--pso-ink: #10151c;
	--pso-muted: #5a6472;
	--pso-eyebrow: #8a94a6;
	--pso-accent: #1690d3;
	--pso-circle-border: rgba(118, 130, 151, 0.25);
	--pso-box-border: #e5e7eb;
	--pso-banner-bg: #e2eff7;
	--pso-section-bg: #f9fafb;
	font-family: var(--ll-font, 'Montserrat', 'Montserrat-fallback', Arial, sans-serif);
	background: var(--pso-section-bg);
	padding: 80px 0;
	box-sizing: border-box;
}
.block-ll-process *,
.block-ll-process *::before,
.block-ll-process *::after { box-sizing: border-box; }

.block-ll-process__inner {
	max-width: 1300px;
	margin: 0 auto;
	padding: 0 70px;
}

/* Header */
.block-ll-process__head { text-align: center; margin: 0 auto 48px; max-width: 880px; }
.block-ll-process__eyebrow {
	margin: 0 0 12px;
	font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
	color: var(--pso-eyebrow);
}
.block-ll-process__title {
	margin: 0; font-size: 40px; line-height: 1.2; font-weight: 700; color: var(--pso-ink);
}
.block-ll-process__subtitle {
	margin: 16px auto 0; max-width: 720px; font-size: 17px; line-height: 1.6; color: var(--pso-muted);
}

/* Numbered circle row (OPEN — no card wrap, no divider) */
.block-ll-process__row {
	display: flex;
	gap: 16px;
	margin-bottom: 32px;
}
.block-ll-process__step {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	font-family: inherit;
}
.block-ll-process__circle {
	width: 52px;
	height: 52px;
	flex: 0 0 52px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: var(--pso-section-bg);
	border: 1.6px solid var(--pso-circle-border);
	transition: border-color .2s ease, box-shadow .2s ease;
}
.block-ll-process__num {
	font-size: 16px; font-weight: 600; line-height: 1;
	color: var(--pso-muted);
	transition: color .2s ease;
}
.block-ll-process__step--active .block-ll-process__circle {
	border-color: rgba(22, 144, 211, 0.55);
	box-shadow: 0 0 0 4px rgba(22, 144, 211, 0.08);
}
.block-ll-process__step--active .block-ll-process__num { color: var(--pso-accent); font-weight: 700; }
.block-ll-process__label {
	font-size: 15px; font-weight: 700; line-height: 1.35;
	color: var(--pso-ink);
	text-align: center;
}

/* Active-step body in a plain full-width bordered box */
.block-ll-process__panel { display: none; }
.block-ll-process__panel--active { display: block; }
.block-ll-process__panel-body {
	border: 1px solid var(--pso-box-border);
	border-radius: 14px;
	padding: 22px 28px;
	background: #fff;
}
.block-ll-process__panel-body p {
	margin: 0 0 1.1em;
	font-size: 16px; line-height: 1.6;
	color: #3a4350;
}
.block-ll-process__panel-body p:last-child { margin-bottom: 0; }

/* CTA banner */
.block-ll-process__banner {
	margin-top: 28px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	background: var(--pso-banner-bg);
	border-radius: 16px;
	padding: 28px 32px;
}
/* Banner style variants (opt-in via pso_banner_style; default = blue-tint above).
   "light" = white background + subtle border to match mockups where the banner
   sits flat on a light section; text + CTA button stay accent-blue. */
.block-ll-process__banner--light {
	background: #ffffff;
	border: 1px solid #d7e3ee;
}
.block-ll-process__banner-lead {
	display: flex;
	align-items: center;
	gap: 18px;
	min-width: 0;
}
.block-ll-process__banner-icon {
	flex: 0 0 auto;
	display: inline-flex;
	color: var(--pso-accent);
}
.block-ll-process__banner-text {
	margin: 0;
	font-size: 16px; font-weight: 700; line-height: 1.5;
	color: var(--pso-accent);
}
.block-ll-process__banner-cta {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--pso-accent);
	color: #ffffff;
	font-size: 16px; font-weight: 700; line-height: 1;
	text-decoration: none;
	padding: 16px 28px;
	border-radius: 999px;
	transition: background-color .2s ease, transform .2s ease;
}
.block-ll-process__banner-cta:hover { background: #127bb4; }
.block-ll-process__banner-cta svg { display: block; }

/* Optional "Technologies + Hours" footer panel (opt-in via pso_show_tech).
   White card with a top border, soft shadow, generous radius; a muted title
   over a wrapped row of outlined pill chips, then a muted Hours title + text. */
.block-ll-process__tech {
	margin-top: 28px;
	display: flex;
	flex-direction: column;
	gap: 24px;
	background: #ffffff;
	border-top: 1px solid var(--pso-box-border);
	border-radius: 30px;
	padding: 32px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}
.block-ll-process__tech-group { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.block-ll-process__tech-group--hours { gap: 8px; }
.block-ll-process__tech-title {
	margin: 0;
	font-size: 18px; font-weight: 500; line-height: 1.55;
	text-transform: capitalize;
	color: #768297;
}
.block-ll-process__tech-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}
.block-ll-process__tech-pill {
	display: inline-flex;
	align-items: center;
	padding: 6px 17px;
	border: 1px solid rgba(22, 144, 211, 0.25);
	border-radius: 30px;
	font-size: 16px; font-weight: 400; line-height: 1.35;
	color: #374151;
}
.block-ll-process__tech-hours p {
	margin: 0 0 .6em;
	font-size: 16px; line-height: 1.6;
	color: #4b5563;
}
.block-ll-process__tech-hours p:last-child { margin-bottom: 0; }

/* =========================================================================
 * "Framed" EMR/EHR treatment (opt-in via .block-ll-process--framed,
 * emitted when pso_show_tech is on). Everything here is scoped to that modifier
 * so the default OPEN look (E-Commerce §12, AI-Assisted, Custom-AI-SW, …) is
 * byte-identical. Target: single bordered card wrapping the stepper — connector
 * line, SOLID-fill active circle (white numeral), "Step N of T" + step title +
 * blue-bar body, faint ghost step number bottom-right.
 * ====================================================================== */
.block-ll-process--framed .block-ll-process__frame {
	position: relative;
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--pso-box-border);
	border-radius: 20px;
	padding: 44px 40px 40px;
	box-shadow: 0 1px 3px rgba(16, 24, 40, .04);
}

/* Circle row: horizontal connector line behind the nodes, ending at the first
   and last circle centers (inset = half a step = 50% / N). */
.block-ll-process--framed .block-ll-process__row {
	position: relative;
	margin-bottom: 0;
	padding-bottom: 34px;
	border-bottom: 1px solid var(--pso-box-border);
}
.block-ll-process--framed .block-ll-process__row::before {
	content: "";
	position: absolute;
	top: 25px;
	left: calc(50% / var(--pso-steps, 6));
	right: calc(50% / var(--pso-steps, 6));
	height: 2px;
	background: var(--pso-circle-border);
	z-index: 0;
}
.block-ll-process--framed .block-ll-process__step {
	position: relative;
	z-index: 1;
}
.block-ll-process--framed .block-ll-process__circle {
	background: #fff; /* opaque, masks the connector line under the node */
}
/* SOLID-fill active node, white numeral (replaces the outline+ring look) */
.block-ll-process--framed .block-ll-process__step--active .block-ll-process__circle {
	background: var(--pso-accent);
	border-color: var(--pso-accent);
	box-shadow: none;
}
.block-ll-process--framed .block-ll-process__step--active .block-ll-process__num { color: #fff; }
/* labels: muted for inactive, ink for the active node */
.block-ll-process--framed .block-ll-process__label { color: var(--pso-muted); font-weight: 600; }
.block-ll-process--framed .block-ll-process__step--active .block-ll-process__label { color: var(--pso-ink); font-weight: 700; }

/* Detail area under the divider */
.block-ll-process--framed .block-ll-process__panels { padding-top: 28px; }
.block-ll-process__panel-step {
	margin: 0 0 8px;
	font-size: 13px; font-weight: 700; line-height: 1.3;
	color: var(--pso-accent);
}
.block-ll-process__panel-title {
	margin: 0 0 18px;
	font-size: 22px; font-weight: 700; line-height: 1.3;
	color: var(--pso-ink);
}
/* body → blue left bar (no full box) inside the framed card */
.block-ll-process--framed .block-ll-process__panel-body {
	position: relative;
	z-index: 1;
	max-width: 760px;
	border: 0;
	border-left: 3px solid var(--pso-accent);
	border-radius: 0;
	padding: 2px 0 2px 22px;
	background: none;
}
/* faint ghost step number, bottom-right of the card */
.block-ll-process__ghost {
	position: absolute;
	right: 34px;
	bottom: 8px;
	font-size: 150px;
	font-weight: 800;
	line-height: .8;
	letter-spacing: -.03em;
	color: rgba(22, 144, 211, .07);
	pointer-events: none;
	user-select: none;
	z-index: 0;
}

/* Mobile accordion (hidden on desktop) */
.block-ll-process__acc { display: none; }

/* Responsive */
@media (max-width: 1024px) {
	.block-ll-process { padding: 56px 0; }
	.block-ll-process__row { gap: 10px; }
	.block-ll-process__label { font-size: 13px; }
}
@media (max-width: 767px) {
	.block-ll-process { padding: 48px 0; }
	/* Match the rest of the library: 20px side gutters (desktop uses 0 70px,
	   which crushed content — incl. the wide diagram — on phones). */
	.block-ll-process__inner { padding: 0 20px; }
	.block-ll-process__head { margin-bottom: 32px; }
	.block-ll-process__title { font-size: 30px; }
	/* swap: hide desktop row + panels, show vertical accordion */
	.block-ll-process__row,
	.block-ll-process__panels { display: none; }
	/* framed card only wraps the (now hidden) desktop row/panels — collapse it so
	   it does not render as an empty bordered box above the accordion */
	.block-ll-process--framed .block-ll-process__frame {
		border: 0; padding: 0; background: none; box-shadow: none;
	}
	.block-ll-process__acc { display: flex; flex-direction: column; gap: 20px; margin-bottom: 8px; }
	.block-ll-process__acc-item { display: flex; flex-direction: column; gap: 16px; }
	.block-ll-process__acc-head {
		display: flex;
		align-items: center;
		gap: 14px;
		width: 100%;
		background: none;
		border: 0;
		padding: 0;
		cursor: pointer;
		text-align: left;
		font-family: inherit;
	}
	.block-ll-process__acc-label {
		font-size: 15px; font-weight: 700; line-height: 1.35;
		color: var(--pso-ink);
	}
	.block-ll-process__acc-item--active .block-ll-process__acc-label { color: var(--pso-accent); }
	.block-ll-process__acc-item--active .block-ll-process__circle {
		border-color: rgba(22, 144, 211, 0.55);
		box-shadow: 0 0 0 4px rgba(22, 144, 211, 0.08);
	}
	.block-ll-process__acc-item--active .block-ll-process__num { color: var(--pso-accent); font-weight: 700; }
	.block-ll-process__acc-body { display: none; }
	.block-ll-process__acc-item--active .block-ll-process__acc-body { display: block; }
	.block-ll-process__panel-body { padding: 18px 20px; }
	.block-ll-process__panel-body p { font-size: 15px; }
	/* banner stacks */
	.block-ll-process__banner { flex-direction: column; align-items: flex-start; gap: 20px; padding: 24px; }
	.block-ll-process__banner-cta { width: 100%; justify-content: center; }
	/* tech + hours footer */
	.block-ll-process__tech { padding: 24px; border-radius: 20px; }
	.block-ll-process__tech-title { font-size: 16px; }
	.block-ll-process__tech-pill { font-size: 15px; }
}

/* =============================================================================
 * Consolidated additions: diagram image, note, icons view, dark theme.
 * ========================================================================== */

/* Optional big diagram image between header and stepper */
.block-ll-process__diagram { margin: 0 auto clamp(28px, 4vw, 48px); max-width: 1040px; text-align: center; }
.block-ll-process__diagram-img { max-width: 100%; height: auto; border-radius: 16px; display: inline-block; }

/* Small note line under the stepper */
.block-ll-process__note { text-align: center; margin: 20px auto 0; max-width: 760px; font-size: 15px; line-height: 1.6; color: var(--pso-muted); }

/* Icons view: larger circles that hold a step icon instead of a number */
.block-ll-process--view-icons .block-ll-process__circle { width: 64px; height: 64px; }
.block-ll-process--view-icons .block-ll-process__icon { width: 30px; height: 30px; object-fit: contain; }
.block-ll-process--view-icons .block-ll-process__step--active .block-ll-process__circle { background: var(--pso-accent); border-color: var(--pso-accent); }
.block-ll-process--view-icons .block-ll-process__step--active .block-ll-process__icon { filter: brightness(0) invert(1); }

/* Dark theme (applies to card / icons views) */
.block-ll-process--dark {
	--pso-ink: #ffffff;
	--pso-muted: #aab6cb;
	--pso-eyebrow: #1690d3;
	--pso-section-bg: #0b1329;
	--pso-box-border: rgba(255, 255, 255, 0.12);
	--pso-circle-border: rgba(255, 255, 255, 0.25);
	--pso-banner-bg: #0f1830;
}
.block-ll-process--dark.block-ll-process--framed .block-ll-process__frame {
	background: #101b3a;
	border-color: rgba(255, 255, 255, 0.08);
}
.block-ll-process--dark .block-ll-process__circle { background: rgba(255, 255, 255, 0.05); }
.block-ll-process--dark .block-ll-process__num { color: var(--pso-muted); }
.block-ll-process--dark .block-ll-process__step--active .block-ll-process__circle { background: var(--pso-accent); border-color: var(--pso-accent); }
.block-ll-process--dark .block-ll-process__step--active .block-ll-process__num { color: #fff; }
.block-ll-process--dark .block-ll-process__label { color: #e7edf6; }
.block-ll-process--dark .block-ll-process__panel-body { background: transparent; }
.block-ll-process--dark .block-ll-process__panel-body p { color: #cfd8e8; }
.block-ll-process--dark .block-ll-process__banner--light { background: #0f1830; border-color: rgba(255, 255, 255, 0.12); }

/* Diagram placeholder (diagram-only usage with no image yet) */
.block-ll-process__diagram-ph {
	display: flex; align-items: center; justify-content: center;
	width: 100%; min-height: 340px; border-radius: 16px;
	border: 1.5px dashed #cbd5e1; color: #94a3b8;
	font-size: 15px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
}

/* =============================================================================
 * Framed + DARK "How We Build …" treatment — 1:1 with the New-Pages Figma
 * (desktop node 4069-5640, mobile node 4084-8995). Scoped to
 * .block-ll-process--framed.block-ll-process--dark so the LIGHT framed pages
 * (Healthcare, stepper-test) and the open/icons views stay byte-identical.
 * Sampled palette: inactive node #768297 (Grey_2, solid) w/ white numeral,
 * active node #2bb0fa, ghost #172c65, card #101b3a on #0b1329.
 * ========================================================================== */

/* --- Desktop: solid grey inactive nodes, brighter active, visible ghost --- */
.block-ll-process--framed.block-ll-process--dark .block-ll-process__circle {
	background: #768297; /* solid fill masks the connector line (was translucent) */
	border-color: #768297;
}
.block-ll-process--framed.block-ll-process--dark .block-ll-process__num { color: #fff; }
.block-ll-process--framed.block-ll-process--dark .block-ll-process__step--active .block-ll-process__circle,
.block-ll-process--framed.block-ll-process--dark .block-ll-process__acc-item--active .block-ll-process__circle {
	background: #2bb0fa;
	border-color: #2bb0fa;
	box-shadow: none;
}
.block-ll-process--framed.block-ll-process--dark .block-ll-process__step--active .block-ll-process__num,
.block-ll-process--framed.block-ll-process--dark .block-ll-process__acc-item--active .block-ll-process__num { color: #fff; }
.block-ll-process--framed.block-ll-process--dark .block-ll-process__ghost { color: #172c65; }

/* --- Mobile: one dark rounded card per step, content centred (circle on top,
 *     label beneath); the active card expands to show the body. Replaces the
 *     shared left-aligned accordion for THIS variant only. --- */
@media (max-width: 767px) {
	.block-ll-process--framed.block-ll-process--dark .block-ll-process__acc { gap: 16px; }
	.block-ll-process--framed.block-ll-process--dark .block-ll-process__acc-item {
		background: #101b3a;
		border: 1px solid rgba(255, 255, 255, 0.08);
		border-radius: 16px;
		padding: 24px 20px;
		gap: 14px;
		text-align: center;
	}
	.block-ll-process--framed.block-ll-process--dark .block-ll-process__acc-item--active {
		border-color: rgba(43, 176, 250, 0.45);
	}
	.block-ll-process--framed.block-ll-process--dark .block-ll-process__acc-head {
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 12px;
		text-align: center;
	}
	.block-ll-process--framed.block-ll-process--dark .block-ll-process__acc-label {
		text-align: center;
		color: #aab6cb;
		font-weight: 600;
	}
	.block-ll-process--framed.block-ll-process--dark .block-ll-process__acc-item--active .block-ll-process__acc-label {
		color: #fff;
		font-weight: 700;
		font-size: 18px;
	}
	.block-ll-process--framed.block-ll-process--dark .block-ll-process__acc-body { text-align: center; }
	/* the "Step N of T" line and the blue left-bar are desktop-only in the mockup */
	.block-ll-process--framed.block-ll-process--dark .block-ll-process__acc .block-ll-process__panel-step { display: none; }
	.block-ll-process--framed.block-ll-process--dark .block-ll-process__acc .block-ll-process__panel-body {
		border-left: 0;
		padding: 0;
		max-width: none;
	}
}