/**
 * Platform stats strip.
 * Desktop: Figma 2456:40045 | Mobile: 2456:41971
 *
 * @package Fundamento
 */

.platform-stats {
	--pst-bg: var(--color-surface-default, #fff);
	--pst-brand: var(--color-text-brand, #175844);
	--pst-text: var(--color-text-default, #1b1b1b);
	--pst-text-subtle: var(--color-neutral-600);
	--pst-max: 74rem;
	background-color: var(--pst-bg);
}

.platform-stats__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-40, 2.5rem);
	max-width: var(--pst-max);
	margin-inline: auto;
	padding: var(--space-80, 5rem) 0 var(--space-160, 10rem);
}

.platform-stats__heading {
	margin: 0;
	font-family: var(--font-family-display);
	font-size: 2.5rem;
	font-weight: 400;
	line-height: 1.2;
	color: var(--pst-brand);
	text-align: center;
	text-wrap: balance;
}

.platform-stats__track-wrap {
	position: relative;
	width: 100%;
    overflow: hidden;
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.platform-stats__metrics {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-64, 4rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.platform-stats__track-wrap--marquee .platform-stats__metrics {
	justify-content: flex-start;
	width: max-content;
	animation: platform-stats-scroll linear infinite;
}

@keyframes platform-stats-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(calc(-1 * var(--_marquee-half))); }
}

.platform-stats__metric {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.25rem;
	flex-shrink: 0;
	text-align: center;
}

.platform-stats__value {
	margin: 0;
	font-family: var(--font-family-display);
	font-size: 1.75rem;
	font-weight: 400;
	line-height: 1.2;
	color: var(--pst-text);
	white-space: nowrap;
}

.platform-stats__label {
	margin: 0;
	font-family: var(--font-family-body);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.4;
	color: var(--pst-text-subtle);
	white-space: nowrap;
}

@media (max-width: 61.99rem) {
	.platform-stats__inner {
		padding: var(--space-64, 4rem) 0 var(--space-64, 4rem);
		gap: 2.5rem;
	}

	.platform-stats__heading {
		padding-inline: 1.25rem;
		font-size: 1.5rem;
		line-height: normal;
        text-align: left;
        text-wrap: unset;
	}

	.platform-stats__metrics {
		padding-inline: 1.25rem;
	}
	
	.platform-stats--metric-row.platform-stats--journeys .platform-stats__inner{
		padding-top: 64px;
		padding-bottom: 64px;
	}
	.platform-stats--metric-row.platform-stats--journeys .platform-stats__heading{
		text-align: left;
	}
}

.platform-stats--surface-cream {
	--pst-bg: var(--color-bg-default, #f8f7f4);
}

.platform-stats--metric-inline .platform-stats__metric {
	flex-direction: row;
	align-items: center;
	gap: 0.75rem;
}

.platform-stats--metric-inline .platform-stats__inner {
	padding-top: var(--space-36, 2.25rem);
}


.platform-stats--metric-inline .platform-stats__metrics {
	gap: var(--space-40, 2.5rem);
	padding-inline: var(--space-40, 2.5rem);
}

/* Journeys — Outcome stats (Figma 2456:47325) */
.platform-stats--journeys .platform-stats__inner {
	padding-top: var(--space-80, 5rem);
	padding-bottom: var(--space-112, 7rem);
	gap: var(--space-40, 2.5rem);
}

.platform-stats--journeys .platform-stats__heading {
	max-width: 71.875rem;
	margin-inline: auto;
	text-align: center;
	font-family: var(--font-family-body);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.4;
	color: var(--color-text-brand, #175844);
}