/**
 * Card component: used for blog post previews, services, doctor/team
 * bios, and (once Phase 5/6 land) product cards. Kept generic and
 * composable here.
 */

.card {
	display: flex;
	flex-direction: column;
	background-color: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--wp--custom--radius--lg);
	overflow: hidden;
	transition: box-shadow var(--wp--custom--transition--base), transform var(--wp--custom--transition--base);
}

.card:hover {
	box-shadow: var(--wp--custom--shadow--md);
}

.card__media {
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

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

.card__body {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--2xs);
	padding: var(--wp--preset--spacing--sm);
}

.card__title {
	font-size: var(--wp--preset--font-size--lg);
	margin: 0;
}

.card__excerpt {
	font-size: var(--wp--preset--font-size--sm);
	color: var(--color-fg-muted);
}

.card__footer {
	margin-top: auto;
	padding: var(--wp--preset--spacing--sm);
	padding-top: 0;
}

/* entry.php (blog list item) reuses the card visual language. */
.entry {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--2xs);
}

.entry-thumbnail {
	border-radius: var(--wp--custom--radius--lg);
	overflow: hidden;
	aspect-ratio: 16 / 9;
}

.entry-thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.entry-title {
	font-size: var(--wp--preset--font-size--xl);
}

.entry-title a:hover {
	color: var(--wp--preset--color--primary);
}

.entry-meta,
.entry-footer {
	font-size: var(--wp--preset--font-size--sm);
	color: var(--color-fg-muted);
}