/* mm-stat-card-stacked
   Fully standalone hero stat card with a top-stacked layout.
   Own class namespace (mm-scs-*) so it cannot collide with mm-stat-card.

   Behavior: the big word or number sits on top at full width, the label
   sits underneath. Handles any headline length without crushing the label.
   Left border and headline color both cycle through the 7-hue palette on
   a 6s rhythm, offset 2s per card. Respects prefers-reduced-motion.
*/

.mm-scs-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 28px 32px 26px;
	border: 1px solid rgba(255, 255, 255, 0.10);
	border-left: 3px solid var(--mm-accent, #00B4FF);
	background: rgba(255, 255, 255, 0.02);
	margin-bottom: 14px;
	min-height: 100%;
	width: 100%;
}

/* When mm-scs-card sits inside a mm-stat-row (flex parent), match the
   stat-card contract: every column is a flex child, every card fills
   its column, no bottom margin so the row spacing owns the gutter. */
.mm-stat-row > [class*="col-"] > .mm-scs-card {
	width: 100%;
	margin-bottom: 0;
}

.mm-scs-num {
	font-size: 32px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--mm-accent, #00B4FF);
	margin: 0 0 18px;
	animation: mmScsNumTwinkle 6s linear infinite;
}

.mm-scs-label {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.75);
	margin: 0;
}

.mm-scs-card:nth-of-type(1) { animation: mmScsBorderTwinkle 6s linear infinite; animation-delay: 0s;  }
.mm-scs-card:nth-of-type(2) { animation: mmScsBorderTwinkle 6s linear infinite; animation-delay: -2s; }
.mm-scs-card:nth-of-type(3) { animation: mmScsBorderTwinkle 6s linear infinite; animation-delay: -4s; }
.mm-scs-card:nth-of-type(4) { animation: mmScsBorderTwinkle 6s linear infinite; animation-delay: -1s; }

.mm-scs-card:nth-of-type(1) .mm-scs-num { animation-delay: 0s;  }
.mm-scs-card:nth-of-type(2) .mm-scs-num { animation-delay: -2s; }
.mm-scs-card:nth-of-type(3) .mm-scs-num { animation-delay: -4s; }
.mm-scs-card:nth-of-type(4) .mm-scs-num { animation-delay: -1s; }

@keyframes mmScsNumTwinkle {
	0%   { color: var(--mm-accent, #00B4FF); }
	14%  { color: var(--mm-pal-violet, #8B5CF6); }
	28%  { color: var(--mm-pal-amber-1, #F59E0B); }
	42%  { color: var(--mm-pal-mint, #22C55E); }
	57%  { color: var(--mm-pal-rose, #EC4899); }
	71%  { color: var(--mm-pal-lime, #A3E635); }
	85%  { color: var(--mm-pal-amber-2, #F97316); }
	100% { color: var(--mm-accent, #00B4FF); }
}

@keyframes mmScsBorderTwinkle {
	0%   { border-left-color: var(--mm-accent, #00B4FF); }
	14%  { border-left-color: var(--mm-pal-violet, #8B5CF6); }
	28%  { border-left-color: var(--mm-pal-amber-1, #F59E0B); }
	42%  { border-left-color: var(--mm-pal-mint, #22C55E); }
	57%  { border-left-color: var(--mm-pal-rose, #EC4899); }
	71%  { border-left-color: var(--mm-pal-lime, #A3E635); }
	85%  { border-left-color: var(--mm-pal-amber-2, #F97316); }
	100% { border-left-color: var(--mm-accent, #00B4FF); }
}

@media (prefers-reduced-motion: reduce) {
	.mm-scs-card,
	.mm-scs-card .mm-scs-num { animation: none; }
	.mm-scs-card { border-left-color: var(--mm-accent, #00B4FF); }
	.mm-scs-num { color: var(--mm-accent, #00B4FF); }
}

/* Under 992px Bootstrap collapses col-md-* to full width. Force every
   parent col to 100% so the stacked cards don't render narrower than
   each other in the flex row, and add a gutter between them. */
@media (max-width: 991px) {
	.mm-stat-row > [class*="col-"] {
		flex: 0 0 100%;
		max-width: 100%;
		margin-bottom: 20px;
	}
	.mm-stat-row > [class*="col-"]:last-child { margin-bottom: 0; }
}

@media (max-width: 768px) {
	.mm-scs-card {
		padding: 24px 24px 22px;
	}
	.mm-scs-num {
		font-size: 28px;
		margin-bottom: 14px;
	}
	.mm-scs-label {
		font-size: 11px;
	}
}