/**
 * Statistics Card
 *
 * FIGORA ONE v2.1
 */

/*--------------------------------------------------------------
# Statistics Section
--------------------------------------------------------------*/

.section-statistics{
	padding:5rem 0;
	background:var(--color-surface);
}

.statistics-grid{
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
	gap:2rem;
	margin-top:3rem;
}

/*--------------------------------------------------------------
# Card
--------------------------------------------------------------*/

.stat-card{
	height:100%;
}

.stat-card__inner{
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;

	height:100%;

	padding:2rem;

	background:var(--color-surface);

	border:1px solid var(--color-border);
	border-radius:20px;

	text-align:center;

	box-shadow:var(--shadow-md);

	transition:
		transform var(--transition),
		box-shadow var(--transition),
		border-color var(--transition);
}

.stat-card__inner:hover,
.stat-card__inner:focus-within{

	transform:translateY(-6px);

	border-color:var(--color-primary);

	box-shadow:var(--shadow-xl);
}

/*--------------------------------------------------------------
# Icon
--------------------------------------------------------------*/

.stat-card__icon{
	display:flex;
	align-items:center;
	justify-content:center;

	width:80px;
	height:80px;

	margin-bottom:1.5rem;

	border-radius:50%;

	background:#eff6ff;

	font-size:2rem;

	color:var(--color-primary);
}

/*--------------------------------------------------------------
# Number
--------------------------------------------------------------*/

.stat-card__number{
	margin:0;

	font-size:3rem;
	font-weight:700;
	line-height:1.2;

	color:var(--color-heading);
}

/*--------------------------------------------------------------
# Label
--------------------------------------------------------------*/

.stat-card__label{
	margin:.75rem 0 0;

	font-size:1rem;
	line-height:1.6;

	color:var(--color-muted);
}

/*--------------------------------------------------------------
# Responsive
--------------------------------------------------------------*/

@media (max-width:767px){

	.section-statistics{
		padding:4rem 0;
	}

	.statistics-grid{
		grid-template-columns:1fr;
	}

	.stat-card__icon{
		width:72px;
		height:72px;
	}

	.stat-card__number{
		font-size:2.5rem;
	}

}