/**
 * Services Grid — Figma section 07 (node 1092:19101)
 * 1920x1889, padding 120 240, bg #F2FAF5, section gap 60.
 * Head row: intro left, 705x398 video right.
 * Cards: 2 columns, 30px gap, 735px items, image 320x317 on the right of
 * each card. Fills alternate in a checkerboard — white, mid, mid, white,
 * white, mid — which is a 4-step nth-child cycle.
 */

.services-grid__inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-60);
}

/* --- head --------------------------------------------------------- */
.services-grid__head {
	display: grid;
	/* 1440 - 30 gap - 705 video = 705. minmax so the video track can give way
	 * below the design width instead of holding 705 and crushing the intro. */
	grid-template-columns: minmax(0, 1fr) minmax(0, 705px);
	align-items: start;
	gap: var(--space-30);
}

.services-grid__intro {
	max-width: 512px;
}

/* 10 at the developer's instruction, replacing the 20 the band was built with. */
.services-grid__heading {
	margin-bottom: 10px;
}

.services-grid__text {
	margin: 0;
}

/* --- video -------------------------------------------------- */
.services-grid__video {
	position: relative;
	aspect-ratio: 705 / 398;
	overflow: hidden;
}

.services-grid__video-poster {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.services-grid__video-frame {
	width: 100%;
	height: 100%;
	border: 0;
}

/* --- cards --------------------------------------------------------- */
.services-grid__list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-30);
}

.services-grid__item {
	display: grid;
	/* 735 item = 385 copy + 30 gap + 320 image. The image column is set at the
	 * developer's instruction as half the card's content box rather than the
	 * design's flat 320, so it scales with the card instead of holding one
	 * width. */
	grid-template-columns: minmax(0, 1fr) minmax(0, 50%);
	align-items: stretch;
	gap: var(--space-30);
	padding: var(--space-30);
}

/* Checkerboard fills: 1 and 4 white, 2 and 3 mid, then repeat. */
.services-grid__item:nth-child(4n + 1),
.services-grid__item:nth-child(4n) {
	background-color: var(--white);
}

.services-grid__item:nth-child(4n + 2),
.services-grid__item:nth-child(4n + 3) {
	background-color: var(--mid-green);
}

/* 280 cap at the developer's instruction. */
.services-grid__item-content {
	display: flex;
	flex-direction: column;
	max-width: 280px;
}

/* 10 at the developer's instruction, replacing the 16 it was built with. */
.services-grid__item-title {
	margin-bottom: var(--space-10);
	color: var(--primary-black);
	font-family: var(--font-heading);
	font-size: var(--fs-30);
	font-weight: 700;
	line-height: var(--lh-30);
}

/* 45 at the developer's instruction, replacing the 20 it was built with. */
.services-grid__item-text {
	margin: 0 0 45px;
	color: var(--body-grey);
	font-family: var(--font-body);
	font-size: var(--fs-18);
	font-weight: 400;
	line-height: var(--lh-18-30);
}

/* Position only — appearance comes from the global button system.
 * Only the green cards carry a rule above the link; the white cards have
 * none in the design. */
.services-grid__item-link {
	align-self: flex-start;
	margin-top: auto;
	width: 100%;
	justify-content: flex-start;
}

.services-grid__item:nth-child(4n + 2) .services-grid__item-link,
.services-grid__item:nth-child(4n + 3) .services-grid__item-link {
	border-top: 1px solid rgb(255 255 255 / 16%); /* #FFFFFF29 */
}

/* Every card row in the design is exactly 377px — 317px of content inside the
 * 30px inset, which is the image's own 320x317 box. Pinning that ratio stops a
 * short-copy row (Siding / Windows) collapsing to 349px and leaving the
 * section 24px under the Figma height. */
.services-grid__item-figure {
	margin: 0;
	max-width: 100%;
	aspect-ratio: 320 / 317;
}

.services-grid__item-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 1559, not 1199: the container only reaches its full 1440 at a 1560 viewport,
 * so a 705 video track stops fitting from there — not at 1199. Held at 705 it
 * left the intro 425 wide at 1280 and about 230 at 1024, with the copy breaking
 * on every second word. Two equal halves below that, so both sides shrink
 * together. Same boundary as the footer columns and the trusted-logos frames,
 * and for the same reason. */
@media (max-width: 1559px) {

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

@media (max-width: 1199px) {

	.services-grid__item {
		grid-template-columns: minmax(0, 1fr) minmax(0, 240px);
		gap: var(--space-20);
		padding: var(--space-20);
	}

	.services-grid__item-image {
		min-height: 260px;
	}
}

/* Tablet: the card list stays TWO across, but each card stacks — image full
 * width on top, copy beneath. Side by side inside a half-width card left the
 * copy column a ribbon; and dropping the list to one column instead wasted the
 * width entirely, which is what it used to do here. The figure is second in the
 * DOM (copy first, so it reads first without CSS), so `order` lifts it. */
@media (max-width: 991px) {

	.services-grid__head {
		grid-template-columns: 1fr;
	}

	.services-grid__intro {
		max-width: none;
	}

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

	.services-grid__item-figure {
		order: -1;
	}

	.services-grid__item-image {
		min-height: 0;
	}
}

/* Mobile: one card per row, and the fill has to alternate plainly.
 *
 * The desktop pattern is a 4-step checkerboard (1 and 4 white, 2 and 3 mid),
 * which only reads as a checkerboard in two columns — in a single column it
 * puts two mid cards next to each other and then two white. Straight odd/even
 * here instead, and the link's rule follows the mid cards to their new
 * positions. */
@media (max-width: 767px) {

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

	.services-grid__item:nth-child(odd) {
		background-color: var(--white);
	}

	.services-grid__item:nth-child(even) {
		background-color: var(--mid-green);
	}

	.services-grid__item:nth-child(4n + 2) .services-grid__item-link,
	.services-grid__item:nth-child(4n + 3) .services-grid__item-link {
		border-top: 0;
	}

	.services-grid__item:nth-child(even) .services-grid__item-link {
		border-top: 1px solid rgb(255 255 255 / 16%); /* #FFFFFF29 */
	}

	/* The 280 cap on the card content is a desktop measurement. One card per
	 * row here, so the cap only stopped the copy using the width it has. */
	.services-grid__item-content {
		max-width: 100%;
	}
}