/**
 * Link Cards — shared, plus the Cards style
 *
 * Cards is a four-up row of the shipped .card. The card global already supplies the surface,
 * the 10px radius, the media ratio and the arrow chip; this file is the row, two padding
 * overrides and the optional backdrop. Every other style is in link-cards/.
 */

.module.link-cards .cards {
	list-style: none;
	margin: 0;
	padding: 0;
}

.module.link-cards .card .content :is(h1, h2, h3, h4, h5, h6) {
	margin: 0;
}

.module.link-cards .card-link:focus-visible {
	box-shadow: 0 0 0 2px var(--focus-halo);
	outline: 2px solid var(--focus-ring);
	outline-offset: 2px;
}

/*** Style: cards ***/

.module.link-cards.style-default {
	padding-block: var(--module-spacing-large);
}

.module.link-cards.style-default.bg-photo {
	overflow: clip;
	padding-block: calc(var(--module-spacing-large) + var(--module-spacing-medium)) var(--module-spacing-large);
	position: relative;
}

.module.link-cards.style-default > .media {
	aspect-ratio: auto;
	inset: 0;
	position: absolute;
}

.module.link-cards.style-default .cards {
	display: grid;
	gap: var(--text-spacing-small);
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.module.link-cards.style-default .card {
	height: 100%;
}

.module.link-cards.style-default .card .content {
	gap: 4px;
	padding: var(--text-spacing-xsmall) var(--text-spacing-small);
	transition: margin var(--motion) var(--ease-out);
}

/* Margins rather than a translate, and paired so they cancel: the card's height cannot move, and
   the whole card is a link whose cover is an `::after` inside this block. A transform — or a
   `position` — would make this element the cover's containing block and shrink it from the card to
   the copy, so the photograph and the arrow would stop answering the pointer. */
.module.link-cards.style-default .card:is(:hover, :focus-within) .content {
	margin-bottom: 4px;
	margin-top: -4px;
}

.page-builder > .module.link-cards.bg-photo:last-child,
.page-builder > .wash:last-child > .module.link-cards.bg-photo:last-child {
	margin-bottom: 0;
}

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

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

	.module.link-cards.style-default .cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.module.link-cards.style-default .cards > li:last-child:nth-child(odd) {
		grid-column: 1 / -1;
		margin-inline: auto;
		max-width: calc((100% - var(--text-spacing-small)) / 2);
		width: 100%;
	}

}

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

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

	.module.link-cards.style-default .cards {
		grid-template-columns: minmax(0, 1fr);
	}

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

	/* Most of the padding that stood the cards off a photograph behind all of them goes: the
	   backdrop is a band at the foot now, so what is left above is the module's own breathing room
	   on top of the step the editor set. */
	.module.link-cards.style-default.bg-photo {
		padding-top: var(--module-spacing-small);
	}

	/* The backdrop at its own proportions along the module's foot, behind the last card, rather
	   than a 2.5:1 photograph covering a column four cards tall — which at this width meant a crop
	   magnified past anything the file could carry. Held from the bottom with its height left to
	   the image, so it scales with the screen and never reaches the cards above. */
	.module.link-cards.style-default.bg-photo > .media {
		inset: auto 0 0;
	}

	.module.link-cards.style-default.bg-photo > .media img {
		height: auto;
		position: static;
	}

}