/**
 * Card Grid — a heading over bright tiles, each an icon and a title that links the whole tile.
 *
 * The focus ring is drawn on the tile rather than the link: the link's own ring would be cyan on
 * the cyan tile, and the tile's ring sits outside it on the page background. The focused tile is
 * lifted so a following section can't paint over the ring's bottom edge.
 *
 * The open state (hover, keyboard focus, and always on touch screens and at phone widths, where there is no hover) turns
 * the tile teal and lifts the title under the icon. The tile is a grid whose free space sits in
 * the spacer row when closed and in the description row when open; one `grid-template-rows`
 * transition moves it across, so the title rises and the description opens on the same curve.
 * The closed description row keeps a sliver of a share rather than 0fr: at 0fr its text stops
 * counting toward the tile's height, so the tile would grow on hover and snap back at the end.
 */

/*** Module: Card Grid ***/

.module.card-grid .container > .heading-2 {
	margin-bottom: var(--module-spacing-small);
}

.module.card-grid .tiles {
	display: grid;
	gap: calc(2 * var(--gap));
	grid-template-columns: repeat(2, minmax(0, 1fr));
	list-style: none;
	margin: 0 max(var(--container-breakout), calc(var(--gap) * -1));
	padding: 0;
}

/** Tile **/

.module.card-grid .card {
	--texture-opacity: 0.2;
	background: var(--cyan);
	color: var(--navy);
	display: grid;
	grid-template-rows: auto minmax(0, 1fr) auto minmax(0, 0.001fr);
	height: 100%;
	min-height: 340px;
	padding: var(--text-spacing-large);
}

.module.card-grid .card > svg.icon {
	color: var(--navy);
	grid-row: 1;
	height: 40px;
	justify-self: start;
	margin-bottom: var(--text-spacing-small);
	transform: translateY(var(--text-spacing-xsmall));
	width: auto;
}

.module.card-grid .card > .spacer {
	grid-row: 2;
}

.module.card-grid .card .heading-4 {
	color: var(--navy);
	grid-row: 3;
}

.module.card-grid .card .description {
	color: var(--text);
	margin: 0;
	min-height: 0;
	grid-row: 4;
	opacity: 0;
	overflow: hidden;
	padding: var(--text-spacing-xxsmall) var(--icon-button-size) 0 0;
}

.module.card-grid .card > .btn.icon.corner {
	opacity: 0;
}

.module.card-grid .card .card-link {
	color: inherit;
	text-decoration: none;
}

.module.card-grid .card .card-link:focus-visible {
	outline: none;
}

.module.card-grid .card:has(.card-link:focus-visible) {
	outline: var(--focus-ring);
	outline-offset: 3px;
	z-index: 1;
}

/** Tile - Open **/

.module.card-grid .card:has(.card-link:is(:hover, :focus-visible)) {
	--texture-opacity: 0.1;
	background: color-mix(in srgb, var(--teal-deep) 75%, var(--teal));
	grid-template-rows: auto minmax(0, 0fr) auto minmax(0, 1fr);
}

.module.card-grid .card:has(.card-link:is(:hover, :focus-visible)) > svg.icon,
.module.card-grid .card:has(.card-link:is(:hover, :focus-visible)) .heading-4 {
	color: var(--cyan);
}

.module.card-grid .card:has(.card-link:is(:hover, :focus-visible)) > svg.icon {
	transform: none;
}

.module.card-grid .card:has(.card-link:is(:hover, :focus-visible)) .description {
	opacity: 1;
}

.module.card-grid .card:has(.card-link:is(:hover, :focus-visible)) > .btn.icon.corner {
	opacity: 1;
}

@media (hover: none), (pointer: coarse), (max-width: calc(650rem / 16)) {

	.module.card-grid .card {
		--texture-opacity: 0.1;
		background: color-mix(in srgb, var(--teal-deep) 75%, var(--teal));
		grid-template-rows: auto minmax(0, 0fr) auto minmax(0, 1fr);
	}

	.module.card-grid .card > svg.icon,
	.module.card-grid .card .heading-4 {
		color: var(--cyan);
	}

	.module.card-grid .card > svg.icon {
		transform: none;
	}

	.module.card-grid .card .description {
		opacity: 1;
	}

	.module.card-grid .card > .btn.icon.corner {
		opacity: 1;
	}

}

@media (prefers-reduced-motion: no-preference) {

	.module.card-grid .card {
		transition: background-color .3s ease, grid-template-rows .4s cubic-bezier(0.25, 1, 0.5, 1);
	}

	.module.card-grid .card > svg.icon {
		transition: color .3s ease, transform .4s cubic-bezier(0.25, 1, 0.5, 1);
	}

	.module.card-grid .card .heading-4 a {
		transition: color .3s ease;
	}

	.module.card-grid .card .description,
	.module.card-grid .card > .btn.icon.corner {
		transition: opacity .2s ease;
	}

	.module.card-grid .card:has(.card-link:is(:hover, :focus-visible)) .description,
	.module.card-grid .card:has(.card-link:is(:hover, :focus-visible)) > .btn.icon.corner {
		transition: opacity .3s ease .1s;
	}

	.module.card-grid .card .texture img {
		transition: opacity .3s ease;
	}

}

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

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

	.module.card-grid .tiles {
		gap: var(--gap);
		grid-template-columns: minmax(0, 1fr);
	}

}

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

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

	.module.card-grid .tiles {
		gap: var(--text-spacing-small);
	}

	.module.card-grid .card {
		min-height: 0;
		padding: var(--text-spacing-small);
	}

}