/* ==========================================================================
   Scope Tiers (neilkelly/service-scope-tiers) — SMART section
   Figma: Service Page / Scope Tiers — Card redesign (1172:1386)
   Floating white→neutral gradient card: photo, scope-name heading, tagline,
   red-labelled meta, description, and a grey "Featured Project" panel holding a
   project title + market, an overview, and a white testimonial sub-card. When a
   Project is selected the panel links to it. Token-driven.
   Wrapper: .wp-block-neilkelly-service-scope-tiers.nk-scope
   ========================================================================== */
.wp-block-neilkelly-service-scope-tiers.nk-scope {
	/* Trimmed top space; bottom keeps the standard section rhythm. */
	padding: var(--wp--preset--spacing--12) 0 var(--wp--preset--spacing--24) 0;
	background: var(--wp--preset--color--surface-page);
	font-family: var(--wp--preset--font-family--inter);
	box-sizing: border-box;
}

.wp-block-neilkelly-service-scope-tiers .nk-scope__container {
	max-width: var(--wp--custom--layout--content-width);
	margin: 0 auto;
	padding: 0 var(--wp--preset--spacing--gutter);
}

/* ---- Header ---- */
.wp-block-neilkelly-service-scope-tiers .nk-scope__heading {
	/* Headline measure — three quarters of the content column, theme-wide (Shawn, 2026-08-18). */
	max-width: var(--wp--custom--layout--headline-measure);
	/* Size + case from the shared .nk-headline--content class (mapped in render.php). */
	font-weight: var(--wp--custom--font-weight--extrabold);
	line-height: var(--wp--custom--line-height--snug);
	letter-spacing: var(--wp--custom--letter-spacing--snug);
	color: var(--wp--preset--color--ink-primary);
	margin: 0;
}

.wp-block-neilkelly-service-scope-tiers .nk-scope__body {
	font-size: var(--wp--preset--font-size--md);
	line-height: var(--wp--custom--line-height--md);
	color: var(--wp--preset--color--ink-secondary);
	max-width: var(--wp--custom--components--kr-hero--body-max-width);
	margin: var(--wp--preset--spacing--5) 0 0 0;
}

/* ---- Cards ---- */
.wp-block-neilkelly-service-scope-tiers .nk-scope__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	/* Three shared rows (media / body / featured) so the cards' inner sections
	   line up across the row via subgrid. The row gap spaces wrapped card rows
	   apart when there are more than 3 tiers; the card overrides it to 0 so its
	   own inner rows stay seamless (the band boundary isn't spanned by a card,
	   so it keeps the parent gap). The column gap separates cards in a row. */
	grid-template-rows: auto auto auto;
	column-gap: var(--wp--preset--spacing--6);
	row-gap: var(--wp--preset--spacing--6);
	margin-top: var(--wp--preset--spacing--12);
}

/* No top gap when the header renders empty (no heading and no body). :not(:has(*))
   matches a header with no element children even though it still holds whitespace. */
.wp-block-neilkelly-service-scope-tiers .nk-scope__header:not(:has(*)) + .nk-scope__grid {
	margin-top: 0;
}

.wp-block-neilkelly-service-scope-tiers .nk-scope__card {
	position: relative;
	display: grid;
	grid-row: span 3;
	grid-template-rows: subgrid;
	/* Override the parent row gap so this card's inner rows stay seamless;
	   the gap only shows between wrapped card rows. */
	row-gap: 0;
	background: linear-gradient(to bottom, var(--wp--preset--color--surface-card), var(--wp--preset--color--neutral-50));
	border: 1px solid var(--wp--preset--color--neutral-200);
	border-radius: var(--wp--custom--radius--card);
	box-shadow: var(--wp--custom--shadow--card-float);
	overflow: hidden;
}

.wp-block-neilkelly-service-scope-tiers .nk-scope__card-media {
	/* Explicit subgrid rows so media/body/featured always land on the same lines
	   even when a card omits its image or featured panel (ignored on mobile flex). */
	grid-row: 1;
	width: 100%;
	height: var(--wp--custom--components--kitchen-remodel--tier-img-height);
	overflow: hidden;
}

.wp-block-neilkelly-service-scope-tiers .nk-scope__card-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.wp-block-neilkelly-service-scope-tiers .nk-scope__card-body {
	grid-row: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--3);
	padding: var(--wp--preset--spacing--6-5) var(--wp--preset--spacing--6-5) var(--wp--preset--spacing--7);
}

.wp-block-neilkelly-service-scope-tiers .nk-scope__card-title {
	/* Size + case from the shared .nk-headline--structural class (mapped in render.php); block keeps weight, line-height and color. The mobile override below re-declares size at a higher specificity. */
	font-weight: var(--wp--custom--font-weight--extrabold);
	line-height: var(--wp--custom--line-height--none);
	color: var(--wp--preset--color--ink-primary);
	margin: 0;
}

.wp-block-neilkelly-service-scope-tiers .nk-scope__card-tagline {
	font-size: var(--wp--preset--font-size--md);
	font-weight: var(--wp--custom--font-weight--semibold);
	line-height: var(--wp--custom--line-height--none);
	color: var(--wp--preset--color--ink-primary);
	margin: 0;
}

.wp-block-neilkelly-service-scope-tiers .nk-scope__meta {
	display: flex;
	gap: var(--wp--preset--spacing--7);
}

.wp-block-neilkelly-service-scope-tiers .nk-scope__metum {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--1);
}

.wp-block-neilkelly-service-scope-tiers .nk-scope__metum-value {
	font-size: var(--wp--preset--font-size--base);
	font-weight: var(--wp--custom--font-weight--bold);
	line-height: var(--wp--custom--line-height--base);
	color: var(--wp--preset--color--ink-primary);
}

/* Red meta label (surface-brand) — a non-CTA accent, per the CTA colour rules. */
.wp-block-neilkelly-service-scope-tiers .nk-scope__metum-label {
	font-size: var(--wp--preset--font-size--xs);
	font-weight: var(--wp--custom--font-weight--regular);
	color: var(--wp--preset--color--surface-brand);
}

.wp-block-neilkelly-service-scope-tiers .nk-scope__card-desc {
	font-size: var(--wp--preset--font-size--ui-nav);
	line-height: var(--wp--custom--line-height--base);
	color: var(--wp--preset--color--ink-secondary);
	margin: 0;
}

/* ---- Featured Project panel (full-width foot of the card) ---- */
.wp-block-neilkelly-service-scope-tiers .nk-scope__featured {
	grid-row: 3;
	position: relative;
	display: flex;
	flex-direction: column;
	/* 15px (not 12px) so the panel's gaps read the same as the space above
	   .nk-scope__card-desc, which the meta label's inherited line-height inflates
	   by ~3px. Matches the visual rhythm of the card body. */
	gap: var(--wp--preset--spacing--3-75);
	/* Top/bottom match .nk-scope__card-body (6-5 / 7); sides stay 6-5. */
	padding: var(--wp--preset--spacing--6-5) var(--wp--preset--spacing--6-5) var(--wp--preset--spacing--7);
	background: var(--wp--preset--color--surface-subtle);
	border-top: 1px solid var(--wp--preset--color--neutral-200);
}

.wp-block-neilkelly-service-scope-tiers .nk-scope__featured-head {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--1);
}

.wp-block-neilkelly-service-scope-tiers .nk-scope__featured-title {
	font-size: var(--wp--preset--font-size--md);
	font-weight: var(--wp--custom--font-weight--semibold);
	line-height: var(--wp--custom--line-height--none);
	color: var(--wp--preset--color--ink-primary);
	margin: 0;
}

.wp-block-neilkelly-service-scope-tiers .nk-scope__featured-place {
	font-size: var(--wp--preset--font-size--xs);
	font-weight: var(--wp--custom--font-weight--regular);
	line-height: var(--wp--custom--line-height--none);
	letter-spacing: var(--wp--custom--letter-spacing--wide);
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-primary);
}

.wp-block-neilkelly-service-scope-tiers .nk-scope__featured-text {
	font-size: var(--wp--preset--font-size--sm);
	line-height: var(--wp--custom--line-height--base);
	color: var(--wp--preset--color--ink-secondary);
	margin: 0;
}

/* Content may be a project's WYSIWYG overview — normalise inner paragraph spacing. */
.wp-block-neilkelly-service-scope-tiers .nk-scope__featured-text p { margin: 0; }
.wp-block-neilkelly-service-scope-tiers .nk-scope__featured-text p + p { margin-top: var(--wp--preset--spacing--3); }

/* ---- Testimonial sub-card ---- */
.wp-block-neilkelly-service-scope-tiers .nk-scope__testimonial {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--1-75);
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--5);
	background: var(--wp--preset--color--surface-card);
	border: 1px solid var(--wp--preset--color--border-subtle);
	border-radius: var(--wp--custom--radius--card);
	margin: 0;
}

.wp-block-neilkelly-service-scope-tiers .nk-scope__testimonial-mark {
	height: var(--wp--custom--components--kitchen-remodel--tier-testimonial-mark-height);
	font-size: var(--wp--preset--font-size--xxl);
	font-weight: var(--wp--custom--font-weight--extrabold);
	line-height: var(--wp--custom--line-height--none);
	color: var(--wp--preset--color--brand-red);
}

.wp-block-neilkelly-service-scope-tiers .nk-scope__testimonial-quote {
	font-size: var(--wp--preset--font-size--base);
	font-weight: var(--wp--custom--font-weight--medium);
	line-height: var(--wp--custom--line-height--md-tight);
	color: var(--wp--preset--color--ink-primary);
	margin: 0;
}

.wp-block-neilkelly-service-scope-tiers .nk-scope__testimonial-cite {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--0-5);
}

.wp-block-neilkelly-service-scope-tiers .nk-scope__testimonial-name {
	font-size: var(--wp--preset--font-size--sm-md);
	font-weight: var(--wp--custom--font-weight--bold);
	color: var(--wp--preset--color--ink-primary);
}

.wp-block-neilkelly-service-scope-tiers .nk-scope__testimonial-place {
	font-size: var(--wp--preset--font-size--xs);
	font-weight: var(--wp--custom--font-weight--regular);
	color: var(--wp--preset--color--ink-secondary);
}

/* ---- "View Project" CTA link — standard red arrow link (matches nk-project-related__cta) ----
   Pinned to the foot of the panel: the panels stretch to the shared subgrid row
   height, so `margin-top: auto` pushes the link down and the CTAs line up across
   the row even when the featured text/testimonial run to different lengths. */
.wp-block-neilkelly-service-scope-tiers .nk-scope__featured-cta {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: var(--wp--preset--spacing--1);
	font-size: var(--wp--preset--font-size--ui-nav);
	font-weight: var(--wp--custom--font-weight--medium);
	color: var(--wp--preset--color--brand-red);
}

.wp-block-neilkelly-service-scope-tiers .nk-scope__featured-cta:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand-red);
	outline-offset: 2px;
}

.wp-block-neilkelly-service-scope-tiers .nk-scope__featured-arrow {
	display: inline-block;
	transition: transform 200ms ease;
}

.wp-block-neilkelly-service-scope-tiers .nk-scope__featured-cta:hover .nk-scope__featured-arrow,
.wp-block-neilkelly-service-scope-tiers .nk-scope__featured-cta:focus-visible .nk-scope__featured-arrow {
	transform: translateX(var(--wp--preset--spacing--1-5));
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-neilkelly-service-scope-tiers .nk-scope__featured-arrow { transition: none; }
}

/* ---- Actions ---- */
.wp-block-neilkelly-service-scope-tiers .nk-scope__actions {
	display: flex;
	gap: var(--wp--preset--spacing--4);
	flex-wrap: wrap;
	margin-top: var(--wp--preset--spacing--12);
	justify-content: center;
}

.wp-block-neilkelly-service-scope-tiers .nk-scope__btn {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--wp--preset--spacing--4) var(--wp--preset--spacing--6-5);
	font-size: var(--wp--preset--font-size--base);
	font-weight: var(--wp--custom--font-weight--semibold);
	line-height: 1;
	border-radius: var(--wp--custom--radius--lg);
	white-space: nowrap;
	transition: all 200ms ease;
}

.wp-block-neilkelly-service-scope-tiers .nk-scope__btn--primary {
	background: var(--wp--preset--color--ink-primary);
	color: var(--wp--preset--color--brand-white);
	border: 1.5px solid var(--wp--preset--color--ink-primary);
}

.wp-block-neilkelly-service-scope-tiers .nk-scope__btn--primary:hover,
.wp-block-neilkelly-service-scope-tiers .nk-scope__btn--primary:focus-visible {
	background: var(--wp--preset--color--brand-black);
}

.wp-block-neilkelly-service-scope-tiers .nk-scope__btn--secondary {
	background: transparent;
	color: var(--wp--preset--color--ink-primary);
	border: 1.5px solid var(--wp--preset--color--ink-primary);
}

.wp-block-neilkelly-service-scope-tiers .nk-scope__btn--secondary:hover,
.wp-block-neilkelly-service-scope-tiers .nk-scope__btn--secondary:focus-visible {
	background: var(--wp--preset--color--ink-primary);
	color: var(--wp--preset--color--brand-white);
}

@media (max-width: 1023px) {
	.wp-block-neilkelly-service-scope-tiers .nk-scope__container { padding: 0 var(--wp--preset--spacing--12); }
	/* Single column: drop the subgrid (nothing to align across) and restore the
	   vertical gap between stacked cards; cards revert to a plain flex column. */
	.wp-block-neilkelly-service-scope-tiers .nk-scope__grid {
		grid-template-columns: 1fr;
		grid-template-rows: none;
		row-gap: var(--wp--preset--spacing--6);
	}
	.wp-block-neilkelly-service-scope-tiers .nk-scope__card {
		display: flex;
		flex-direction: column;
		grid-row: auto;
	}
	/* Centering is desktop-only; keep tablet left-aligned. */
	.wp-block-neilkelly-service-scope-tiers .nk-scope__actions { justify-content: flex-start; }
}

@media (max-width: 767px) {
	.wp-block-neilkelly-service-scope-tiers.nk-scope { padding: var(--wp--preset--spacing--8) 0 var(--wp--preset--spacing--16) 0; }
	.wp-block-neilkelly-service-scope-tiers .nk-scope__container { padding: 0 var(--wp--preset--spacing--6); }
	.wp-block-neilkelly-service-scope-tiers .nk-scope__heading { font-size: var(--wp--preset--font-size--lg-xl); }
	.wp-block-neilkelly-service-scope-tiers .nk-scope__body { font-size: var(--wp--preset--font-size--base); }
	.wp-block-neilkelly-service-scope-tiers .nk-scope__card-title { font-size: var(--wp--preset--font-size--xl-md); }
	.wp-block-neilkelly-service-scope-tiers .nk-scope__actions { flex-direction: column; }
	.wp-block-neilkelly-service-scope-tiers .nk-scope__btn { width: 100%; }
}

/* Links never underline inside this block. */
.wp-block-neilkelly-service-scope-tiers a { text-decoration: none; }

/* No block-gap seam between full-bleed sections. */
.wp-block-neilkelly-service-scope-tiers { margin-block: 0; }

/* ── Seam: directly above an Intro band ───────────────────────────────────
   This section pads 96px below (64px at mobile) and neilkelly/location-brand pads 72px
   above in its --service form, so the pair met at ~168px of dead space. The two halves
   are set together — this side drops to zero, and the band's own stylesheet takes its top
   side to 48px — so the gap is one section's decision rather than two sections' sum.

   Written to the ADJACENCY, not to a template: single-service-adu.html is the only file
   composing this pair today (its second Intro band sits below the tier grid), and a second
   one would want the same treatment for the same reason.

   Specificity is 0,3,0 — the subject's two classes plus the one in the :has() argument —
   which beats both the base 0,2,0 padding rule and the 0,2,0 mobile override, so it holds
   at every breakpoint without depending on source order.

   The mirror of this pair — an Intro band directly ABOVE a header-less tier grid — is
   handled from the other side, in blocks/location-brand/style.css. */
.wp-block-neilkelly-service-scope-tiers.nk-scope:has(+ .wp-block-neilkelly-location-brand) {
	padding-bottom: 0;
}