/**
 * "The Problem" section — the bits theme.json can't express: the overlaid image
 * tags, the exact stat sizing, and the source line. Loaded only on pages that
 * contain the pattern.
 */

/* Centred lede sized so it wraps to ~two lines at this width. */
.ab-problem__lede {
	max-width: 820px;
	margin-left: auto;
	margin-right: auto;
	font-size: 1.0625rem;
	line-height: 1.6;
}

/* Equal-height cards: the columns stretch to the tallest, and each card fills
 * its column so a 1-line and a 2-line title still produce same-size cards
 * (matches the design, where all three cards are identical height). */
.ab-problem .wp-block-column {
	display: flex;
}

.ab-problem .ab-card {
	width: 100%;
	height: 100%;
}

/* Card image: a positioned container for the absolute corner tag. */
.ab-problem__media {
	position: relative;
	overflow: hidden;
}

.ab-problem__media .wp-block-cover__inner-container {
	position: static;
	padding: 0;
}

.ab-problem__tag {
	position: absolute;
	top: 16px;
	left: 16px;
	margin: 0;
	padding: 4px 10px;
	background: #ffffff;
	color: #111827;
	font-size: 11px;
	line-height: 1.4;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	border-radius: 4px;
	box-shadow: 0 1px 4px rgba(15, 23, 42, 0.16);
}

/* Stat number: smaller than the hero display size, in the eyebrow blue. */
.ab-problem__num {
	margin: 0;
	font-size: 40px;
	line-height: 1;
	font-weight: 800;
	color: var(--wp--preset--color--ab-blue);
}

/* Stat title: dark, semibold, tight rhythm under the number. */
.ab-problem__title {
	margin: 16px 0 8px;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--wp--preset--color--ab-ink);
}

/* Stat description: left-aligned, relaxed, medium-light gray. */
.ab-problem__desc {
	margin: 0;
	color: #666666;
	line-height: 1.5;
	text-align: left;
}

/* Source line: info icon + text, both light gray. */
.ab-problem__source {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--wp--preset--color--ab-muted);
	font-size: 0.875rem;
}

.ab-problem__source svg {
	flex: 0 0 auto;
}