/**
 * The two "copy beside photography" sections.
 *
 * `.pd-about` — the homepage's "Experienced. Equipped. Reliable." section, with
 * an offset PAIR of photographs.
 * `.pd-about-intro` — the About page's first section, with a SINGLE photograph.
 * It is at the foot of this file.
 */

/**
 * "Experienced. Equipped. Reliable." — the first section below the hero.
 *
 * Two columns: copy left, an offset pair of rig photos right. The section lives
 * INSIDE the hero Cover so its angled top edge can reveal the hero photograph
 * through the clip-path.
 *
 * TOP PADDING IS LOAD-BEARING, and deliberately NOT set on the block.
 *
 * pd-angle--lg cuts the top-right corner down by clamp(3rem, 8vw, 8rem) — 115px
 * at a 1440px viewport. Any inline padding-top on the block would override
 * angled-sections.css's angle-aware padding and would have to be re-tuned by
 * hand every time the angle changes; a fixed 8rem left only 13px of clearance
 * and the hero's wedge sliced into the lead photo.
 *
 * So the block sets padding-bottom only, and the top padding is derived from the
 * angle itself here. It cannot fall out of sync with the slope.
 */
.pd-about {
	padding-top: calc( var( --pd-angle-h ) + var( --wp--preset--spacing--60 ) );
}

.pd-about__kicker {
	margin-bottom: 0;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-weight: 700;
}

/* Gold rule under the heading, echoing the hero panel's accent edge. */
.pd-about__title::after {
	content: "";
	display: block;
	width: 64px;
	height: 4px;
	margin-top: 1.25rem;
	background-color: var( --wp--preset--color--gold );
}

/**
 * THE PHOTO PAIR — SIDE BY SIDE, NOT STACKED.
 *
 * This was a vertical composition: a wide lead photo with a smaller one lifted
 * up to overlap its bottom-left corner. That worked because both photographs
 * were landscape (4:3 and 1:1).
 *
 * The photographs are now the two the live site uses in this section, and both
 * are portrait — a drill rig is a vertical subject. Stacked, they made a media
 * column 1048px tall against 450px of copy: the text floated in the middle of a
 * white field and the section ran to well over a screen. Cropping them back to
 * 4:3 fixed the height and cut the top off the mast, which is the thing the
 * photograph is of.
 *
 * So the pair now sits side by side, overlapping horizontally, both cropped to
 * the same 3:4 box — which is also how the live site arranges these two images.
 * Each rig stays whole, and the block lands at roughly the height of the copy
 * beside it.
 */

.pd-about-media {
	display: flex;
	align-items: flex-start;
}

.pd-about-media__lead img,
.pd-about-media__inset img {
	display: block;
	width: 100%;

	/* One box for both, so the pair reads as a set rather than two photographs
	   that happen to be near each other. Biased above centre: these rigs carry
	   their subject up the frame, and a centred crop takes the mast. */
	aspect-ratio: 3 / 4;
	object-fit: cover;
	object-position: center 45%;

	/* Rounded and lifted. Flat, hard-cornered photos read as unstyled next to the
	   rounded buttons and the hero panel's soft edge. */
	border-radius: 12px;
}

.pd-about-media > .pd-about-media__lead {
	width: 58%;
	margin: 0;
	border-radius: 12px;

	/* Fills the reserved space while the photo loads. The frame is already the
	   right size — the ratio is set above — so nothing moves; without a fill it is
	   simply white, which reads as nothing being there rather than as a
	   photograph arriving. */
	background-color: var( --wp--preset--color--cream );
	box-shadow: 0 10px 24px rgba( 0, 0, 0, 0.14 );
}

/**
 * Child selectors here are for specificity, not decoration. Core's flow layout
 * emits `:root :where(.is-layout-flow) > :where(*) { margin-block-start: … }`,
 * which computes to (0,1,0) — a single class selector TIES it, and because theme
 * stylesheets are enqueued before core's block-support styles, the tie resolves
 * in core's favour and the overlap silently disappears. `.pd-about-media > .x`
 * is (0,2,0) and wins outright.
 */
.pd-about-media > .pd-about-media__inset {
	/* Stagger the reveal so the second photo lands just after the first. */
	--pd-reveal-delay: 160ms;

	position: relative;
	z-index: 1;
	width: 46%;

	/* Overlaps its neighbour horizontally and drops below its top edge, so the
	   two read as an arrangement rather than a row. */
	margin: 2.5rem 0 0 -4%;

	background-color: var( --wp--preset--color--cream );
	border: 6px solid var( --wp--preset--color--base );
	border-radius: 14px;
	box-shadow: 0 14px 30px rgba( 0, 0, 0, 0.18 );
}

/**
 * Single column below the breakpoint where core stacks wp-block-columns (782px).
 * The overlap reads as a mistake once the photos are full width, so square it up.
 */
/**
 * MOBILE: WORDS FIRST, ONE PHOTO.
 *
 * Stacked, this section led with roughly 500px of photography before a single
 * word — the first thing under the hero was two rig pictures, and the sentence
 * explaining who took them was a scroll away. The columns are a flex container
 * once core stacks them, so ordering the media column after the copy is enough
 * to put the heading first; nothing about the desktop arrangement changes.
 *
 * The inset photo is hidden rather than stacked. The overlap is a composition —
 * two photographs offset against each other — and a composition needs the two
 * pieces side by side to read as one. Stacked at 82% width with a negative
 * margin it read as a mistake, and it cost another 250px of scroll to say the
 * same thing the lead photo already says. To bring it back, delete the display
 * rule; the width and overlap it used to carry are in the history of this file.
 */
@media ( max-width: 781px ) {
	.pd-about .wp-block-column:has( .pd-about-media ) {
		order: 1;
	}

	.pd-about-media > .pd-about-media__inset {
		display: none;
	}

	/* With its neighbour gone, the remaining photo takes the column rather than
	   sitting at 58% of it with dead space beside it. */
	.pd-about-media > .pd-about-media__lead {
		width: 100%;
	}

	.pd-about__title::after {
		margin-inline: 0;
	}
}

/**
 * ABOUT PAGE INTRO — "Decades of Experience. Advanced Drilling Solutions."
 *
 * This was three centred paragraphs in an 800px column — a heading, a one-line
 * lede and a paragraph — with a single statistic on its own band below. The first
 * thing the About page said about a drilling company was said entirely in prose.
 *
 * So it now carries the photograph the live About page pairs with this copy — the
 * SaberCat rig on the sand beside a pier, which is also one of the eSPT-equipped
 * rigs named further down the page. Copy right, photo left, matching the live
 * layout (and the homepage section above, which composes the same way).
 *
 * The "75+ years" card came into this column with it — see the note on
 * $pacific_drilling_about_stats in patterns/about.php. It had its own full-bleed
 * band below, which is a lot of page for one number, and it gives the copy column
 * the height to stand beside a portrait photograph.
 *
 * WIDTHS: the block sets 42/58. The photograph is portrait, so an even split would
 * make the picture the tallest thing in the section by a wide margin — the failure
 * documented at the top of this file. At 42% of 1200px the square crop below is
 * ~500px, which is about where the copy column lands with the card in it.
 */
/**
 * A CARD, not a bare photograph — matted and lifted on the shared
 * `.pd-photo-card` frame in sections.css, which is also what the New Clients page
 * uses. Only the crop is set here: the frame deliberately leaves the ratio to the
 * caller, because the ratio is what makes the picture stand at about the height of
 * the copy beside it, and that differs per section.
 *
 * The lift is deeper than the stat card's below it — a photograph is a heavier
 * object than a number — and the two then read as a matched pair across the
 * section rather than as a picture and an unrelated tile.
 */
figure.pd-about-intro__media img {
	/**
	 * SQUARE, from a 4:5 photograph. The frame is a crop, not the whole picture:
	 * at its natural ratio this photo stands ~610px tall beside ~380px of copy,
	 * and the words end up floating in the middle of a white field.
	 *
	 * The ~9% this trims is sky above the mast and sand below the wheels, and
	 * `center 42%` takes it mostly off the bottom — the mast tip is close to the
	 * top edge of the frame and is the first thing a crop of this photograph
	 * should protect.
	 */
	aspect-ratio: 1 / 1;
	object-position: center 42%;
}

/**
 * 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.
 *
 * Descendant selectors for specificity: sections.css sets these at (0,1,1), so a
 * lone class would tie and lose to source order within the same file.
 */
.pd-about-intro h2.pd-section-title,
.pd-about-intro p.pd-section-lede {
	margin-inline: 0;
}

.pd-about-intro h2.pd-section-title::after {
	margin-inline: 0;
}

/**
 * THE "75+ YEARS" CARD, now the last thing in the copy column.
 *
 * .pd-stats__grid centres its row and centres the text inside each card, which is
 * right for a full-bleed strip of figures and wrong here: the card is the closing
 * line of a left-aligned column, and centred it floated free of the paragraph it
 * is evidence for. Only the alignment is overridden — the card's own padding,
 * radius, shadow and type stay in stats.css, so the component can't drift.
 */
.pd-about-intro .pd-stats__grid {
	justify-content: start;

	/* More air than core's flow layout gives it (1.5rem, the paragraph rhythm).
	   The card is a distinct object closing the column, not another paragraph.
	   (0,2,0) beats core's `:root :where(.is-layout-flow) > :where(*)` at (0,1,0).) */
	margin-top: 2rem;
}

.pd-about-intro .pd-stats__grid > .pd-stat {
	text-align: left;
}

/**
 * MOBILE: WORDS FIRST — the same call as the homepage section above. Stacked, the
 * photograph would put ~380px of picture between the page hero and the first
 * sentence of the page. Core stacks .wp-block-columns into a flex column at
 * 781px, so ordering the media column last is enough.
 */
@media ( max-width: 781px ) {
	.pd-about-intro .wp-block-column:has( .pd-about-intro__media ) {
		order: 1;
	}
}