/*
 * Health Library — article teaser grid, homepage [log_health_library]
 * @package log-core
 */

.article-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 26px;
	margin-top: 40px;
}

.article-card {
	display: block;
	background: #fff;
	border-radius: var(--r-md);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	text-decoration: none;
	color: inherit;
	transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}

.article-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }

.article-visual {
	height: 160px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 44px;
	position: relative;
	overflow: hidden;
	transition: transform .4s var(--ease);
}

.article-card:hover .article-visual { transform: scale(1.04); }

.article-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.article-tag {
	position: absolute;
	top: 12px;
	left: 12px;
	background: rgba(255, 255, 255, .92);
	color: var(--plum-700);
	font-size: 10.5px;
	font-weight: 800;
	padding: 5px 11px;
	border-radius: var(--r-pill);
	text-transform: uppercase;
	letter-spacing: .04em;
	z-index: 2;
}

.article-body { padding: 20px; }
.article-body h4 { font-family: var(--display); font-size: 18px; font-weight: 700; line-height: 1.35; margin: 0 0 10px; color: var(--ink-900); }
.article-meta { font-size: 12px; color: var(--gray-600); margin-bottom: 14px; }
.article-link { font-size: 13px; font-weight: 700; color: var(--plum-700); display: inline-flex; align-items: center; gap: 6px; }
.article-link .icon { width: 13px; height: 13px; transition: transform .25s var(--ease); }
.article-card:hover .article-link .icon { transform: translateX(3px); }

@media (max-width: 860px) {
	.article-grid { grid-template-columns: 1fr; }
}