/*
 * gm/related-services — three cards to other services, at the foot of a
 * service page.
 *
 * The cards follow gm/audience-card (Figma 643:2221), at Aidan's request on
 * 25 September 2026: a photograph earns attention where a panel does not, and
 * this is the point on the page where a reader decides whether to go anywhere
 * else. Same proportion, radius, scrim and hover as that card; the wording is
 * set like a service rather than an audience.
 *
 * Written here rather than borrowed, since a block's stylesheet only loads on
 * pages where that block renders and this one has to stand on its own.
 *
 * Header ruled like the hub's, 96/32 desktop and 64/24 mobile, cards at 24.
 */

.gm-related {
	/* Sits flush under the section above it (overrides the flow block-gap). */
	margin-block-start: 0;
	box-sizing: border-box;
	padding-block: var(--wp--preset--spacing--96);
	padding-inline: var(--gm-grid-margin);
	background-color: var(--wp--preset--color--blue-1);
}

.gm-related__inner {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--48);
	/* Cap the content on ultra-wide screens (wideSize) and centre it. */
	max-width: 150rem;
	margin-inline: auto;
}

.gm-related__header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--16);
	padding-block-start: var(--wp--preset--spacing--24);
	border-block-start: 1px solid var(--wp--custom--color--white-25);
}

.gm-related__label {
	margin-block: 0;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--white);
}

/* A step smaller and a tone back from the shared arrow link. */
.gm-related__link.gm-link-arrow {
	font-size: var(--wp--preset--font-size--xxs);
	color: var(--wp--preset--color--blue-4-light);
}

.gm-related__grid {
	list-style: none;
	margin-block: 0;
	padding-inline: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--24);
}

.gm-related__card {
	position: relative;
	box-sizing: border-box;
	display: flex;
	/* Copy sits at the foot of the card; the photo fills everything above it. */
	flex-direction: column;
	justify-content: flex-end;
	/* Sized by proportion so it scales with its column. Figma's card is 443 x 594. */
	aspect-ratio: 443 / 594;
	padding: var(--wp--preset--spacing--48) var(--wp--preset--spacing--32);
	overflow: hidden;
	border-radius: 8px;
	/* Shows while the photo loads, and is the fallback for a service with none. */
	background-color: var(--wp--preset--color--blue-3);
	color: var(--wp--preset--color--white);
}

/*
 * Position, size and crop come from .gm-parallax in assets/shared.css, which
 * also drifts the photo inside the card as the page scrolls. The card supplies
 * the position: relative and overflow: hidden that it needs.
 *
 * The zoom uses `scale`, not `transform`: the parallax already animates
 * transform and a hover rule on the same property would simply lose to it.
 */
.gm-related .gm-related__card-img.gm-related__card-img {
	/* Opacity restated: the fade-in rule's transition would otherwise replace this one. */
	transition: opacity 0.3s ease-out, scale 600ms ease;
}

.gm-related__card:hover .gm-related__card-img,
.gm-related__card:focus-within .gm-related__card-img {
	scale: 1.05;
}

.gm-related__card-img--empty {
	background-color: var(--wp--preset--color--blue-3);
}

/* Darkens the foot of the photo so the copy stays legible over any picture. */
.gm-related__card-scrim {
	position: absolute;
	inset: 0;
	background-image: var(--wp--preset--gradient--card-scrim);
}

.gm-related__card-content {
	/* Lifts the copy above the absolutely-placed photo and scrim. */
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--16);
}

.gm-related__card-titles {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--8);
}

.gm-related__card-title {
	margin-block: 0;
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 400;
	line-height: 1.25;
	letter-spacing: -0.03em;
	color: var(--wp--preset--color--white);
}

.gm-related__card-description {
	margin-block: 0;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 400;
	line-height: 1.4;
	color: var(--wp--preset--color--blue-4-light);
}

/*
 * The whole card is the target, not just the words. The link stays a real link
 * and stretches an invisible layer over the card, which keeps one anchor per
 * card: nesting the card inside another <a> would be invalid and would give a
 * screen reader two links saying the same thing.
 */
.gm-related__card-link::after {
	content: "";
	position: absolute;
	inset: 0;
	/* Above the photo and the scrim: it is the click target. */
	z-index: 2;
}

/* The pointer meets the card long before the link, so the card drives it. */
.gm-related__card:hover .gm-related__card-link,
.gm-related__card:focus-within .gm-related__card-link {
	color: var(--wp--preset--color--blue-4);
}

.gm-related__card:hover .gm-link-arrow__glyph,
.gm-related__card:focus-within .gm-link-arrow__glyph {
	transform: translateX(3px);
}

@media (max-width: 900px) {

	.gm-related {
		padding-block: var(--wp--preset--spacing--64);
	}

	.gm-related__inner {
		gap: var(--wp--preset--spacing--32);
	}

	.gm-related__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.gm-related__card {
		/* Squarer on a phone, matching the audience card's mobile proportion. */
		aspect-ratio: 3 / 4;
	}
}

@media (prefers-reduced-motion: reduce) {

	.gm-related .gm-related__card-img.gm-related__card-img {
		transition: none;
	}

	.gm-related__card:hover .gm-related__card-img,
	.gm-related__card:focus-within .gm-related__card-img {
		scale: none;
	}
}