/**
 * "Geotechnical & Environmental Drilling Services" — six image-backed cards.
 *
 * WHY THE SECTION BACKGROUND CHANGED
 *
 * This section used to be a Cover with section-background.jpg dimmed to 70%,
 * carrying six text columns and six filled buttons on top. That is what made it
 * feel crowded — a busy photograph competing with eighteen text blocks and six
 * solid buttons, none of which had room to breathe. The imagery now lives in the
 * cards themselves, so the section is a flat dark field and each photo gets to
 * read on its own. The six buttons became lightweight text links for the same
 * reason.
 */

/* Section header (title, gold rule, lede) now lives in sections.css, shared with
   the rigs section. This section uses .pd-section-title / .pd-section-lede. */

.pd-services__grid {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: var( --wp--preset--spacing--40 );
}

.pd-services__grid > .pd-service-card {
	/* Kill core's flow-layout block margin — the grid gap owns spacing here.
	   Child selector for specificity; see the note in specialize.css. */
	margin-top: 0;

	border-radius: 12px;

	/* Clip the background photo (and its hover zoom) to the rounded corners. */
	overflow: hidden;
}

/**
 * Gradient scrim.
 *
 * Keeps the title readable along the bottom while leaving the top of each photo
 * nearly untouched. A flat overlay dark enough to carry text would grey out the
 * whole image — the mistake the old section made at 70%.
 *
 * IMPLEMENTED ON THE COVER'S OWN OVERLAY SPAN, deliberately. The obvious approach
 * — a ::after on the card — puts the gradient in the same stacking context as the
 * content, and core's `.wp-block-cover .wp-block-cover__inner-container` z-index
 * rule is (0,2,0), so raising the content above it needs to out-specify core AND
 * win on load order (theme CSS is enqueued before core's block styles, so ties go
 * to core). That fight is avoidable: core already layers this span below the
 * content, so repainting it needs no z-index at all.
 *
 * opacity and background-color both have to be reset — the span carries
 * `has-background-dim-30` (opacity .3) and `has-dark-background-color`, and a
 * leftover solid colour would show through the gradient's transparent stops and
 * flatten the photo.
 */
.pd-services__grid > .pd-service-card > .wp-block-cover__background {
	opacity: 1;
	background-color: transparent;

	/* Deliberately gentle, and gentler again after the client asked to see more of
	   the photography. The panel below carries legibility on its own, so this only
	   has to keep the base from running bright under it. History: 0.94 when the
	   scrim was the only protection, 0.72 once the panel existed, 0.48 now. */
	background-image: linear-gradient(
		to top,
		rgba( 36, 34, 45, 0.48 ) 0%,
		rgba( 36, 34, 45, 0.18 ) 38%,
		rgba( 36, 34, 45, 0 ) 100%
	);
}

/**
 * Contrast panel behind the card text.
 *
 * A gradient alone has to be very dark to guarantee legibility over an unknown
 * photograph — every card has different tones under the title, so the scrim ends
 * up tuned for the worst case and washes out the rest. A panel decouples the two:
 * text contrast is now fixed and predictable, which is what let the gradient above
 * drop from 0.94 to 0.48.
 *
 * Echoes the hero panel so the two read as the same design language.
 *
 * Selector is (0,3,0) — core styles .wp-block-cover .wp-block-cover__inner-container
 * at (0,2,0) and core's block CSS is enqueued after the theme's, so a (0,2,0)
 * selector here would tie and lose.
 */
.pd-services__grid > .pd-service-card > .wp-block-cover__inner-container {
	/*
	 * Every rem of padding here is a rem of photograph the panel covers, and the
	 * client asked for more photograph (2026-08-19). Down from 0.95rem/1.1rem.
	 *
	 * TYPE SIZES ARE UNCHANGED, deliberately — the ask was to squeeze the box, not
	 * to shrink the words. All of the height came out of padding and the gaps
	 * between the three lines; see the title and copy rules below.
	 *
	 * The block is a fixed height regardless of card height — ~107px for a
	 * one-line title, down from ~128px — which is why raising min-height is the
	 * other lever if more photo is ever wanted: it costs nothing in legibility.
	 */
	padding: 0.6rem 0.95rem;
	border-radius: 8px;

	/*
	 * --dark at 30%, with a 50% flat fallback for browsers without color-mix.
	 *
	 * NOTE: this comment used to claim 88% and describe a history of 82% and 74%.
	 * The value in the file was 30%; the comment had simply gone stale. Corrected
	 * rather than "fixed", because 30% is what has been on the site and what the
	 * client has been looking at — the panel is mostly transparent, and the
	 * photograph reads through it.
	 */
	background-color: rgba( 36, 34, 45, 0.50 );
	background-color: color-mix( in srgb, var( --wp--preset--color--dark ) 30%, transparent );

	/*
	 * Halved from 4px. At 30% opacity the photograph is legible THROUGH the panel,
	 * so the blur was the main thing standing between the reader and the subject —
	 * on the Full-Service card it was the truck. Kept rather than removed: a little
	 * blur is what stops the panel's edge reading as a pasted-on sticker, and it
	 * still separates the type from a busy background.
	 */
	-webkit-backdrop-filter: blur( 2px );
	backdrop-filter: blur( 2px );
}

/* Tag beats theme.json's `:root :where(h3)`, which a lone class would only tie. */
h3.pd-service-card__title {
	margin-top: 0;

	/* 0.35rem before the squeeze. */
	margin-bottom: 0.2rem;

	/* Stepped down from 1.25rem. The card is a signpost, not a headline — and a
	   smaller title is both less prominent and a shorter panel. */
	font-size: 1.0625rem;
	line-height: 1.25;
}

.pd-service-card__copy {
	margin-top: 0;

	/* This is the "bump Tell me more up a line" gap — 0.7rem before, which read as
	   a blank line between the copy and the link. 0.25rem keeps them as one block
	   of text and is the single biggest saving in the panel. */
	margin-bottom: 0.25rem;

	/* Size lives here, not as a block preset: WordPress emits .has-small-font-size
	   with !important, which no rule here could override. */
	font-size: 0.8125rem;
	line-height: 1.5;

	/* Recessed further than before — the photograph is meant to lead now. */
	opacity: 0.8;
}

.pd-service-card__link {
	margin-top: 0;
	margin-bottom: 0;
}

.pd-service-card__link a {
	color: var( --wp--preset--color--gold );
	font-weight: 700;
	text-decoration: none;
}

/* Arrow drawn in CSS so the link text stays exactly "Tell me more". */
.pd-service-card__link a::after {
	content: " \2192";
}

.pd-service-card__link a:hover,
.pd-service-card__link a:focus {
	text-decoration: underline;
}

/**
 * Brighten the photography.
 *
 * The scrim and panel above are subtractive — they can only take light away. This
 * adds some back, which is what "make the images brighter" actually asks for. Kept
 * modest: past roughly 1.12 brightness the sky in the hillside shots blows out.
 */
.pd-service-card .wp-block-cover__image-background {
	filter: brightness( 1.08 ) saturate( 1.12 );
}

/* Slow zoom on hover, motion-gated. */
@media ( prefers-reduced-motion: no-preference ) {
	.pd-service-card .wp-block-cover__image-background {
		transition: transform 0.6s ease;
	}

	.pd-service-card:hover .wp-block-cover__image-background {
		transform: scale( 1.06 );
	}
}

/* Stagger the reveal across the grid in reading order. */
.pd-services__grid > .pd-service-card:nth-child( 2 ) { --pd-reveal-delay: 80ms; }
.pd-services__grid > .pd-service-card:nth-child( 3 ) { --pd-reveal-delay: 160ms; }
.pd-services__grid > .pd-service-card:nth-child( 4 ) { --pd-reveal-delay: 240ms; }
.pd-services__grid > .pd-service-card:nth-child( 5 ) { --pd-reveal-delay: 320ms; }
.pd-services__grid > .pd-service-card:nth-child( 6 ) { --pd-reveal-delay: 400ms; }

@media ( max-width: 1023px ) {
	.pd-services__grid {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

@media ( max-width: 600px ) {
	.pd-services__grid {
		grid-template-columns: 1fr;
	}
}