/* ==========================================================================
   Services Cards Grid — .services-cards
   8-slot card grid. Matches section-services card style.
   Last row centred via flexbox.
   ========================================================================== */

.services-cards {
	background: var(--color-gray-mid);
	padding: var(--section-py-sm) 0;
}

@media ( min-width: 992px ) {
	.services-cards {
		padding: var(--section-py) 0;
	}
}

.services-cards__inner {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 0 var(--container-pad);
}

/* Grid — flex so last row centres naturally
   ========================================================================== */

.services-cards__grid {
	display: flex;
	flex-wrap: wrap;
	gap: var(--card-gap);
	justify-content: center;
}

/* Card — matches .section-services__card
   ========================================================================== */

.services-cards__card {
	background: var(--color-white);
	border-radius: var(--radius-lg);
	padding: var(--space-7);
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	flex: 0 0 100%;
}

@media ( min-width: 640px ) {
	.services-cards__card {
		flex: 0 0 calc( 50% - var(--card-gap) / 2 );
	}
}

@media ( min-width: 992px ) {
	.services-cards__card {
		/* 4 per row: (100% - 3 gaps) / 4 */
		flex: 0 0 calc( 25% - ( var(--card-gap) * 3 / 4 ) );
		min-height: 350px;
	}
}

/* Icon — 40×40px, matches section-services
   ========================================================================== */

.services-cards__icon {
	width: 40px;
	height: 40px;
	object-fit: contain;
	flex-shrink: 0;
}

/* Subtitle — uppercase label (cards 6 & 7)
   ========================================================================== */

.services-cards__subtitle {
	font-size: 0.9375rem;
	font-weight: var(--weight-bold);
	text-transform: uppercase;
	color: var(--color-text-muted);
	line-height: 1.5;
	margin: 0;
}

/* Title — matches section-services__card-title (20px / --size-lg)
   ========================================================================== */

.services-cards__title {
	font-size: var(--size-md-lg);
	font-weight: var(--weight-black);
	color: var(--color-text);
	line-height: calc( 30 / 20 );
	margin: 0;
}

/* Body — optional description text (sub-service pages)
   ========================================================================== */

.services-cards__body {
	font-size: var(--size-base);
	font-weight: var(--weight-regular);
	color: var(--color-text-muted);
	line-height: 1.6;
	margin: 0;
	flex: 1;
}

/* CTA — full width, hero button style
   ========================================================================== */

.services-cards__cta {
	align-self: flex-start;
	margin-top: auto;
}