/**
 * pchs/feature-split
 */

.pchs-check {
	flex: none;
	margin-block-start: 0.2em;
	color: var(--wp--preset--color--green);
}

.pchs-sample-chip {
	display: inline-block;
	margin-inline-start: 0.4em;
	padding: 0.15em 0.4em;
	border: 1px solid var(--wp--custom--color--sample-border);
	border-radius: var(--wp--custom--radius--xxs);
	background: var(--wp--custom--color--sample-bg);
	color: var(--wp--custom--color--sample-ink);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: var(--wp--custom--tracking--label);
	line-height: 1.2;
	text-transform: uppercase;
	vertical-align: middle;
	white-space: nowrap;
}

/* ----------------------------------------------------------------------- */

.pchs-feature-split {
	--pchs-pad-x: var(--wp--preset--spacing--50);
}

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

.pchs-feature-split--surface {
	background: var(--wp--preset--color--surface);
}

/*
 * Navy is a card, never a full-bleed band. The home page ran two navy
 * treatments doing the same job 700px apart — this section edge to edge, and
 * promo-band as an inset panel. One shape wins, and it is the inset one,
 * because cta-band and promo-band already use it; full-bleed navy stays
 * reserved for the page furniture (hero, trust-seals, footer).
 *
 * The inner is the card, so the section carries the gutter and the inner's own
 * inline padding becomes the card's inset. That lands the same 1120px panel on
 * a 1440px viewport that cta-band and promo-band produce.
 */
/*
 * Measured on the home page at 1440 before this rule: the navy card sat 120px
 * below the promo-band panel above it and 24px above the city-chips band below
 * it — a 5x asymmetry that made the card look like it had slipped down into the
 * next section. Cause: the block's 96px padding-block lives on __inner, and for
 * the navy variants __inner IS the painted card, so all of it went inside the
 * card and none of it separated the section. The card also ran 96px of interior
 * padding top and bottom against 32px left and right, three times taller than
 * wide.
 *
 * promo-band already solves this correctly for the same shape — section-y outer
 * band, 40px panel interior — so the navy feature-split now matches it rather
 * than inventing a second answer.
 */
.pchs-feature-split--navy,
.pchs-feature-split--navy-deep {
	padding-block: var(--wp--custom--section--y);
	padding-inline: var(--pchs-pad-x);
	color: var(--wp--preset--color--base);
}

.pchs-feature-split--navy .pchs-feature-split__inner,
.pchs-feature-split--navy-deep .pchs-feature-split__inner {
	max-width: calc(var(--wp--style--global--wide-size) - 2 * var(--pchs-pad-x));
	padding-block: var(--wp--preset--spacing--70);
	padding-inline: var(--wp--preset--spacing--60);
	border-radius: var(--wp--custom--radius--md);
	/* clip, not hidden: hidden makes the card a scroll container, and the
	   sticky photo below would stick to the card instead of the viewport. */
	overflow: clip;
}

.pchs-feature-split--navy .pchs-feature-split__inner {
	background: var(--wp--preset--color--navy);
}

.pchs-feature-split--navy-deep .pchs-feature-split__inner {
	background: var(--wp--preset--color--navy-deep);
}

/* Section rhythm: see the note in cta-band/style.css. */
.pchs-feature-split__inner {
	display: grid;
	gap: var(--wp--preset--spacing--60);
	align-items: center;
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding: var(--wp--custom--section--y) var(--pchs-pad-x);
	box-sizing: border-box;
}

@media (min-width: 55em) {
	.pchs-feature-split__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
		gap: var(--wp--preset--spacing--90);
	}

	.pchs-feature-split.is-image-left .pchs-feature-split__copy {
		order: 2;
	}

	/*
	 * Beside long copy a centred photo floated in 300 to 400px of empty column
	 * (/about/, /service-area/). Top-aligned, it starts level with the copy and
	 * then stays in view under the header while the reader scrolls the text.
	 */
	.pchs-feature-split__inner {
		align-items: start;
	}

	.pchs-feature-split__media {
		position: sticky;
		top: calc(var(--pchs-header-h-scrolled) + var(--wp--preset--spacing--50));
	}

	/*
	 * /siding/ was the page where the photo slid away from the paragraph it
	 * belongs to. About and service-area keep the stick; their copy is long
	 * enough that a centred photo would sit in a column of empty space.
	 */
	body.pchs-page-siding .pchs-feature-split__media {
		position: static;
	}

	.pchs-feature-split.has-no-image .pchs-feature-split__inner {
		grid-template-columns: minmax(0, 1fr);
		max-width: 62rem;
	}
}

/*
 * The same dead rule the hero had. This was `.pchs-feature-split__copy > * + *`,
 * which scores (0,1,0) because `*` contributes nothing — a tie with the plain
 * `__headline`, `__para` and `__checks` rules below, each setting `margin: 0`,
 * and on a tie the later rule wins. Measured on /service-area/ at 1440: the
 * headline's bottom edge and the first paragraph's top edge were both at 588,
 * and the last paragraph and the checks list both at 949. Every gap in the
 * column was 0 and had been since the block was written.
 *
 * `gap` on a flex column cannot be overridden by a child's own margin, so the
 * spacing holds whatever a component declares about itself — the same fix, for
 * the same reason, as .pchs-hero__copy.
 *
 * The `__para + __para` rule that used to sit further down went with it. It set
 * 12px and it was the one gap that did work, which is how the other four stayed
 * invisible: somebody saw the paragraphs touching, patched that pair, and the
 * headline and the checks kept touching in silence. Flex gaps add to margins
 * rather than collapsing with them, so leaving it would have made paragraphs
 * 28px apart in a 16px column.
 */
.pchs-feature-split__copy {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
}

.pchs-feature-split__copy > .pchs-eyebrow {
	margin: 0;
}

.pchs-feature-split__headline {
	margin: 0;
	text-wrap: balance;
}

.pchs-feature-split__para {
	margin: 0;
	text-wrap: pretty;
}

/*
 * Body-length copy (the owner's story on /about/, /veterans/). Muted grey is
 * right for a lead or two short lines; across five paragraphs it reads washed
 * out next to the ink prose elsewhere. The wider gap matches prose's rhythm at
 * this text size. The navy tones keep their on-dark colour.
 */
.pchs-feature-split--prose .pchs-feature-split__copy {
	gap: var(--wp--preset--spacing--50);
}

.pchs-feature-split--prose:not(.pchs-on-dark) .pchs-feature-split__para {
	color: var(--wp--preset--color--ink);
}

.pchs-feature-split__checks {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--base);
	font-weight: var(--wp--custom--weight--ui);
	line-height: 1.5;
}

.pchs-feature-split__checks li {
	display: flex;
	gap: var(--wp--preset--spacing--30);
	align-items: flex-start;
}

.pchs-feature-split--navy .pchs-check,
.pchs-feature-split--navy-deep .pchs-check {
	color: var(--wp--preset--color--green-light);
}

.pchs-feature-split__note {
	border-inline-start: 4px solid var(--wp--preset--color--green);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.6;
}

.pchs-feature-split--surface .pchs-feature-split__note {
	background: var(--wp--preset--color--base);
}

.pchs-feature-split__note strong {
	margin-inline-end: 0.35em;
}

.pchs-feature-split__media {
	overflow: hidden;
	border-radius: var(--wp--custom--radius--md);
}

/*
 * Deliberately not one of the sanctioned card ratios. This slot takes a single
 * real job photo at whatever shape the crew's phone produced, and `height: 100%`
 * forced every portrait source into a wide band — a 1920x2560 house shot
 * rendered as a meaningless slice of its middle. `height: auto` lets a landscape
 * photo keep its exact shape and crops nothing at all; the cap only bites on a
 * portrait, and it is a taller slot than the old 28rem so that when it does bite
 * it takes less. Measured on the home page's 768x1024 source at a 511px column:
 * the old slot cropped to 1.14 against a native 0.75, this one to 1.00.
 *
 * The other reading of the brief — constrain the image to the copy's height to
 * close the ~150px of space beside a short text column — is the opposite fix: it
 * would crop that same photo to 2.55. The space beside the copy is short copy,
 * not a tall image, so it is not worth paying for in crop.
 *
 * object-position favours the upper half, where the subject of an exterior or a
 * bath shot actually sits.
 */
.pchs-feature-split__img {
	width: 100%;
	height: auto;
	max-height: 26rem;
	object-fit: cover;
	object-position: 50% 35%;
	display: block;
}

/* A stacked collage has to show all three rooms; cover kept only the middle. */
.pchs-feature-split__img--collage {
	object-fit: contain;
	object-position: center;
	background: var(--wp--preset--color--base);
}

@media (min-width: 55em) {
	.pchs-feature-split__img {
		max-height: 32rem;
	}
}