/**
 * The New Clients page: the intro band and the "How to Get Started:" steps.
 *
 * WHAT WAS WRONG WITH THE STEPS
 *
 * Three paragraphs, each opening with a coloured "Step 1:" and running straight
 * into the instruction, stacked with two more paragraphs of follow-up under them.
 * Five paragraphs in a column, all the same size and weight: nothing said "this is
 * a three-step process", and the one action on the page — downloading the credit
 * application — was a link inside the middle of a sentence in the first of them.
 *
 * Now three numbered cards. The client's wording is unchanged; the "Step 1:"
 * prefix becomes the card's label instead of the first two words of its sentence,
 * which is the same information doing more work.
 *
 * WHAT WAS WRONG WITH THE PAGE
 *
 * Nothing on it but words. The live page carries two photographs — a truck rig on
 * frost-covered ground beside the intro copy, and a tripod rig working from a
 * platform on a lagoon beside the steps — and this page had neither, so a page
 * about becoming a client of a drilling company never showed any drilling. Both
 * bands are now two columns, photo and copy, in the arrangement the live page uses
 * (photo left up top, photo right below).
 */

/**
 * ONE COLUMN, NOT THREE ACROSS.
 *
 * The cards were a three-across row when they had the full 1000px band to
 * themselves. They now share it with the photograph, and at 56% of it a
 * three-across auto-fit row resolves to two columns with the third card orphaned
 * on a row of its own. Stacked, each card is wide and short — a numbered checklist
 * — which is what the live page's own layout of this block is.
 *
 * Still a grid rather than plain flow: the gap stays uniform, no margins collapse,
 * and a fourth step needs no CSS.
 */
.pd-steps__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var( --wp--preset--spacing--40 );
	align-items: stretch;
}

/* Child selector at (0,2,0): core's flow-layout margin is (0,1,0) and wins ties. */
.pd-steps__grid > .pd-step-card {
	margin-top: 0;

	/* Containing block for the ghost numeral. */
	position: relative;

	padding: 1.6rem 1.5rem;
	border-radius: 14px;
	background-color: var( --wp--preset--color--base );

	box-shadow:
		0 1px 3px rgba( 0, 0, 0, 0.05 ),
		0 10px 24px rgba( 0, 0, 0, 0.06 );
}

/**
 * Ghost numeral, matching the homepage process steps.
 *
 * The digit is generated from the card's position rather than written into the
 * markup: the label already says "Step 1", so a hand-typed numeral would be a
 * second copy of the same fact, free to disagree with it if the steps are ever
 * reordered. aria-hidden is unnecessary for the same reason it is on
 * .pd-step__num — a CSS pseudo-element is not announced.
 */
.pd-steps__grid > .pd-step-card::after {
	position: absolute;
	top: 0.5rem;
	right: 1rem;

	font-family: var( --wp--preset--font-family--poppins );
	font-size: 3rem;
	font-weight: 700;
	line-height: 1;
	color: var( --wp--preset--color--primary );
	opacity: 0.12;

	pointer-events: none;
	user-select: none;
}

.pd-steps__grid > .pd-step-card:nth-child( 1 )::after { content: "1"; }
.pd-steps__grid > .pd-step-card:nth-child( 2 )::after { content: "2"; --pd-reveal-delay: 90ms; }
.pd-steps__grid > .pd-step-card:nth-child( 3 )::after { content: "3"; --pd-reveal-delay: 180ms; }

/* The delay has to sit on the card, not the pseudo-element. */
.pd-steps__grid > .pd-step-card:nth-child( 2 ) { --pd-reveal-delay: 90ms; }
.pd-steps__grid > .pd-step-card:nth-child( 3 ) { --pd-reveal-delay: 180ms; }

.pd-step-card > .pd-step-card__label {
	margin: 0;
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var( --wp--preset--color--primary-darker );
}

.pd-step-card > .pd-step-card__copy {
	margin: 0.5rem 0 0;
	font-size: 1rem;
	line-height: 1.6;
}

/**
 * The credit application link.
 *
 * The arrow is CSS so the link text stays exactly the client's wording, and it is
 * what marks this as a download rather than another page link — the one action
 * this page exists for, previously indistinguishable from body text.
 */
.pd-step-card__copy a {
	color: var( --wp--preset--color--primary-darker );
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.pd-step-card__copy a[ href $= ".pdf" ]::after {
	content: " \2193";
	text-decoration: none;
}

/* Follow-up copy under the steps. Left-aligned with the cards it closes, rather
   than centred: it is the last thing in a column now, not a full-width footer. */
.pd-steps__note {
	max-width: 60ch;
	line-height: 1.7;
}

/**
 * THE TWO PHOTOGRAPHS.
 *
 * Both sit in the shared `.pd-photo-card` frame (sections.css) — matted, rounded
 * and lifted — and both are cropped square, which is the ratio that makes each one
 * stand at roughly the height of the copy beside it:
 *
 *   Intro: 38% of a 1000px band is ~370px, against ~310px of copy. At the photo's
 *   natural 4:5 it would be ~460px and tower over four short paragraphs.
 *
 *   Steps: 44% is ~430px, against a column of a heading, three stacked cards and
 *   two notes — a little taller. Being the shorter of the two elements is the right
 *   way round; the alternative is a photograph with words floating beside it.
 *
 * Neither crop is severe. Both sources are close to square already (931x1080 and
 * 1599x1374), so a square frame trims ~14% of one axis — sky and snow off the
 * truck, water off the sides of the lagoon.
 */
figure.pd-clients-intro__media img,
figure.pd-steps__media img {
	aspect-ratio: 1 / 1;
}

/* The mast reaches the top of the frame and the snow is the least of it. */
figure.pd-clients-intro__media img {
	object-position: center 40%;
}

/**
 * The shared section header centres itself (see sections.css). Beside a photograph
 * it has an edge to line up with instead, and the gold rule belongs under the start
 * of the heading rather than under its middle. Same override as `.pd-about-intro`
 * carries in about.css, for the same reason.
 *
 * Descendant selectors for specificity: sections.css sets these at (0,1,1), so a
 * lone class would tie and lose to source order across files.
 */
.pd-clients-intro h2.pd-section-title,
.pd-clients-intro p.pd-section-lede,
.pd-steps h2.pd-section-title {
	margin-inline: 0;
}

.pd-clients-intro h2.pd-section-title::after,
.pd-steps h2.pd-section-title::after {
	margin-inline: 0;
}

/**
 * MOBILE: WORDS FIRST, in both bands.
 *
 * Core stacks .wp-block-columns into a flex column at 781px. Ordering each media
 * column last puts the heading of each band above its photograph — which is also
 * the order the live page stacks them in on a phone. Nothing about the desktop
 * arrangement changes.
 */
@media ( max-width: 781px ) {
	.pd-clients-intro .wp-block-column:has( .pd-clients-intro__media ),
	.pd-steps .wp-block-column:has( .pd-steps__media ) {
		order: 1;
	}
}