/*
 * Icon cards (feature 4-up card variant / plain 6-up icon boxes) and the
 * stat counter band.
 */

/* ------------------------------------------------------------ icon cards */

.asli-icon-cards {
	display: grid;
	grid-template-columns: repeat(var(--asli-icon-cols, 4), minmax(0, 1fr));
	gap: var(--asli-space-lg);
}

@media (max-width: 1024px) {
	.asli-icon-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.asli-icon-cards {
		grid-template-columns: 1fr;
	}
}

.asli-icon-card {
	display: grid;
	gap: var(--asli-space-sm);
	align-content: start;
}

.asli-icon-card--card {
	background: var(--asli-surface);
	border-radius: var(--asli-radius-box);
	box-shadow: var(--asli-shadow-card);
	padding: var(--asli-space-xl);
	transition:
		translate var(--asli-duration) var(--asli-ease),
		box-shadow var(--asli-duration) var(--asli-ease);
}

.asli-icon-card--card:hover {
	translate: 0 -4px;
	box-shadow: var(--asli-shadow-card-hover);
}

.asli-icon-card__icon {
	font-size: 2.5rem;
	color: var(--asli-blue);
}

.asli-icon-card__title {
	margin: 0;
	font-size: var(--asli-text-h4);
}

.asli-icon-card__text {
	margin: 0;
	font-size: var(--asli-text-meta);
}

/* -------------------------------------------------------------- stat band */

.asli-stats {
	background: var(--asli-surface-dark);
	padding-block: var(--asli-space-2xl);
}

.asli-stats__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--asli-space-lg);
}

@media (max-width: 1024px) {
	.asli-stats__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 480px) {
	.asli-stats__grid {
		grid-template-columns: 1fr;
	}
}

.asli-stat {
	display: flex;
	align-items: center;
	gap: var(--asli-space-md);
}

.asli-stat__number {
	display: block;
	font-family: var(--asli-font-heading);
	font-size: 2rem;
	font-weight: var(--asli-weight-heading-bold);
	color: var(--asli-text-on-dark);
	line-height: 1.1;
}

.asli-stat__label {
	color: var(--asli-text-muted-on-dark);
	font-size: var(--asli-text-meta);
}