/* ==========================================================================
   Team Showcase — It All Starts With Good People
   ========================================================================== */

.nk-team {
	background-color: var(--wp--preset--color--ink-primary);
	padding: var(--wp--preset--spacing--22-5) 0 var(--wp--preset--spacing--12) 0;
	margin-top: calc(-1 * var(--wp--preset--spacing--5));
}

.nk-team__container {
	max-width: var(--wp--style--global--content-size);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--gutter);
}

.nk-team__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--xxl);
	letter-spacing: var(--wp--custom--letter-spacing--neg-102);
	color: var(--wp--preset--color--brand-white);
	margin: 0 0 var(--wp--preset--spacing--4) 0;
}

.nk-team__subtext {
	--nk-team-subtext-max-w: var(--wp--custom--components--team--subtext-max-width);
	font-size: var(--wp--preset--font-size--md);
	line-height: var(--wp--custom--line-height--base);
	letter-spacing: var(--wp--custom--letter-spacing--normal);
	color: var(--wp--preset--color--brand-white);
	max-width: var(--nk-team-subtext-max-w);
	margin: 0 0 var(--wp--preset--spacing--12) 0;
}

/* Carousel — positioning context for the prev/next arrows. The negative margin
   compensates for the track's top padding (see below) so cards keep their
   position; kept on the wrapper to avoid margin-collapse with the track. */
.nk-team__carousel {
	position: relative;
	margin-top: calc(-1 * var(--wp--preset--spacing--6));
}

/* Card grid — horizontal scroll on overflow */
.nk-team__grid {
	display: flex;
	gap: var(--wp--preset--spacing--6);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	/* proximity, not mandatory: mandatory snapping traps the scroll on an earlier
	   card's start point and makes the last card unreachable when its snap point
	   sits past the maximum scroll offset. */
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	/* overflow-x:auto forces the vertical axis to clip too. The top padding gives
	   the hover lift + card shadow room; the inline padding keeps the focus ring
	   on the first/last card from being clipped by the scroll container. */
	padding-top: var(--wp--preset--spacing--6);
	padding-bottom: var(--wp--preset--spacing--4);
	padding-inline: var(--wp--preset--spacing--1-5);
}

/* Prev/next arrows */
.nk-team__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	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-color: var(--wp--preset--color--brand-white);
	border: 1px solid var(--wp--preset--color--border-default);
	color: var(--wp--preset--color--ink-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: var(--wp--custom--shadow--elev-2);
	transition: background-color 200ms ease;
	z-index: 2;
}

.nk-team__arrow--prev {
	right: auto;
	left: var(--wp--preset--spacing--5);
}

.nk-team__arrow:hover {
	background-color: var(--wp--preset--color--neutral-50);
}

.nk-team__arrow:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand-white);
	outline-offset: 3px;
}

.nk-team__grid::-webkit-scrollbar {
	display: none;
}

.nk-team__card {
	--nk-team-card-w: var(--wp--custom--components--team--card-width);
	--nk-team-card-h: var(--wp--custom--components--team--card-height);
	flex: 0 0 var(--nk-team-card-w);
	height: var(--nk-team-card-h);
	scroll-snap-align: start;
	position: relative;
	display: block;
	border-radius: var(--wp--custom--radius--card);
	overflow: hidden;
	background-color: var(--wp--preset--color--surface-section);
	color: inherit;
	text-decoration: none;
}

.nk-team__card::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, color-mix(in srgb, var(--wp--preset--color--brand-white) 50%, transparent) 60%, color-mix(in srgb, var(--wp--preset--color--brand-black) 50%, transparent) 100%);
	mix-blend-mode: multiply;
	pointer-events: none;
	z-index: 0;
	border-radius: inherit;
}

.nk-team__card-image {
	width: 100%;
	height: 100%;
	position: relative;
	z-index: 1;
}

.nk-team__card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.nk-team__card-info {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: var(--wp--preset--spacing--4);
	background: linear-gradient(to top, color-mix(in srgb, var(--wp--preset--color--brand-black) 70%, transparent), transparent);
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--1);
}

.nk-team__card-name {
	font-size: var(--wp--preset--font-size--md);
	font-weight: var(--wp--custom--font-weight--bold);
	line-height: var(--wp--custom--line-height--md-tight);
	letter-spacing: var(--wp--custom--letter-spacing--tight);
	color: var(--wp--preset--color--brand-white);
}

.nk-team__card-title {
	font-size: var(--wp--preset--font-size--sm-md);
	line-height: var(--wp--custom--line-height--md-tight);
	letter-spacing: var(--wp--custom--letter-spacing--tight);
	color: var(--wp--preset--color--neutral-300);
}

/* Red "View Profile" CTA affordance (the whole card is the link). Uses the
   on-dark red since the card info sits over a dark photo gradient. */
.nk-team__view {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--1);
	margin-top: var(--wp--preset--spacing--2);
	font-size: var(--wp--preset--font-size--ui-nav);
	font-weight: var(--wp--custom--font-weight--medium);
	color: var(--wp--preset--color--brand-red-on-dark);
}
.nk-team__view-arrow {
	display: inline-block;
	transition: transform 200ms ease;
}
.nk-team__card:hover .nk-team__view-arrow,
.nk-team__card--link:focus-visible .nk-team__view-arrow {
	transform: translateX(var(--wp--preset--spacing--1-5));
}
@media (prefers-reduced-motion: reduce) {
	.nk-team__view-arrow { transition: none; }
}

/* Clickable card — only when a member link is set */
.nk-team__card-image img {
	transition: transform 300ms ease;
}

.nk-team__card--link {
	cursor: pointer;
}

.nk-team__card--link:hover .nk-team__card-image img,
.nk-team__card--link:focus-visible .nk-team__card-image img {
	transform: scale(var(--wp--custom--components--team--card-hover-zoom));
}

.nk-team__card--link:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand-red);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.nk-team__card--link,
	.nk-team__card-image img {
		transition: none;
	}

	.nk-team__card--link:hover,
	.nk-team__card--link:focus-visible {
		transform: none;
	}

	.nk-team__card--link:hover .nk-team__card-image img,
	.nk-team__card--link:focus-visible .nk-team__card-image img {
		transform: none;
	}
}

.nk-team__cta {
	display: inline-flex;
	align-items: center;
	padding: var(--wp--preset--spacing--4) var(--wp--preset--spacing--8);
	border: 1px solid var(--wp--preset--color--brand-white);
	color: var(--wp--preset--color--brand-white);
	font-size: var(--wp--preset--font-size--base);
	font-weight: var(--wp--custom--font-weight--medium);
	line-height: var(--wp--custom--line-height--base);
	letter-spacing: var(--wp--custom--letter-spacing--normal);
	text-decoration: none;
	border-radius: var(--wp--custom--radius--default);
	margin-top: var(--wp--preset--spacing--10);
	transition: background-color 200ms ease;
}

.nk-team__cta:hover {
	background-color: color-mix(in srgb, var(--wp--preset--color--brand-white) 10%, transparent);
	color: var(--wp--preset--color--brand-white);
}

@media (max-width: 1023px) {
	.nk-team__container { padding-inline: var(--wp--preset--spacing--6); }
	.nk-team__heading { font-size: var(--wp--preset--font-size--xl); line-height: var(--wp--custom--line-height--xl); }
}

@media (max-width: 767px) {
	.nk-team { padding: var(--wp--preset--spacing--12) 0 var(--wp--preset--spacing--12); }
	.nk-team__container { padding-inline: var(--wp--preset--spacing--4); }
	.nk-team__heading { font-size: var(--wp--preset--font-size--lg-xl); line-height: var(--wp--custom--line-height--lg); margin-bottom: var(--wp--preset--spacing--2); }
	.nk-team__subtext { font-size: var(--wp--preset--font-size--base); line-height: var(--wp--custom--line-height--base); margin-bottom: var(--wp--preset--spacing--6); }
	.nk-team__card { --nk-team-card-w: var(--wp--custom--components--team--card-width-mobile); --nk-team-card-h: var(--wp--custom--components--team--card-height-mobile); }
	.nk-team__grid { gap: var(--wp--preset--spacing--4); }
}

/* Last section in <main> — the Start My Project page is the only template that ends
   on this block; everywhere else it sits mid-page, so :last-child never matches
   there. Pull the footer up 24px to close the block-gap seam above it, the same rule
   the CTA-close blocks carry. Its partner lives in blocks/conversion-form, which
   becomes the last section whenever this one smart-hides. */
.wp-block-neilkelly-team:last-child {
	margin-bottom: calc(-1 * var(--wp--preset--spacing--6));
}