/* Callout Stack Block */

.callout-stack {
	padding: 2rem 0;
}

.callout-stack__container {
	max-width: 1200px;
}

.callout-stack__grid {
	/* gap: 2rem;
	align-items: start; */
}

/* 3 Column Layout */
/* .callout-stack__grid--col-3 {
	grid-template-columns: repeat(3, 1fr);
} */

/* 4 Column Layout */
/* .callout-stack__grid--col-4 {
	grid-template-columns: repeat(4, 1fr);
} */

/* Auto-center when fewer stats */
.callout-stack__grid--col-3 {
	/* justify-items: center; */
}

.callout-stack__grid--col-4 {
	/* justify-items: center; */
}

.callout-stack__stat {
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: start;
	gap: 1rem;
}

/* ===== Percent Dial Mode ===== */
.callout-stack__dial-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 180px;
  margin: 0 auto;
  aspect-ratio: 1;
}

.callout-stack__dial {
	width: 100%;
	height: 100%;
	transform: rotate(-90deg);
	transform-origin: 50% 50%;
}

.callout-stack__dial-background {
	stroke: #e8e8e8;
}

.callout-stack__dial-fill {
	stroke: #0070B9;
	transition: stroke-dasharray 1s linear;
}

/* Dial Colors */
.callout-stack__dial-fill[data-color="yellow"] {
	stroke: #FFC700;
}

.callout-stack__dial-fill[data-color="blue"] {
	stroke: #0070B9;
}

.callout-stack__dial-fill[data-color="grey"] {
	stroke: #999999;
}

.callout-stack__dial-fill[data-color="accent-blue"] {
	stroke: #96d1f5;
}

.callout-stack__dial-center {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

.callout-stack__dial-value {
	font-size: 50px;
	font-weight: 700;
	color: #152c47;
	line-height: 1;
  margin-bottom: 0;
}

.callout-stack__dial-suffix {
	font-size: 1.2rem;
	margin-left: 4px;
}

/* ===== Countup Number Mode ===== */
.callout-stack__number-wrapper {
	display: flex;
	align-items: baseline;
	justify-content: center;
	margin: 0;
  width: 100%;
}

/* Alignment variants for countup */
.callout-stack__number-wrapper--left {
	justify-content: flex-start;
}

.callout-stack__number-wrapper--center {
	justify-content: center;
}

.callout-stack__number-wrapper--right {
	justify-content: flex-end;
}

.callout-stack__number-value {
	font-size: 80px;
	font-weight: 600;
	color: #0070B9;
	line-height: 1;
  letter-spacing: 0px;
}

.callout-stack__number-suffix { 
	font-size: 45px;
	color: #0070B9;
	font-weight: 500;
  line-height: 1;
}

/* ===== Static Number Mode ===== */
.callout-stack__static-wrapper {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 0.5rem;
	margin: 0;
  width: 100%;
}

/* Alignment variants for static */
.callout-stack__static-wrapper--left {
	justify-content: flex-start;
}

.callout-stack__static-wrapper--center {
	justify-content: center;
}

.callout-stack__static-wrapper--right {
	justify-content: flex-end;
}

.callout-stack__static-value {
	font-size: 80px;
	font-weight: 600;
	color: #0070B9;
	line-height: 1;
}

.callout-stack__static-suffix {
	font-size: 45px;
	color: #0070B9;
	font-weight: 500;
}

/* ===== Sub Header Alignment ===== */
.callout-stack__subheader {
	font-weight: bold;
	line-height: 1;
	margin: 0;
	color: #063354;
  max-width: 200px;
}

.callout-stack__subheader--left {
	text-align: left;
	align-self: flex-start;
}

.callout-stack__subheader--center {
	text-align: center;
	align-self: center;
}

.callout-stack__subheader--right {
	text-align: right;
	align-self: flex-end;
}

/* ===== Responsive Design ===== */
@media (max-width: 1024px) {
	/* .callout-stack__grid--col-3 {
		grid-template-columns: repeat(2, 1fr);
	}

	.callout-stack__grid--col-4 {
		grid-template-columns: repeat(2, 1fr);
	} */

	.callout-stack__dial-value {
		font-size: 1.75rem;
	}

	.callout-stack__dial-suffix {
		font-size: 1rem;
	}

}

@media (max-width: 768px) {

}

@media (max-width: 480px) {
	.callout-stack {
		padding: 1rem 0;
	}

	.callout-stack__grid {
		gap: 1rem;
	}

	.callout-stack__dial-wrapper {
		width: 120px;
		height: 120px;
	}

	.callout-stack__dial-value {
		font-size: 1.25rem;
	}

	.callout-stack__number-value {
		font-size: 1.5rem;
	}

	.callout-stack__static-value {
		font-size: 1.5rem;
	}

	.callout-stack__subheader {
		font-size: 0.85rem;
	}
}