/*
 * gm/what-we-cover — a service explained.
 *
 * Figma: What we cover, Property 1=Desktop (719:8102) and Mobile (719:8104).
 * Blue 1 ground, 96/32 desktop and 64/24 mobile, a ruled header, then two
 * columns: the writing on the left and the trade's whole scope on the right.
 *
 * Mobile stacks the columns and drops the task panels 24 to 18, which is one of
 * the few real type changes in the design.
 */

.gm-cover {
	/* 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-cover__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;
}

.gm-cover__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--32);
	border-block-start: 1px solid var(--wp--custom--color--white-25);
}

.gm-cover__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, which is 14 in
 * Blue 5. Two classes so this wins on specificity rather than on source order.
 */
.gm-cover__link.gm-link-arrow {
	font-size: var(--wp--preset--font-size--xxs);
	color: var(--wp--preset--color--blue-4-light);
}

/* Six columns each on the shared grid, with the standard gutter between. */
.gm-cover__columns {
	display: grid;
	grid-template-columns: repeat(var(--gm-grid-columns), minmax(0, 1fr));
	column-gap: var(--gm-grid-gutter);
	align-items: start;
}

.gm-cover__intro-column {
	grid-column: 1 / span 5;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--48);
}

.gm-cover__intro {
	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-cover__audience {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--8);
}

.gm-cover__audience-label,
.gm-cover__audience-list {
	margin-block: 0;
	font-size: var(--wp--preset--font-size--md);
	line-height: 1.3;
	color: var(--wp--preset--color--white);
}

.gm-cover__audience-label {
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 500;
}

/*
 * pre-wrap keeps the double spaces the design sets around each slash. HTML
 * collapses them otherwise and the line reads tighter than it was drawn.
 */
.gm-cover__audience-list {
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 400;
	letter-spacing: -0.03em;
	white-space: pre-wrap;
}

.gm-cover__tasks {
	grid-column: 7 / span 6;
	list-style: none;
	margin-block: 0;
	padding-inline: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--24);
}

/* On the Light blue ground a Blue 2 panel would vanish: Blue 1 at 40% instead. */
.is-style-gm-ground-light .gm-cover__task {
	background-color: var(--wp--custom--color--blue-1-40);
}

.gm-cover__task {
	box-sizing: border-box;
	padding: var(--wp--preset--spacing--24);
	border-radius: 8px;
	background-color: var(--wp--custom--color--blue-2-30);
	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);
}

@media (max-width: 900px) {

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

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

	/*
	 * The mobile design drops the link from the header. The section already
	 * closes on a CTA band, so a second invitation halfway up a phone screen is
	 * one more thing to scroll past.
	 *
	 * Two classes, because .gm-link-arrow sets display too and a single class
	 * against a single class is a tie that source order decides. It lost.
	 */
	.gm-cover__link.gm-link-arrow {
		display: none;
	}

	.gm-cover__columns {
		grid-template-columns: minmax(0, 1fr);
		row-gap: var(--wp--preset--spacing--64);
	}

	.gm-cover__intro-column,
	.gm-cover__tasks {
		grid-column: 1 / -1;
	}

	/* The panels drop a step; the intro above them does not. */
	.gm-cover__task {
		font-size: var(--wp--preset--font-size--md);
		line-height: 1.3;
	}
}