/*
 * gm/service-list — "Our Services / What We Do".
 *
 * Figma: Service list, Property 1=Desktop (651:2973) and Property 1=Mobile
 * (651:2975). Desktop is 96 top and bottom, 32 margins, a 96 gap under the
 * header; the rows span the first six columns and the photograph the last three.
 * Mobile is 64 top and bottom, 24 margins, and the photograph is switched off
 * entirely in the design, so it is not rendered small, it is not there at all.
 */

.gm-service-list {
	/* 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);
	color: var(--wp--preset--color--white);
}

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

/* ------------------------------------------------------------
   Section header
   ------------------------------------------------------------ */

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

.gm-service-list__heading {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--4);
}

.gm-service-list__heading-sans,
.gm-service-list__heading-serif {
	margin-block: 0;
	font-size: var(--wp--preset--font-size--xl);
}

.gm-service-list__heading-sans {
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 500;
	line-height: 1.05;
	letter-spacing: -0.03em;
	color: var(--wp--preset--color--white);
}

.gm-service-list__heading-serif {
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: -0.04em;
	color: var(--wp--preset--color--blue-4);
}

/* The link sits on the heading's first line, not level with its box. */
.gm-service-list__link {
	margin-block-start: var(--wp--preset--spacing--8);
}

/* ------------------------------------------------------------
   Columns — rows on the left, the photograph on the right
   ------------------------------------------------------------ */

/*
 * On the shared twelve-column grid: the rows take columns 1 to 6 and the
 * photograph columns 10 to 12, which is what leaves the wide gutter between them
 * in the design rather than a hand-set gap.
 */
.gm-service-list__columns {
	display: grid;
	grid-template-columns: repeat(var(--gm-grid-columns), minmax(0, 1fr));
	column-gap: var(--gm-grid-gutter);
	align-items: start;
}

.gm-service-list__rows {
	grid-column: 1 / span 6;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--24);
	/* Feeds .gm-service-item__number, so the rows number themselves. */
	counter-reset: gm-service;
}

.gm-service-list__feature {
	grid-column: 10 / span 3;
	align-self: stretch;
	/* Makes 100cqw below the width of this column, so the figure can size its own sticky offset. */
	container-type: inline-size;
}

/*
 * The photograph starts level with the top of the list. Once the list has
 * scrolled up far enough that the picture's foot would meet the foot of the
 * screen, it stays there, inset by the page margin on every side that touches
 * the screen, and rides down the list until its foot meets the foot of the last
 * row. Sticky does both: it is a no-op while the natural position is lower than
 * the offset, and it is held inside this column, which is as tall as the rows.
 *
 * The offset is the screen height less the picture's own height (its width times
 * four thirds) less the margin. Clamped under the fixed header for a short
 * screen, where the picture is taller than the room.
 */
.gm-service-list__figure {
	position: sticky;
	top: max(var(--gm-header-h, 72px), calc(100svh - 100cqw * 4 / 3 - var(--gm-grid-margin)));
	/* Explicit width: nothing in the figure is in flow, so it would collapse to nothing. */
	width: 100%;
	/* Figma's feature image is 324 x 432. */
	aspect-ratio: 3 / 4;
	overflow: hidden;
	border-radius: 8px;
	background-color: var(--wp--preset--color--blue-2);
}

/*
 * Every service's photograph is stacked here and only the active one is shown.
 * Position, size, crop and scroll drift come from .gm-parallax; this adds the
 * cross-fade. The timeline comes from the section, not this frame, because a
 * sticky frame stops moving relative to the viewport while it is stuck and its
 * own view timeline would freeze with it.
 */
/*
 * The class is repeated on purpose, to out-rank the fade-in rule in
 * assets/shared.css (html.gm-fade main img.gm-shown), which is three classes and
 * two elements deep and forced every stacked photo to full opacity once it had loaded, so the last
 * one always covered the rest and hovering a row changed nothing.
 */
.gm-service-list .gm-service-list__figure .gm-service-list__media.gm-service-list__media {
	opacity: 0;
	transition: opacity 300ms ease;
}

.gm-service-list .gm-service-list__figure .gm-service-list__media.gm-service-list__media.is-active {
	opacity: 1;
}

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

	.gm-service-list .gm-service-list__figure .gm-service-list__media.gm-service-list__media {
		transition: none;
	}
}

/* ------------------------------------------------------------
   Mobile — no photograph, and the link wraps under the heading
   ------------------------------------------------------------ */

@media (max-width: 900px) {

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

	.gm-service-list__inner {
		gap: var(--wp--preset--spacing--64);
	}

	.gm-service-list__rows {
		grid-column: 1 / -1;
	}

	/*
	 * The design switches the photograph off on mobile rather than shrinking it.
	 * display: none keeps it out of the layout and stops the browser fetching
	 * eleven pictures nobody will see.
	 */
	.gm-service-list__feature {
		display: none;
	}

	/*
	 * The section link goes too. In the design it is clipped off the side of the
	 * mobile frame, and there are other ways to reach the contact page from a
	 * phone, so it is dropped rather than wrapped under the heading.
	 */
	.gm-service-list .gm-service-list__link {
		display: none;
	}
}