/**
 * ==================================================
 * ACE Score Hero
 * ==================================================
 *
 * Assessment score hero component.
 *
 * @package ACE_Assessment_Engine
 */
 
 /* ==================================================
   ACE SCORE HERO
================================================== */

.ace-score-hero{

	display:flex;
	
	max-width:1100px;

margin:40px auto;

	flex-direction:column;

	align-items:center;

	justify-content:center;

	gap:18px;

	padding:48px;

	margin-bottom:32px;

	background:linear-gradient(
		180deg,
		#FFFFFF,
		#F8F9FC
	);

	border:1px solid var(--ace-border);

	border-radius:28px;

	box-shadow:var(--ace-shadow-card);

	text-align:center;

}

.ace-score-hero-percent{

	font-size:5rem;

	font-weight:800;

	line-height:1;

	color:var(--ace-primary);

}

	font-weight:800;

	line-height:1;

	color:var(--ace-primary);

}

.ace-score-hero-score{
    
    letter-spacing:.02em;

	font-size:1.5rem;

	font-weight:600;

	color:var(--ace-text-secondary);

}

.ace-score-hero-title{

	margin:0;

	font-size:1.4rem;

	font-weight:700;

	color:var(--ace-text);

}

/* ==================================================
   ACE SCORE HERO STATS
================================================== */

.ace-score-hero-stats{

	display:grid;

	grid-template-columns:repeat(4,160px);

	justify-content:center;

	gap:24px;

	margin-top:40px;

}

.ace-score-hero-stats .ace-stat{

	width:160px;

	min-height:120px;

	display:flex;

	flex-direction:column;

	align-items:center;

	justify-content:center;

	padding:20px;

	background:#FFFFFF;

	border:1px solid var(--ace-border);

	border-radius:20px;

	box-shadow:0 6px 18px rgba(0,0,0,.06);

	margin:0;

	transition:.25s ease;

}

.ace-score-hero-stats .ace-stat:hover{

	transform:translateY(-2px);

	box-shadow:0 12px 28px rgba(0,0,0,.10);

}