/*
 * areas.css — "Treatment Service Areas": two photographs beside a checklist.
 *
 * Figma: "Services" frame, node 45:1355. The artboard's content box is 1478px
 * wide — two 429/426px portraits 24px apart on the left, a 92px gutter, then
 * a 507px text column. Scaled to this site's 1280px column that is 761px of
 * photography, an 80px gutter and a 439px column, which the grid below states
 * as the artboard's own figures in fr units.
 *
 * Type note: this is the one frame in the file drawn in DM Sans over a slate
 * grey rather than the site's Marcellus/Lato on the shared tokens. It is set
 * here in the site's own faces and --ink-muted instead, because pulling a
 * third family onto the page for a list of twenty place names would cost a
 * font request and break the type system everywhere else keeps.
 */

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

.areasInner {
	width: min(100% - (var(--gutter) * 2), var(--container));
	margin-inline: auto;
	padding-block: clamp(56px, 6.2vw, 110px);
	display: grid;
	grid-template-columns: 879fr 507fr;
	gap: clamp(32px, 6.2vw, 92px);
	/*
	 * Default (stretch), not start: the text column is the taller of the two
	 * at every width the checklist can reach, so leaving both columns to
	 * stretch is what makes the photos rise to match it — a fixed align-items
	 * would either crop nothing back down to the artboard's own ratio or leave
	 * the photos visibly short next to the list. Stretching still keeps both
	 * tops level, it just also equalises the heights.
	 */
}

/* ------------------------------------------------------------- Photos */

.areasMedia {
	display: grid;
	grid-template-columns: 429fr 426fr;
	gap: 24px;
}

.areasPhoto {
	display: block;
	width: 100%;
	/*
	 * height:100%, not the artboard's own 429:584 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 .areasBody's content
	 * actually needs rather than the fixed ratio the artboard draws. object-fit
	 * still crops each photo sensibly at whatever height that turns out to be.
	 */
	height: 100%;
	object-fit: cover;
	border-radius: 24px;
}

/* The artboard steps the second photograph down by 49px against the first
   (nodes 45:1489, 45:1492), but the two are kept level here at the client's
   direction. */
.areasPhotoLower {
	margin-top: 0;
}

/* -------------------------------------------------------------- Body */

.areasEyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 12px;
	line-height: 28px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--ink);
}

.areasEyebrow .eyebrowRule {
	color: var(--accent);
}

.areasTitle {
	margin-top: 10px;
	font-size: 42px;
	line-height: 1.072;
	font-weight: 400;
	text-transform: capitalize;
	text-wrap: balance;
	color: var(--forest-ink);
}

.areasTitle span {
	color: inherit;
}

.areasColumns {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(16px, 2.2vw, 32px);
	margin-top: 20px;
}

.areasList {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.areasItem {
	display: flex;
	align-items: flex-start;
	gap: 8px;
}

/*
 * --accent-deep, not --accent: a tick is a non-text graphic carrying meaning,
 * which WCAG 1.4.11 holds to 3:1. The brand teal reaches only 2.9:1 on this
 * surface; the deepened teal measures 3.95:1 and reads identically.
 */
.areasCheck {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	margin-top: 4px;
	color: var(--accent-deep);
}

.areasCheck svg {
	width: 16px;
	height: 16px;
}

.areasItemText {
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.5;
	color: var(--ink-muted);
}

/*
 * A place with a city page becomes a link; one nobody has built yet stays a
 * plain <span> (see template-parts/areas.php) — so this only has to style
 * the <a> case, same --accent-deep the check icon above already uses on
 * this surface (measured 3.95:1 in that comment).
 */
a.areasItemText {
	text-decoration: none;
	transition: color 0.18s var(--ease);
}

a.areasItemText:hover,
a.areasItemText:focus-visible {
	color: var(--accent-deep);
}

.areasCta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(16px, 1.8vw, 28px);
	margin-top: 20px;
	padding-top: 25px;
	border-top: 1px solid rgba(28, 28, 28, 0.12);
}

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

@media (max-width: 900px) {
	.areasInner {
		grid-template-columns: minmax(0, 1fr);
	}

	.areasTitle {
		font-size: 34px;
	}
}

@media (max-width: 767px) {
	.areasMedia {
		gap: 15px;
	}
}

@media (max-width: 560px) {
	.areasTitle {
		font-size: 28px;
	}

	.areasColumns {
		grid-template-columns: minmax(1, 1fr);
	}
}