/* Shared editorial card used by the home preview and the posts archive. */
.c-article-card {
	display: flex;
	min-width: 0;
	flex-direction: column;
	border: 1px solid var(--calora-border);
	border-radius: var(--calora-radius-md);
	background: var(--calora-surface);
	overflow: hidden;
	transition: border-color 180ms ease, transform 180ms ease;
}

.c-article-card:hover {
	border-color: rgb(138 98 72 / 40%);
	transform: translateY(-2px);
}

.c-article-card__media {
	display: grid;
	aspect-ratio: 16 / 10;
	place-items: center;
	background: var(--calora-accent-light);
	overflow: hidden;
	text-decoration: none;
}

.c-article-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 300ms ease;
}

.c-article-card:hover .c-article-card__image {
	transform: scale(1.025);
}

.c-article-card__placeholder {
	color: rgb(32 32 30 / 38%);
	direction: ltr;
	font-size: clamp(13px, 4vw, 20px);
	font-weight: 800;
	letter-spacing: .12em;
}

.c-article-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: flex-start;
	padding: var(--calora-space-5);
}

.c-article-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--calora-space-2);
	margin-bottom: var(--calora-space-3);
	color: var(--calora-text-muted);
	font-size: 11px;
	line-height: 1.7;
}

.c-article-card__title {
	margin: 0;
	font-size: clamp(20px, 5vw, 27px);
	font-weight: 700;
	letter-spacing: -.015em;
	line-height: 1.65;
}

.c-article-card__title a {
	text-decoration: none;
}

.c-article-card__excerpt {
	display: -webkit-box;
	margin: var(--calora-space-3) 0 0;
	color: var(--calora-text-muted);
	font-size: 13px;
	line-height: 1.95;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}

.c-article-card__action {
	display: inline-flex;
	min-height: 44px;
	align-items: center;
	gap: var(--calora-space-2);
	margin-top: auto;
	padding-top: var(--calora-space-5);
	font-size: 13px;
	font-weight: 600;
}

.c-article-card__action svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.8;
	transition: transform 180ms ease;
}

.c-article-card__action:hover svg,
.c-article-card__action:focus-visible svg {
	transform: translateX(-4px);
}

@media (prefers-reduced-motion: reduce) {
	.c-article-card,
	.c-article-card__image,
	.c-article-card__action svg {
		transition: none;
	}
}