/* ==========================================================================
   Project Closing CTA (neilkelly/project-cta-close)
   Figma: Claude Ui Library Work — CTA Section / Closing Conversion (998:106)
   Two equal dark panels (primary #171717-class + secondary #2d2d2d). Token-driven.
   Wrapper: .wp-block-neilkelly-project-cta-close.nk-project-cta
   ========================================================================== */
.wp-block-neilkelly-project-cta-close.nk-project-cta {
	display: grid;
	grid-template-columns: 1fr 1fr;
	font-family: var(--wp--preset--font-family--inter);
	box-sizing: border-box;
}

.wp-block-neilkelly-project-cta-close .nk-project-cta__panel {
	min-height: var(--wp--custom--components--project--cta-panel-min-height);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--6);
	padding: var(--wp--preset--spacing--16);
	box-sizing: border-box;
}

/* Each panel renders a centered content column capped at the Figma width. */
.wp-block-neilkelly-project-cta-close .nk-project-cta__panel > * {
	width: 100%;
	max-width: var(--wp--custom--components--project--cta-content-max-width);
}

.wp-block-neilkelly-project-cta-close .nk-project-cta__panel--primary {
	background: var(--wp--preset--color--surface-dark);
	color: var(--wp--preset--color--ink-on-dark);
}

.wp-block-neilkelly-project-cta-close .nk-project-cta__panel--secondary {
	background: var(--wp--preset--color--surface-dark-2);
	color: var(--wp--preset--color--ink-on-dark);
}

.wp-block-neilkelly-project-cta-close .nk-project-cta__overline {
	margin: 0;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: var(--wp--custom--font-weight--bold);
	line-height: var(--wp--custom--line-height--none);
	letter-spacing: var(--wp--custom--letter-spacing--widest);
	text-transform: uppercase;
	/* WCAG AA: brand-red (#d9281e) on surface-dark (#111) is only 3.84:1 for this
	   small (12px) overline. brand-red-on-dark (#f2655c) is the on-dark red accent
	   token — 6.1:1 on #111, passes 4.5:1 while keeping the red treatment. */
	color: var(--wp--preset--color--brand-red-on-dark);
}

/* WCAG AA: ink-on-dark-muted (#8c8c8c) on surface-dark-2 (#2d2d2d) is 4.09:1 —
   short of 4.5:1 for this small (12px) overline. ink-on-dark (#a6a6a6) lifts it
   to 5.65:1 while staying a muted grey, distinct from the white heading. */
.wp-block-neilkelly-project-cta-close .nk-project-cta__panel--secondary .nk-project-cta__overline {
	color: var(--wp--preset--color--ink-on-dark);
}

.wp-block-neilkelly-project-cta-close .nk-project-cta__heading {
	margin: 0;
	/* Size + case come from the shared .nk-headline--structural class (mapped in
	   render.php); block keeps weight, line-height and color. */
	font-weight: var(--wp--custom--font-weight--bold);
	line-height: var(--wp--custom--line-height--xl);
	color: var(--wp--preset--color--brand-white);
}

.wp-block-neilkelly-project-cta-close .nk-project-cta__body {
	margin: 0;
	font-size: var(--wp--preset--font-size--base);
	font-weight: var(--wp--custom--font-weight--regular);
	line-height: var(--wp--custom--line-height--base);
	color: var(--wp--preset--color--ink-on-dark);
}

.wp-block-neilkelly-project-cta-close .nk-project-cta__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--3);
}

.wp-block-neilkelly-project-cta-close .nk-project-cta__item {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--3);
	font-size: var(--wp--preset--font-size--sm-md);
	font-weight: var(--wp--custom--font-weight--medium);
	line-height: var(--wp--custom--line-height--none);
	color: var(--wp--preset--color--ink-on-dark);
}

.wp-block-neilkelly-project-cta-close .nk-project-cta__icon { flex-shrink: 0; color: var(--wp--preset--color--brand-red); }
.wp-block-neilkelly-project-cta-close .nk-project-cta__panel--secondary .nk-project-cta__icon { color: var(--wp--preset--color--ink-on-dark); }
.wp-block-neilkelly-project-cta-close .nk-project-cta__icon svg { display: block; }

.wp-block-neilkelly-project-cta-close .nk-project-cta__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--2);
	height: var(--wp--custom--components--project--cta-btn-height);
	padding-inline: var(--wp--preset--spacing--5);
	text-decoration: none;
	font-size: var(--wp--preset--font-size--base);
	font-weight: var(--wp--custom--font-weight--semibold);
	line-height: var(--wp--custom--line-height--none);
	box-sizing: border-box;
}

.wp-block-neilkelly-project-cta-close .nk-project-cta__btn--primary {
	background: var(--wp--preset--color--brand-white);
	color: var(--wp--preset--color--brand-black);
	border-radius: var(--wp--custom--radius--lg);
}
.wp-block-neilkelly-project-cta-close .nk-project-cta__btn--primary:hover { background: var(--wp--preset--color--neutral-200); }

.wp-block-neilkelly-project-cta-close .nk-project-cta__btn--secondary {
	background: transparent;
	color: var(--wp--preset--color--brand-white);
	border: var(--wp--custom--components--project--cta-btn-border-width) solid var(--wp--preset--color--brand-white);
	border-radius: var(--wp--custom--radius--default);
}
.wp-block-neilkelly-project-cta-close .nk-project-cta__btn--secondary:hover {
	background: var(--wp--preset--color--brand-white);
	color: var(--wp--preset--color--brand-black);
}

.wp-block-neilkelly-project-cta-close .nk-project-cta__btn:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand-red);
	outline-offset: 2px;
}

.wp-block-neilkelly-project-cta-close .nk-project-cta__btn svg { display: block; }

@media (max-width: 767px) {
	.wp-block-neilkelly-project-cta-close.nk-project-cta { grid-template-columns: 1fr; }
	.wp-block-neilkelly-project-cta-close .nk-project-cta__panel { padding: var(--wp--preset--spacing--12) var(--wp--preset--spacing--6); min-height: 0; }
	.wp-block-neilkelly-project-cta-close .nk-project-cta__heading { font-size: var(--wp--preset--font-size--md); line-height: var(--wp--custom--line-height--lg-tight); }
}

/* No block-gap seam between full-bleed sections. */
.wp-block-neilkelly-project-cta-close { margin-block: 0; }

/* When this is the final rendered section (e.g. project-gallery is empty),
   pull it flush against the footer — closes the block-gap seam below.
   :last-child so it doesn't apply when the gallery renders after it.
   Mirrors blocks/service-cta-close. */
.wp-block-neilkelly-project-cta-close.nk-project-cta:last-child {
	margin-bottom: calc(-1 * var(--wp--preset--spacing--6));
}