/* Homepage "Our Services" cards. Remove this file (and its enqueue/editor-style lines in functions.php) to drop the card styling. */
.service-cards {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.5rem;
	margin: 1.25rem 0 0; /* same gap under the title squiggle as the story cards */
	padding: 0;
}

.service-cards .service-card {
	position: relative;
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border-radius: 10px;
	background-color: #f04f5c0d;
}

.service-cards .service-photo {
	margin: 0;
}

.service-cards .service-photo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.service-cards .service-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	margin: 0;
	padding: 0 1.5rem 1.5rem;
}

.service-cards .service-icon {
	position: relative;
	z-index: 2;
	margin: -25px 0 0.9rem;
}

.service-cards .service-icon img {
	display: block;
	border-radius: 50%;
	box-shadow: 0 0 0 4px #fff;
}

.service-cards .service-title {
	margin: 0 0 0.5rem;
}

.service-cards .service-title a {
	color: var(--wp--preset--color--custom-dark-blue, #0d314e);
}

.service-cards .service-stat {
	margin: 0 0 0.6rem;
	padding: 0;
	font-size: var(--wp--preset--font-size--base);
	font-weight: 700;
	line-height: 1.3;
	color: var(--wp--preset--color--custom-dark-blue, #0d314e);
}

.service-cards .service-stat mark {
	background: none;
	color: var(--wp--preset--color--custom-orange, #ef505d);
}

.service-cards .service-desc {
	margin: 0 0 1.25rem;
	padding: 0;
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.4;
}

.service-cards .service-link {
	margin: auto 0 0;
	padding: 0;
	font-size: var(--wp--preset--font-size--base);
	font-weight: 700;
}

.service-cards .service-link a {
	color: var(--wp--preset--color--custom-medium-blue, #3a80be);
}

/* The whole card is clickable on the live site (cards.js); the pointer cursor shows it. Links inside stay individually hoverable. */
body:not(.editor-styles-wrapper) .service-cards .service-card {
	cursor: pointer;
}

@media (prefers-reduced-motion: no-preference) {
	.service-cards .service-card {
		transition: transform 0.2s ease, box-shadow 0.2s ease;
	}

	body:not(.editor-styles-wrapper) .service-cards .service-card:hover {
		transform: translateY(-4px);
		box-shadow: 0 10px 24px rgba(13, 49, 78, 0.12);
	}
}

@media (max-width: 1100px) {
	.service-cards {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.service-cards {
		grid-template-columns: 1fr;
	}
}