/* ==========================================================================
   Service Hero (neilkelly/kr-hero)
   Figma: Kitchen Remodel - Service Page / Hero (component 684:3)
   Literal transcription at 1440. Full-bleed photo fills the top and darkens
   toward the lower third where the centered heading, intro and two CTAs sit.
   Token-driven, plain CSS. Wrapper: .wp-block-neilkelly-kr-hero.nk-kr-hero
   ========================================================================== */
.wp-block-neilkelly-kr-hero.nk-kr-hero {
	position: relative;
	min-height: var(--wp--custom--components--kr-hero--min-height);
	background: var(--wp--preset--color--ink-primary);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
	overflow: hidden;
	font-family: var(--wp--preset--font-family--inter);
	box-sizing: border-box;
}

.wp-block-neilkelly-kr-hero .nk-kr-hero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.wp-block-neilkelly-kr-hero .nk-kr-hero__bg-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 32%;
	display: block;
}

/* Scrim — darkens the top (nav legibility) and fades the lower third toward the
   ink base so the white text band reads. Defensible color-mix over brand tokens
   for an image overlay (no fixed hex). Matches Figma gradients on node 650:39. */
.wp-block-neilkelly-kr-hero .nk-kr-hero__overlay {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to bottom, color-mix(in srgb, var(--wp--preset--color--brand-black) 80%, transparent) 0%, transparent 48%),
		linear-gradient(to bottom, transparent 52%, var(--wp--preset--color--ink-primary) 100%);
}

.wp-block-neilkelly-kr-hero .nk-kr-hero__content {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--wp--custom--components--kr-hero--content-max-width);
	box-sizing: border-box;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0 var(--wp--preset--spacing--gutter) var(--wp--custom--components--kr-hero--content-bottom-pad);
}

.wp-block-neilkelly-kr-hero .nk-kr-hero__heading {
	/* 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--hero);
	color: var(--wp--preset--color--brand-white);
	letter-spacing: var(--wp--custom--letter-spacing--snug);
	margin: 0;
}

.wp-block-neilkelly-kr-hero .nk-kr-hero__body {
	font-size: var(--wp--preset--font-size--md);
	font-weight: var(--wp--custom--font-weight--regular);
	line-height: var(--wp--custom--line-height--md-tight);
	color: var(--wp--preset--color--brand-white);
	max-width: var(--wp--custom--components--kr-hero--body-max-width);
	margin: var(--wp--preset--spacing--6) 0 0 0;
}

.wp-block-neilkelly-kr-hero .nk-kr-hero__actions {
	display: flex;
	gap: var(--wp--preset--spacing--4);
	flex-wrap: wrap;
	justify-content: center;
	margin-top: var(--wp--preset--spacing--8);
}

.wp-block-neilkelly-kr-hero .nk-kr-hero__btn {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--2);
	height: var(--wp--custom--components--hero--cta-height);
	padding: 0 var(--wp--preset--spacing--7);
	border-radius: var(--wp--custom--radius--default);
	line-height: 1;
	white-space: nowrap;
	transition: all 200ms ease;
}

.wp-block-neilkelly-kr-hero .nk-kr-hero__btn--primary {
	background: var(--wp--preset--color--surface-page);
	color: var(--wp--preset--color--ink-primary);
	border: 1.5px solid var(--wp--preset--color--surface-page);
	font-size: var(--wp--preset--font-size--base);
	font-weight: var(--wp--custom--font-weight--semibold);
}

.wp-block-neilkelly-kr-hero .nk-kr-hero__btn--primary:hover,
.wp-block-neilkelly-kr-hero .nk-kr-hero__btn--primary:focus-visible {
	background: var(--wp--preset--color--neutral-200);
	border-color: var(--wp--preset--color--neutral-200);
}

.wp-block-neilkelly-kr-hero .nk-kr-hero__btn--secondary {
	background: transparent;
	color: var(--wp--preset--color--brand-white);
	border: 1px solid var(--wp--preset--color--brand-white);
	font-size: var(--wp--preset--font-size--md-base);
	font-weight: var(--wp--custom--font-weight--regular);
}

.wp-block-neilkelly-kr-hero .nk-kr-hero__btn--secondary:hover,
.wp-block-neilkelly-kr-hero .nk-kr-hero__btn--secondary:focus-visible {
	background: color-mix(in srgb, var(--wp--preset--color--brand-white) 12%, transparent);
}

/* Keyboard focus — a visible outline (not color alone) on the dark hero. */
.wp-block-neilkelly-kr-hero .nk-kr-hero__btn:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand-white);
	outline-offset: 3px;
}

.wp-block-neilkelly-kr-hero .nk-kr-hero__arrow { flex-shrink: 0; }

@media (max-width: 1023px) {
	.wp-block-neilkelly-kr-hero.nk-kr-hero { min-height: var(--wp--custom--components--kr-hero--tablet-min-height); }
	.wp-block-neilkelly-kr-hero .nk-kr-hero__content { padding-left: var(--wp--preset--spacing--12); padding-right: var(--wp--preset--spacing--12); }
}

@media (max-width: 767px) {
	.wp-block-neilkelly-kr-hero.nk-kr-hero { min-height: var(--wp--custom--components--kr-hero--mobile-min-height); }
	.wp-block-neilkelly-kr-hero .nk-kr-hero__content { padding-left: var(--wp--preset--spacing--6); padding-right: var(--wp--preset--spacing--6); }
	/* Match the homepage hero mobile scale: heading 32, body 16, full-width 51px CTAs. */
	.wp-block-neilkelly-kr-hero .nk-kr-hero__heading { font-size: var(--wp--preset--font-size--xl-md); }
	.wp-block-neilkelly-kr-hero .nk-kr-hero__body { font-size: var(--wp--preset--font-size--base); margin-top: var(--wp--preset--spacing--4); }
	.wp-block-neilkelly-kr-hero .nk-kr-hero__actions { flex-direction: column; align-self: stretch; margin-top: var(--wp--preset--spacing--6); }
	.wp-block-neilkelly-kr-hero .nk-kr-hero__btn { width: 100%; height: var(--wp--custom--components--hero--mobile-cta-height); font-size: var(--wp--preset--font-size--base); }
}

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

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