/* ==========================================================================
   Location Team Group (neilkelly/location-team-group)
   Figma: "11 - LOCATION TEAM PAGE" (zh6z5cr5dhVSWPD2B4BmWs / 1535:195)
   One role-group section: per-group background, header (50px title + subtitle),
   and a wrapping flex grid of 280×400 image-fill cards (scrim + overlaid
   name/title); wrapped rows start from the left. Token-driven, plain CSS. Wrapper:
   .wp-block-neilkelly-location-team-group.nk-location-team-group
   ========================================================================== */
.wp-block-neilkelly-location-team-group.nk-location-team-group {
	padding: var(--wp--custom--components--location-team--section-pad-top) var(--wp--preset--spacing--gutter);
	font-family: var(--wp--preset--font-family--inter);
	box-sizing: border-box;
}

/* Per-group background + heading colour (Figma section table). */
.nk-location-team-group--leadership,
.nk-location-team-group--home-improvement { background: var(--wp--preset--color--surface-section); }
.nk-location-team-group--production       { background: var(--wp--preset--color--surface-page); }
.nk-location-team-group--design           { background: var(--wp--preset--color--surface-dark); }

.nk-location-team-group__container {
	max-width: var(--wp--custom--layout--content-width);
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: var(--wp--custom--components--location-team--sections-inner-gap);
}

/* --- Header --- */
.nk-location-team-group__header {
	display: flex;
	flex-direction: column;
	gap: var(--wp--custom--components--location-team--header-gap);
}

.nk-location-team-group__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). */
	margin: 0;
	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);
}

/* Subhead reads at 3/4 width, so it stops short of the grid's right edge instead of
   running the full column. A percentage, not a px cap: the column is
   min(content-width, viewport - 2x gutter), so a fixed 972px cap would only be 3/4 at
   >=1440 and drift to ~86% at 1280 / ~92% at 1200. Reset to full width below the
   tablet breakpoint, where 3/4 of a narrow column reads too cramped — same treatment
   as the location-reviews body. */
.nk-location-team-group__subhead {
	margin: 0;
	max-width: 75%;
	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);
}

/* Section-level link BELOW the grid, left-justified. Uses the resources block's
   "Read More →" CTA styling (.nk-resources__card2-cta): brand-red, md-base (18px),
   regular weight, arrow glyph nudges right on hover. Spacing above comes from the
   container's sections-inner-gap; spacing below from the section's bottom padding. */
.nk-location-team-group__link {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--1-5);
	color: var(--wp--preset--color--brand-red);
	font-size: var(--wp--preset--font-size--md-base);
	font-weight: var(--wp--custom--font-weight--regular);
	line-height: var(--wp--custom--line-height--xs);
	align-self: flex-start;
	text-decoration: none;
}

.nk-location-team-group__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand-red);
	outline-offset: 3px;
}

.nk-location-team-group__link-arrow {
	display: inline-block;
	transition: transform 150ms ease;
}

.nk-location-team-group__link:hover .nk-location-team-group__link-arrow {
	transform: translateX(var(--wp--preset--spacing--1-5));
}

@media (prefers-reduced-motion: reduce) {
	.nk-location-team-group__link-arrow { transition: none; }
	.nk-location-team-group__link:hover .nk-location-team-group__link-arrow { transform: none; }
}

/* Design section is dark → invert the heading + subtitle, and take the section
   link white on #111 (matches the primary-on-dark convention; ~19:1 contrast). */
.nk-location-team-group--design .nk-location-team-group__heading,
.nk-location-team-group--design .nk-location-team-group__subhead {
	color: var(--wp--preset--color--brand-white);
}

.nk-location-team-group--design .nk-location-team-group__link {
	color: var(--wp--preset--color--brand-white);
}

/* White link → white focus ring on dark, so the indicator stays visible. */
.nk-location-team-group--design .nk-location-team-group__link:focus-visible {
	outline-color: var(--wp--preset--color--brand-white);
}

/* --- Card grid.
   Four fluid columns, not fixed-width cards in a wrapping flex. The two agree where the
   design was drawn: at 1440 the content width is 1296, and four columns with the 58 gap
   compute to 280.5 — the Figma card (card-width 280 / card-height 400) to within half a
   pixel. So that fixed width was the CONSEQUENCE of this grid, not an independent
   intent, and reproducing it as a grid loses nothing at 1440 while filling the row at
   every other width instead of leaving the leftover on the right (it reached 309 at
   1023 and 262 at 1024 while the cards were fixed).
   The card's height comes from the ratio for the same reason: 280/400 IS 7/10, so the
   proportion is unchanged at every width and only the size moves.
   Ladder matches blocks/locservice-designers, which renders the same card idiom —
   4 / 3 / 2 / 1 across the same breakpoints. --- */
.nk-location-team-group__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--wp--custom--components--location-team--cards-gap);
}

.nk-location-team-group__item {
	margin: 0;
}

.nk-location-team-group__card {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 7 / 10; /* = card-width / card-height (280/400) */
	border-radius: var(--wp--custom--radius--card);
	overflow: hidden;
	background: var(--wp--preset--color--surface-section);
	text-decoration: none;
}

/* Headshot backdrop: subtle white→black gradient over the card surface, behind
   the photo (mirrors blocks/location-team). */
.nk-location-team-group__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-location-team-group__media { position: absolute; inset: 0; z-index: 1; }

.nk-location-team-group__photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	display: block;
	transition: transform 300ms ease;
}

/* No-photo state: a dark placeholder so the overlaid white name/title reads. */
.nk-location-team-group__placeholder {
	position: absolute;
	inset: 0;
	background: linear-gradient(155deg, var(--wp--preset--color--neutral-600) 0%, var(--wp--preset--color--neutral-900) 100%);
}

/* Bottom scrim — darkens the lower half so the label is legible over any photo. */
.nk-location-team-group__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, color-mix(in srgb, var(--wp--preset--color--brand-black) 85%, transparent) 0%, transparent 50%);
}

.nk-location-team-group__info {
	position: absolute;
	left: var(--wp--custom--components--location-team--card-inset);
	right: var(--wp--custom--components--location-team--card-inset);
	bottom: var(--wp--custom--components--location-team--card-inset);
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--1);
}

.nk-location-team-group__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-location-team-group__title {
	font-size: var(--wp--preset--font-size--sm-md);
	font-weight: var(--wp--custom--font-weight--regular);
	line-height: var(--wp--custom--line-height--md-tight);
	color: var(--wp--preset--color--neutral-300);
}

/* Per-card CTA — sits over the dark photo scrim, so it uses the on-dark red for
   AA contrast (matches the Design section's link). Rendered only when the card
   links to a profile; the arrow nudges on whole-card hover/focus. */
.nk-location-team-group__view {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--1);
	margin-top: var(--wp--preset--spacing--1);
	color: var(--wp--preset--color--brand-red-on-dark);
	font-size: var(--wp--preset--font-size--ui-nav);
	font-weight: var(--wp--custom--font-weight--medium);
	line-height: var(--wp--custom--line-height--none);
}

.nk-location-team-group__view-arrow {
	display: inline-block;
	transition: transform 150ms ease;
}

.nk-location-team-group__card:hover .nk-location-team-group__view-arrow,
.nk-location-team-group__card:focus-visible .nk-location-team-group__view-arrow {
	transform: translateX(var(--wp--preset--spacing--1-5));
}

@media (prefers-reduced-motion: reduce) {
	.nk-location-team-group__view-arrow { transition: none; }
	.nk-location-team-group__card:hover .nk-location-team-group__view-arrow,
	.nk-location-team-group__card:focus-visible .nk-location-team-group__view-arrow { transform: none; }
}

/* Keyboard focus (WCAG 2.4.7): cards are the primary route to profiles, so give
   them a high-visibility two-tone ring — a white ring for 3:1 contrast (1.4.11)
   over light headshots AND the dark Design section, plus a red outline that
   survives Windows High Contrast / forced-colors mode (where box-shadow drops). */
.nk-location-team-group__card:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand-red);
	outline-offset: 2px;
}

/* Hover / keyboard focus: subtle zoom on the headshot — the zoom is the only
   hover signal (no lift/shadow), mirrors blocks/location-team. */
.nk-location-team-group__card:hover .nk-location-team-group__photo,
.nk-location-team-group__card:focus-visible .nk-location-team-group__photo {
	transform: scale(var(--wp--custom--components--team--card-hover-zoom));
}

@media (prefers-reduced-motion: reduce) {
	.nk-location-team-group__card,
	.nk-location-team-group__photo { transition: none; }
	.nk-location-team-group__card:hover,
	.nk-location-team-group__card:focus-visible { transform: none; }
	.nk-location-team-group__card:hover .nk-location-team-group__photo,
	.nk-location-team-group__card:focus-visible .nk-location-team-group__photo { transform: none; }
}

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

/* --- Responsive --- */

/* Three columns before the two-column step, the same width blocks/locservice-designers
   and blocks/location-team drop to. Four columns below 1280 put the card at 240, under
   the 254 three gives it. */
@media (max-width: 1279px) {
	.nk-location-team-group__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 1023px) {
	.wp-block-neilkelly-location-team-group.nk-location-team-group {
		padding-inline: var(--wp--preset--spacing--12);
	}
	.nk-location-team-group__heading { font-size: var(--wp--preset--font-size--lg-xl); }
	/* 3/4 of a tablet-width column reads too cramped — let the subhead run full width. */
	.nk-location-team-group__subhead { max-width: none; }

	/* Two columns, and a tighter gap: cards-gap (58) spaces four fixed cards on a
	   desktop row; between two that now grow to meet it, it is air the row does not
	   need. Same value blocks/locservice-designers uses at this width. */
	.nk-location-team-group__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--8);
	}
}

@media (max-width: 767px) {
	/* Two values, not three: the trailing 0 zeroed the band's bottom padding, so on a
	   phone the last card sat flush against whatever followed the section — 48 above
	   the heading and nothing under the grid. Desktop never had this: its base rule is
	   a two-value shorthand, so top and bottom are both section-pad-top. Matches
	   blocks/team-type-group (the clone of this block, which already had it right) and
	   blocks/locservice-designers, both spacing--12 top and bottom at this width. */
	.wp-block-neilkelly-location-team-group.nk-location-team-group {
		padding: var(--wp--preset--spacing--12) var(--wp--preset--spacing--6);
	}
	/* One column. The card's ratio and the fill come from the base grid, so this is
	   just the column count and the gap. */
	.nk-location-team-group__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wp--preset--spacing--6);
	}
	.nk-location-team-group__heading { font-size: var(--wp--preset--font-size--xl-md); }
}