/* ==========================================================================
   Service Hero (neilkelly/service-hero)
   Figma: Kitchen Remodel - Service Page / Hero (component 684:3)
   Literal transcription at 1440. Full-bleed photo with a targeted gradient scrim
   for text legibility (never a uniform darken of the whole image); the heading,
   intro and two CTAs are vertically centred, left-aligned, inset by the page
   gutter. The hero fills at least 60vh (grows taller if the copy needs it).
   Token-driven, plain CSS. Wrapper: .wp-block-neilkelly-service-hero.nk-service-hero
   ========================================================================== */
.wp-block-neilkelly-service-hero.nk-service-hero {
	position: relative;
	/* Its own token, not location-hero's --min-height (also 60vh): the two heroes agree
	   on the figure today, but they are unrelated sections and sharing one variable would
	   make either one's redesign silently move the other. Tokenised 2026-08-07 — the value
	   was hardcoded here. */
	min-height: var(--wp--custom--components--service-hero--min-height);
	background: var(--wp--preset--color--ink-primary);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	overflow: hidden;
	font-family: var(--wp--preset--font-family--inter);
	box-sizing: border-box;
}

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

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

/* Text scrim — gradient, never a flat/uniform darken of the whole image:
   - a short top gradient for the white header links, and
   - a left→right gradient behind the (vertically-centred, left-aligned) heading
     + body, aimed at ~4.5:1 behind the copy while fading out so the right of the
     photo stays clear.
   NOTE: ~4.5:1 is per-image, not a CSS guarantee — verify on staging. Heading
   and body are both white here, so contrast is easy; only a very bright photo
   would need the stops strengthened.
   color-mix over the brand-black token keeps it hex-free. Mobile (stacked ink
   panel) keeps its own fade-to-ink scrim in the <=767px block below. */
.wp-block-neilkelly-service-hero .nk-service-hero__overlay {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to bottom,
			color-mix(in srgb, var(--wp--preset--color--brand-black) 55%, transparent) 0%,
			transparent 22%),
		linear-gradient(to right,
			color-mix(in srgb, var(--wp--preset--color--brand-black) 80%, transparent) 0%,
			color-mix(in srgb, var(--wp--preset--color--brand-black) 68%, transparent) 42%,
			color-mix(in srgb, var(--wp--preset--color--brand-black) 30%, transparent) 60%,
			transparent 78%);
}

.wp-block-neilkelly-service-hero .nk-service-hero__content {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--wp--custom--layout--max-width);
	/* Center the capped content column so it doesn't pin left on wide viewports. */
	margin-inline: auto;
	box-sizing: border-box;
	text-align: left;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	/* Copy is vertically centred (justify-content:center on the wrapper). The top
	   padding still reserves the absolute-header zone (announcement bar + nav) plus
	   the small content-top-gap, so the centred copy never rides under the header
	   on short heroes; the bottom gets the matching small pad. Gutter inset sides. */
	padding: calc(var(--wp--custom--components--site-header--announcement-height) + var(--wp--custom--layout--header--height) + var(--wp--custom--components--service-hero--content-top-gap)) var(--wp--preset--spacing--gutter) var(--wp--custom--components--service-hero--content-bottom-pad);
}

.wp-block-neilkelly-service-hero .nk-service-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);
	max-width: var(--wp--custom--components--service-hero--text-max-width);
	margin: 0;
}

.wp-block-neilkelly-service-hero .nk-service-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--service-hero--text-max-width);
	margin: var(--wp--preset--spacing--6) 0 0 0;
}

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

.wp-block-neilkelly-service-hero .nk-service-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-service-hero .nk-service-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-service-hero .nk-service-hero__btn--primary:hover,
.wp-block-neilkelly-service-hero .nk-service-hero__btn--primary:focus-visible {
	background: var(--wp--preset--color--neutral-200);
	border-color: var(--wp--preset--color--neutral-200);
}

.wp-block-neilkelly-service-hero .nk-service-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-service-hero .nk-service-hero__btn--secondary:hover,
.wp-block-neilkelly-service-hero .nk-service-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-service-hero .nk-service-hero__btn:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand-white);
	outline-offset: 3px;
}

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

@media (max-width: 1023px) {
	.wp-block-neilkelly-service-hero .nk-service-hero__content { padding-left: var(--wp--preset--spacing--12); padding-right: var(--wp--preset--spacing--12); }
}

@media (max-width: 767px) {
	/* Mobile mirrors the homepage hero's stacked layout: the media becomes a
	   relative block (image on top, header overlays it) and the content drops
	   below it in a solid ink panel with no header-clear offset. Media rules
	   copied from .nk-hero__media / content from .nk-hero__content at ≤767px. */
	.wp-block-neilkelly-service-hero.nk-service-hero { min-height: auto; align-items: stretch; }
	.wp-block-neilkelly-service-hero .nk-service-hero__bg {
		position: relative;
		inset: auto;
		width: 100%;
		height: var(--wp--custom--components--hero--mobile-media-aspect);
		min-height: var(--wp--custom--components--hero--mobile-media-min-height);
		max-height: var(--wp--custom--components--hero--mobile-media-max-height);
		flex-shrink: 0;
	}
	.wp-block-neilkelly-service-hero .nk-service-hero__bg-img { object-position: center center; }
	.wp-block-neilkelly-service-hero .nk-service-hero__overlay { background: linear-gradient(to top, var(--wp--preset--color--ink-primary) 0%, transparent 50%); }
	/* Stacked ink panel below the image: re-centre (the base is now left-aligned
	   for the full-bleed desktop hero) and use its own padding — no header-clear
	   top pad, since the header overlays the image block above, not this panel. */
	.wp-block-neilkelly-service-hero .nk-service-hero__content { align-items: center; text-align: center; background: var(--wp--preset--color--ink-primary); padding: var(--wp--preset--spacing--8) var(--wp--preset--spacing--6) var(--wp--preset--spacing--10); }
	.wp-block-neilkelly-service-hero .nk-service-hero__actions { justify-content: center; }
	/* Match the homepage hero mobile scale: heading 32, body 16, full-width 51px CTAs. */
	.wp-block-neilkelly-service-hero .nk-service-hero__heading { font-size: var(--wp--preset--font-size--xl-md); max-width: 100%; }
	.wp-block-neilkelly-service-hero .nk-service-hero__body { font-size: var(--wp--preset--font-size--base); margin-top: var(--wp--preset--spacing--4); max-width: 100%; }
	.wp-block-neilkelly-service-hero .nk-service-hero__actions { flex-direction: column; align-self: stretch; margin-top: var(--wp--preset--spacing--6); }
	.wp-block-neilkelly-service-hero .nk-service-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-service-hero a { text-decoration: none; }

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