/*
	Issue cards — homepage index + reusable issue teaser grid.
*/

.article-card-grid,
.article-grid-backdrop .article-card-grid.is-layout-grid {
	--article-card-gap: var(--wp--preset--spacing--large);

	align-items: stretch;
	gap: var(--article-card-gap);
	/*
		Perspective tilt needs a little side room — same token as the gap
		(special case; not --nb-edge).
	*/
	padding-inline: var(--article-card-gap);
	/*
		Max 4 across. Auto-fill at 12rem was fitting 5 and starving the cards.
	*/
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 960px) {
	.article-card-grid,
	.article-grid-backdrop .article-card-grid.is-layout-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 520px) {
	.article-card-grid,
	.article-grid-backdrop .article-card-grid.is-layout-grid {
		grid-template-columns: minmax(0, 1fr);
		/* Drop tilt inset — --nb-edge on alignwide is enough side air */
		padding-inline: 0;
		padding-left: 0;
		padding-right: 0;
	}
}

.article-card-grid > .article-card {
	min-width: 0;
	height: 100%;
}

.article-card {
	--article-card-pad: 1.5rem; /* 24px desktop */
	background-color: var(--wp--preset--color--page-white);
	border: 1px solid var(--wp--preset--color--border-dark);
	box-sizing: border-box;
	/* Cover parent sets light text — cards need their own ink */
	color: var(--wp--preset--color--main);
	padding: var(--article-card-pad);
	position: relative;
	transition:
		background-color
		var(--net-blog-motion-duration-fast)
		var(--net-blog-motion-ease-standard);
}

.article-card:not(.article-card--soon) {
	cursor: pointer;
}

.article-card:hover,
.article-card:focus-within {
	background-color: var(--wp--preset--color--base) !important;
}

/*
	Cards used to be layout:constrained — children picked up page content
	cap + --nb-edge as huge side margins. Fill the card; air is padding only.
*/
.article-card > .wp-block-group,
.article-card.is-layout-constrained
	> :where(:not(.alignleft):not(.alignright):not(.alignfull):not(.alignwide)) {
	box-sizing: border-box;
	height: 100%;
	margin-inline: 0 !important;
	max-width: none;
	width: 100%;
}

/*
	Markup: icon + .article-card-text (issue, title, CTA).
	Desktop: stack. Mobile: icon | text row.
*/
.article-card > .wp-block-group {
	align-items: flex-start;
	flex-direction: column;
}

.article-card .article-card-text {
	box-sizing: border-box;
	flex: 1 1 auto;
	height: 100%;
	min-width: 0;
	width: 100%;
}

@media (max-width: 520px) {
	.article-card {
		--article-card-pad: 1.25rem;
		padding-inline-start: 0.75rem;
	}

	.article-card > .wp-block-group {
		flex-direction: row;
	}

	.article-card .article-card-text {
		width: auto;
	}
}

/* Card type — owned here so template blocks stay bare */
.article-card-text > p:first-child {
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--xx-small);
	line-height: 1.2;
	text-transform: uppercase;
}

.article-card-text > .wp-block-heading {
	color: var(--wp--preset--color--main);
	font-size: var(--wp--preset--font-size--normal);
	font-style: normal;
	font-weight: 700;
	line-height: 1.2;
}

.article-card-text > :where(p, .wp-block-heading) {
	margin-block: 0;
}

.article-card-text .nb-bracket-link,
.article-card--soon .article-card-text > p:last-child {
	margin-block: 0;
	margin-top: auto;
}

/* Status placard on soon cards — not a link */
.article-card--soon .article-card-text > p:last-child {
	color: var(--wp--preset--color--main);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.055em;
	line-height: 1.2;
	text-transform: uppercase;
}

/* Whole card → vignette (hit area from the bracket link) */
.article-card:not(.article-card--soon) .nb-bracket-link {
	position: static;
}

.article-card:not(.article-card--soon) .nb-bracket-link::after {
	content: "";
	inset: 0;
	position: absolute;
	z-index: 1;
}

/* Sticky header clearance for in-page card → issue jumps */
[id^="vignette-"] {
	scroll-margin-top: 6rem;
}

@media (prefers-reduced-motion: reduce) {
	.article-card {
		transition: none;
	}
}