/* ==========================================================================
   Services screen
   ========================================================================== */

.page-hero--services .page-hero__title .title-line:first-child {
	color: var(--color-ink);
}

/* The swoosh only: the note is the same size as every other screen's (see Testimonials). */
.page-hero--services .script-note {
	--swoosh-width: 2.3em;
	--swoosh-offset: 2.6em;
	--swoosh-gap: 0.3em;
}

/*
 * The groups (Services → Groups): a heading over each grid, and the space
 * between two groups larger than the space between two cards, so the eye reads
 * three blocks and not one long grid with headings in it.
 */
.service-group + .service-group {
	margin-top: var(--space-10);
}

.service-group__title {
	margin-bottom: var(--space-5);
	font-size: 1.5rem;
	color: var(--color-ink);
}

.service-grid {
	display: grid;
	gap: var(--space-4);
}

.service-card {
	container-type: inline-size;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 29%;
	overflow: hidden;
	background: #fafcfe;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
}

.service-card__body {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--space-4);
	padding: var(--space-5) var(--space-4) var(--space-5) var(--space-5);
}

.service-card__icon .icon {
	stroke-width: 1.6;
}

.service-card__content {
	display: flex;
	flex-direction: column;
}

.service-card__title {
	margin-top: 0.35rem;
	font-size: 1.0625rem;
	color: var(--color-navy);
}

/*
 * Four lines is the most the widest card shows, so every card stops there: past that
 * the excerpts stop being scannable and the cards in a row drift apart in height.
 * The Summary field's help on the service screen asks for a sentence that fits — the
 * clamp is the guarantee, not the plan.
 */
.service-card__text {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	line-clamp: 4;
	overflow: hidden;
	margin-top: var(--space-2);
	font-size: var(--fs-xs);
	line-height: 1.55;
	color: var(--color-muted);
}


/*
 * "Learn More", to the service's page. Pushed to the foot of the
 * column, so the links of a row line up whatever the length of each sentence.
 */
.service-card__more {
	align-self: flex-start;
	margin-top: auto;
	padding-top: var(--space-3);
	font-size: var(--fs-sm);
}

.service-card__image {
	width: 100%;
	height: 100%;
	min-height: 170px;
	object-fit: cover;
}

/* Framing for the current hero: therapist and the patient's knee in view, with the
   top-right wall left clear for the handwritten note. */
.page-hero--services .page-hero__image {
	--hero-photo-y: 34%;
}

/*
 * The mockup puts the icon beside the title, which leaves the copy a narrow column —
 * fine while the card is roomy, too tight once it drops under ~400px. That happens at
 * several unrelated viewport widths (two columns from 768px, three from 1200px, one
 * column on a phone), so the card asks about its own width instead of the viewport's:
 * one rule covers every case, and the mockup's layout is kept wherever it fits.
 * Below the threshold the icon moves above the title and the copy takes the full width.
 */
@container (max-width: 399.98px) {
	.service-card__body {
		grid-template-columns: 1fr;
		/* Only the content row takes the spare height, not the icon. */
		grid-template-rows: auto minmax(0, 1fr);
	}
}

@media (min-width: 768px) {
	.service-grid {
		/* Equal rows, as on the Locations grid, so every card foot lines up. */
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-auto-rows: 1fr;
	}
}

@media (min-width: 1200px) {
	.service-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}