/**
 * pchs/process-steps
 */

/* The type is the shared .pchs-eyebrow role (theme/style.css); only its
   spacing in this block's head is set here. */
.pchs-process-steps .pchs-eyebrow {
	margin: 0 0 var(--wp--preset--spacing--30);
}

.pchs-process-steps {
	--pchs-pad-x: var(--wp--preset--spacing--50);
	--pchs-cols: 4;

	padding-block: var(--wp--custom--section--y);
}

@media (min-width: 48em) {
	.pchs-process-steps {
		--pchs-pad-x: var(--wp--preset--spacing--70);
	}
}

.pchs-process-steps--surface {
	background: var(--wp--preset--color--surface);
}

.pchs-process-steps__inner {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding-inline: var(--pchs-pad-x);
	box-sizing: border-box;
}

/*
 * Section headers align with the content they introduce. Every section body on
 * this site is a left-aligned grid, so every section header is left-aligned;
 * centring some and not others was the inconsistency, not the centring itself.
 * city-chips is the one exception, and it centres its chips too.
 */
.pchs-process-steps__head {
	max-width: 48rem;
	margin-block-end: var(--wp--preset--spacing--60);
}

/*
 * Section headings are sized by role, not by tag: the heading level is an
 * author choice per block, so an h3 section title must still read as a
 * section title.
 */
.pchs-process-steps__title {
	margin: 0;
}

.pchs-process-steps__subcopy {
	margin: var(--wp--preset--spacing--20) 0 0;
}

.pchs-process-steps__list {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

@media (min-width: 40em) {
	.pchs-process-steps__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 62em) {
	.pchs-process-steps__list {
		grid-template-columns: repeat(var(--pchs-cols), minmax(0, 1fr));
	}
}

.pchs-process-steps__step-title {
	margin: var(--wp--preset--spacing--20) 0 var(--wp--preset--spacing--10);
}

.pchs-process-steps__text {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.55;
}

/* --------------------------------------------------------------- rules --- */

/*
 * Green means "you can do this" — it belongs to buttons and links. A step
 * number is a label, so it is muted. It was also green-tint on white, which
 * measures 1.30:1: the 01/02/03/04 were effectively invisible. muted is 6.0:1.
 */
.pchs-process-steps--rules .pchs-process-steps__marker {
	display: block;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--2-xl);
	font-weight: 800;
	line-height: 1;
}

/*
 * Dividers sit between steps, never trailing the last one. On a stacked
 * layout they run horizontally instead of vertically.
 */
/*
 * `--border` (#e7e5df) on `--surface` (#f5f7f3) measures 1.17:1 — the dashed
 * rules vanish on the home page's surface band. Mix ink into base so the hairline
 * holds ~2.5:1 on both white and surface (WCAG 1.4.11 non-text is 3:1; a dashed
 * divider at this weight reads as a separator before it hits that number).
 */
.pchs-process-steps--rules .pchs-process-steps__step + .pchs-process-steps__step {
	padding-block-start: var(--wp--preset--spacing--50);
	border-block-start: 1px dashed color-mix( in srgb, var(--wp--preset--color--ink) 28%, var(--wp--preset--color--base) );
}

@media (min-width: 40em) {
	.pchs-process-steps--rules .pchs-process-steps__step + .pchs-process-steps__step {
		padding-block-start: 0;
		border-block-start: 0;
	}

	.pchs-process-steps--rules .pchs-process-steps__step {
		padding-inline-end: var(--wp--preset--spacing--50);
		border-inline-end: 1px dashed color-mix( in srgb, var(--wp--preset--color--ink) 28%, var(--wp--preset--color--base) );
	}

	/* Second column on a 2-up grid, and the last card, carry no rule. */
	.pchs-process-steps--rules .pchs-process-steps__step:nth-child(2n),
	.pchs-process-steps--rules .pchs-process-steps__step:last-child {
		padding-inline-end: 0;
		border-inline-end: 0;
	}
}

@media (min-width: 62em) {
	.pchs-process-steps--rules .pchs-process-steps__step:nth-child(2n) {
		padding-inline-end: var(--wp--preset--spacing--50);
		border-inline-end: 1px dashed color-mix( in srgb, var(--wp--preset--color--ink) 28%, var(--wp--preset--color--base) );
	}

	.pchs-process-steps--rules .pchs-process-steps__step:last-child {
		padding-inline-end: 0;
		border-inline-end: 0;
	}
}

/* --------------------------------------------------------------- cards --- */

/*
 * Four-up at 62em the cards are ~270px wide. 24px padding left the body only
 * ~222px (/bathrooms/), so multi-line titles felt jammed against the border.
 * Match the denser card pads used elsewhere at this size (spacing--60).
 */
.pchs-process-steps--cards .pchs-process-steps__step {
	padding: var(--wp--preset--spacing--60);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--base);
}

@media (max-width: 39.99em) {
	.pchs-process-steps--cards .pchs-process-steps__step {
		padding: var(--wp--preset--spacing--50);
	}
}

/*
 * Same job as service-cards' title min-height: on /bathrooms/ at 1440, two of
 * four titles wrap ("Experienced professionals", "Commitment to satisfaction")
 * and two do not, so the body copy started 26px lower on the wrapping cards.
 */
@media (min-width: 40em) {
	.pchs-process-steps--cards .pchs-process-steps__step-title {
		min-height: 2lh;
	}
}

.pchs-process-steps--cards .pchs-process-steps__marker {
	display: block;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: var(--wp--custom--tracking--label);
	text-transform: uppercase;
}

.pchs-process-steps--cards .pchs-process-steps__step.is-highlight {
	border-color: var(--wp--preset--color--green-light);
	background: var(--wp--preset--color--green-tint);
}

.pchs-process-steps--cards .is-highlight .pchs-process-steps__marker {
	color: var(--wp--preset--color--green-dark);
}

.pchs-process-steps--cards .is-highlight .pchs-process-steps__text {
	color: var(--wp--preset--color--ink);
}