/**
 * Stats Promo Panel
 * ============================================================================
 * Three-column stats promo section with icons and statistics.
 *
 * Load order: After base.css, before page-specific styles
 * Dependencies: 00-tokens.css (design tokens)
 * ============================================================================
 */

/* ==========================================================================
   Base Styles
   ========================================================================== */

.three-column-stats-promo {
	background-color: var(--cream);
}

.three-column-stats-promo.blue-bg {
	background-color: var(--bg-1);
}

.three-column-stats-promo .content {
	padding: 62px 100px 43px;
}

.three-column-stats-promo .content .promos {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.three-column-stats-promo .content .promos .promo .top {
	display: flex;
	align-items: center;
	justify-content: left;
}

.three-column-stats-promo .promo {
	_border-right: 1px solid var(--grey);
	height: fit-content;
	min-width: 270px;
	padding: 10px 0;
	width: 30%;
	display: flex;
	align-items: flex-start;
}

.three-column-stats-promo .promo:last-of-type {
	border-right: none;
}

.three-column-stats-promo img {
	border-radius: 20px;
	height: 96px;
	margin-right: var(--space-5);
	width: 96px;
	flex-shrink: 0;
}

.three-column-stats-promo h3 {
	color: var(--brand-main);
	display: inline-block;
	font-weight: 900;
	font-size: 48px;
	letter-spacing: -1.66px;
	margin: 20px 0 10px;
}

.three-column-stats-promo p {
	color: var(--black);

	/* font-family handled by utility class */
	font-weight: 700;
	font-size: 19px;
}

.three-column-stats-promo .sub-copy {
	padding: 30px 20px 0 0;
}

.three-column-stats-promo h4 {
	color: var(--brand-main);
	font-weight: 700;
	font-size: 24px;
	line-height: 26px;
}

/* ==========================================================================
   Responsive: Desktop and below (max-width: 1024px)
   ========================================================================== */

@media (max-width: 1024px) {
	.three-column-stats-promo .content .promos {
		display: inline-block;
	}

	.three-column-stats-promo .promo {
		border-right: 0;
		height: fit-content;
		margin-bottom: var(--space-8);
		padding: var(--space-0);
		width: 100%;
	}
}

/* ==========================================================================
   Responsive: Mobile (max-width: 480px)
   ========================================================================== */

@media (max-width: 480px) {
	.three-column-stats-promo .content {
		padding: 40px 24px 0;
	}
}