/*
 * service-body.css — alternating copy and photograph bands on a treatment page.
 *
 * Figma: node 62:2711. The artboard's content box is 1631px wide: a 722px text
 * column, a 105px gutter, then an 804px photograph. Scaled to this site's
 * 1280px column that is 567 / 82 / 631, which the grid states as the artboard's
 * own figures in fr units. Type stays at the artboard's sizes, as elsewhere.
 */

.serviceBody {
	background: var(--surface-frame);
	color: var(--ink);
}

.serviceBodyInner {
	width: min(100% - (var(--gutter) * 2), var(--container));
	margin-inline: auto;
	padding-block: clamp(48px, 5.4vw, 96px);
	display: flex;
	flex-direction: column;
	/* 90px minimum between rows, per the client's direction — the artboard's
	   own 98px no longer scales down below that on a narrower viewport. */
	gap: 90px;
}

.serviceBlock {
	display: grid;
	grid-template-columns: 722fr 804fr;
	column-gap: clamp(32px, 6.4vw, 82px);
	/*
	 * Default (stretch): the row's height is the taller of its two natural
	 * contributions — usually the text, sometimes the image on a short row —
	 * and .serviceBlockImg below stretches to fill whichever that turns out
	 * to be. .serviceBlockText overrides this per-item with its own
	 * align-self, because the text itself should never stretch — only centre
	 * in whatever extra height the image contributes.
	 */
}

.serviceBlockText {
	align-self: center;
}

/* Every second photographed block puts the picture on the left. Source order
   keeps the heading first for a screen reader either way. */
.serviceBlock.isFlipped .serviceBlockText {
	grid-column: 2;
	grid-row: 1;
}

.serviceBlock.isFlipped .serviceBlockMedia {
	grid-column: 1;
	grid-row: 1;
}

/* A block with no photograph — the artboard only draws three, and the page
   runs to nine. The copy takes the full column rather than leaving a gap. */
.serviceBlock.isWide {
	grid-template-columns: minmax(0, 1fr);
}

/*
 * The row's heading is written in the editor rather than a field of its own,
 * so the display face is applied to whatever heading level the editor chose
 * instead of to a dedicated class. h2 is the level the artboard uses and the
 * one the page's outline wants under its single h1.
 */
.serviceBlockCopy h2,
.serviceBlockCopy h3 {
	font-family: var(--font);
	font-size: 44px;
	line-height: 1.164;
	font-weight: 400;
	text-transform: capitalize;
	text-wrap: balance;
	color: var(--ink);
}

.serviceBlockCopy h3 {
	font-size: 30px;
}

/* The heading leads the row, so the space between it and the copy belongs to
   the elements after it rather than above the block. */
.serviceBlockCopy h2 + *,
.serviceBlockCopy h3 + * {
	margin-top: 10px;
}

.serviceBlockCopy {
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.625;
	/*
	 * --ink-muted, not the artboard's #7d7d7d. That grey measures 3.24:1 on
	 * this surface and the copy is 16px, which owes 4.5:1. --ink-muted reaches
	 * 6.7:1 and is the substitution every other light section here makes.
	 */
	color: var(--ink-muted);
}

.serviceBlockCopy > * + * {
	margin-top: 12px;
}

.serviceBlockCopy > h2:not(:first-child),
.serviceBlockCopy > h3:not(:first-child) {
	margin-top: clamp(20px, 2.2vw, 32px);
}

.serviceBlockCopy ul,
.serviceBlockCopy ol {
	margin-left: 17px;
	padding: 0;
	list-style: disc;
}

.serviceBlockCopy ol {
	list-style: decimal;
}

.serviceBlockCopy li + li {
	margin-top: 4px;
}

.serviceBlockCopy strong {
	font-weight: 700;
	color: var(--ink);
}

.serviceBlockCopy a {
	color: var(--accent-deep);
	text-decoration: underline;
	text-underline-position: from-font;
}

.serviceBlockCta {
	margin-top: clamp(24px, 2.6vw, 38px);
}

.serviceBlockMedia {
	overflow: hidden;
	border-radius: 40px;
}

.serviceBlockImg {
	display: block;
	width: 100%;
	/*
	 * height:100%, not a fixed ratio: a stretched grid item has a definite
	 * height for its children to resolve a percentage against (per the grid
	 * spec), so this fills whatever height the row actually ends up — the
	 * text column's own content on most rows, or the image's own 4:3 ratio on
	 * a row whose text is shorter than that. object-fit crops sensibly either
	 * way.
	 */
	height: 100%;
	object-fit: cover;
}

/* --------------------------------------------------------------- Small */

@media (max-width: 900px) {
	.serviceBlock,
	.serviceBlock.isFlipped {
		grid-template-columns: minmax(0, 1fr);
		row-gap: clamp(24px, 3.4vw, 40px);
	}

	/* One column: the photograph follows its copy on every block, so the
	   flipped ordering is undone rather than leaving alternate blocks
	   starting on a picture. */
	.serviceBlock.isFlipped .serviceBlockText,
	.serviceBlock.isFlipped .serviceBlockMedia {
		grid-column: 1;
		grid-row: auto;
	}

	/*
	 * A single-column row has no sibling to stretch against, so the grid row
	 * is auto-height and height:100% on the image has nothing definite to
	 * resolve against — it falls back to auto per spec, i.e. the image's own
	 * intrinsic ratio. Pinning that explicitly to 4:3 (the ratio every row
	 * photo is generated at) keeps every row the same shape on a phone
	 * instead of leaving it to whatever pixels a given image happens to have.
	 */
	.serviceBlockImg {
		height: auto;
		aspect-ratio: 4 / 3;
	}

	.serviceBlockCopy h2 {
		font-size: 32px;
	}
}

@media (max-width: 560px) {
	.serviceBodyInner {
		gap: 20px;
	}

	.serviceBlockCopy h2 {
		font-size: 27px;
	}

	.serviceBlockMedia {
		border-radius: 28px;
	}
}