/**
 * Post card: featured image on top, category badge, title, excerpt, date and reading time. The
 * surface, border, radius, shadow and hover lift come from the site's Card styles (Card__card and
 * data-hover="lift"). Hand-written; tokens only.
 */

/* The card is a column: image, then body. Overrides Card__padded's inner padding on purpose. */
.PostCard__card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	padding: 0;
}

/* Image area: fixed ratio so the grid never shifts when images load. */
.PostCard__media {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--surface-2);
}

.PostCard__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Text area. */
.PostCard__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--space-3);
	padding: var(--space-6);
}

.PostCard__category {
	align-self: flex-start;
	text-decoration: none;
}

.PostCard__title {
	margin: 0;
	font: var(--text-heading-md);
	color: var(--text-1);
}

.PostCard__title a {
	color: inherit;
	text-decoration: none;
}

/* The whole card is clickable through the title link; keep the focus ring visible on it. */
.PostCard__title a:hover {
	color: var(--color-link-hover);
}

.PostCard__title a:focus-visible {
	outline: 2px solid var(--focus-ring);
	outline-offset: 2px;
}

.PostCard__excerpt {
	margin: 0;
	font: var(--text-body-sm);
	color: var(--text-2);
}

.PostCard__meta {
	margin: auto 0 0;
	padding-top: var(--space-2);
	font: var(--text-caption-strong);
	color: var(--text-2);
}

/* Phone: tighter padding. */
@media (max-width: 640px) {
	.PostCard__body {
		padding: var(--space-5);
	}
}