/* @doxallia/design — Marketing feature grid
 * Responsive grid of feature / benefit / step cards.
 * Class prefix: .mk-feature-grid*
 */

.mk-feature-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: var(--s-6);
}

/* Numbered steps variant — 4-item horizontal row */
.mk-feature-grid--steps {
	grid-template-columns: repeat(4, 1fr);
	counter-reset: mk-step;
}

.mk-feature-grid__item {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg, 12px);
	padding: var(--s-6);
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
}

/* On alt section background, invert card surface */
.mk-section--alt .mk-feature-grid__item {
	background: var(--color-surface);
}

/* Icon slot */
.mk-feature-grid__icon {
	width: 2.5rem;
	height: 2.5rem;
	background: var(--color-brand-active, #eae9ef);
	color: var(--color-brand);
	border-radius: var(--radius-md, 6px);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.25rem;
	flex-shrink: 0;
}

/* Step number — auto-incremented via counter */
.mk-feature-grid--steps .mk-feature-grid__item {
	counter-increment: mk-step;
	position: relative;
}

.mk-feature-grid--steps .mk-feature-grid__item::before {
	content: counter(mk-step);
	width: 2rem;
	height: 2rem;
	background: var(--color-brand);
	color: var(--color-on-brand);
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: var(--fw-bold, 700);
	font-size: var(--text-sm);
	flex-shrink: 0;
}

.mk-feature-grid__title {
	font-size: var(--text-base);
	font-weight: var(--fw-semibold, 600);
	color: var(--color-text);
	margin: 0;
}

.mk-feature-grid__desc {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	line-height: 1.6;
	margin: 0;
	flex: 1;
}

/* Optional CTA link inside card */
.mk-feature-grid__link {
	font-size: var(--text-sm);
	font-weight: var(--fw-medium, 500);
	color: var(--color-brand);
	text-decoration: none;
	margin-top: auto;
	align-self: flex-start;
}

.mk-feature-grid__link:hover {
	text-decoration: underline;
}

/* ── Responsive ─────────────────────────────────────────── */

@media (max-width: 1024px) {
	.mk-feature-grid--steps {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {
	.mk-feature-grid,
	.mk-feature-grid--steps {
		grid-template-columns: 1fr;
	}
}

/* ── Dark mode ──────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
	.mk-feature-grid__icon {
		background: rgba(255, 255, 255, 0.08);
		color: var(--color-brand-text);
	}

	.mk-feature-grid--steps .mk-feature-grid__item::before {
		background: var(--color-brand-text);
		color: var(--color-bg);
	}

	.mk-feature-grid__link {
		color: var(--color-brand-text);
	}
}