/* Service landing pages (D-057). */

/* ---- Breadcrumb ---- */
.lp-crumbs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--lp-s-2);
	margin: 0 0 var(--lp-s-5);
	color: var(--lp-muted);
	font-size: var(--lp-fs-small);
}

.lp-crumbs a {
	display: inline-flex;
	align-items: center;
	min-height: var(--lp-tap);
	color: var(--lp-green-text);
	text-decoration: none;
}

.lp-crumbs a:hover { text-decoration: underline; }

/* ---- Intro ---- */
.lp-service-intro__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: center;
	gap: clamp(var(--lp-s-5), 4vw, var(--lp-s-8));
}

@media (min-width: 1024px) {
	.lp-service-intro__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
}

.lp-service-intro .lp-intro__text { margin-bottom: var(--lp-s-5); }
.lp-service-intro .lp-tags { margin-bottom: var(--lp-s-5); }

.lp-service-intro__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--lp-s-3);
}


.lp-service-intro__media {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--lp-radius-xl);
	background: var(--lp-paper-2);
}

.lp-service-intro__media .lp-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---- What we fill ---- */
.lp-service-products__text { max-width: 420px; margin: 0; }

.lp-service-products__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
	gap: var(--lp-s-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.lp-service-products__item {
	padding: var(--lp-s-5) var(--lp-s-5) var(--lp-s-5);
	border-radius: var(--lp-radius-md); /* Same card treatment as .lp-card elsewhere on the site. */
	background: var(--lp-card);
}

.lp-service-products__title {
	margin: 0 0 var(--lp-s-2);
	font-size: var(--lp-fs-3);
}

.lp-service-products__item p {
	margin: 0;
	color: var(--lp-muted);
	line-height: var(--lp-lh-body);
}

/* Photo band and the dark sizes band sit between sections. */
.lp-service-products + .lp-band-mosaic { margin-top: var(--lp-section-y); }

/* ---- How it works ---- */
.lp-service-steps__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
	gap: var(--lp-s-4);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.lp-service-steps__item {
	position: relative;
	padding: var(--lp-s-5);
	border-radius: var(--lp-radius-lg);
	background: var(--lp-paper-2);
}

.lp-service-steps__num {
	display: inline-grid;
	place-items: center;
	width: 40px;
	height: 40px;
	margin-bottom: var(--lp-s-4);
	border-radius: 50%;
	background: var(--lp-green-surface);
	color: var(--lp-on-dark);
	font-size: var(--lp-fs-1);
	font-weight: var(--lp-weight-bold);
	font-variant-numeric: tabular-nums;
}

.lp-service-steps__title {
	margin: 0 0 var(--lp-s-2);
	font-size: var(--lp-fs-3);
}

.lp-service-steps__item p {
	margin: 0;
	color: var(--lp-muted);
	line-height: var(--lp-lh-body);
}

/* ---- Other services ---- */
.lp-service-related__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: var(--lp-s-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.lp-service-related__item {
	position: relative;
	padding: var(--lp-s-5);
	border: 1px solid var(--lp-line);
	border-radius: var(--lp-radius-lg);
	background: var(--lp-card);
	transition: box-shadow var(--lp-ease), border-color var(--lp-ease);
}

.lp-service-related__item:hover,
.lp-service-related__item:focus-within {
	border-color: var(--lp-highlight);
	box-shadow: var(--lp-shadow-card);
}

.lp-service-related__item h3 {
	margin: 0 0 var(--lp-s-2);
	font-size: var(--lp-fs-3);
}

.lp-service-related__item p {
	margin: 0 0 var(--lp-s-3);
	color: var(--lp-muted);
	line-height: var(--lp-lh-body);
}