/* =============================================================================
   The blog post card — styles _partials/post-card.html.

   The home page's card (Figma v4zuHnfQeDWmJsqAyNqiDq, 348x347 desktop, the
   282x262 mobile variant), moved here unchanged so Labs shows the same card.
   The page owns the grid the cards sit in, including column widths.

   .post-card--dark is the same card in black, for a light section (Labs); only
   the colours change.
   ========================================================================== */

.post-card {
	height: 347px;
	padding: 30px 29px 2px 28px;
	background: var(--color-cream);
	border-radius: var(--radius-panel-lg);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-4);
	text-align: center;
	text-decoration: none;
	transition: box-shadow var(--transition);
}

.post-card:hover {
	box-shadow: var(--shadow-md);
}

.post-card__img {
	display: block;
	width: 100%;
	height: 192px;
	object-fit: cover;
	border-radius: 30px;
}

.post-card__cat {
	margin: 0;
	font-size: var(--text-xs);
	letter-spacing: var(--ls-label);
	color: var(--color-black);
}

.post-card__title {
	margin: 0;
	max-width: 291px;
	font: var(--body-s);
	line-height: 1.35;
	letter-spacing: normal;
	color: var(--color-black);
}

.post-card--dark {
	background: var(--color-black);
}

.post-card--dark .post-card__cat {
	color: var(--color-sand-soft);
}

.post-card--dark .post-card__title {
	color: var(--color-cream);
}

@media (max-width: 767px) {
	/* Figma mobile: fixed 282x262 cards — the image takes the space left above
	   the category and title, which sit at the foot. */
	.post-card {
		width: 100%;
		max-width: 282px;
		height: 262px;
		border-radius: var(--radius-card-sm);
		padding: 14px 14px 20px;
		gap: 0; /* mobile spaces with margins, not the gap */
	}
	.post-card__img {
		flex: 1 1 auto;
		height: auto;
		min-height: 0;
		margin-bottom: 14px;
	}
	.post-card__cat {
		margin-bottom: var(--space-2);
	}
	.post-card__title {
		max-width: none;
		font-size: var(--text-md);
	}
}