/**
 * Featured Stories
 *
 * A section head over a three-up row of post cards. The cards are the global
 * .card — nothing here restyles them, it only lays the row out.
 */

.module.featured-stories .container {
	row-gap: var(--text-spacing-xsmall);
}

.module.featured-stories .container > .eyebrow {
	grid-column: 1 / span 8;
}

.module.featured-stories .container > .heading-5 {
	align-self: center;
	grid-column: 1 / span 8;
}

/* Sat on the heading's last line rather than centred against the block, so a heading that
   wraps to two does not leave the button floating in the middle of it. */
.module.featured-stories .container > .btn {
	align-self: end;
	grid-column: 9 / -1;
	justify-self: end;
	padding-bottom: 8px;
}

.module.featured-stories .cards {
	display: grid;
	gap: var(--text-spacing-small) var(--text-spacing-xxlarge);
	grid-column: 1 / -1;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	list-style: none;
	margin: var(--text-spacing-large) 0 0;
	padding: 0;
}

.module.featured-stories .cards > li {
	display: flex;
}

.module.featured-stories .cards .card {
	width: 100%;
}

/***************************************************************************************************************************************************************************************/
/* MQ MAX-WIDTH 1200 - Smaller Desktop Sizes / Larger Tablet Sizes */
/***************************************************************************************************************************************************************************************/

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

	.module.featured-stories .cards {
		column-gap: var(--text-spacing-large);
	}

}

/***************************************************************************************************************************************************************************************/
/* MQ MAX-WIDTH 950 - Tablet Sizes */
/***************************************************************************************************************************************************************************************/

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

	/* A long heading takes the container and the link drops under it — the same arrangement 650
	   gives every head. */
	.module.featured-stories.long-heading .container > .eyebrow,
	.module.featured-stories.long-heading .container > .heading-5,
	.module.featured-stories.long-heading .container > .btn {
		grid-column: 1 / -1;
	}

	.module.featured-stories.long-heading .container > .btn {
		align-self: start;
		justify-self: start;
		padding-bottom: 0;
	}

	.module.featured-stories.long-heading .container > .heading-5 {
		margin-bottom: var(--text-spacing-xsmall);
	}

	.module.featured-stories .cards {
		column-gap: var(--text-spacing-medium);
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Two across, so the third would sit alone on a row of its own — and two is the count from here
	   down, one column included. The row is topped up from the latest posts rather than curated to
	   a length, so dropping one costs the page nothing. */
	.module.featured-stories .cards > li:nth-child(n+3) {
		display: none;
	}

	/* Only reachable on a short site, where the row never filled: one card centered rather than
	   stretched across both columns. */
	.module.featured-stories .cards > li:nth-child(odd):last-child {
		grid-column: 1 / -1;
		margin-inline: auto;
		max-width: calc((100% - var(--text-spacing-medium)) / 2);
	}

}

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

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

	.module.featured-stories .container {
		row-gap: var(--text-spacing-xsmall);
	}

	/* The head stacks: there is no room beside a heading this size for a button as well. */
	.module.featured-stories .container > .eyebrow,
	.module.featured-stories .container > .heading-5,
	.module.featured-stories .container > .btn {
		grid-column: 1 / -1;
	}

	.module.featured-stories .container > .btn {
		justify-self: start;
		padding-bottom: 0;
	}

	/* The container's row gap grows here, which is all the air the button needs under the heading. */
	.module.featured-stories .container > .heading-5 {
		margin-bottom: 0;
	}

	.module.featured-stories .cards {
		grid-template-columns: minmax(0, 1fr);
		margin-top: var(--text-spacing-medium);
	}

	.module.featured-stories .cards > li:nth-child(odd):last-child {
		margin-inline: 0;
		max-width: none;
	}

}