/*
 * service-area.css — a city page's long-form article beside its sidebar card.
 *
 * Figma: node 162:2. The artboard's content box is 1647px wide — a 995px
 * article, a 125px gutter, then a 527px card — which the grid states as those
 * same figures in fr units so the browser scales them to this site's 1280px
 * column.
 *
 * The article's own headings come from the editor, so the display face is
 * applied to whatever level was chosen rather than to a dedicated class. The
 * scale matches service-body.css deliberately: both are long-form treatment
 * copy on the same surface, and a city page reading a size apart from a
 * treatment page would be a bug, not a design.
 */

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

.serviceAreaInner {
	width: min(100% - (var(--gutter) * 2), var(--container));
	margin-inline: auto;
	padding-block: clamp(48px, 5.4vw, 96px);
	display: grid;
	grid-template-columns: 995fr 527fr;
	column-gap: clamp(32px, 6.6vw, 125px);
	/* The card is content-height on the artboard and the article runs well past
	   it; stretching it would paint --surface-deep down the length of the page. */
	align-items: start;
}

/* No sidebar worth drawing — no links entered and no posts published yet. The
   article takes the full measure rather than sitting in a 60% column with a
   hole beside it. */
.serviceAreaInner.isWide {
	grid-template-columns: minmax(0, 1fr);
}

/* ----------------------------------------------------------- The article */

.serviceAreaCopy {
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.625;
	/*
	 * --ink-muted, not the artboard's black: this is running copy at 16px,
	 * which owes 4.5:1, and --ink-muted measures 6.7:1 on --surface-frame. It
	 * is the substitution every other light section here makes.
	 */
	color: var(--ink-muted);
}

.serviceAreaCopy h2,
.serviceAreaCopy h3 {
	font-family: var(--font);
	font-size: 38px;
	line-height: 1.264;
	font-weight: 400;
	text-transform: capitalize;
	text-wrap: balance;
	color: var(--ink);
}

/* Same type scale as h2/h3 in this editor copy, but capitalize is reserved for h1-h3. */
.serviceAreaCopy h4 {
	font-family: var(--font);
	font-size: 38px;
	line-height: 1.264;
	font-weight: 400;
	text-wrap: balance;
	color: var(--ink);
}

.serviceAreaCopy h3 {
	font-size: 26px;
	line-height: 1.3;
}

.serviceAreaCopy h4 {
	font-size: 24px;
	line-height: 1.35;
}

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

/* A heading leads its passage, so the space belongs above it rather than
   between it and the copy it introduces. */
.serviceAreaCopy > h2:not(:first-child),
.serviceAreaCopy > h3:not(:first-child),
.serviceAreaCopy > h4:not(:first-child) {
	margin-top: 20px;
}

.serviceAreaCopy h2 + *,
.serviceAreaCopy h3 + *,
.serviceAreaCopy h4 + * {
	margin-top: 10px;
}

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

.serviceAreaCopy ol {
	list-style: decimal;
}

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

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

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

/* The artboard draws a solid ink hairline here, where the shared .isDark pill
   carries a 25%-opacity one. */
.serviceAreaCta {
	margin-top: 30px;
	border-color: var(--ink);
}

/*
 * A page-specific hover on the shared .isDark pill: its default hover is a
 * light tint, meant for the near-white surfaces it fills elsewhere (404.php).
 * This button sits on --surface-frame, where the same tint barely reads.
 * The text flips to white here too — --text on --surface-deep is dark on dark
 * and unreadable, where .isDark's own light-tint hover never had to move off
 * its own dark text at all. Three classes deep to outweigh .pillBtn.isDark:hover's
 * own specificity rather than relying on source order.
 */
.pillBtn.isDark.serviceAreaCta:hover,
.pillBtn.isDark.serviceAreaCta:focus-visible {
	background: var(--surface-deep);
	border-color: var(--surface-deep);
	color: var(--white);
}

/* ------------------------------------------------------------ The card */

.serviceAreaCard {
	padding: 30px;
	border-radius: 40px;
	background: var(--surface-deep);
	color: var(--white);
}

.serviceAreaBlock + .serviceAreaBlock {
	margin-top: 20px;
}

/* The artboard sets the first card heading at 28px and the second at 30px.
   They are siblings in the same card, so both are drawn at 24px here rather
   than reproducing a two-pixel difference no one intended. */
.serviceAreaCardTitle {
	font-family: var(--font);
	font-size: 24px;
	line-height: 1.4;
	font-weight: 400;
	text-transform: capitalize;
	color: var(--white);
}

.serviceAreaLinks,
.serviceAreaPosts {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin: 5px 0 0;
	padding: 0;
	list-style: none;
}

/* A bulleted list rather than the hairline rule the artboard draws between
   rows — the marker carries the same "these are separate items" job with one
   less rule to keep in step with the "first row, no divider" case. */
.serviceAreaLinks {
	list-style: disc;
	padding-left: 18px;
}

.serviceAreaLinks .serviceAreaLinkItem::marker {
	color: var(--accent);
}

.serviceAreaLinkItem .serviceAreaLink {
	padding-block: 3px;
}

.serviceAreaLink {
	display: block;
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.625;
	color: var(--white);
}

a.serviceAreaLink {
	text-decoration: none;
	transition: color 0.18s var(--ease);
}

/*
 * Colour alone carries the hover: --accent-on-dark measures 4.7:1 on
 * --surface-deep, so the 16px label keeps its ratio without an underline.
 */
a.serviceAreaLink:hover,
a.serviceAreaLink:focus-visible {
	color: var(--accent-on-dark);
}

/* --------------------------------------------------------- Recent posts */

.serviceAreaPostItem:not(:last-child) {
	margin-bottom: 10px;
}

.serviceAreaPost {
	display: flex;
	align-items: center;
	gap: 16px;
	text-decoration: none;
	color: inherit;
}

.serviceAreaPostThumb {
	flex: 0 0 auto;
	width: 99px;
	height: 104px;
	object-fit: cover;
	border-radius: 10px;
}

.serviceAreaPostText {
	display: flex;
	flex-direction: column;
	gap: 0;
	min-width: 0;
}

.serviceAreaPostDate {
	font-family: var(--font-body);
	font-size: 12px;
	line-height: 1.833;
	color: var(--white);
}

.serviceAreaPostTitle {
	font-family: var(--font);
	font-size: 16px;
	line-height: 1.3;
	color: var(--white);
}

.serviceAreaPost:hover .serviceAreaPostTitle,
.serviceAreaPost:focus-visible .serviceAreaPostTitle {
	color: var(--accent-on-dark);
}

/* --------------------------------------------------------------- Sticky */

/*
 * Only while there are two columns to stick beside — below this the card is
 * stacked under the article and pinning it would leave it hanging over the
 * footer. 80px clears the pinned site header, which compacts to 60px once the
 * hero has scrolled past (see base.css).
 *
 * align-items:start on the grid is what makes this work at all: a stretched
 * item fills the row and has nowhere to travel.
 */
@media (min-width: 1001px) {
	.serviceAreaSide {
		position: sticky;
		top: 80px;
		/*
		 * No max-height/overflow here on purpose, and no scrollbar as a
		 * result. A capped, internally-scrolling card was tried when the
		 * sidebar showed four recent posts and could run taller than the
		 * space under the pinned header — trading a stranded row for a
		 * scrollbar nested inside a sticky card, which read as broken on a
		 * short viewport. The sidebar shows three posts now specifically so
		 * the whole card fits that space on every viewport this site
		 * supports; on the rare shorter window it still cannot, plain
		 * overflow (the CSS default) just lets the card extend past the
		 * fold and travel with the page, the same as any other sticky
		 * element — no clipped content, no scrollbar.
		 */
	}
}

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

@media (max-width: 1000px) {
	/* One column: the card follows the article rather than squeezing a 527px
	   sidebar into whatever is left of a tablet's width. */
	.serviceAreaInner {
		grid-template-columns: minmax(0, 1fr);
		row-gap: clamp(40px, 5vw, 64px);
	}

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

@media (max-width: 560px) {
	.serviceAreaCard {
		border-radius: 28px;
	}

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