/**
 * "We specialize in:" — four capability points beside a photograph.
 *
 * LAYOUT HISTORY (so the current shape reads as a decision, not an accident)
 *
 * v1 was four full-width checkmark rows stacked in an 800px column. v2 made them a
 * 2x2 card grid with a letterboxed banner photo underneath. v3 put the points in a
 * left column beside the photo. This is v4, which strips v3 back:
 *
 *   - the points lost their card fills, radii and shadows
 *   - the closing line and CTA moved out of the column to centre under both
 *   - photo moved to the left, points to the right (v4b)
 *
 * Two reasons the side-by-side arrangement is right. Vertical economy: a 2x2 grid
 * plus a full-width banner plus a centred outro stacked to roughly twice the height
 * four short points need. And crop: the 2.35:1 banner threw away most of the
 * photograph, where a 4:3 frame keeps the rig and the crew in shot.
 *
 * v4 exists because v3 had too many competing shapes — four filled cards, a photo,
 * four badges and a stranded left-aligned button, for four lines of text.
 *
 * The section header now uses the shared .pd-kicker / .pd-section-title from
 * sections.css, so this section carries the same gold rule as every other one —
 * it was the last section still styling its own heading.
 */

.pd-specialize__body {
	display: grid;

	/* Photo left, points right. The points are left-aligned text, so putting them
	   in the second column gives their ragged-right edge the outer margin and their
	   clean left edge sits against the photo. It also matches the about section
	   above, which is likewise photo-left / copy-right.
	   Photo takes the smaller share. The points now run at 1.25rem, so they need the
	   width; and at even widths the photo was the visually heavier of the two, which
	   is backwards for support imagery. */
	grid-template-columns: 0.85fr 1fr;
	gap: var( --wp--preset--spacing--50 );

	/*
	 * THE CTA LIVES IN THIS GRID NOW.
	 *
	 * It used to be a full-width panel below both columns, which is what made it
	 * feel unattached to the points: it read as a third thing in the section
	 * rather than as the conclusion of the list directly above it. It is now the
	 * second row of the right-hand column, under the points it follows from.
	 *
	 * `span 2` rather than `1 / -1` — with implicit rows, -1 counts back from the
	 * last line of the EXPLICIT grid, so it would span one row and the photo
	 * would sit against the points with the CTA beside empty space.
	 */
	align-items: start;
}

.pd-specialize__body > .pd-specialize__media {
	grid-column: 1;
	grid-row: 1 / span 2;

	/* Four short points plus a CTA are still shorter than the column, so the photo
	   sits against the top rather than stretching to a letterbox. */
	align-self: start;
}

.pd-specialize__body > .pd-specialize__grid {
	grid-column: 2;
	grid-row: 1;
}

.pd-specialize__body > .pd-specialize__cta {
	grid-column: 2;
	grid-row: 2;
	margin-top: var( --wp--preset--spacing--40 );
}

/**
 * Single column now, not 2x2.
 *
 * At roughly 600px the four points each fit on one line stacked; in a 2x2 at half
 * that width most of them wrapped to two, which is what made the old grid feel
 * bulky for so little content.
 */
.pd-specialize__grid {
	display: grid;
	grid-template-columns: 1fr;

	/* More air than the cards needed: without padding the rows would otherwise
	   crowd, and the extra height brings the list closer to the photo's. */
	gap: var( --wp--preset--spacing--50 );
}

/**
 * Bare rows, not cards.
 *
 * These carried a white fill, a 12px radius and a two-layer shadow each. Against
 * the cream section, four boxes plus a photo plus the badges was too many competing
 * shapes for four short lines of text — the container was doing more work than the
 * content. A check badge next to a line of text is enough.
 *
 * SPECIFICITY: `.pd-specialize__grid > .pd-specialize__card` is (0,2,0) rather than
 * a lone class. Core's flow layout emits
 * `:root :where(.is-layout-flow) > :where(*) { margin-block-start: … }` at (0,1,0);
 * a single class only TIES that, and since theme stylesheets are enqueued before
 * core's block-support styles the tie resolves in core's favour — leaving stray
 * vertical margins inside the grid.
 */
.pd-specialize__grid > .pd-specialize__card {
	/* Kill core's flow-layout block margin — the grid gap handles spacing. */
	margin-top: 0;

	display: flex;
	align-items: flex-start;
	gap: 0.9rem;
}

/**
 * Circular check badge, drawn in CSS rather than as a character in its own
 * paragraph block (which is how v1 did it). Two reasons: it halves the block count
 * per item, and the glyph stays decorative instead of being announced ahead of
 * every point by a screen reader.
 */
.pd-specialize__grid > .pd-specialize__card::before {
	content: "✓";

	/* Never let the badge squash when a label wraps. */
	flex: 0 0 auto;

	display: grid;
	place-items: center;
	width: 2.125rem;
	height: 2.125rem;
	border-radius: 50%;
	background-color: var( --wp--preset--color--accent );
	color: var( --wp--preset--color--base );
	font-weight: 700;
	line-height: 1;
	font-size: 1rem;
}

.pd-specialize__card > p {
	margin: 0;
	font-size: 1.25rem;
	line-height: 1.4;

	/* Optical alignment: sits the first line against the badge's centre rather
	   than its top edge. */
	padding-top: 0.15rem;
}

/* Stagger the reveal down the column. */
.pd-specialize__grid > .pd-specialize__card:nth-child( 2 ) { --pd-reveal-delay: 90ms; }
.pd-specialize__grid > .pd-specialize__card:nth-child( 3 ) { --pd-reveal-delay: 180ms; }
.pd-specialize__grid > .pd-specialize__card:nth-child( 4 ) { --pd-reveal-delay: 270ms; }

/**
 * Closing CTA strip.
 *
 * Three attempts to place this closing line: inside the left column with the button
 * under it (stranded the CTA bottom-left), then centred across the section (~200
 * characters of centred text is hard to read — every line starts in a different
 * place, so the eye has to re-find the left edge on each one).
 *
 * Now it is a panel: copy left and ragged-right at a fixed measure, button right,
 * both vertically centred. The container gives the block a reason to sit apart from
 * the two columns above it, and the gold edge echoes the hero panel and the section
 * rules.
 */
.pd-specialize__cta {
	display: flex;

	/*
	 * Stacked, not a row. In its old full-width home there was room for copy left
	 * and button right; in a 600px column that squeezes the sentence against the
	 * button. Copy then button also reads in the order it is meant to be read.
	 */
	flex-direction: column;
	align-items: flex-start;
	gap: 1.1rem;

	padding: 1.5rem 1.75rem;
	background-color: var( --wp--preset--color--base );
	border-radius: 12px;
	border-left: 4px solid var( --wp--preset--color--gold );

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

/* Descendant selectors are (0,2,0) to beat core's flow-layout block margins. */
.pd-specialize__cta .pd-specialize__outro {
	margin: 0;

	/* Takes the slack; the button keeps its intrinsic width. */
	flex: 1 1 auto;

	font-size: 1rem;
	line-height: 1.65;
	opacity: 0.85;
}

.pd-specialize__cta .wp-block-buttons {
	margin: 0;
	flex: 0 0 auto;
}



/**
 * Photograph in the left column.
 *
 * `figure.pd-specialize__media img` is tag-qualified at (0,1,2) on purpose: core
 * sets `.wp-block-image img { height: auto; max-width: 100% }` 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 takes effect.
 */
/**
 * DEPTH: an offset block behind the photograph.
 *
 * On cream, a rounded photo with a soft shadow sits flat — the shadow has almost
 * nothing to fall against. A gold panel stepped down and to the left gives the
 * photo something to sit in front of, which is what actually reads as depth; the
 * shadow then has an edge to describe.
 *
 * Offset OUTWARD, toward the page margin, rather than toward the points: inward
 * would put a slab of gold in the gutter between the photo and the text.
 *
 * The figure can no longer clip with `overflow: hidden` — that would cut the
 * block off at the photo's edge — so the radius moves onto the image itself, and
 * the two are layered with z-index rather than negative offsets, which would put
 * the block behind the section background.
 */
.pd-specialize__media {
	position: relative;
	margin: 0;
}

.pd-specialize__media::before {
	content: "";
	position: absolute;
	top: 1.5rem;
	right: 1.5rem;
	bottom: -1.5rem;
	left: -1.5rem;
	z-index: 0;

	border-radius: 14px;
	background-color: var( --wp--preset--color--gold );
}

figure.pd-specialize__media {
	/* Placeholder fill while the photo loads — see the note in about.css. */
	background-color: var( --wp--preset--color--cream );
}

figure.pd-specialize__media img {
	display: block;
	width: 100%;

	position: relative;
	z-index: 1;
	border-radius: 12px;
	box-shadow: 0 14px 32px rgba( 0, 0, 0, 0.18 );

	/* Fixed ratio now that the column is centred rather than stretched — with the
	   cards gone the left side is far shorter, and filling its height would have
	   squashed the photo into a letterbox again. */
	aspect-ratio: 4 / 3;

	object-fit: cover;

	/* Biased above centre: the source is shot from a mezzanine, so the lower third
	   is display tables rather than the rig. */
	object-position: center 42%;
}

/**
 * Stack before the columns get too narrow to hold a one-line point — and once
 * stacked, put the points above the photograph.
 *
 * The section heading sits above both, so the photo was not the first thing on
 * screen here the way it was in the about section; it was the first thing after
 * the heading, which pushed the four capabilities the heading promises below the
 * fold. Ordering is all it takes: grid items honour `order` exactly as flex
 * items do.
 */
@media ( max-width: 860px ) {
	.pd-specialize__body {
		grid-template-columns: 1fr;
	}

	/* Points, then the CTA that follows from them, then the photograph. */
	.pd-specialize__body > .pd-specialize__grid,
	.pd-specialize__body > .pd-specialize__cta,
	.pd-specialize__body > .pd-specialize__media {
		grid-column: 1;
		grid-row: auto;
	}

	.pd-specialize__body > .pd-specialize__media {
		order: 1;
	}

	figure.pd-specialize__media img {
		aspect-ratio: 3 / 2;
	}
}