/* ==========================================================================
   Pricing — Scope Tiers (neilkelly/pricing-tiers)
   Figma: Pricing & Financing / Header and Body (5111:94, 1440 x 1022)
   ========================================================================== */

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

.wp-block-neilkelly-pricing-tiers.nk-tiers {
	box-sizing: border-box;
	/* VERTICAL ONLY. The horizontal inset lives inside the capped container below, not
	   on this full-bleed wrapper: padded out here the band ran 100vw - 156px, which
	   matches the 1440 frame to within 12px but keeps growing with the viewport — 1764
	   at 1920, 2404 at 2560 — while every capped section on the page holds 1296. Same
	   shape .nk-location-reviews__container and .nk-drivers__container already use.
	   One value, not top/bottom: the original was the two-value shorthand
	   `band-pad-top band-pad-inline`, so the bottom was 76 as well — this is a width
	   change, not a vertical-rhythm one, and band-pad-bottom (80) stays unused here. */
	padding-block: var(--wp--custom--components--pricing--band-pad-top);
	/* 5111:94 is filled surface-subtle, not the page white — sampled from the
	   frame render rather than inferred from the text colours. */
	background: var(--wp--preset--color--surface-subtle);
}

.wp-block-neilkelly-pricing-tiers .nk-tiers__container {
	max-width: var(--wp--custom--layout--max-width);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--gutter);
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--12);
}

/* Cards and the breakdown are one group in the frame (5111:119) at 24, with 48
   between that group and the header, filters and CTA around it. */
.wp-block-neilkelly-pricing-tiers .nk-tiers__panel {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--6);
}

.wp-block-neilkelly-pricing-tiers .nk-tiers__header {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--6);
	/* Three quarters of the 1296 measure — the theme's shared headline measure, the same
	   one nk-knowledge, nk-service-faq and nk-service-process hold on this page. Was the
	   block's private tiers-header-width (798px), now unused. */
	max-width: var(--wp--custom--layout--headline-measure);
}

.wp-block-neilkelly-pricing-tiers .nk-tiers__heading {
	/* Size + case come from the shared .nk-headline--content class (mapped in render.php). */
	margin: 0;
	font-weight: var(--wp--custom--font-weight--extrabold);
	line-height: var(--wp--custom--line-height--xl-tight);
	letter-spacing: var(--wp--custom--letter-spacing--neg-102);
	color: var(--wp--preset--color--ink-primary);
}

.wp-block-neilkelly-pricing-tiers .nk-tiers__body {
	margin: 0;
	font-size: var(--wp--preset--font-size--md);
	line-height: var(--wp--custom--line-height--lg-tight);
	color: var(--wp--preset--color--ink-secondary);
}

/* Filter row ---------------------------------------------------------------
   A radio group, not tabs: only one project type carries data today and the
   frame itself marks the rest "coming soon". */
.wp-block-neilkelly-pricing-tiers .nk-tiers__filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--2);
}

.wp-block-neilkelly-pricing-tiers .nk-tiers__filter {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	/* The height is CONTENT-DRIVEN with a floor, not a fixed 40. It used to come entirely
	   from min-height, because there was no padding-block at all and line-height 1 makes
	   the text box exactly the font size — so a pill that stayed on one line was always
	   40 to the pixel, and one whose label wrapped grew past it with its text flush
	   against the border. Neither breakpoint overrides any of this, so mobile ran the
	   desktop sizing unchanged and the longer "(coming soon)" labels are the ones that
	   wrap first as the row narrows.
	   40 stays as the floor so a single-line pill is unchanged and the touch target holds
	   (20px text + 16px padding = 36, under the floor); past two lines the padding is what
	   keeps the label off the border. */
	min-height: var(--wp--preset--spacing--10);
	padding-block: var(--wp--preset--spacing--2);
	padding-inline: var(--wp--preset--spacing--4);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--base);
	font-weight: var(--wp--custom--font-weight--medium);
	/* 1 crushes wrapped lines into each other; snug only shows once a label wraps. */
	line-height: var(--wp--custom--line-height--snug);
	color: var(--wp--preset--color--ink-secondary);
	background: none;
	border: 1px solid var(--wp--preset--color--border-default);
	border-radius: var(--wp--custom--radius--default);
	cursor: pointer;
}

.wp-block-neilkelly-pricing-tiers .nk-tiers__filter.is-current {
	color: var(--wp--preset--color--brand-white);
	background: var(--wp--preset--color--surface-dark);
	border-color: var(--wp--preset--color--surface-dark);
}

.wp-block-neilkelly-pricing-tiers .nk-tiers__filter[disabled] {
	color: var(--wp--preset--color--ink-disabled);
	cursor: default;
}

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

/* Tier cards -------------------------------------------------------------- */
.wp-block-neilkelly-pricing-tiers .nk-tiers__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--6);
}

.wp-block-neilkelly-pricing-tiers .nk-tiers__card {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--12);
	padding: var(--wp--preset--spacing--7);
	background: var(--wp--preset--color--surface-card);
	border: 1px solid var(--wp--preset--color--border-default);
	border-radius: var(--wp--custom--radius--lg);
}

.wp-block-neilkelly-pricing-tiers .nk-tiers__eyebrow {
	margin: 0;
	font-size: var(--wp--preset--font-size--base);
	font-weight: var(--wp--custom--font-weight--semibold);
	line-height: var(--wp--custom--line-height--lg-tight);
	color: var(--wp--preset--color--brand-red);
}

.wp-block-neilkelly-pricing-tiers .nk-tiers__figures {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--2);
}

.wp-block-neilkelly-pricing-tiers .nk-tiers__price {
	margin: 0;
	font-size: var(--wp--preset--font-size--xl);
	font-weight: var(--wp--custom--font-weight--extrabold);
	line-height: var(--wp--custom--line-height--lg-tight);
	color: var(--wp--preset--color--ink-primary);
	text-transform: uppercase;
}

.wp-block-neilkelly-pricing-tiers .nk-tiers__desc {
	margin: 0;
	font-size: var(--wp--preset--font-size--sm-md);
	line-height: var(--wp--custom--line-height--lg-tight);
	color: var(--wp--preset--color--ink-secondary);
}

/* Trade breakdown --------------------------------------------------------- */
.wp-block-neilkelly-pricing-tiers .nk-tiers__breakdown {
	box-sizing: border-box;
	display: flex;
	gap: var(--wp--custom--components--pricing--breakdown-gap);
	/* 5111:136 draws a 276 panel, so that measure is kept — but as a FLOOR, not a clamp.
	   As `height` it also applied below 1024, where the tablet rule turns this row into a
	   column: the copy stacks above the trade list, the two together run well past 276,
	   and the overflow simply spilled out of the bordered box. A min-height holds the
	   frame wherever there is room for it and lets the stacked panel grow. */
	min-height: var(--wp--custom--components--pricing--breakdown-height);
	padding: var(--wp--preset--spacing--6);
	background: var(--wp--preset--color--surface-card);
	border: 1px solid var(--wp--preset--color--border-default);
	border-radius: var(--wp--custom--radius--lg);
}

.wp-block-neilkelly-pricing-tiers .nk-tiers__breakdown-copy {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: var(--wp--custom--components--pricing--breakdown-copy-gap);
}

.wp-block-neilkelly-pricing-tiers .nk-tiers__breakdown-lead {
	margin: 0;
	font-size: var(--wp--preset--font-size--md);
	font-weight: var(--wp--custom--font-weight--semibold);
	line-height: var(--wp--custom--line-height--lg-tight);
	color: var(--wp--preset--color--ink-primary);
}

.wp-block-neilkelly-pricing-tiers .nk-tiers__breakdown-note {
	margin: 0;
	font-size: var(--wp--preset--font-size--md);
	line-height: var(--wp--custom--line-height--lg-tight);
	color: var(--wp--preset--color--ink-secondary);
}

.wp-block-neilkelly-pricing-tiers .nk-tiers__trades {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--6);
	flex: 0 0 var(--wp--custom--components--pricing--breakdown-width);
	width: var(--wp--custom--components--pricing--breakdown-width);
	margin: 0;
	padding: 0;
	list-style: none;
}

.wp-block-neilkelly-pricing-tiers .nk-tiers__trade {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--3);
	padding: var(--wp--custom--components--pricing--trade-pad);
	border: 1px solid var(--wp--custom--components--pricing--trade-border);
	border-radius: var(--wp--custom--radius--default);
}

.wp-block-neilkelly-pricing-tiers .nk-tiers__trade-label {
	font-size: var(--wp--preset--font-size--base);
	font-weight: var(--wp--custom--font-weight--medium);
	line-height: var(--wp--custom--line-height--lg-tight);
	color: var(--wp--custom--components--pricing--trade-label);
}

.wp-block-neilkelly-pricing-tiers .nk-tiers__trade-percent {
	font-size: var(--wp--preset--font-size--md);
	font-weight: var(--wp--custom--font-weight--semibold);
	line-height: var(--wp--custom--line-height--lg-tight);
	color: var(--wp--preset--color--ink-primary);
}

/* CTA — same recipe as the other primary buttons on this page. */
.wp-block-neilkelly-pricing-tiers .nk-tiers__cta {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--wp--preset--spacing--14);
	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: var(--wp--custom--line-height--none);
	color: var(--wp--preset--color--brand-white);
	text-decoration: none;
	background: var(--wp--preset--color--surface-dark);
	border: 1.5px solid var(--wp--preset--color--surface-dark);
	border-radius: var(--wp--custom--radius--lg);
	transition: background-color 200ms ease, border-color 200ms ease;
}

.wp-block-neilkelly-pricing-tiers .nk-tiers__cta:hover,
.wp-block-neilkelly-pricing-tiers .nk-tiers__cta:focus-visible {
	background: var(--wp--preset--color--ink-primary);
	border-color: var(--wp--preset--color--ink-primary);
}

/* Responsive -------------------------------------------------------------- */
@media (max-width: 1023px) {
	/* The heading steps down from tablet, not just from mobile — nk-process-intro__heading
	   and nk-drivers__heading both do, and the three sit on the same page. */
	.wp-block-neilkelly-pricing-tiers .nk-tiers__heading {
		font-size: var(--wp--preset--font-size--xl);
	}

	.wp-block-neilkelly-pricing-tiers.nk-tiers {
		padding-block: var(--wp--preset--spacing--16);
	}

	.wp-block-neilkelly-pricing-tiers .nk-tiers__container {
		padding-inline: var(--wp--preset--spacing--12);
	}
	.wp-block-neilkelly-pricing-tiers .nk-tiers__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.wp-block-neilkelly-pricing-tiers .nk-tiers__breakdown {
		flex-direction: column;
	}
	.wp-block-neilkelly-pricing-tiers .nk-tiers__trades {
		flex: 1 1 auto;
		width: 100%;
	}
}

@media (max-width: 767px) {
	.wp-block-neilkelly-pricing-tiers.nk-tiers {
		padding-block: var(--wp--preset--spacing--12);
	}

	.wp-block-neilkelly-pricing-tiers .nk-tiers__container {
		padding-inline: var(--wp--preset--spacing--5);
	}
	.wp-block-neilkelly-pricing-tiers .nk-tiers__grid,
	.wp-block-neilkelly-pricing-tiers .nk-tiers__trades {
		grid-template-columns: minmax(0, 1fr);
	}
	/* Steps down with nk-process-intro__heading and nk-drivers__heading on this page —
	   without this the heading keeps the 50px it takes from .nk-headline--content. */
	.wp-block-neilkelly-pricing-tiers .nk-tiers__heading {
		font-size: var(--wp--preset--font-size--xl-sm);
	}
}

.wp-block-neilkelly-pricing-tiers .nk-tiers__trade-name {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--3);
	min-width: 0;
	color: var(--wp--custom--components--pricing--trade-label);
}

.wp-block-neilkelly-pricing-tiers .nk-tiers__trade-icon {
	flex: 0 0 auto;
	width: var(--wp--preset--spacing--6);
	height: var(--wp--preset--spacing--6);
}

/* --------------------------------------------------------------------------
   Tab panels
   --------------------------------------------------------------------------
   view.js hides the inactive project types with [hidden], which the panel's own
   display:flex above would otherwise override — the attribute only carries
   display:none while nothing else sets display. Without this line every type
   renders stacked the moment the tabs go live.
   -------------------------------------------------------------------------- */
.wp-block-neilkelly-pricing-tiers .nk-tiers__panel[hidden] {
	display: none;
}