/**
 * "Additional Services in California" — the non-drilling site-support services on
 * the California equipment page.
 *
 * Deliberately a DIFFERENT card shape from the homepage service cards, which put
 * text over the photograph. That treatment depends on knowing the photo will
 * carry text well; these four are placeholders today and unknown photography
 * tomorrow, so the text sits below the image where nothing about the picture can
 * make it unreadable.
 *
 * Closest relative is the homepage fleet grid: image on top, label beneath, auto
 * -fit columns. Kept separate rather than shared because these carry a paragraph
 * of copy the fleet tiles do not, and because the fleet grid's stretched-link
 * behaviour would be wrong here — these are not links.
 */

.pd-ca-services__grid {
	display: grid;

	/* auto-fit so a fifth or sixth service needs no CSS change. Four sit on one
	   row at 1200px, two-up in the mid range, one-up on phones. */
	grid-template-columns: repeat( auto-fit, minmax( 230px, 1fr ) );
	gap: var( --wp--preset--spacing--40 );
	align-items: stretch;
}

.pd-ca-services__grid > .pd-ca-service {
	/* Kill core's flow-layout block margin — the grid gap owns spacing. Child
	   selector for specificity; core's rule is (0,1,0) and wins ties. */
	margin-top: 0;

	display: flex;
	flex-direction: column;

	/*
	 * THE BOTTOM PADDING LIVES HERE, NOT ON THE COPY. The copy used to carry a
	 * 1.25rem bottom margin and it never applied: core's flow layout strips the
	 * last child's bottom margin (`:root :where(.is-layout-flow) > :last-child`,
	 * which at (0,2,0) beats a lone class). The three short cards hid that with the
	 * slack from `align-items: stretch`; the fourth service's two-line title and
	 * longer blurb filled its card and the text ran to the bottom edge (client
	 * note, 2026-09-18). Padding on the card is outside core's reach.
	 */
	padding-bottom: 1.25rem;

	background-color: var( --wp--preset--color--base );
	border-radius: 12px;
	overflow: hidden;

	/* Two-layer shadow: tight for the edge, wide and soft for lift. A single hard
	   shadow reads as a grey smudge against the cream section. */
	box-shadow:
		0 1px 3px rgba( 0, 0, 0, 0.05 ),
		0 10px 24px rgba( 0, 0, 0, 0.06 );
}

.pd-ca-service__media {
	margin: 0;

	/* Placeholder while the real photo loads, and the panel colour if an image
	   ever fails outright. */
	background-color: var( --wp--preset--color--cream );
}

/**
 * Tag-qualified at (0,1,2) on purpose: core sets `.wp-block-image img { height:
 * auto }` at (0,1,1), which a class-only selector would merely tie — and core's
 * block styles load after the theme's, so a tie goes to core and aspect-ratio
 * never applies.
 */
figure.pd-ca-service__media img {
	display: block;
	width: 100%;

	/* Uniform tiles whatever the source aspect. The placeholders are 4:3 today,
	   but real site photography rarely arrives in one consistent shape. */
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

h3.pd-ca-service__title {
	margin: 1.1rem 1.15rem 0;
	font-size: 1.0625rem;
	line-height: 1.3;
}

.pd-ca-service__copy {
	/* No bottom margin — the card carries it; see the note on the card. */
	margin: 0.5rem 1.15rem 0;
	font-size: 0.875rem;
	line-height: 1.6;
	opacity: 0.85;
}

/* Stagger the reveal left to right. */
.pd-ca-services__grid > .pd-ca-service:nth-child( 2 ) { --pd-reveal-delay: 80ms; }
.pd-ca-services__grid > .pd-ca-service:nth-child( 3 ) { --pd-reveal-delay: 160ms; }
.pd-ca-services__grid > .pd-ca-service:nth-child( 4 ) { --pd-reveal-delay: 240ms; }