/**
 * Module: Reports
 *
 * A three-up of publication covers. The card is the global one; what is the module's own is
 * the printed-page crop, the label riding the cover, and the action line pinned to the foot
 * so a row of cards agrees on where its link sits.
 */

.module.reports.bg-linen {
	padding-block: var(--module-spacing-large);
}

.module.reports .intro {
	display: flex;
	flex-direction: column;
	gap: var(--text-spacing-xsmall);
	grid-column: 1 / span 8;
	margin-bottom: var(--text-spacing-small);
}

.module.reports .intro > * {
	margin: 0;
}

.module.reports .cards {
	grid-column: 1 / -1;
	row-gap: var(--gap);
}

.module.reports .cards > li {
	grid-column: span 4;
}

.module.reports .card {
	height: 100%;
}

.module.reports .card .media {
	aspect-ratio: 4 / 3;
	background: var(--linen-50);
}

.module.reports .card .media img {
	object-fit: contain;
	padding: var(--text-spacing-small);
}

.module.reports .card .content {
	flex: 1;
	gap: var(--text-spacing-xsmall);
	padding: var(--text-spacing-small) var(--text-spacing-small) var(--text-spacing-medium);
}

.module.reports .card :is(h1, h2, h3, h4, h5, h6) {
	margin: 0;
}

.module.reports .action {
	margin-top: auto;
	padding-top: var(--text-spacing-xsmall);
}

.module.reports .card:hover .action {
	gap: 12px;
}

.module.reports .card:hover .action .arrow {
	background: var(--sun-light);
}

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

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

	.module.reports .intro {
		grid-column: 1 / -1;
	}

}

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

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

	.module.reports .cards > li {
		grid-column: span 6;
	}

}

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

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

	.module.reports .intro {
		gap: var(--text-spacing-xxsmall);
		margin-bottom: 0;
	}

	/* Stacked one to a row, the cards close up: the band's own gap is the step between columns,
	   and there are none here. */
	.module.reports .cards {
		gap: 20px;
	}

	.module.reports .cards > li {
		grid-column: 1 / -1;
	}

	.module.reports .card .media {
		aspect-ratio: 16 / 10;
	}

}