/**
 * "Pacific Drilling Proven Process" — the five-step grid.
 *
 * WHY IT RAN TO THE SCREEN EDGES
 *
 * The old markup wrapped the steps in `<!-- wp:columns {"align":"full"} -->`.
 * alignfull deliberately escapes the section's constrained container, so the five
 * columns spanned the whole viewport no matter how the section was sized — the
 * width couldn't be fixed by changing contentSize. Replaced with a plain grid
 * inside the 1200px container.
 *
 * The step lists are the densest content on the page, so type runs a little below
 * body size — but only a little. A first pass at 0.8125rem read as fine print at
 * five columns; 0.875rem is the floor that still feels deliberate.
 */

/* One line at 31 characters, instead of the shared 26ch measure wrapping it. */
.pd-process h2.pd-section-title {
	max-width: 34ch;
}

.pd-process__grid {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 190px, 1fr ) );
	gap: var( --wp--preset--spacing--40 );

	/* Equal-height cards so the five read as one band rather than a stepped edge. */
	align-items: stretch;
}

.pd-process__grid > .pd-step {
	/* Kill core's flow-layout block margin — the grid gap owns spacing. */
	margin-top: 0;

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

	padding: 1.6rem 1.4rem;
	border-radius: 12px;

	/* Centres the badge, title and duration pill. The list opts back out below —
	   centred list text is hard to scan. */
	text-align: center;

	/* Cream cards on the white section: definition without a border, and it
	   inverts the specialize section (white cards on cream) rather than repeating
	   it. */
	background-color: var( --wp--preset--color--cream );
}

/* Icon badge, centred at the top of each card. */
.pd-step__badge {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;

	/* Horizontally centre the badge itself — text-align on the card centres inline
	   content, but this is a block. */
	margin-inline: auto;

	border-radius: 50%;
	background-color: var( --wp--preset--color--primary );

	/* The SVGs are stroked with currentColor, so this one declaration colours all
	   five icons. */
	color: var( --wp--preset--color--base );
}

.pd-step__badge svg {
	width: 26px;
	height: 26px;
	display: block;
}

/**
 * Ghost numeral, top-right.
 *
 * Sequence matters in a process, but a full-size number competes with the step
 * title for attention — the old markup set these at xx-large in primary, which
 * made "01" louder than "Pre Project Engagement". Large and very faint reads as
 * ordering without shouting. aria-hidden in the markup so it isn't announced.
 */
.pd-step__num {
	position: absolute;
	top: 0.6rem;
	right: 1rem;
	margin: 0;

	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.14;

	/* Never let the numeral eat clicks or text selection. */
	pointer-events: none;
	user-select: none;
}

h3.pd-step__title {
	margin: 1rem 0 0;
	font-size: 1.125rem;
	line-height: 1.3;

	/* Two of the five titles wrap to two lines and three don't, which pushed the
	   duration pills and lists to different heights across the band. Reserving two
	   lines here lines all five up. font-size x line-height x 2. */
	min-height: calc( 1.125rem * 1.3 * 2 );
}

/**
 * Duration pill.
 *
 * Was italic 600 primary-dark text, which read as an editorial aside rather than a
 * data point. A pill makes it scannable and visually parallel across all five.
 */
.pd-step__when {
	display: inline-block;
	margin: 0.6rem 0 0;
	padding: 0.2rem 0.65rem;
	border-radius: 999px;

	background-color: rgba( 51, 122, 183, 0.12 );
	color: var( --wp--preset--color--primary-darker );

	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

.pd-step__list {
	margin: 1.1rem 0 0;
	padding-left: 1.15rem;

	/* Opt back out of the card's centring — centred bullet text is hard to scan. */
	text-align: left;
}

.pd-step__list li {
	margin-bottom: 0.45rem;
	font-size: 0.875rem;
	line-height: 1.6;
}

.pd-step__list li:last-child {
	margin-bottom: 0;
}

/* Accent the bullets so the lists don't read as grey mush at this size. */
.pd-step__list li::marker {
	color: var( --wp--preset--color--accent );
}

/* Stagger the reveal left to right across the band. */
.pd-process__grid > .pd-step:nth-child( 2 ) { --pd-reveal-delay: 80ms; }
.pd-process__grid > .pd-step:nth-child( 3 ) { --pd-reveal-delay: 160ms; }
.pd-process__grid > .pd-step:nth-child( 4 ) { --pd-reveal-delay: 240ms; }
.pd-process__grid > .pd-step:nth-child( 5 ) { --pd-reveal-delay: 320ms; }