/**
 * Link Cards — the 7-up service row closing Residential Roofing section 9.
 * Measured: the row occupies y 626-815 (190 tall), 40px under the two-column
 * block above it. Cards are white panels with the label top-left and a green
 * arrow pinned bottom-right.
 *
 * The column count is data, not CSS — it comes through as --link-cards-columns
 * so the same block serves a 4-up or 5-up row on another page.
 */

.link-cards {
	padding-block: var(--space-40) var(--section-rhythm);
}

.link-cards__list {
	display: grid;
	grid-template-columns: repeat(var(--link-cards-columns, 7), minmax(0, 1fr));
	/* Every row the height of the tallest card in the grid, not just the tallest
	 * in its own row. Grid already stretches items within a row, which is why the
	 * single desktop row looks right — but once the cards wrap to two-up the rows
	 * sized independently and the labels that run to two or three lines left a
	 * ragged stack. `1fr` on the implicit rows equalises all of them.
	 *
	 * CSS rather than measuring in JS: no resize listener, no second layout pass,
	 * and it cannot fall out of step with the breakpoints. */
	grid-auto-rows: 1fr;
	gap: var(--space-20);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The four link-card rows in the design are 190, 178, 146 and 142 tall, so the
 * flat 190 this was built with was Residential Roofing's card generalised to
 * all of them — 48 too tall on Contact. Padding (20 all round) and the
 * bottom-pinned arrow are the constants; the height is per-row data and comes
 * in on --link-cards-card-h. Falls back to the longest label. */
.link-cards__item {
	display: flex;
	min-height: var(--link-cards-card-h, 0);
}

/* Three of the four link-card rows are #FFFFFF cards on an #F2FAF5 section, so
 * the shared `.card` white is right for them. Contact section 8 inverts the
 * pairing — #F2FAF5 cards on #FFFFFF — which is per-instance, hence a modifier
 * set through the Extra CSS classes field rather than a change to `.card`. */
.link-cards--cards-pale .link-cards__item.card {
	background-color: var(--pale-green);
}

.link-cards__link {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	justify-content: space-between;
	/* No gap: `space-between` and the drawn card height already place the arrow,
	 * and Figma's own gap is whatever is left over — 28 on Contact, 12 on
	 * Residential Roofing, 0 on About Us. A fixed 12 here pushed the two rows
	 * whose longest label is three lines past their drawn height. */
	gap: 0;
	padding: var(--space-20);
	color: var(--body-grey);
	font-family: var(--font-body);
	font-size: var(--fs-20);
	font-weight: 400;
	line-height: var(--lh-body);
	text-decoration: none;
	transition: var(--transition);
}

a.link-cards__link:hover,
a.link-cards__link:focus-visible {
	background-color: var(--primary-green);
	color: var(--white);
}

.link-cards__arrow {
	display: inline-flex;
	align-self: flex-end;
	color: var(--primary-green);
	transition: var(--transition);
}

.link-cards__arrow svg {
	/* 12 at the developer's instruction. The Figma VECTOR is 10x10, but its 2px
	 * round-capped stroke clips against the frame edge at that size — the extra
	 * 2px gives the cap somewhere to land, as the button arrow already does. */
	width: 12px;
	height: 12px;
}

a.link-cards__link:hover .link-cards__arrow,
a.link-cards__link:focus-visible .link-cards__arrow {
	color: var(--white);
	transform: translate(2px, -2px);
}

@media (max-width: 1199px) {

	.link-cards__list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {

	.link-cards__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Two-up cards are far wider than the drawn ones, so the drawn height would
	 * only add whitespace. (This rule was duplicated verbatim; folded.) */
	.link-cards__item {
		min-height: 0;
	}

	/* 20 at the developer's instruction. The base rule leaves this at 0 because
	 * `space-between` inside the drawn card height does the spacing — but with
	 * min-height released above the card is content-height, so there is no spare
	 * room for space-between to distribute and the arrow sits against the label. */
	.link-cards__link {
		gap: 20px;
	}
}