/**
 * "Advanced Drilling Rigs for Every Terrain" — the fleet grid.
 *
 * WHY THESE CARDS DIFFER FROM THE SERVICE CARDS
 *
 * The service cards put text ON the photo. That works for six items where the
 * photo is atmosphere. It is wrong here: with ten-plus rigs the photograph IS the
 * information — someone is scanning to recognise a machine — so an overlay that
 * darkens the bottom half of every image works against the reader. Image on top,
 * name beneath, photo unobstructed.
 *
 * The grid uses auto-fill rather than a fixed column count so the fleet can grow
 * or shrink without anyone editing this file. Ten rigs currently reflow 5/5 at
 * 1200px, 4/4/2 around 1000px, and so on down to one column.
 */

/**
 * Per-section override of the shared 26ch title measure. At 26ch the browser
 * balances this 40-character heading as "Advanced Drilling / Rigs for Every
 * Terrain", splitting the noun phrase. 22ch fits "Advanced Drilling Rigs" exactly,
 * forcing the break at the natural boundary before "for".
 */
.pd-rigs h2.pd-section-title {
	max-width: 22ch;
}

.pd-rigs__grid {
	display: grid;

	/* auto-fill + minmax: column count is derived from available width, so adding
	   an eleventh rig needs no CSS change. */
	grid-template-columns: repeat( auto-fill, minmax( 210px, 1fr ) );
	gap: var( --wp--preset--spacing--40 );
}

.pd-rigs__grid > .pd-rig-card {
	/* 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;

	/* Containing block for the stretched link below. */
	position: relative;
}

.pd-rig-card__media {
	margin: 0;
	border-radius: 12px;

	/* Clips the hover zoom to the rounded corners. */
	overflow: hidden;

	/* Shows through while the photo loads, instead of a white flash. */
	background-color: var( --wp--preset--color--cream );
}

.pd-rig-card__media img {
	display: block;
	width: 100%;

	/* Uniform tiles regardless of source aspect — the library mixes 4:3, 1:1,
	   and tall portraits, which would otherwise make a ragged grid. */
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

h3.pd-rig-card__title {
	margin: 0.85rem 0 0;
	font-size: 1.0625rem;
	line-height: 1.3;
}

.pd-rig-card__title a {
	color: inherit;
	text-decoration: none;
}

/**
 * Stretched link.
 *
 * Makes the whole card clickable using the ONE anchor already in the markup. The
 * alternative — linking the image and the title separately — puts two links to the
 * same destination in the accessibility tree for every card, so a screen-reader
 * user tabs through twenty stops for ten rigs. Here the card is the anchor's hit
 * area while the DOM keeps a single link with the rig name as its accessible name.
 */
.pd-rig-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 12px;
}

.pd-rig-card:hover .pd-rig-card__title a {
	color: var( --wp--preset--color--primary );
	text-decoration: underline;
}

/* Focus ring has to be drawn on the stretched pseudo-element: the anchor's own box
   is just the text, so a default outline would only ring the words, not the card. */
.pd-rig-card__title a:focus-visible {
	outline: none;
}

.pd-rig-card__title a:focus-visible::after {
	outline: 3px solid var( --wp--preset--color--primary );
	outline-offset: 3px;
}

@media ( prefers-reduced-motion: no-preference ) {
	.pd-rig-card__media img {
		transition: transform 0.5s ease;
	}

	.pd-rig-card:hover .pd-rig-card__media img {
		transform: scale( 1.06 );
	}
}