/**
 * "Soil Sampling" — the eSPT copy beside a sampling-capability panel.
 *
 * WHAT WAS WRONG
 *
 *  1. The 35-year line was marked up as an <h3>. It is a sentence, not a heading:
 *     it put a section-level entry into the document outline that no content
 *     belonged to, and screen-reader users navigating by heading landed on a
 *     sales line. It is a lede paragraph now, styled by sections.css.
 *  2. Two bullet lists, each introduced by its own short paragraph
 *     ("All of our rigs carry:", "Additionally, most rigs…"), stacked under a bold
 *     "Sampling Capabilities:" line. Four blocks of scaffolding around seven
 *     actual items, all at body width, so the equipment list — the part a
 *     specifier is scanning for — was the least visible thing in the section.
 *  3. The button read "call now" and linked to /contact. Whatever the label
 *     promises, the click has to deliver it; it is a `tel:` link now and says
 *     which number it dials.
 *
 * The lists now sit in a panel beside the copy, where they read as a spec sheet:
 * two labelled groups, ticks on every line, at a width that keeps each item on one
 * line.
 */

.pd-samples__split {
	display: grid;

	/* Copy slightly wider than the panel — the paragraph needs a readable measure
	   and the panel holds nothing but short equipment names. */
	grid-template-columns: 1.15fr 1fr;
	gap: var( --wp--preset--spacing--50 );
	align-items: start;
}

.pd-samples__split > .pd-samples__copy,
.pd-samples__split > .pd-samples__panel {
	/* Kill core's flow-layout block margin — the grid gap owns spacing. */
	margin-top: 0;
}

.pd-samples__copy p {
	line-height: 1.7;
}

/**
 * Section photograph, at the head of the copy column.
 *
 * It sits in the column rather than spanning the section: full width it would be
 * a 500px-tall band between the lede and the content, and this is a supporting
 * photo, not a hero. In the column it fills the space the copy alone left short
 * against the taller spec panel.
 *
 * Tag-qualified for the same reason as the card media — core's
 * `.wp-block-image img { height: auto }` is (0,1,1) and loads after the theme.
 */
figure.pd-samples__media {
	margin: 0 0 var( --wp--preset--spacing--40 );
	border-radius: 14px;
	overflow: hidden;
}

figure.pd-samples__media img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

/* Panel lands just after the copy it belongs to. */
.pd-samples__split > .pd-samples__panel {
	--pd-reveal-delay: 120ms;
}

/**
 * Spec panel.
 *
 * Cream on the white section, with a gold left edge — the same accent rule that
 * runs under every section title, turned on its side. It marks the panel as
 * reference material rather than another card of prose.
 */
.pd-samples__split > .pd-samples__panel {
	padding: 1.75rem;
	border-radius: 14px;
	border-left: 4px solid var( --wp--preset--color--gold );
	background-color: var( --wp--preset--color--cream );
}

h3.pd-samples__panel-title {
	margin: 0;
	font-size: 1.1875rem;
	line-height: 1.3;
}

/**
 * Group labels ("All of our rigs carry", "Most rigs can also collect").
 *
 * Small, uppercase and letterspaced so they read as labels on a spec sheet rather
 * than as two more sentences competing with the panel title.
 */
.pd-samples__panel > .pd-samples__panel-label {
	margin: 1.4rem 0 0;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	opacity: 0.65;
}

.pd-samples__copy > .pd-samples__cta {
	margin-top: var( --wp--preset--spacing--40 );
}

/**
 * Stack before the two columns get narrow enough to break the equipment names
 * onto two lines. 900px is where "2 in. Split Spoon (Environmental Standard)" —
 * the longest item — starts to wrap.
 */
@media ( max-width: 900px ) {
	.pd-samples__split {
		grid-template-columns: 1fr;
	}
}