/**
 * Window Smart Home - Service Listing template
 * Listing grid excerpt text, the process steps, and the service-area
 * badges.
 * (The shared page banner lives in assets/css/page-banner.css. The card
 * grid itself - .wsh-services__grid, .wsh-service-card* - lives in
 * home.css, reused here as-is.)
 */

.wsh-services__grid--listing {
	grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 900px) {
	.wsh-services__grid--listing {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 560px) {
	.wsh-services__grid--listing {
		grid-template-columns: 1fr;
	}
}

.wsh-service-card__excerpt {
	margin-top: calc(-1 * var(--wsh-space-2));
	color: var(--wsh-grey-500);
	font-size: var(--wsh-fs-sm);
	line-height: var(--wsh-lh-body);
}

.wsh-service-areas__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wsh-space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.wsh-service-areas__badge {
	display: inline-flex;
	align-items: center;
	gap: var(--wsh-space-2);
	padding: 12px 22px;
	border-radius: var(--wsh-radius-pill);
	background: var(--wsh-grey-50);
	color: var(--wsh-ink);
	font-weight: var(--wsh-fw-semibold);
	transition: background-color var(--wsh-transition), color var(--wsh-transition), transform var(--wsh-transition);
}

.wsh-service-areas__badge .wsh-icon {
	color: var(--wsh-blue);
	transition: color var(--wsh-transition);
}

.wsh-service-areas__badge:hover {
	background: var(--wsh-blue);
	color: var(--wsh-white);
	transform: translateY(-2px);
}

.wsh-service-areas__badge:hover .wsh-icon {
	color: var(--wsh-white);
}

/* ==========================================================================
   Process steps
   ========================================================================== */

.wsh-process__grid {
	display: grid;
	gap: var(--wsh-space-8);
	grid-template-columns: repeat(4, 1fr);
}

.wsh-process-step {
	text-align: center;
}

.wsh-process-step__number {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	margin: 0 auto var(--wsh-space-4);
	border-radius: var(--wsh-radius-circle);
	background: var(--wsh-blue);
	color: var(--wsh-white);
	font-size: var(--wsh-fs-h4);
	font-weight: var(--wsh-fw-bold);
	transition: background-color var(--wsh-transition);
}

.wsh-process-step:hover .wsh-process-step__number {
	background: var(--wsh-green);
}

.wsh-process-step__title {
	margin: 0 0 var(--wsh-space-2);
	color: var(--wsh-ink);
	font-size: var(--wsh-fs-h5);
}

.wsh-process-step__text {
	margin: 0;
	color: var(--wsh-grey-500);
	font-size: var(--wsh-fs-sm);
	line-height: var(--wsh-lh-body);
}

@media (max-width: 900px) {
	.wsh-process__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.wsh-process__grid {
		grid-template-columns: 1fr;
	}
}