/* The list of services (inc/services-render.php). Only the LBS Foundation theme's design tokens (--lbs-*): no colour
   of its own. Two classes in rules that set a look, as in sites.css and staff.css. The fields take the theme's form
   look (class "lbs-form", forms.css). */

/* The filters hide services with [hidden]; the grid rules below must not show them again. */
.lbs-services [hidden] { display: none !important; }

/* Filters: a grey panel as on the staff list; search, category and the button side by side from 768px. */
.lbs-services .lbs-services__filters {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--lbs-space-4);
	margin: 0 0 var(--lbs-space-4);
	padding: var(--lbs-space-5);
	background: var(--lbs-panel);
}
@media (min-width: 768px) {
	.lbs-services .lbs-services__filters { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto; align-items: end; }
}
/* Fields may shrink below the browser's own minimum width, so 200% text on a 320px screen does not push the page
   sideways. The grid sets the spacing: not the theme's bottom margin and 32rem cap on a form field. */
.lbs-services .lbs-services__filters > *,
.lbs-services .lbs-services__filters input,
.lbs-services .lbs-services__filters select { min-width: 0; }
.lbs-services .lbs-field { max-width: none; margin: 0; }
.lbs-services .lbs-services__submit button { min-height: var(--lbs-target); margin: 0; }

.lbs-services .lbs-services__status { margin: 0 0 var(--lbs-space-4); color: var(--lbs-muted); font-size: var(--lbs-fs-sm); }
.lbs-services .lbs-services__none { margin: var(--lbs-space-5) 0 0; }

/* The services: blocks with a hairline border, one column on phones, two from 768px. */
.lbs-services .lbs-services__list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--lbs-space-5);
}
@media (min-width: 768px) {
	.lbs-services .lbs-services__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.lbs-services .lbs-service {
	display: flex;
	flex-direction: column;
	min-width: 0;
	margin: 0;
	padding: var(--lbs-space-5);
	border: 1px solid var(--lbs-border-soft);
	background: var(--lbs-white);
	text-align: left;
	overflow-wrap: break-word;
	/* The address bar's #slug: a little room above the block. */
	scroll-margin-top: var(--lbs-space-5);
}
.lbs-service .lbs-service__title {
	margin: 0 0 var(--lbs-space-3);
	font-size: var(--lbs-fs-lg);
	line-height: var(--lbs-lh-heading);
	overflow-wrap: anywhere;
}
.lbs-service .lbs-service__hours { margin: 0 0 var(--lbs-space-3); font-size: var(--lbs-fs-sm); }
.lbs-service .lbs-service__text > :first-child { margin-top: 0; }
.lbs-service .lbs-service__text > :last-child { margin-bottom: 0; }

/* The link: its words and an arrow (decoration: the empty alternative text keeps it out of what screen readers
   read), as on the theme's link cards. */
.lbs-service .lbs-service__more { margin: var(--lbs-space-4) 0 0; }
.lbs-service .lbs-service__more a {
	display: inline-block;
	padding-block: var(--lbs-space-1);
	color: var(--lbs-red);
	font-weight: 500;
	text-decoration: none;
}
.lbs-service .lbs-service__more a::after { content: '\00a0\2192'; content: '\00a0\2192' / ''; }
.lbs-service .lbs-service__more a:is(:hover, :focus-visible) { color: var(--lbs-red-dark); text-decoration: underline; }

/* Categories: a small line at the foot of the block. */
.lbs-service .lbs-service__cats {
	margin: auto 0 0;
	padding-top: var(--lbs-space-4);
	color: var(--lbs-muted);
	font-size: var(--lbs-fs-xs);
	line-height: var(--lbs-lh-tight);
}