/**
 * Component: blogpost card (parts/components/blogpost-card.php).
 *
 * Figma card/blogpost 1613:49601, pulled 2026-09-16.
 *   desktop 1613:49600 — 391 wide, a 1px light rule down the left and 16px
 *     padding after it, 16px gaps: a 290px image area with 16px padding and
 *     the two tags in its top left corner, the title (header/XS), then the
 *     date, a 6px dot and the read time (subtitle/M, the read time grey).
 *   mobile 1234:20354 — 272 wide, image 240x178, title header/2XS, and a 16px
 *     arrow at the right end of the date row.
 * Both: image radius 20, first tag primary (the project type), second
 * secondary (the category).
 */

/* ------------------------------------------------------------------
 * Filled tag/small, shared with the article hero (article.css) and the
 * Insights list (blogpost-list.css): 4px above the text and 6px below,
 * primary for a project type and secondary for a content type.
 * ---------------------------------------------------------------- */

.tag-pill {
	display: inline-flex;
	align-items: center;
	padding: 0.25rem 0.625rem 0.375rem;
	font: var(--type-subtitle-s);
	color: var(--color-text-white);
	white-space: nowrap;
	background-color: var(--color-primary);
	border-radius: 100px;
}

.tag-pill--secondary {
	color: var(--color-text-dark);
	background-color: var(--color-secondary);
}

.blogpost-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	width: 17rem; /* 272 */
	padding-inline: 1rem;
	border-left: 1px solid var(--color-border-light);
}

.blogpost-card__image {
	position: relative;
	display: block;
	width: 100%;
}

.blogpost-card__image img {
	display: block;
	width: 100%;
	height: 11.125rem; /* 178 */
	object-fit: cover;
	border-radius: var(--radius-20);
}

/* No picture: the same box, in the tint used behind illustrations. */
.blogpost-card__image--empty {
	height: 11.125rem;
	background-color: var(--color-background-purple);
	border-radius: var(--radius-20);
}

.blogpost-card__tags {
	position: absolute;
	top: 1rem;
	left: 1rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.blogpost-card__title {
	font: var(--type-header-2xs);
	color: var(--color-text-dark);
}

/* The whole card is the link; the title carries it for assistive tech. */
.blogpost-card__link::after {
	position: absolute;
	inset: 0;
	content: "";
}

.blogpost-card__link {
	color: inherit;
	text-decoration: none;
}

.blogpost-card__meta {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	font: var(--type-subtitle-m);
	color: var(--color-text-dark);
}

.blogpost-card__dot {
	flex-shrink: 0;
	width: 0.375rem; /* 6 */
	height: 0.375rem;
	background-color: var(--color-border-light);
	border-radius: 50%;
}

.blogpost-card__read {
	color: var(--color-text-grey);
}

/* Mobile only: the arrow at the end of the date row. */
.blogpost-card__arrow {
	display: inline-flex;
	width: 1rem;
	height: 1rem;
	margin-left: auto;
	color: var(--color-text-dark);
}

.blogpost-card__arrow svg {
	width: 100%;
	height: 100%;
}

@media (min-width: 64rem) {
	.blogpost-card {
		width: 24.4375rem; /* 391 */
		padding-right: 0;
	}

	.blogpost-card__image img,
	.blogpost-card__image--empty {
		height: 18.125rem; /* 290 */
	}

	.blogpost-card__title {
		font: var(--type-header-xs);
	}

	.blogpost-card__arrow {
		display: none;
	}

	/* The FAQ pages draw the mobile card in their 720 column (1547:39865). */
	.blogpost-card--compact {
		width: 17rem; /* 272 */
		padding-right: 1rem;
	}

	.blogpost-card--compact .blogpost-card__image img,
	.blogpost-card--compact .blogpost-card__image--empty {
		height: 11.125rem; /* 178 */
	}

	.blogpost-card--compact .blogpost-card__title {
		font: var(--type-header-2xs);
	}

	.blogpost-card--compact .blogpost-card__arrow {
		display: inline-flex;
	}
}