/* ==========================================================================
   Post Card (Blog Card)
   ========================================================================== */

.blog-card {
	background: var(--color-white);
	border-radius: var(--radius-xl);
	overflow: hidden;
	border: 1px solid var(--color-neutral-200);
	transition: all var(--transition-default);
}

.blog-card:hover {
	border-color: var(--color-neutral-200);
	box-shadow: var(--shadow-lg);
	transform: translateY(-4px);
}

.blog-card-link {
	display: block;
	text-decoration: none;
	color: inherit;
}

.blog-card-image {
	aspect-ratio: 16/9;
	overflow: hidden;
}

.blog-card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--transition-slow);
}

.blog-card:hover .blog-card-image img {
	transform: scale(1.05);
}

.blog-card-content {
	padding: var(--spacing-4);
}

.blog-card-date {
	font-size: var(--font-size-xs);
	color: var(--color-neutral-500);
	display: block;
	margin-bottom: var(--spacing-2);
}

.blog-card-title {
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-semibold);
	color: var(--color-neutral-900);
	margin-bottom: var(--spacing-2);
	line-height: var(--line-height-tight);
}

.blog-card-excerpt {
	font-size: var(--font-size-sm);
	color: var(--color-neutral-500);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}