/* Shared article-card + grid styles. Used by Explainer block and category archives. */

.article-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 17px 31px;
}

.article-grid > li {
	flex: 0 0 calc((100% - 62px) / 3);
	max-width: calc((100% - 62px) / 3);
	/* Without this, the default min-width:auto lets the card content (long
	   title + padding) override max-width once the basis gets small, so the
	   tiles stop shrinking, overflow, and the 31px column-gap collapses. */
	min-width: 0;
	display: flex;
}

.article-grid > li > .article-card {
	flex: 1;
}

.article-card {
	display: block;
	position: relative;
	background-color: var(--surface-action);
	border-radius: 8px;
	padding: 27px 70px 27px 31px;
	color: #fff;
	text-decoration: none;
}

.article-card,
.article-card * {
	color: #fff;
	transition: color 0.3s ease;
}

.article-card:hover,
.article-card:hover * {
	color: var(--primary-400);
}

.article-card__title {
	margin-bottom: 0;
}

.article-card__arrow {
	position: absolute;
	right: 28px;
	bottom: 16px;
	padding: 8px 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.3s ease;
}

.article-card__arrow svg {
	display: block;
	width: 24px;
	height: 24px;
}

.article-card:hover .article-card__arrow {
	transform: translateX(3px);
}

/* <=1199px: give each card more room — 2 columns, the title spans the full
   card width, and the read-more arrow drops onto its own line below it
   (no longer absolutely pinned bottom-right, so no reserved side padding). */
@media (max-width: 1199px) {
	.article-grid > li {
		flex: 0 0 calc((100% - 31px) / 2);
		max-width: calc((100% - 31px) / 2);
	}

	.article-card {
		padding: 27px 31px;
	}

	.article-card__arrow {
		position: static;
		display: flex;
		justify-content: flex-end;
		width: 100%;
		padding: 0;
		margin-top: 16px;
	}
}

/* Mobile (<=767px): single column */
@media (max-width: 767px) {
	.article-grid > li {
		flex: 0 0 100%;
		max-width: 100%;
	}
}