/* ==========================================================================
   People — Explore by Location (neilkelly/people-location-routing)
   Figma: Meet the Team - Page 2 / 3 - Location Team Routing (1160:205)
   Token-driven, plain CSS. Self-contained: every rule is scoped to this block's
   wrapper. Four equal-weight cards in a single row (24px gap), wrapping down at
   smaller widths. Wrapper: .wp-block-neilkelly-people-location-routing.nk-people-routing
   ========================================================================== */
.wp-block-neilkelly-people-location-routing.nk-people-routing {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--10);
	background: var(--wp--preset--color--brand-white);
	font-family: var(--wp--preset--font-family--inter);
	padding: var(--wp--preset--spacing--24) var(--wp--preset--spacing--gutter);
	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-location-routing .nk-people-routing__header,
.wp-block-neilkelly-people-location-routing .nk-people-routing__grid {
	width: 100%;
	max-width: var(--wp--custom--layout--content-width);
}

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

.wp-block-neilkelly-people-location-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--ink-primary);
	margin: 0;
}

/* Keep in step with the twin rule in people-team-routing — same class, same treatment. */
.wp-block-neilkelly-people-location-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-secondary);
	max-width: var(--wp--custom--components--people--routing-intro-max-width);
	margin: 0;
}

/* Card row ---------------------------------------------------------------- */
.wp-block-neilkelly-people-location-routing .nk-people-routing__grid {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--6);
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
}

.wp-block-neilkelly-people-location-routing .nk-people-routing__item {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	min-height: var(--wp--custom--components--people--location-card-min-height);
}

/* Card -------------------------------------------------------------------- */
.wp-block-neilkelly-people-location-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-location-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-location-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-location-routing .nk-people-routing__card:hover .nk-people-routing__image,
.wp-block-neilkelly-people-location-routing .nk-people-routing__card:focus-visible .nk-people-routing__image {
	transform: scale(var(--wp--custom--components--team--card-hover-zoom));
}

.wp-block-neilkelly-people-location-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--7);
}

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

.wp-block-neilkelly-people-location-routing .nk-people-routing__region {
	font-size: var(--wp--preset--font-size--xs);
	font-weight: var(--wp--custom--font-weight--bold);
	line-height: var(--wp--custom--line-height--none);
	letter-spacing: var(--wp--custom--components--people--card-label-tracking);
	text-transform: uppercase;
	color: var(--wp--preset--color--brand-red);
}

.wp-block-neilkelly-people-location-routing .nk-people-routing__title {
	font-size: var(--wp--preset--font-size--xl-sm);
	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-location-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-location-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-location-routing .nk-people-routing__arrow {
	transition: transform 200ms ease;
}

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

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

/* Design-center variant (opt-in) ------------------------------------------
   Conversion pages render the same market card carrying address, hours and phone
   (Figma 6906:2110). Everything the base card already sets — 220px image, 28px
   body padding, 24px row gap, 28px city, 12px red eyebrow, 15px CTA — is left
   alone here; only the three added fields and the taller card are new. Scoped to
   .is-design-center, which only the conversion templates pass. */

/* The band sits on grey rather than the base card's white, so the white cards read as
   cards against it and the section separates from the white form band above. #eaeaea is
   the surface-section token — the same grey the base card already uses behind an image
   placeholder — so no new colour was added.
   Scoped to the VARIANT, not the page: it belongs to the design-center treatment, so a
   second page opting into the variant gets the band with it. (The footer-seam rule at
   the bottom of this file is scoped to the template instead, because THAT one would
   otherwise reach page-resources, which is last-in-main without being design-center.) */
.wp-block-neilkelly-people-location-routing.is-design-center {
	background: var(--wp--preset--color--surface-section);
}

/* Careers sits the same band on grey WITHOUT the design-center treatment: that variant
   also rewrites each card into an address/hours/phone block, and this page wants the
   plain routing list. Background only, so nothing else about the section moves.
   surface-section IS #eaeaea — the token, not the literal, per the theme's colour rule.
   Specificity (0,2,0) ties the root rule that paints this brand-white, so it wins on
   source order; it is declared here, after it, deliberately. Opt-in via className, so
   the five other templates composing this block are untouched. */
.wp-block-neilkelly-people-location-routing.is-careers {
	background: var(--wp--preset--color--surface-section);
}

.wp-block-neilkelly-people-location-routing.is-design-center .nk-people-routing__item {
	min-height: var(--wp--custom--components--people--design-center-card-min-height);
}

/* Figma sets the eyebrow on a 15px box (12px type at 1.25) where the base card runs
   it at 1. Left alone, that 3px shortfall carries down the whole stack and lands the
   address block and phone 3px high against the frame. */
.wp-block-neilkelly-people-location-routing.is-design-center .nk-people-routing__region {
	line-height: var(--wp--custom--line-height--snug);
}

.wp-block-neilkelly-people-location-routing.is-design-center .nk-people-routing__address {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--1);
}

.wp-block-neilkelly-people-location-routing.is-design-center .nk-people-routing__address-line,
.wp-block-neilkelly-people-location-routing.is-design-center .nk-people-routing__hours {
	font-size: var(--wp--preset--font-size--sm-md);
	font-weight: var(--wp--custom--font-weight--regular);
	line-height: var(--wp--custom--line-height--lg-tight);
}

.wp-block-neilkelly-people-location-routing.is-design-center .nk-people-routing__address-line {
	color: var(--wp--preset--color--ink-primary);
}

/* Hours sit back from the street address — the one grey line in the block. */
.wp-block-neilkelly-people-location-routing.is-design-center .nk-people-routing__hours {
	color: var(--wp--preset--color--ink-secondary);
}

.wp-block-neilkelly-people-location-routing.is-design-center .nk-people-routing__phone {
	font-size: var(--wp--preset--font-size--base);
	font-weight: var(--wp--custom--font-weight--bold);
	line-height: var(--wp--custom--line-height--lg-tight);
	color: var(--wp--preset--color--brand-red);
}

/* Responsive -------------------------------------------------------------- */
@media (max-width: 1023px) {
	.wp-block-neilkelly-people-location-routing .nk-people-routing__item {
		flex: 1 1 calc( ( 100% - var(--wp--preset--spacing--6) ) / 2 );
	}
}

@media (max-width: 767px) {
	.wp-block-neilkelly-people-location-routing.nk-people-routing {
		padding: var(--wp--preset--spacing--16) var(--wp--preset--spacing--6);
	}
	.wp-block-neilkelly-people-location-routing .nk-people-routing__heading {
		font-size: var(--wp--preset--font-size--xl);
	}
	.wp-block-neilkelly-people-location-routing .nk-people-routing__item {
		flex: 1 1 100%;
		min-height: 0;
	}
	/* Match the reset above — the variant's taller card is a desktop-row concern,
	   and its higher specificity would otherwise pin 530px on a single column. */
	.wp-block-neilkelly-people-location-routing.is-design-center .nk-people-routing__item {
		min-height: 0;
	}
}

/* Reduced motion — hold the image still. */
@media (prefers-reduced-motion: reduce) {
	.wp-block-neilkelly-people-location-routing .nk-people-routing__image { transition: none; }
	.wp-block-neilkelly-people-location-routing .nk-people-routing__card:hover .nk-people-routing__image,
	.wp-block-neilkelly-people-location-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-location-routing { margin-block: 0; }

/* Last section in <main> on the consultation page: pull the footer up 24px to close
   the block-gap seam above it. WordPress wraps the footer template part as main's next
   sibling at .wp-site-blocks level, where it picks up the ROOT block gap as
   margin-block-start (main's own blockGap is 0, so the sections inside it never seam).
   Adjacent-sibling margins collapse to the sum when one is negative, so this cancels it.

   SCOPED TO THE TEMPLATE, not written as a bare :last-child like the CTA-close blocks'
   copies of this rule, because this block is shared and IS last on page-resources too —
   an unscoped rule would silently change that page's footer seam as well. That seam
   looks unclosed there too, but it belongs to a separate pass, so the pull is kept to
   the page it was asked for. Specificity (0,3,0) beats core's
   `:root :where(.is-layout-flow) > :last-child { margin-block-end: 0 }` (0,2,0) outright
   rather than on source order. */
.page-template-page-schedule-consultation .wp-block-neilkelly-people-location-routing:last-child {
	margin-bottom: calc(-1 * var(--wp--preset--spacing--6));
}