/**
 * Component: archive post card (Figma "Frame 6360236": white card, light
 * shadow, title in the h3 style, meta line, excerpt). Cards stack in one
 * column at every width. Colors read the postCard.* hooks (theme.json
 * settings.custom.postCard.*) with today's values as fallbacks.
 */

.post-list {
	display: grid;
	gap: var(--wp--preset--spacing--50);
}

.post-card {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
	background: var(--wp--custom--post-card--background, var(--wp--preset--color--base));
	box-shadow: var(--wp--preset--shadow--sm);
	color: var(--wp--custom--post-card--text, inherit);
}

.post-card__title {
	color: var(--wp--custom--post-card--title, var(--wp--preset--color--primary));
}

/* The meta line sets its own color (post-meta.css); on a card it follows the card's text hook. */
.post-card .post-meta {
	color: var(--wp--custom--post-card--text, var(--wp--preset--color--foreground));
}

/* Two classes: links get their color and underline from the global element styles. */
.post-card__title .post-card__link {
	color: inherit;
	text-decoration: none;
}

.post-card__title .post-card__link:hover {
	text-decoration: underline;
}

.post-card__excerpt {
	margin: 0;
	font-size: var(--wp--preset--font-size--body);
	line-height: var(--wp--custom--line-height--body);
}

.post-list__message {
	margin: 0 0 var(--wp--preset--spacing--50);
	font-size: var(--wp--preset--font-size--body-lg);
	line-height: var(--wp--custom--line-height--body-lg);
}

/* laptop: Figma's desktop insets (40 / 32px). */
@media (min-width: 64em) {
	.post-card {
		padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--60);
	}
}