/**
 * CCI List
 *
 * A vertical list of rows, each a leading icon plus rich text. The icon comes
 * from the Template preset image (Check / Cross), a per-item Icon Image, or a
 * font/SVG icon. Defaults match the Figma design; Elementor controls override
 * the gaps, icon size and text styling via selectors.
 */
.cci-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.cci-list *,
.cci-list *::before,
.cci-list *::after {
	box-sizing: border-box;
}

/* Row: icon + text, icon aligned to the top of the (possibly multi-line) text. */
.cci-list__item {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	margin: 0;
}

/* Leading icon. Sized by --cci-list-icon-size and nudged down so it centres on
   the first text line (line-height 28px vs a 24px icon). */
.cci-list__icon {
	--cci-list-icon-size: 24px;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--cci-list-icon-size);
	height: var(--cci-list-icon-size);
	margin-top: calc((1.55em - var(--cci-list-icon-size)) / 2);
	color: #0048b4;
}

.cci-list__icon img,
.cci-list__icon svg {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* !important so a theme's `.elementor img` (0,1,1) reset can't win the tie and
   squash the custom list icon image. */
.cci-list__icon img {
	width: 100% !important;
	height: 100% !important;
	object-fit: contain !important;
}

.cci-list__icon svg {
	fill: currentColor;
}

/* Font-icon (<i>): size by font-size rather than width/height. */
.cci-list__icon i {
	font-size: var(--cci-list-icon-size);
	line-height: 1;
}

/* Numbered list: a filled rounded-square badge carrying the row number, matching
   the Figma spec — a 32px square, 8px radius, 16px Semibold number (the number
   and radius scale off --cci-list-number-size, driven by the Badge Size control).
   Colours come from the Icon / Badge and Number colour controls, defaulting to
   the CCI blue on white. */
/* Centre the badge against the whole row so multi-line titles keep it in the
   vertical middle (icon templates stay top-aligned via their own nudge). */
.cci-list--numbered_list .cci-list__item {
	align-items: center;
}

.cci-list__number {
	--cci-list-number-size: 32px;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--cci-list-number-size);
	height: var(--cci-list-number-size);
	border-radius: calc(var(--cci-list-number-size) * 0.25);
	background-color: #0048b4;
	color: #ffffff;
	font-family: "Inter", sans-serif;
	font-weight: 600;
	font-size: calc(var(--cci-list-number-size) * 0.5);
	line-height: 1;
}

/* Text. */
.cci-list__text {
	flex: 1 1 auto;
	min-width: 0;
	color: #ffffff;
	font-family: "Inter", sans-serif;
	font-weight: 500;
	font-size: 18px;
	line-height: 28px;
}

.cci-list__text p {
	margin: 0;
}

.cci-list__text p + p {
	margin-top: 0.5em;
}

/* Bold runs (e.g. the figures) read heavier than the medium body. */
.cci-list__text strong,
.cci-list__text b {
	font-weight: 700;
	color: inherit;
}