/* @doxallia/design — Marketing CTA card
 * Full-width CTA block with subtle gradient + primary/secondary actions.
 * Class prefix: .mk-cta-card*
 */

.mk-cta-card {
	background: linear-gradient(
		135deg,
		var(--color-surface) 0%,
		var(--color-surface-muted) 100%
	);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg, 12px);
	padding: var(--s-10, 2.5rem) var(--s-8);
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--s-4);
}

/* Full-width variant — edge-to-edge with no radius */
.mk-cta-card--full {
	border-radius: 0;
	border-left: none;
	border-right: none;
	padding: var(--s-12, 3rem) var(--s-6);
	background: var(--color-brand);
}

.mk-cta-card--full .mk-cta-card__title {
	color: var(--color-on-brand);
}
.mk-cta-card--full .mk-cta-card__desc {
	color: rgba(255, 255, 255, 0.8);
}

.mk-cta-card__title {
	font-size: var(--text-2xl, 1.5rem);
	font-weight: var(--fw-bold, 700);
	color: var(--color-text);
	margin: 0;
	line-height: 1.25;
}

.mk-cta-card__desc {
	font-size: var(--text-base);
	color: var(--color-text-muted);
	margin: 0;
	max-width: 36rem;
	line-height: 1.6;
}

.mk-cta-card__actions {
	display: flex;
	gap: var(--s-4);
	flex-wrap: wrap;
	justify-content: center;
	margin-top: var(--s-2);
}

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

@media (max-width: 640px) {
	.mk-cta-card {
		padding: var(--s-8) var(--s-4);
	}
	.mk-cta-card__title {
		font-size: var(--text-xl, 1.25rem);
	}
	.mk-cta-card__actions {
		flex-direction: column;
		align-items: stretch;
	}
}

/* ── Dark mode ───────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
	.mk-cta-card {
		background: linear-gradient(
			135deg,
			var(--color-surface) 0%,
			var(--color-surface-muted) 100%
		);
	}

	.mk-cta-card--full {
		background: var(--color-brand-dark, #10152e);
	}
	.mk-cta-card--full .mk-cta-card__title {
		color: #f1f5f9;
	}
}