/**
 * Module: Documents
 *
 * A two-up of labeled panels, each a divided list of file links. The panel is the global
 * card with padding and a gap; only the row is the module's own.
 */

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

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

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

.module.documents .groups {
	grid-column: 1 / -1;
}

.module.documents .groups > li {
	grid-column: span 6;
}

.module.documents .card {
	gap: var(--text-spacing-small);
	height: 100%;
	padding: var(--text-spacing-small) var(--text-spacing-medium);
}

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

.module.documents .items {
	display: flex;
	flex-direction: column;
	list-style: none;
	margin: 0;
	padding: 0;
}

.module.documents .document {
	align-items: center;
	color: inherit;
	display: flex;
	gap: var(--text-spacing-xsmall);
	padding: var(--text-spacing-xsmall) 0;
}

.module.documents .items > li + li .document {
	border-top: 1px solid var(--charcoal-15);
}

.module.documents .document .icon {
	color: var(--charcoal);
	flex-shrink: 0;
	width: 32px;
}

.module.documents .document .icon svg {
	display: block;
	height: auto;
	width: 100%;
}

.module.documents .document .body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.module.documents .document .detail {
	color: var(--text-gray);
	text-transform: uppercase;
}

.module.documents .document .download {
	align-items: center;
	background: var(--sun);
	border-radius: 40px;
	color: var(--charcoal);
	display: flex;
	flex-shrink: 0;
	height: 40px;
	justify-content: center;
	transition: background-color var(--motion) var(--ease-out);
	width: 40px;
}

.module.documents .document .download svg {
	display: block;
	height: 15px;
	width: auto;
}

.module.documents .document:hover .body,
.module.documents .document:focus-visible .body {
	color: var(--card-hover-color);
}

.module.documents .document:hover .download {
	background: var(--sun-light);
}

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

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

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

}

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

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

	.module.documents .groups > li {
		grid-column: 1 / -1;
	}

}

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

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

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

	/* Stacked one to a row, the groups close up the same way the reports above them do. */
	.module.documents .groups {
		gap: 20px;
	}

	.module.documents .card {
		gap: var(--text-spacing-xxsmall);
		padding: var(--text-spacing-small);
	}

}