/*
 * Stats bar — 4 white cards (delivery/payment/support/insurance), matches reference.
 * @package log-core
 */

.stats-wrap {
	padding: 56px 24px 76px;
	background: var(--white);
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}

.stats-grid {
	max-width: 1220px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

.stat-item {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	border-radius: 18px;
	padding: 26px 22px;
	transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
}

.stat-item:hover {
	background: var(--paper);
	box-shadow: 0 8px 24px rgba(26, 85, 196, .08);
	transform: translateY(-3px);
}

.stat-icon {
	width: 48px;
	height: 48px;
	border-radius: 13px;
	flex-shrink: 0;
	background: linear-gradient(135deg, var(--sage-100), var(--plum-50));
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--plum-700);
	transition: transform .3s var(--ease);
}

.stat-item:hover .stat-icon { transform: scale(1.08) rotate(-6deg); }
.stat-icon .icon { width: 21px; height: 21px; }
.stat-item strong { display: block; font-size: 15px; font-weight: 700; color: var(--ink-900); }
.stat-item .stat-desc { display: block; font-size: 12.5px; line-height: 1.55; color: var(--ink-700); margin-top: 4px; }

@media (max-width: 1020px) {
	.stats-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Matches website_reference/homepage_5.html: stats stay a 2-col grid of
   centered, bordered cards all the way down (never collapse to 1 col —
   design-tokens.css's shared .section-block 760px rule forces 1fr on
   .stats-grid too, so it's overridden here with a more specific selector). */
@media (max-width: 760px) {
	.stats-wrap { padding: 32px 0; }

	.stats-wrap .stats-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
		padding: 0 20px;
	}

	.stat-item {
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 10px;
		padding: 18px 12px;
		border: 1px solid var(--line);
		border-radius: 16px;
	}

	.stat-item strong { font-size: 13.5px; }
}