/* ==========================================================================
   Loc+Service Related Services (neilkelly/locservice-related-services)
   Design ported from nk-services (carousel + borderless image-first cards),
   minus the category filters / pricing / stats bar. Reuses the shared
   --components--services--* tokens so the card metrics stay identical.
   Token-driven. Wrapper: .wp-block-neilkelly-locservice-related-services.nk-locservice-related-services
   ========================================================================== */
.wp-block-neilkelly-locservice-related-services.nk-locservice-related-services {
	padding: var(--wp--preset--spacing--24) var(--wp--preset--spacing--gutter);
	background: var(--wp--preset--color--surface-page);
	font-family: var(--wp--preset--font-family--inter);
	box-sizing: border-box;
	margin-block: 0;
}

.wp-block-neilkelly-locservice-related-services .nk-locservice-related-services__container {
	max-width: var(--wp--custom--layout--content-width);
	margin: 0 auto;
}

/* Header ------------------------------------------------------------------ */
.wp-block-neilkelly-locservice-related-services .nk-locservice-related-services__header {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--4);
	text-align: left;
	margin-bottom: var(--wp--preset--spacing--8);
}

/* Eyebrow — Location page (Services Hub) context only; loc+service has no eyebrow. */
.wp-block-neilkelly-locservice-related-services .nk-locservice-related-services__eyebrow {
	font-size: var(--wp--preset--font-size--sm-md);
	font-weight: var(--wp--custom--font-weight--semibold);
	line-height: var(--wp--custom--line-height--base);
	letter-spacing: var(--wp--custom--letter-spacing--wider);
	text-transform: uppercase;
	color: var(--wp--preset--color--brand-red);
	margin: 0;
}

.wp-block-neilkelly-locservice-related-services .nk-locservice-related-services__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--structural class (mapped in render.php);
	   weight/line-height/letter-spacing mirror nk-services__heading. */
	font-weight: var(--wp--custom--font-weight--extrabold);
	line-height: var(--wp--custom--line-height--xxl);
	letter-spacing: var(--wp--custom--letter-spacing--neg-102);
	color: var(--wp--preset--color--ink-primary);
	margin: 0;
}

.wp-block-neilkelly-locservice-related-services .nk-locservice-related-services__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);
	color: var(--wp--preset--color--ink-secondary);
	margin: 0;
}

/* Carousel ---------------------------------------------------------------- */
.wp-block-neilkelly-locservice-related-services .nk-locservice-related-services__carousel {
	position: relative;
}

.wp-block-neilkelly-locservice-related-services .nk-locservice-related-services__track {
	display: flex;
	gap: var(--wp--preset--spacing--6);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	/* Top padding gives the card's :focus-visible outline (2px offset + 2px width)
	   room to render — the track's overflow would otherwise clip its top edge. */
	padding-top: var(--wp--preset--spacing--1);
	padding-bottom: var(--wp--preset--spacing--4);
}

.wp-block-neilkelly-locservice-related-services .nk-locservice-related-services__track::-webkit-scrollbar {
	display: none;
}

/* Card -------------------------------------------------------------------- */
.wp-block-neilkelly-locservice-related-services .nk-locservice-related-services__card {
	--nk-lsrs-card-w: var(--wp--custom--components--services--card-width);
	flex: 0 0 var(--nk-lsrs-card-w);
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
}

/* When a card has a link, the whole card is the anchor (see render.php). */
.wp-block-neilkelly-locservice-related-services .nk-locservice-related-services__card--link {
	text-decoration: none;
	color: inherit;
	cursor: pointer;
}

.wp-block-neilkelly-locservice-related-services .nk-locservice-related-services__card--link:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand-red);
	outline-offset: 2px;
}

.wp-block-neilkelly-locservice-related-services .nk-locservice-related-services__card-image {
	width: 100%;
	aspect-ratio: 4 / 5;
	background-color: var(--wp--preset--color--neutral-100);
	border-radius: var(--wp--custom--radius--none);
	overflow: hidden;
	margin-bottom: var(--wp--preset--spacing--4);
}

.wp-block-neilkelly-locservice-related-services .nk-locservice-related-services__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.45s ease;
}

/* Cover image zooms on whole-card hover / keyboard focus (clipped by the image
   wrapper's overflow:hidden). Matches the sibling image cards (scale token). */
.wp-block-neilkelly-locservice-related-services .nk-locservice-related-services__card:hover .nk-locservice-related-services__img,
.wp-block-neilkelly-locservice-related-services .nk-locservice-related-services__card--link:focus-visible .nk-locservice-related-services__img {
	transform: scale(var(--wp--custom--components--team--card-hover-zoom));
}

.wp-block-neilkelly-locservice-related-services .nk-locservice-related-services__card-title {
	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);
	margin: 0 0 var(--wp--preset--spacing--2) 0;
}

.wp-block-neilkelly-locservice-related-services .nk-locservice-related-services__card-desc {
	font-size: var(--wp--preset--font-size--base);
	line-height: var(--wp--custom--line-height--sm);
	color: var(--wp--preset--color--ink-secondary);
	margin: 0 0 auto 0;
}

/* Arrow indicator inside the card (decorative — the whole card is the link). */
.wp-block-neilkelly-locservice-related-services .nk-locservice-related-services__card-link {
	color: var(--wp--preset--color--brand-red);
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--2);
	/* Shrink to the content width so the hover shift can't push a stretched box
	   past the card edge and grow the track's scroll area. */
	align-self: flex-start;
	margin-top: var(--wp--preset--spacing--4);
	transition: transform 150ms ease, opacity 150ms ease;
}

/* Per-market CTA label (render.php): when a Market Content CTA sets a label it
   shows as the card's affordance text beside the arrow. The whole card is the link,
   so this is plain text, not its own control; it inherits the arrow's brand-red. */
.wp-block-neilkelly-locservice-related-services .nk-locservice-related-services__card-cta-label {
	font-size: var(--wp--preset--font-size--base);
	font-weight: var(--wp--custom--font-weight--semibold);
	line-height: var(--wp--custom--line-height--none);
}

.wp-block-neilkelly-locservice-related-services .nk-locservice-related-services__card:hover .nk-locservice-related-services__card-link,
.wp-block-neilkelly-locservice-related-services .nk-locservice-related-services__card--link:focus-visible .nk-locservice-related-services__card-link {
	transform: translateX(var(--wp--preset--spacing--1-5));
}

.wp-block-neilkelly-locservice-related-services .nk-locservice-related-services__card-link:hover {
	opacity: 0.8;
}

/* Carousel arrows --------------------------------------------------------- */
.wp-block-neilkelly-locservice-related-services .nk-locservice-related-services__arrow {
	position: absolute;
	top: var(--wp--custom--components--services--arrow-top);
	right: var(--wp--preset--spacing--5);
	width: var(--wp--preset--spacing--12);
	height: var(--wp--preset--spacing--12);
	border-radius: var(--wp--custom--radius--full);
	background: var(--wp--preset--color--brand-white);
	border: 1px solid var(--wp--preset--color--border-default);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: var(--wp--custom--shadow--elev-2);
	color: var(--wp--preset--color--ink-primary);
	z-index: 2;
}

.wp-block-neilkelly-locservice-related-services .nk-locservice-related-services__arrow--prev {
	right: auto;
	left: var(--wp--preset--spacing--5);
}

.wp-block-neilkelly-locservice-related-services .nk-locservice-related-services__arrow:hover {
	background-color: var(--wp--preset--color--neutral-50);
}

/* Explore-all CTA — centered outline button below the carousel. */
.wp-block-neilkelly-locservice-related-services .nk-locservice-related-services__actions {
	display: flex;
	justify-content: center;
	margin-top: var(--wp--preset--spacing--8);
}

.wp-block-neilkelly-locservice-related-services .nk-locservice-related-services__explore {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--wp--preset--spacing--4-5) var(--wp--preset--spacing--8);
	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--ink-primary);
	background: transparent;
	border: 1px solid var(--wp--preset--color--ink-primary);
	border-radius: var(--wp--custom--radius--default);
	text-decoration: none;
	transition: background-color 200ms ease, color 200ms ease;
}

.wp-block-neilkelly-locservice-related-services .nk-locservice-related-services__explore:hover,
.wp-block-neilkelly-locservice-related-services .nk-locservice-related-services__explore:focus-visible {
	background: var(--wp--preset--color--ink-primary);
	color: var(--wp--preset--color--brand-white);
}

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

@media (prefers-reduced-motion: reduce) {
	.wp-block-neilkelly-locservice-related-services .nk-locservice-related-services__card-link,
	.wp-block-neilkelly-locservice-related-services .nk-locservice-related-services__img {
		transition: none;
	}
	.wp-block-neilkelly-locservice-related-services .nk-locservice-related-services__card:hover .nk-locservice-related-services__card-link,
	.wp-block-neilkelly-locservice-related-services .nk-locservice-related-services__card--link:focus-visible .nk-locservice-related-services__card-link {
		transform: none;
	}
	.wp-block-neilkelly-locservice-related-services .nk-locservice-related-services__card:hover .nk-locservice-related-services__img,
	.wp-block-neilkelly-locservice-related-services .nk-locservice-related-services__card--link:focus-visible .nk-locservice-related-services__img {
		transform: none;
	}
}

/* Tablet ------------------------------------------------------------------ */
@media (max-width: 1023px) {
	.wp-block-neilkelly-locservice-related-services.nk-locservice-related-services {
		padding: var(--wp--preset--spacing--16) var(--wp--preset--spacing--12);
	}
	/* Arrows hide on touch; the track scrolls directly (matches nk-services). */
	.wp-block-neilkelly-locservice-related-services .nk-locservice-related-services__arrow {
		display: none;
	}
}

/* Mobile ------------------------------------------------------------------ */
@media (max-width: 767px) {
	.wp-block-neilkelly-locservice-related-services.nk-locservice-related-services {
		padding: var(--wp--preset--spacing--12) var(--wp--preset--spacing--6);
	}
	.wp-block-neilkelly-locservice-related-services .nk-locservice-related-services__card {
		--nk-lsrs-card-w: var(--wp--custom--components--services--card-width-mobile);
	}
	.wp-block-neilkelly-locservice-related-services .nk-locservice-related-services__heading {
		font-size: var(--wp--preset--font-size--lg-xl);
	}
	.wp-block-neilkelly-locservice-related-services .nk-locservice-related-services__body {
		font-size: var(--wp--preset--font-size--base);
	}
}