/**
 * The closing pair — "Let's Talk About Your Project" and "Industry Insights".
 *
 * WHAT WAS WRONG
 *
 *  1. The columns block carried align:"full", so this ran edge to edge while every
 *     section above it sat in a 1200px container. This was the last remaining
 *     alignfull on the page.
 *  2. Two <h2>s of equal weight side by side in equal columns, so nothing led. On
 *     the final screen of a sales page, the contact action should win and the blog
 *     should be the quieter option.
 *  3. One CTA was a filled button reading "contact now", the other a filled button
 *     reading "READ BLOGS NOW" — same visual weight, inconsistent casing, and two
 *     filled buttons competing for the same click.
 *
 * WHAT IT IS NOW
 *
 * An asymmetric 1.35fr / 1fr pair: a filled gradient contact card carrying the only
 * filled button, and a lighter cream card whose CTA is a text link. The phone
 * number is surfaced from the footer as a second way to act — a caller who does not
 * want a form is a caller you would otherwise lose here.
 *
 * Both headings stay <h2>. They are peer sections in the document outline; the
 * hierarchy is visual, so demoting one to <h3> would misdescribe the page to a
 * screen reader for the sake of font size.
 */

.pd-closing__grid {
	display: grid;

	/* Even columns. A 1.35fr contact card looked lopsided rather than dominant:
	   the title is capped to a readable measure, so the extra width became ~340px
	   of dead space on its right. The hierarchy comes from the fill, the type size
	   and the single filled button — it doesn't need the extra column width too. */
	grid-template-columns: 1fr 1fr;
	gap: var( --wp--preset--spacing--40 );

	/* Equal heights so the two cards read as a pair, not a step. */
	align-items: stretch;
}

/* Shared card shell. */
.pd-closing__grid > .pd-closing__cta,
.pd-closing__grid > .pd-closing__blog {
	/* Kill core's flow-layout block margin — the grid gap owns spacing. */
	margin-top: 0;

	display: flex;
	flex-direction: column;

	padding: clamp( 1.75rem, 3.5vw, 2.75rem );
	border-radius: 14px;
}

/**
 * Contact card. Same gradient family as the careers band above so the two read as
 * a deliberate closing pair rather than two unrelated blue blocks.
 */
.pd-closing__grid > .pd-closing__cta {
	background-image: linear-gradient(
		135deg,
		var( --wp--preset--color--dark ) 0%,
		var( --wp--preset--color--primary-darker ) 60%,
		var( --wp--preset--color--primary-dark ) 100%
	);

	/* Set on the CARD, not per-block. The heading carries textColor:base from the
	   editor but the "Or call" line did not, so it inherited theme.json's near-black
	   `contrast` onto a blue gradient. Colouring the container means anything added
	   to this card later is legible by default. */
	color: var( --wp--preset--color--base );
}

.pd-closing__grid > .pd-closing__blog {
	background-color: var( --wp--preset--color--cream );
}

/* Icon badges. Same 52px circle as the process steps. */
.pd-closing__badge {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;

	/* On the gradient card a translucent white sits better than a solid fill. */
	background-color: rgba( 255, 255, 255, 0.14 );
	color: var( --wp--preset--color--base );
}

/* On the cream card, the solid primary badge used by the process steps. */
.pd-closing__badge--light {
	background-color: var( --wp--preset--color--primary );
}

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

h2.pd-closing__title {
	margin: 1.25rem 0 0;

	/* Wide enough to use the card rather than stranding space to its right, still
	   short enough to break into two lines rather than one long one. */
	max-width: 24ch;

	/* Stepped down from 2.375rem. Against the blog card's 1.375rem it still clearly
	   leads; the larger size was shouting rather than ranking. */
	font-size: clamp( 1.625rem, 2.4vw, 2rem );
	line-height: 1.2;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

h2.pd-closing__blog-title {
	margin: 1.25rem 0 0;
	font-size: 1.375rem;
	line-height: 1.25;
	text-wrap: balance;
}

.pd-closing__blog-copy {
	margin: 0.75rem 0 0;
	font-size: 0.9375rem;
	line-height: 1.65;
	opacity: 0.85;
}

/* Buttons block sits after the heading; push it and the phone line to the foot so
   the two cards' actions align even though their copy lengths differ. */
.pd-closing__buttons {
	margin-top: auto;
	padding-top: 1.5rem;
}

.pd-closing__phone {
	margin: 0.85rem 0 0;
	font-size: 0.9375rem;
	opacity: 0.8;
}

.pd-closing__phone a {
	color: var( --wp--preset--color--base );
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/**
 * Blog CTA as a text link rather than a second filled button — one filled button
 * per screen, so the contact card wins the click.
 *
 * Primary blue, not gold: gold on cream fails contrast badly (#F3B736 on #F5EFE5).
 */
.pd-closing__link {
	margin-top: auto;
	padding-top: 1.5rem;
}

.pd-closing__link a {
	color: var( --wp--preset--color--primary-darker );
	font-weight: 700;
	text-decoration: none;
}

/* Arrow in CSS so the link text stays exactly "READ BLOGS NOW". */
.pd-closing__link a::after {
	content: " \2192";
}

.pd-closing__link a:hover,
.pd-closing__link a:focus {
	text-decoration: underline;
}

/* Stack before the cards get too narrow to hold their headings. */
@media ( max-width: 860px ) {
	.pd-closing__grid {
		grid-template-columns: 1fr;
	}

	h2.pd-closing__title {
		max-width: none;
	}
}