/**
 * Link Cards style: Photo & Panels
 *
 * A photograph beside a stack of linked panels. The photograph outsets past the container on
 * whichever side it takes, and every card's own image is stacked over it, revealed while that
 * card is hovered or focused.
 */

.module.link-cards.style-media .container {
	align-items: center;
}

.module.link-cards.style-media .media {
	aspect-ratio: 620 / 466;
	border-radius: 10px;
}

.module.link-cards.style-media .media .swap {
	opacity: 0;
	transition: opacity var(--motion) var(--ease-out);
}

.module.link-cards.style-media .container:has(.cards > li[data-card="1"] .card:is(:hover, :focus-within)) .media .swap[data-card="1"],
.module.link-cards.style-media .container:has(.cards > li[data-card="2"] .card:is(:hover, :focus-within)) .media .swap[data-card="2"],
.module.link-cards.style-media .container:has(.cards > li[data-card="3"] .card:is(:hover, :focus-within)) .media .swap[data-card="3"],
.module.link-cards.style-media .container:has(.cards > li[data-card="4"] .card:is(:hover, :focus-within)) .media .swap[data-card="4"] {
	opacity: 1;
}

.module.link-cards.style-media .cards {
	display: flex;
	flex-direction: column;
	gap: var(--text-spacing-large);
}

.module.link-cards.style-media .card {
	align-items: center;
	flex-direction: row;
	gap: var(--text-spacing-xsmall);
	min-height: calc(128rem / 16);
	padding: var(--text-spacing-xsmall);
	transition: background var(--motion) var(--ease-out);
	--card-hover-color: var(--charcoal);
}

.module.link-cards.style-media .card:hover {
	background: var(--apricot);
}

.module.link-cards.style-media .card > .icon {
	align-items: center;
	align-self: flex-start;
	background: var(--petal-40);
	border-radius: 100%;
	display: flex;
	flex-shrink: 0;
	height: 48px;
	justify-content: center;
	width: 48px;
}

.module.link-cards.style-media .card > .icon > :is(img, svg) {
	height: 24px;
	object-fit: contain;
	width: 24px;
}

.module.link-cards.style-media .card .content {
	flex: 1;
	padding: 0;
}

.module.link-cards.style-media .card > .arrow {
	align-self: flex-end;
	margin: 0;
}

.module.link-cards.style-media :is(.media, .cards) {
	grid-row: 1;
}

/** Layout: image left (default) **/

.module.link-cards.style-media.image-left .media {
	grid-column: 1 / span 6;
	margin-left: var(--container-breakout);
}

.module.link-cards.style-media.image-left .cards {
	grid-column: 7 / -1;
	padding-left: var(--text-spacing-small);
}

/** Layout: image right **/

.module.link-cards.style-media.image-right .media {
	grid-column: 7 / -1;
	margin-right: var(--container-breakout);
}

.module.link-cards.style-media.image-right .cards {
	grid-column: 1 / span 6;
	padding-right: var(--text-spacing-small);
}

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

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

	.module.link-cards.style-media:is(.image-left, .image-right) .media {
		aspect-ratio: 16 / 9;
		grid-column: 1 / -1;
		grid-row: auto;
		margin-inline: 0;
	}

	.module.link-cards.style-media:is(.image-left, .image-right) .cards {
		grid-column: 1 / -1;
		grid-row: auto;
		padding-inline: 0;
	}

	/* Stacked, the photograph and the cards are one column rather than two beside each other, so
	   both gaps come in a step: 40 to 24 between the photograph and the first card, and again
	   between the cards. */
	.module.link-cards.style-media .container {
		row-gap: var(--text-spacing-small);
	}

	.module.link-cards.style-media .cards {
		gap: var(--text-spacing-small);
	}

}

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

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

	/* One column on its own centre line: the disc, the title and the arrow read as a lockup at
	   this width rather than as a row that has been folded. */
	.module.link-cards.style-media .card {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		justify-items: center;
		row-gap: var(--text-spacing-xxsmall);
		text-align: center;
	}

	.module.link-cards.style-media .card > .icon,
	.module.link-cards.style-media .card .content,
	.module.link-cards.style-media .card > .arrow {
		grid-column: 1;
	}

	.module.link-cards.style-media .card > .icon {
		align-self: center;
	}

	.module.link-cards.style-media .cards {
		gap: var(--text-spacing-small);
	}

	/* A tap is both the hover and the navigation, so the card answered by changing the photograph
	   beside it in the instant before the page went — which reads as a fault rather than as an
	   answer. Nothing here waits for a pointer that has somewhere else to be. */
	.module.link-cards.style-media .card:hover {
		background: var(--white);
	}

	.module.link-cards.style-media .media .swap {
		display: none;
	}

}