/**
 * Stats widget ("Proven by numbers").
 *
 * Specificity note: base rules use two class levels (e.g. `.tmt-stats .x`) so
 * they beat theme/kit rules like `.elementor-kit-N h3` or `.container p`, while
 * staying below the three-class selectors Elementor generates from the panel
 * controls - those must keep winning. Variable defaults stay on single-class
 * selectors so controls and custom CSS can both override them.
 */

.tmt-stats__grid {
	--tmt-stats-span-large: 6;
	--tmt-stats-span-small: 3;
	--tmt-stats-bar-color: #e4572e;
	--tmt-stats-bar-width: 3px;
	--tmt-stats-bar-gap: 32px;
}

.tmt-stats .tmt-stats__heading {
	margin: 0 0 68px;
	font-family: inherit;
	font-size: 26px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: normal;
	color: #fff;
}

/* Grid ------------------------------------------------------------------- */

.tmt-stats .tmt-stats__grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	row-gap: 52px;
	column-gap: 24px;
}

.tmt-stats .tmt-stats__item {
	min-width: 0;
	padding-inline-start: var(--tmt-stats-bar-gap);
	border-inline-start: var(--tmt-stats-bar-width) solid var(--tmt-stats-bar-color);
}

.tmt-stats .tmt-stats__item--large {
	grid-column: span var(--tmt-stats-span-large);
}

.tmt-stats .tmt-stats__item--small {
	grid-column: span var(--tmt-stats-span-small);
}

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

.tmt-stats .tmt-stats__number {
	font-family: inherit;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: #fff;
	/* A very long figure must never push past its column. */
	overflow-wrap: break-word;
	/* Keeps the tight line box from clipping tall digits. */
	padding-top: 0.06em;
}

.tmt-stats .tmt-stats__item--large .tmt-stats__number {
	margin-bottom: 16px;
	font-size: 190px;
	line-height: 0.85;
}

.tmt-stats .tmt-stats__item--small .tmt-stats__number {
	margin-bottom: 6px;
	font-size: 54px;
	line-height: 1;
}

/* The affixes are inline, so their baseline lines up with the number. */
.tmt-stats .tmt-stats__affix {
	font-weight: inherit;
	line-height: 1;
}

.tmt-stats .tmt-stats__item--large .tmt-stats__affix {
	font-size: 50%;
}

.tmt-stats .tmt-stats__item--small .tmt-stats__affix {
	font-size: 70%;
}

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

.tmt-stats .tmt-stats__label {
	margin: 0;
	font-family: inherit;
	font-weight: 400;
	letter-spacing: normal;
	color: #b8c7d4;
}

.tmt-stats .tmt-stats__item--large .tmt-stats__label {
	font-size: 22px;
	line-height: 1.3;
}

.tmt-stats .tmt-stats__item--small .tmt-stats__label {
	font-size: 15px;
	line-height: 1.4;
}

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

/*
 * The per-row counts normally come from the responsive Layout controls, which
 * Elementor emits at a higher specificity than these rules. They are the
 * fallback for when that generated CSS is missing or stale.
 */
@media (max-width: 1024px) {
	.tmt-stats .tmt-stats__grid {
		--tmt-stats-span-large: 6;
		--tmt-stats-span-small: 6;
	}

	.tmt-stats .tmt-stats__item--large .tmt-stats__number {
		font-size: 130px;
	}

	.tmt-stats .tmt-stats__item--large .tmt-stats__label {
		font-size: 19px;
	}

	.tmt-stats .tmt-stats__item--small .tmt-stats__number {
		font-size: 46px;
	}
}

@media (max-width: 767px) {
	.tmt-stats .tmt-stats__grid {
		--tmt-stats-span-large: 12;
		--tmt-stats-span-small: 12;
	}

	.tmt-stats .tmt-stats__heading {
		font-size: 22px;
		margin-bottom: 40px;
	}

	.tmt-stats .tmt-stats__item--large .tmt-stats__number {
		font-size: 92px;
	}

	.tmt-stats .tmt-stats__item--large .tmt-stats__label {
		font-size: 17px;
	}

	.tmt-stats .tmt-stats__item--small .tmt-stats__number {
		font-size: 38px;
	}
}