/* Icon card grid — Figma: Value Proposition (46:1736), Key Challenges (82:1614), Post-Pilot Readiness (82:2104) */
.icon-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: clamp(20px, 2.43vw, 35px);
	width: 100%;
}

.icon-card {
	display: flex;
	flex-direction: column;
	gap: clamp(36px, 4.03vw, 58px);
	padding: 28px 28px 31px;
	border-radius: var(--radius-card);
	background: var(--color-card);
}

.icon-card__icon {
	position: relative;
	display: block;
	width: 54px;
	height: 54px;
	border-radius: var(--radius-btn);
}

.icon-card__icon img {
	position: absolute;
	left: 12px;
	top: 12px;
}

.icon-card__icon--amber { background: var(--color-icon-amber); }
.icon-card__icon--green { background: var(--color-icon-green); }
.icon-card__icon--blue { background: var(--color-icon-blue); }
.icon-card__icon--soft { background: var(--color-neutral-5); }

.icon-card__text {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.icon-card__title {
	color: var(--color-dark);
}

.icon-card__desc {
	color: var(--color-neutral-1);
}

/* Tablet: two columns (an odd last card leaves the second cell empty) */
@media (min-width: 768px) and (max-width: 1023px) {
	.icon-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.icon-cards:not(.icon-cards--4) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}