/**
 * momentive/featured-resources
 *
 * Grid wrapper only — cards reuse the global .story-card styling
 * (momentive.scss, "7.1 Story Card").
 *
 * Fewer than three cards: an equal-width row (--featured-resources-cols is set
 * inline by block.php). With all three (.featured-resources--lead, desktop):
 * one large lead card on the left, two compact image-less cards stacked on the
 * right.
 */

.featured-resources__grid {
	display: grid;
	grid-template-columns: repeat(var(--featured-resources-cols, 3), 1fr);
	gap: var(--wp--preset--spacing--small, 1.5rem);
	list-style: none;
	margin: 0;
	padding: 0;
}

.featured-resources__item {
	display: flex;
	flex-direction: column;
}

@media (min-width: 782px) {
	.featured-resources--lead .featured-resources__grid {
		grid-template-columns: repeat(2, 1fr);
		grid-template-areas:
			"Featured Second"
			"Featured Third";
	}

	.featured-resources--lead .featured-resources__item:nth-child(1) {
		grid-area: Featured;
	}

	.featured-resources--lead .featured-resources__item:nth-child(2) {
		grid-area: Second;
	}

	.featured-resources--lead .featured-resources__item:nth-child(3) {
		grid-area: Third;
	}

	.featured-resources--lead .featured-resources__item:nth-child(n+2) {
		figure {
			display: none;
		}
		.story-card p.top-label {
			position: relative;
		}
		/* With no image, the type label joins the category chips in one row:
		   show the copy inside .lower-label and hide the original. Scoped with
		   :has() so a card with no categories (hence no copy) keeps its
		   original label. The copy sits in .lower-label, so the existing
		   one-line clamp and "More tags" expander cover overflow. */
		.story-card:has(.top-label--inline) > .top-label {
			display: none;
		}
		.story-card .lower-label .top-label--inline {
			display: inline-block;
			position: static;
			vertical-align: top;
			margin: 0 0 .375rem;
		}
	}
}

@media (max-width: 782px) {
	.featured-resources__grid {
		grid-template-columns: 1fr;
	}
}