/*** Module: Featured Resources ***/

/* 56px between the header row and the cards grid (overrides the grid's 40px gap). */
.module.featured-resources .container.grid {
	row-gap: var(--text-spacing-xxlarge);
}

.module.featured-resources .header {
	align-items: flex-end;
	display: flex;
	grid-column: 1 / -1;
	justify-content: space-between;
}

/* minmax(0,1fr), not 1fr — a bare 1fr floors at min-content, which WebKit fails to
   re-resolve when the viewport changes: iPad Safari keeps the landscape track width
   after rotating back to portrait, so the cards sit shifted right of the container.
   The 0 floor has no intrinsic size to go stale (and keeps the columns equal whatever
   the card content — see the same note on .article-more-cards in single.css). */
.module.featured-resources .cards {
	grid-column: 1 / -1;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/***************************************************************************************************************************************************************************************/
/* MQ MAX-WIDTH 1100 - Mobile Header / Nav */
/***************************************************************************************************************************************************************************************/

@media only screen and (max-width: calc(1100rem / 16)) {

	.module.featured-resources .cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Two-up — drop a lone 3rd card rather than orphan it on a second row. :last-child
	   scopes it to the exactly-3 case; the single-column mobile step brings it back. */
	.module.featured-resources .cards > li:nth-child(3):last-child {
		display: none;
	}

}

/***************************************************************************************************************************************************************************************/
/* MQ MAX-WIDTH 650 - Mobile Sizes */
/***************************************************************************************************************************************************************************************/

@media only screen and (max-width: calc(650rem / 16)) {

	.module.featured-resources .header {
		align-items: flex-start;
		flex-direction: column;
		gap: var(--text-spacing-small);
	}

	.module.featured-resources .cards {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Single column now — the 3rd card no longer orphans, so bring it back. */
	.module.featured-resources .cards > li:nth-child(3):last-child {
		display: revert;
	}

}