/*
 * pm-services — the services / values grid (WO-37; shared with WO-36's
 * architects page, which merges after this ticket).
 *
 * Source frame: docs/design/frames/37-about.json, node 90:3643 — a White
 * column, padding 96, gap 64: the centred section header, then a
 * flex-wrap grid of value cards, three across the 1248px content width.
 *
 * Compiled to assets/css/components/services.css by src/build-tokens.mjs,
 * which substitutes the breakpoint markers (a comment holding `@bp <name>`)
 * with the pixel value from tokens/tokens.json. Never type a breakpoint
 * width here.
 *
 * Every colour, font family, weight, size, leading and tracking is a
 * --pm-* token. No hex value and no literal breakpoint width may appear in
 * this file. Values the token file does not hold (the 800px intro width,
 * the 400px card, the 56px icon box) are typed with a comment citing the
 * extract key — the same technique as the section header's 702px title
 * width.
 */

/*
 * The section: a full-width band on White (37-about.json#services.layout
 * — the White role is the on-accent token, B5's same-named-tokens rule),
 * column, padding 96 all sides (--pm-space-24), gap 64 (--pm-space-16).
 * The scaffold stylesheet (style.css) constrains body to a centred 72rem
 * column; the section escapes that box with the same full-bleed technique
 * as the intro (intro.css).
 */
.pm-services {
	box-sizing: border-box;
	width: 100vw;
	margin-inline: calc(50% - 50vw);
	display: flex;
	flex-direction: column;
	gap: var(--pm-space-16);
	padding: var(--pm-space-24);
	background-color: var(--pm-color-on-accent);
}

/*
 * The header's intro is 800 wide (37-about.json#services.header.intro —
 * typed; no token holds it), wider than the section-header pattern's own
 * 560px body measure — the consumer widens its own instance, the pattern's
 * writer is untouched.
 */
.pm-services__header .pm-section-header__body {
	max-width: 800px;
}

/*
 * The grid: flex wrap, gap 48 row / 24 column (37-about.json#services
 * .grid — 48 is --pm-space-12, 24 is --pm-space-6). Base (below laptop):
 * each card takes the whole row (flex 1 1 100%).
 */
.pm-services__grid {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pm-space-12) var(--pm-space-6);
}

/*
 * The card (37-about.json#services.grid.card): White on White, a 1px
 * Powder Blush border (the surface-alt role), padding 32 (--pm-space-8),
 * its content stacked 32px apart (--pm-space-8). min-width: 0 so a long
 * Dutch title wraps instead of stretching the row (MISTAKES.md §E4).
 */
.pm-services__card {
	box-sizing: border-box;
	flex: 1 1 100%;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--pm-space-8);
	padding: var(--pm-space-8);
	background-color: var(--pm-color-on-accent);
	border: 1px solid var(--pm-color-surface-alt);
}

/*
 * ≥ laptop (37-about.json#services.grid): the cards sit three across —
 * 400px each (typed; 3 × 400 + 2 × 24 = 1248, the content width at 1440).
 */
@media (min-width: 1024px) {
	.pm-services__card {
		flex: 0 0 400px;
	}
}

/*
 * The plain variant (WO-36, 36-architects.json#services — the architects
 * page): the section paints nothing, so the page's Blush Linen (the
 * scaffold body's surface) shows through — the same-named-tokens rule, B5;
 * the grid's gap is 24 both axes (the extract's "gap 24/24" — the bordered
 * variant's 48px row gap is the About reading); and the cards lose the
 * border and their White fill, the line art and text sitting directly on
 * the section as the frame draws them. Everything else — the 32px card
 * padding, the icon, the type — is the bordered card's, unchanged.
 *
 * (0,2,0) selectors: they must out-rank the base (0,1,0) rules above
 * regardless of source order.
 */
.pm-services.pm-services--plain {
	background-color: transparent;
}

.pm-services.pm-services--plain .pm-services__grid {
	gap: var(--pm-space-6);
}

.pm-services.pm-services--plain .pm-services__card {
	background-color: transparent;
	border: 0;
}

/*
 * The icon: 56 high, width auto (37-about.json#services.grid.card
 * .illustration — "56 high, width 43–71"; the odd-proportion PNG override
 * boxes to the 56px height and keeps its own ratio, never distorts).
 *
 * Two-class selector on purpose (MISTAKES.md §C15): Elementor's own
 * `.elementor img { height: auto; max-width: 100% }` is (0,1,1) and would
 * beat a lone `.pm-services__icon` (0,1,0) — the icon would render at
 * natural size. This selector is (0,2,1).
 *
 * align-self: flex-start — the card is a column flex whose default
 * align-items: stretch would pull the icon's cross size (its width) out
 * to the card's content width, boxing a 43px line art in a 334px box and
 * distorting a PNG override. flex-start leaves width: auto resolving from
 * the image's own ratio at the 56px height.
 */
.pm-services img.pm-services__icon {
	align-self: flex-start;
	height: 56px;
	width: auto;
}

/*
 * The card title (37-about.json#services.grid.card.title): H3 Subtitle —
 * Roboto Light 24 / 1 / -1, Volcanic Ink (the WO-30 h3 tokens; the h3's
 * line-height is 1, typed here like the section-header title's — no
 * leading token holds 1).
 */
.pm-services__title {
	margin: 0;
	font-family: var(--pm-font-family-base);
	font-size: var(--pm-font-size-h3);
	font-weight: var(--pm-font-weight-300);
	line-height: 1;
	letter-spacing: var(--pm-tracking-h3);
	color: var(--pm-color-ink);
	/* A long Dutch title wraps rather than overflowing (MISTAKES.md §E4). */
	overflow-wrap: break-word;
}

/*
 * The card description (37-about.json#services.grid.card.description):
 * Body Roboto Light 16 / 1.6, body-text (Texte @64%). Paragraphs
 * preserved: the stored rich HTML renders as a stack of <p>s.
 */
.pm-services__description {
	font-family: var(--pm-font-family-base);
	font-size: 1rem;
	font-weight: var(--pm-font-weight-300);
	line-height: var(--pm-leading-body);
	color: var(--pm-color-body-text);
}

.pm-services__description p {
	margin: 0;
}

.pm-services__description p + p {
	margin-top: var(--pm-space-4);
}

/*
 * TODO(open-question): the extract measures one 1440 frame only —
 * MISTAKES.md §C7. Between laptop and the 1440 frame the three 400px
 * cards keep their width and the section's side padding absorbs the
 * difference; below laptop each card takes the whole row (the work
 * order's own `1 1 100%` clause). No other step is designed. Owner: the
 * designer, with the missing mobile design.
 */