/* ================================================
Component: Stat Cards
Path: components/flexible/stat_cards/style.css
================================================ */
:is(body, .is-preview) {
	.stat-cards .heading-and-text {
		padding-top: var(--gap-3xl);
		margin-bottom: var(--gap-xl);
	}
	.stat-cards .heading-and-text h2 {
		color: var(--color-kale);
	}
	.stat-cards__grid {
		display: grid;
		gap: 40px;
		grid-template-columns: 1fr 1fr;
		padding-bottom:40px;
	}
	.stat-cards__grid.cols-2 {
		display: flex;
		flex-wrap: wrap;
		gap: 14px;
	}
	.stat-cards__card {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
		border-radius: var(--radius-md);
		width: calc(50% - 14px);
	}
	.stat-cards__card--stat,
	.stat-cards__card:has(.stat-cards__card-text) {
		padding: 33px 5px;
		gap: var(--gap-xs);

		&.bg-navy {
			background-color: rgba(60, 69, 89, .25);
		}
		&.bg-tan {
			background-color: rgba(215, 207, 182, .5);
		}
		&.bg-yellow {
			background-color: rgba(244, 179, 53, .25);
		}
		&.bg-green {
			background-color: var(--color-bg-stat);

			.stat-cards__card-text {
				color: var(--color-kale);
			}
		}
		&.bg-dark-green {
			background-color: rgba(36, 69, 23, .25);

			.stat-cards__card-text {
				color: var(--color-kale);
			}
		}
		&.bg-red {
			background-color: rgba(195, 60, 50, .25);
		}
		&.bg-brown {
			background-color: rgba(88, 69, 71, .25);
		}
		&.bg-gray {
			background-color: rgba(125, 125, 125, .25);
		}
	}
	.stat-cards__card-image {
		width: 100%;
		height: 100%;
		overflow: hidden;
		flex: 1;
	}
	.stat-cards__card-image img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
		border-radius: var(--radius-md);
	}
	.stat-cards__card-text {
		font-weight: var(--font-weight-extrabold);
		font-size: 20px;
		color: var(--color-navy);
		text-align: center;
		font-family: var(--font-display);
		line-height: 26px;
		letter-spacing: 0;
	}
	.stat-cards__card-text span{
		font-family: var(--font-primary);
		font-size: 32px;
		font-style: normal;
		line-height: normal;
		letter-spacing: 0;
	}
	.stat-cards__card-link {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: var(--gap-xs);
		text-decoration: none;
		color: inherit;
		width: 100%;
		height: 100%;
	}
	.stat-cards__card-image + .stat-cards__card-text {
		margin-top: var(--gap-xs);
	}
	.stat-cards__grid.cols-1 {
		grid-template-columns: 1fr 1fr;
	}
	@media (min-width: 768px) {
		.stat-cards__card-text {font-size: var(--font-size-lg);line-height: 36px;}
		.stat-cards__card-text span{font-size: var(--font-size-2xl);}
	}
	@media (min-width: 992px) {
		.stat-cards__grid.cols-2 {gap: 20px;}
		.stat-cards__card {width: calc(25% - 15px);}
		.stat-cards__card--stat,
		.stat-cards__card:has(.stat-cards__card-text) {padding: 30px 14px;}
		.stat-cards__grid {padding-bottom:60px;}
	}
	@media (min-width: 1200px) {
		.stat-cards__grid.cols-2 {gap: 40px;}
		.stat-cards__card {width: calc(25% - 30px);}
		.stat-cards__card-text {font-size: var(--font-size-xl);}
		.stat-cards__card--stat,
		.stat-cards__card:has(.stat-cards__card-text) {padding: 46px 14px;}
		.stat-cards__card-text {font-size: var(--font-size-xl);line-height: 36px;letter-spacing: 0.18px;}
		.stat-cards__card-text span{font-size: var(--font-size-3xl);letter-spacing: 0.36px;}
	}
	@media (max-width: 991px) {
		.stat-cards__grid.cols-2:has(.col-count-3) .stat-cards__card { order: unset; }
		.stat-cards__grid.cols-2:not(:has(.col-count-3)) .row-odd.stat-cards__card--image  { order: 1; }
		.stat-cards__grid.cols-2:not(:has(.col-count-3)) .row-odd.stat-cards__card--stat   { order: 2; }
		.stat-cards__grid.cols-2:not(:has(.col-count-3)) .row-even.stat-cards__card--stat  { order: 3; }
		.stat-cards__grid.cols-2:not(:has(.col-count-3)) .row-even.stat-cards__card--image { order: 4; }
	}
	@media(max-width:575px){
		.stat-cards__card-image img {height:160px;}
	}
}