/* ==========================================================================
   People — Explore by Role (neilkelly/people-team-routing)
   Figma: Meet the Team - Page 2 / 2 - Team Type Routing (1160:164)
   Token-driven, plain CSS. Self-contained: every rule is scoped to this block's
   wrapper so it never leans on a sibling block's stylesheet.
   Wrapper: .wp-block-neilkelly-people-team-routing.nk-people-routing
   2x2 grid: all four cards equal width (half the container less the column gap),
   38px column gap, 30px row gap. Supersedes the Figma bento (780/478 asymmetric)
   per the client brief — "Four cards... Equal visual weight across all four."
   ========================================================================== */
.wp-block-neilkelly-people-team-routing.nk-people-routing {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--10);
	background: var(--wp--preset--color--surface-section);
	font-family: var(--wp--preset--font-family--inter);
	padding: var(--wp--preset--spacing--24) var(--wp--preset--spacing--gutter) var(--wp--preset--spacing--11);
	box-sizing: border-box;
}

/* Cap the content at the site container (matches kitchen-remodel / the
   breadcrumb); align-items:center on the section centers it. Centering lives on
   the flex section, not margin-inline:auto, because the __grid <ul> resets
   margin:0 later in this file and would override an auto margin. Section
   background stays full-bleed. */
.wp-block-neilkelly-people-team-routing .nk-people-routing__header,
.wp-block-neilkelly-people-team-routing .nk-people-routing__grid {
	width: 100%;
	max-width: var(--wp--custom--layout--content-width);
}

/* Header ------------------------------------------------------------------ */
.wp-block-neilkelly-people-team-routing .nk-people-routing__header {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--3-5);
}

.wp-block-neilkelly-people-team-routing .nk-people-routing__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). */
	font-weight: var(--wp--custom--font-weight--extrabold);
	line-height: var(--wp--custom--line-height--lg-tight);
	color: var(--wp--preset--color--brand-black);
	margin: 0;
}

/* Keep in step with the twin rule in people-location-routing — same class, same treatment. */
.wp-block-neilkelly-people-team-routing .nk-people-routing__intro {
	font-size: var(--wp--preset--font-size--md);
	font-weight: var(--wp--custom--font-weight--regular);
	line-height: var(--wp--custom--line-height--base);
	color: var(--wp--preset--color--ink-primary);
	max-width: var(--wp--custom--components--people--routing-intro-max-width);
	margin: 0;
}

/* Card grid --------------------------------------------------------------- */
.wp-block-neilkelly-people-team-routing .nk-people-routing__grid {
	--nk-col-gap: var(--wp--custom--components--people--role-card-col-gap);
	display: flex;
	flex-wrap: wrap;
	column-gap: var(--nk-col-gap);
	row-gap: var(--wp--preset--spacing--7-5);
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
}

/* Two equal columns at every width above the single-column breakpoint. */
.wp-block-neilkelly-people-team-routing .nk-people-routing__item {
	display: flex;
	width: calc( ( 100% - var(--nk-col-gap) ) / 2 );
	min-height: var(--wp--custom--components--people--role-card-min-height);
}

/* Card -------------------------------------------------------------------- */
.wp-block-neilkelly-people-team-routing .nk-people-routing__card {
	display: flex;
	flex-direction: column;
	width: 100%;
	background: var(--wp--preset--color--surface-card);
	border: var(--wp--custom--components--people--card-border-width) solid var(--wp--preset--color--border-default);
	border-radius: var(--wp--custom--radius--card);
	overflow: hidden;
	text-decoration: none;
	box-sizing: border-box;
	transition: all 0.25s ease;
}

.wp-block-neilkelly-people-team-routing .nk-people-routing__media {
	display: block;
	height: var(--wp--custom--components--people--card-image-height);
	width: 100%;
	flex-shrink: 0;
	background: var(--wp--preset--color--surface-section);
	overflow: hidden;
}

.wp-block-neilkelly-people-team-routing .nk-people-routing__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.45s ease;
}

/* Cover image zooms on card hover / keyboard focus (clipped by __media). */
.wp-block-neilkelly-people-team-routing .nk-people-routing__card:hover .nk-people-routing__image,
.wp-block-neilkelly-people-team-routing .nk-people-routing__card:focus-visible .nk-people-routing__image {
	transform: scale(var(--wp--custom--components--team--card-hover-zoom));
}

/* flex-basis auto, NOT 0 — matching people-location-routing. With basis 0 the body's
   content contributed nothing to the card's height, and min-height: 0 removed the
   automatic minimum that stops a column flex item shrinking past its content, so the
   body collapsed to its 32px padding and the card's overflow: hidden cut the text off.
   Above 767px the item's 410px floor (role-card-min-height) hid it; below, where that
   floor is lifted, 84-110px of every card was clipped at 390px. */
.wp-block-neilkelly-people-team-routing .nk-people-routing__body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--5);
	padding: var(--wp--preset--spacing--8);
}

.wp-block-neilkelly-people-team-routing .nk-people-routing__text {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--2-5);
}

.wp-block-neilkelly-people-team-routing .nk-people-routing__title {
	font-size: var(--wp--custom--components--people--card-title-size);
	font-weight: var(--wp--custom--font-weight--extrabold);
	line-height: var(--wp--custom--components--people--card-title-line-height);
	color: var(--wp--preset--color--ink-primary);
}

.wp-block-neilkelly-people-team-routing .nk-people-routing__desc {
	font-size: var(--wp--preset--font-size--ui-nav);
	font-weight: var(--wp--custom--font-weight--regular);
	line-height: var(--wp--custom--line-height--md);
	color: var(--wp--preset--color--ink-secondary);
}

.wp-block-neilkelly-people-team-routing .nk-people-routing__cta {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--1);
	font-size: var(--wp--preset--font-size--ui-nav);
	font-weight: var(--wp--custom--font-weight--semibold);
	line-height: var(--wp--custom--line-height--none);
	color: var(--wp--preset--color--brand-red);
}

.wp-block-neilkelly-people-team-routing .nk-people-routing__arrow {
	transition: transform 200ms ease;
}

/* Interaction — light touch; Hardening owns the full state matrix. */
.wp-block-neilkelly-people-team-routing .nk-people-routing__card:hover .nk-people-routing__arrow {
	transform: translateX( var(--wp--preset--spacing--1-5) );
}

.wp-block-neilkelly-people-team-routing .nk-people-routing__card:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand-red);
	outline-offset: 2px;
}

/* Responsive -------------------------------------------------------------- */
/* No tablet rule needed — the two columns are already equal at every width. */
@media (max-width: 767px) {
	.wp-block-neilkelly-people-team-routing.nk-people-routing {
		padding: var(--wp--preset--spacing--16) var(--wp--preset--spacing--6) var(--wp--preset--spacing--12);
	}
	.wp-block-neilkelly-people-team-routing .nk-people-routing__heading {
		font-size: var(--wp--preset--font-size--xl);
	}
	.wp-block-neilkelly-people-team-routing .nk-people-routing__item {
		width: 100%;
		min-height: 0;
	}
}

/* Reduced motion — hold the image still. */
@media (prefers-reduced-motion: reduce) {
	.wp-block-neilkelly-people-team-routing .nk-people-routing__image { transition: none; }
	.wp-block-neilkelly-people-team-routing .nk-people-routing__card:hover .nk-people-routing__image,
	.wp-block-neilkelly-people-team-routing .nk-people-routing__card:focus-visible .nk-people-routing__image { transform: none; }
}

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