.wppo-stats-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	margin-bottom: 28px;

	@include respond-to('xl') {
		grid-template-columns: repeat(2, 1fr);
	}

	@include respond-to('sm') {
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
	}
}

.wppo-stacked-cards {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.wppo-grid-2-col {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;

	@include respond-to('lg') {
		grid-template-columns: 1fr;
	}
}

.wppo-stat-item {
	padding: 20px;
	background: var(--wppo-bg-card);
	border: 1px solid var(--wppo-border);
	border-radius: var(--wppo-radius);
	box-shadow: var(--wppo-shadow-sm);
	transition: var(--wppo-transition);
	position: relative;
	overflow: hidden;

	&::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 3px;
		background: linear-gradient(90deg, var(--wppo-primary), #818cf8);
		opacity: 0;
		transition: opacity 0.2s ease;
	}

	&:hover {
		box-shadow: var(--wppo-shadow);
		border-color: var(--wppo-border-hover);

		&::before {
			opacity: 1;
		}
	}

	.wppo-stat-header {
		margin-bottom: 10px;
	}

	.wppo-stat-label {
		font-size: 11px;
		font-weight: 700;
		color: var(--wppo-text-light);
		text-transform: uppercase;
		letter-spacing: 0.08em;
		display: block;
	}

	.wppo-stat-value {
		font-size: 28px;
		font-weight: 800;
		color: var(--wppo-text-main);
		display: block;
		margin-bottom: 12px;
		line-height: 1;
		letter-spacing: -0.03em;

		@include respond-to('sm') {
			font-size: 22px;
		}
	}

	.wppo-stat-link {
		font-size: 12px;
		color: var(--wppo-primary);
		text-decoration: none;
		font-weight: 600;
		display: inline-flex;
		align-items: center;
		gap: 4px;
		transition: var(--wppo-transition);
		background: none;
		border: none;
		padding: 0;
		cursor: pointer;

		&:hover {
			color: var(--wppo-primary-hover);
			text-decoration: underline;
		}
	}
}