/* Blog post cards: shared by the blog index (/blog/) and author profile pages. */

.blog-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 28px;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
}
.blog-card {
	background: #ffffff;
	border-radius: 16px;
	overflow: hidden;
	border: 1px solid #eef0f3;
	transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
	display: flex; flex-direction: column;
}
.blog-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 20px 50px rgba(17,12,46,0.10);
	border-color: #d9e6ea;
}
.blog-card__media {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: #f4f6f8;
}
.blog-card__media img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}
.blog-card:hover .blog-card__media img { transform: scale(1.06); }
.blog-card__tag {
	position: absolute; top: 14px; left: 14px;
	padding: 5px 12px;
	border-radius: 999px;
	background: rgba(32,136,162,0.95);
	color: #fff;
	font-size: 11px; font-weight: 500;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	backdrop-filter: blur(4px);
}
.blog-card__body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.blog-card__meta {
	display: flex; align-items: center; gap: 8px;
	font-size: 12px; color: #8a8f96;
	margin-bottom: 10px;
}
.blog-card__meta i { color: #2088a2; font-size: 11px; }
.blog-card__title {
	font-size: 1.2rem; font-weight: 600;
	color: #1a1a1a;
	margin: 0 0 10px;
	line-height: 1.4;
}
.blog-card__excerpt {
	color: #5a6068; font-size: 0.93rem;
	margin: 0 0 18px;
	line-height: 1.6;
	flex: 1;
}
.blog-card__link {
	display: inline-flex; align-items: center; gap: 8px;
	color: #2088a2 !important;
	font-size: 14px; font-weight: 600;
	text-decoration: none !important;
	align-self: flex-start;
	transition: gap 0.25s ease, color 0.25s ease;
}
.blog-card__link:hover { gap: 14px; color: #186e85 !important; }
.blog-card__link i { font-size: 11px; }

/* Empty-state hint when fewer cards are present */
.blog-grid:empty::after { content: "No articles yet — check back soon."; color: #8a8f96; }

/* Author name in the card meta line links to the author's profile */
.blog-card__author { color: inherit; text-decoration: none; font-weight: 500; }
.blog-card__author:hover { color: #2088a2; text-decoration: underline; }