/**
 * Module: Offices
 *
 * Regions stacked, each a three-up of location cards. The card is the global one; the module
 * owns the region heading, the rhythm between groups, and the detail list.
 */

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

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

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

.module.offices .regions {
	display: grid;
	gap: var(--module-spacing-small) var(--gap);
	grid-column: 1 / -1;
	grid-template-columns: var(--grid);
	list-style: none;
	margin: 0;
	padding: 0;
}

.module.offices .regions > li {
	grid-column: span 12;
}

.module.offices .regions > li:has(.cards > li:nth-child(2):last-child) {
	grid-column: span 8;
}

.module.offices .regions > li:has(.cards > li:only-child) {
	grid-column: span 4;
}

.module.offices .region {
	margin: 0 0 var(--text-spacing-medium);
}

.module.offices .cards {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.module.offices .cards:has(> li:nth-child(2):last-child) {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.module.offices .cards:has(> li:only-child) {
	grid-template-columns: minmax(0, 1fr);
}

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

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

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

.module.offices .card:hover .content {
	color: inherit;
}

.module.offices .card p {
	margin: 0;
}

.module.offices address {
	font-style: normal;
}

.module.offices .details {
	display: flex;
	flex-direction: column;
	gap: 2px;
	list-style: none;
	margin: 0;
	margin-top: auto;
	padding: 0;
	padding-top: var(--text-spacing-xxsmall);
}

.module.offices .details a {
	color: var(--storm);
}

.module.offices .details a:is(:hover, :focus-visible) {
	color: var(--storm-dark);
}

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

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

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

}

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

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

	.module.offices .regions > li,
	.module.offices .regions > li:has(.cards > li:nth-child(2):last-child) {
		grid-column: span 12;
	}

	.module.offices .regions > li:has(.cards > li:only-child) {
		grid-column: span 6;
	}

	.module.offices .cards,
	.module.offices .cards:has(> li:nth-child(2):last-child) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

}

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

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

	.module.offices .intro {
		margin-bottom: 0;
	}

	/* The container is one column here, so a twelve-column span asks for eleven more than exist and
	   the row runs off the screen. It takes what there is. */
	.module.offices .regions > li,
	.module.offices .regions > li:has(.cards > li:nth-child(2):last-child),
	.module.offices .regions > li:has(.cards > li:only-child) {
		grid-column: 1 / -1;
	}

	.module.offices .cards,
	.module.offices .cards:has(> li:nth-child(2):last-child) {
		gap: 20px;
		grid-template-columns: minmax(0, 1fr);
	}

	.module.offices .regions {
		gap: 48px;
	}

}