/**
 * Moyo Stats Counter — v1.1.0
 *
 * File: masterstudy-child/inc/pages/home/stats.css
 * Clean white strip with stat counters, Poppins font,
 * subtle vertical dividers between items.
 * All colors use moyo-brand.css variables.
 */


/* ===================================================
   1. SECTION — white background, bottom border
   =================================================== */
.moyo-stats {
	position: relative;
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(-50vw + 50%) !important;
	margin-right: 0 !important;
	left: auto !important;
	right: auto !important;
	background: var(--moyo-card, #ffffff);
	border-bottom: 1px solid var(--moyo-border, #e5e7eb);
	box-sizing: border-box;
}


/* ===================================================
   2. INNER — dynamic column grid, centered
   =================================================== */
.moyo-stats__inner {
	display: grid;
	max-width: var(--moyo-container-max, 1200px);
	margin: 0 auto;
	padding: 0 40px;
}


/* ===================================================
   3. EACH ITEM — centered text with right divider
   =================================================== */
.moyo-stats__item {
	text-align: center;
	padding: 48px 20px;
	position: relative;
}

/* Subtle vertical divider between items */
.moyo-stats__item:not(:last-child)::after {
	content: '';
	position: absolute;
	right: 0;
	top: 30%;
	height: 40%;
	width: 1px;
	background: var(--moyo-border, #e5e7eb);
}


/* ===================================================
   4. NUMBER — large Poppins, bold
   =================================================== */
.moyo-stats__number {
	font-family: var(--moyo-font-body, 'Poppins', sans-serif) !important;
	font-size: 48px !important;
	font-weight: 700 !important;
	color: var(--moyo-heading, #1e293b) !important;
	line-height: 1 !important;
	margin-bottom: 8px !important;
}

/* Accent color on + and % symbols — light blue & thinner weight */
.moyo-stats .moyo-stats__number span,
.moyo-stats__item .moyo-stats__number span,
section.moyo-stats .moyo-stats__number span {
	color: var(--moyo-accent-highlight, #0ea5e9) !important;
	font-weight: 400 !important;
	-webkit-text-fill-color: var(--moyo-accent-highlight, #0ea5e9) !important;
}

/* Suffix (e.g. "LAKHS") — own line below the number+symbol */
.moyo-stats .moyo-stats__number .moyo-stats__suffix {
	display: block;
	font-size: 18px !important;
	font-weight: 600 !important;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	margin-top: 4px;
}


/* ===================================================
   5. LABEL — muted text below the number
   =================================================== */
.moyo-stats__label {
	font-family: var(--moyo-font-body, 'Poppins', sans-serif) !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	color: var(--moyo-muted, #64748b) !important;
	letter-spacing: 0.2px;
	white-space: nowrap;
}


/* ===================================================
   6. SCROLL REVEAL — fade up + stagger
   =================================================== */
.moyo-stats__item.moyo-reveal {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}
.moyo-stats__item.moyo-reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* Staggered entrance per item */
.moyo-stats__item.moyo-reveal:nth-child(1) { transition-delay: 0s; }
.moyo-stats__item.moyo-reveal:nth-child(2) { transition-delay: 0.1s; }
.moyo-stats__item.moyo-reveal:nth-child(3) { transition-delay: 0.2s; }
.moyo-stats__item.moyo-reveal:nth-child(4) { transition-delay: 0.3s; }


/* ===================================================
   7. RESPONSIVE
   =================================================== */
@media (max-width: 960px) {
	.moyo-stats__inner {
		grid-template-columns: repeat(2, 1fr) !important;
		padding: 0 20px;
	}

	.moyo-stats__item {
		padding: 32px 16px;
	}

	/* Remove divider after 2nd item (end-of-row) */
	.moyo-stats__item:nth-child(2)::after {
		display: none;
	}

	.moyo-stats__number {
		font-size: 36px !important;
	}
}

@media (max-width: 640px) {
	.moyo-stats__inner {
		grid-template-columns: 1fr !important;
	}

	/* Remove all dividers in single column */
	.moyo-stats__item:not(:last-child)::after {
		display: none;
	}

	/* Add bottom border instead */
	.moyo-stats__item:not(:last-child) {
		border-bottom: 1px solid var(--moyo-border, #e5e7eb);
	}

	.moyo-stats__item {
		padding: 28px 16px;
	}

	.moyo-stats__number {
		font-size: 30px !important;
	}

	.moyo-stats__label {
		font-size: 12px !important;
	}
}