/* =====================================================================
   Home — Blog grid (4×2 desktop, 2 tablet, 1 mobile).
   ================================================================== */

.jviens-blog {
	padding: clamp(40px, 6vw, 80px) 0;
	background: var(--jv-bg);
}
.jviens-blog__inner {
	max-width: var(--jv-container);
	margin: 0 auto;
	padding: 0 var(--jv-gutter);
}

.jviens-blog__grid {
	margin-top: 32px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 28px;
}

.jviens-blog-card {
	display: flex;
	flex-direction: column;
	background: var(--jv-bg);
	border: 1px solid var(--jv-border);
	border-radius: var(--jv-radius);
	overflow: hidden;
	transition: transform .15s ease, box-shadow .15s ease;
}
.jviens-blog-card:hover { transform: translateY(-2px); box-shadow: var(--jv-shadow-md); }

.jviens-blog-card__media {
	display: block;
	background: var(--jv-purple-50);
	overflow: hidden;
}
.jviens-blog-card__img {
	width: 100%;
	height: auto;
	display: block;
	transition: transform .3s ease;
}
.jviens-blog-card:hover .jviens-blog-card__img { transform: scale(1.03); }

.jviens-blog-card__img-placeholder {
	display: flex; align-items: center; justify-content: center;
	width: 100%; height: 100%;
	color: var(--jv-purple-300);
}
.jviens-blog-card__img-placeholder svg { width: 48px; height: 48px; }

.jviens-blog-card__body {
	padding: 20px;
	display: flex;
	flex-direction: column;
	flex: 1;
}
.jviens-blog-card__meta {
	display: flex; align-items: center; gap: 12px;
	margin-bottom: 8px;
	font-size: 12px;
	color: var(--jv-ink-muted);
	letter-spacing: .04em;
	text-transform: uppercase;
}
.jviens-blog-card__cat {
	color: var(--jv-purple-700);
	font-weight: 600;
	text-decoration: none;
}
.jviens-blog-card__cat:hover { color: var(--jv-purple-900); }
.jviens-blog-card__date { color: var(--jv-ink-muted); }

.jviens-blog-card__title {
	margin: 0 0 10px;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--jv-ink);
}
.jviens-blog-card__title a {
	color: inherit;
	text-decoration: none;
	background-image: linear-gradient( to right, var(--jv-purple-700), var(--jv-purple-700) );
	background-size: 0% 2px;
	background-repeat: no-repeat;
	background-position: 0 100%;
	transition: background-size .2s ease;
}
.jviens-blog-card__title a:hover { background-size: 100% 2px; }

.jviens-blog-card__excerpt {
	margin: 0;
	color: var(--jv-ink-muted);
	font-size: 14px;
	line-height: 1.6;
}

/* lg → 3 col */
@media (max-width: 1199.98px) {
	.jviens-blog__grid { grid-template-columns: repeat(3, 1fr); }
}
/* md → 2 col */
@media (max-width: 899.98px) {
	.jviens-blog__grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
/* sm → 1 col */
@media (max-width: 599.98px) {
	.jviens-blog__grid { grid-template-columns: 1fr; gap: 16px; }
}