/*
 * numbered-cards.css
 * Clients page: "For firms that can't afford to be wrong" section --
 * 5 white cards, each with a yellow numbered circle badge + black
 * bold text, matching Figma. Replaces the old vcex_grid_container
 * icon-box cards (which had icon glyphs, not numbers).
 * Structure: [vc_column_inner .c-numbered-card] > [vc_column_text
 * .c-numbered-card__inner] containing two inline spans
 * (.c-numbered-card__badge + .c-numbered-card__text), laid out with
 * flexbox on the wrapper. Kept flat (no nested vc_row_inner) since
 * WPBakery doesn't reliably render vc_row_inner nested inside
 * vc_column_inner that's itself inside another vc_row_inner.
 * Added 2026-08-25.
 */

.c-numbered-card-grid {
	margin-bottom: 24px;
}

@media (min-width: 768px) {
	.c-numbered-card-grid > .wpb_column:first-child {
		padding-right: 12.5px !important;
	}

	.c-numbered-card-grid > .wpb_column:last-child:not(:first-child) {
		padding-left: 12.5px !important;
	}
}

.c-numbered-card .vc_column-inner {
	background-color: var(--color-white);
	border-radius: 16px;
}

.c-numbered-card__inner {
	padding: 16px 24px;
}

.c-numbered-card__inner p {
	display: flex !important;
	align-items: center;
	gap: 16px;
	margin: 0 !important;
}

.c-numbered-card__badge {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 32px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background-color: var(--color-yellow-bg);
	color: var(--color-off-black-text);
	font-family: var(--font-primary);
	font-weight: var(--font-weight-semibold);
	font-size: 13px;
}

.c-numbered-card__text {
	font-family: var(--font-primary);
	font-weight: var(--font-weight-semibold);
	font-size: 18px;
	color: var(--color-off-black-text);
}

@media (max-width: 767px) {
	.c-numbered-card-grid {
		flex-direction: column;
		margin-bottom: 0 !important;
	}
	.c-numbered-card {
		width: 100%;
		margin-bottom: 16px;
	}
}