/*
 * Card component. Used for solution/project summaries — establishing the
 * visual language per the Phase 3 design system.
 */
.mc-card {
	display: flex;
	flex-direction: column;
	background-color: var(--mc-background);
	border: 1px solid var(--mc-border);
	border-radius: var(--mc-radius-md);
	box-shadow: var(--mc-shadow-sm);
	overflow: hidden;
	transition: box-shadow var(--mc-transition-base), transform var(--mc-transition-base);
}

.mc-card:hover {
	box-shadow: var(--mc-shadow-md);
	transform: translateY(-2px);
}

.mc-card__media {
	aspect-ratio: 16 / 9;
	background-color: var(--mc-surface);
}

.mc-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mc-card__media--article {
	margin-block: var(--mc-space-5);
	max-width: 800px;
	aspect-ratio: auto;
}

.mc-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--mc-space-2);
	padding: var(--mc-space-5);
}

.mc-card__title {
	margin: 0;
	font-size: var(--mc-font-size-h4);
}

.mc-card__excerpt {
	margin: 0;
	color: var(--mc-text-muted);
	font-size: var(--mc-font-size-small);
}

.mc-card--link {
	color: inherit;
	text-decoration: none;
}

.mc-card__media-placeholder {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, var(--mc-surface), var(--mc-border));
}