/* Services Overview Block */

/* Full-bleed is provided by the unconstrained content area of the "Full Width"
   page template — the section fills its container at 100% width. No width:100vw
   (which counts the scrollbar gutter and caused horizontal overflow).
   Inner content stays max-w-7xl. */

/* Card elevation — navy-tinted shadow (matches the v0 shadow-xl shadow-navy/8),
   deeper on hover. */
.le-services-overview-block .service-card {
	will-change: transform;
	box-shadow:
		0 20px 25px -5px color-mix(in srgb, var(--color-primary) 8%, transparent),
		0 8px 10px -6px color-mix(in srgb, var(--color-primary) 8%, transparent);
}

.le-services-overview-block .service-card:hover {
	box-shadow: 0 25px 50px -12px color-mix(in srgb, var(--color-primary) 18%, transparent);
}

@media (prefers-reduced-motion: reduce) {
	.le-services-overview-block .service-card {
		transition: none;
	}
	.le-services-overview-block .service-card:hover {
		transform: none;
	}
}

/* Center a short row of cards.

   The grid is four columns wide at lg. A dealer with two or three services would
   otherwise leave a dead column on the right. `auto-fit` still lays out four
   tracks, collapses the ones no card landed in (their gutters collapse with
   them), and `justify-content: center` centers what survives — so two or three
   cards sit centered at exactly the width they would have had in a full row of
   four. Four cards are unaffected; nothing about card sizing or wrapping changes.

   The track width is derived from the same gutter the markup sets (gap-6), so
   keep --le-services-gap in step with that utility if it ever changes. */
@media (min-width: 1024px) {
	.le-services-overview-block .le-services-grid {
		--le-services-gap: 1.5rem;
		grid-template-columns: repeat(
			auto-fit,
			calc((100% - 3 * var(--le-services-gap)) / 4)
		);
		justify-content: center;
	}
}