/* ==========================================================================
   Designers Grid — Our Award-Winning Designers
   ========================================================================== */

/* Full-bleed section (align:full) — background spans edge to edge; the header and
   grid below are capped to content-width so this section lines up with the rest of
   the page's main area (siblings use content-width, not wide-size). */
.nk-designers-grid {
	background-color: var(--wp--preset--color--surface-page);
	padding: var(--wp--preset--spacing--24) var(--wp--preset--spacing--gutter);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--12);
}

/* Header --------------------------------------------------------------- */
.nk-designers-grid__header {
	width: 100%;
	max-width: var(--wp--custom--layout--content-width);
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--4);
}

.nk-designers-grid__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-1);
	color: var(--wp--preset--color--ink-primary);
	margin: 0;
}

.nk-designers-grid__subtext {
	font-size: var(--wp--preset--font-size--md);
	line-height: var(--wp--custom--line-height--md);
	color: var(--wp--preset--color--ink-secondary);
	max-width: var(--wp--custom--components--people--intro-max-width);
	margin: 0;
}

/* Grid ----------------------------------------------------------------- */
.nk-designers-grid__grid {
	width: 100%;
	max-width: var(--wp--custom--layout--content-width);
	margin: 0 auto;
	list-style: none;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--6);
}

.nk-designers-grid__item {
	display: flex;
}

/* Card ----------------------------------------------------------------- */
.nk-designers-grid__card {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	background-color: var(--wp--preset--color--surface-card);
	border: var(--wp--custom--components--people--card-border-width) solid var(--wp--preset--color--border-subtle);
	border-radius: var(--wp--custom--radius--card);
	overflow: hidden;
	transition: all 0.25s ease;
}
/* Whole card is one click target — the profile link's ::after covers the card
   (guarded so an empty "#" link doesn't create a dead target). */
a.nk-designers-grid__link:not([href="#"])::after { content: ""; position: absolute; inset: 0; }

.nk-designers-grid__media {
	position: relative;
	width: 100%;
	aspect-ratio: 306 / 344;
	overflow: hidden;
	background-color: var(--wp--preset--color--surface-section);
}

.nk-designers-grid__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Headshots are tall portraits (≈640×960) in a shorter 306×344 frame; anchor
	   the crop to the top so the face stays visible (crop comes off the bottom)
	   instead of cutting the head at top and bottom. */
	object-position: center top;
	display: block;
	transition: transform 0.45s ease;
}

/* Slight photo zoom on hover — matches the /portland/our-team/ team cards
   (blocks/location-team-group). The media clips the overflow. */
.nk-designers-grid__card:hover .nk-designers-grid__image,
.nk-designers-grid__card:has(a:focus-visible) .nk-designers-grid__image {
	transform: scale(var(--wp--custom--components--team--card-hover-zoom));
}

/* Keyboard focus: same visual as hover, plus a focus ring around the whole card. */
.nk-designers-grid__card:has(a:focus-visible) {
	outline: 2px solid var(--wp--preset--color--brand-red);
	outline-offset: 2px;
}

/* Bottom scrim on the headshot — Figma: linear gradient, transparent from ~19%
   down to black at 20% opacity at the bottom (1147:701). */
.nk-designers-grid__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		transparent 19%,
		color-mix(in srgb, var(--wp--preset--color--brand-black) 20%, transparent) 100%
	);
	pointer-events: none;
}

.nk-designers-grid__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background-color: var(--wp--preset--color--surface-section);
}

.nk-designers-grid__body {
	display: flex;
	flex: 1 0 auto;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--6);
	padding: var(--wp--preset--spacing--5);
}

.nk-designers-grid__top {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--1);
}

.nk-designers-grid__name {
	font-size: var(--wp--preset--font-size--md);
	font-weight: var(--wp--custom--font-weight--bold);
	line-height: var(--wp--custom--line-height--snug);
	letter-spacing: var(--wp--custom--letter-spacing--tight);
	color: var(--wp--preset--color--ink-primary);
	margin: 0;
}

.nk-designers-grid__title {
	font-size: var(--wp--preset--font-size--sm-md);
	font-weight: var(--wp--custom--font-weight--medium);
	line-height: var(--wp--custom--line-height--label);
	color: var(--wp--preset--color--ink-secondary);
	margin: 0;
}

.nk-designers-grid__market {
	font-size: var(--wp--preset--font-size--xs);
	font-weight: var(--wp--custom--font-weight--bold);
	line-height: var(--wp--custom--line-height--snug);
	letter-spacing: var(--wp--custom--components--people--card-label-tracking);
	color: var(--wp--preset--color--brand-red);
	text-transform: uppercase;
	margin: 0;
}

.nk-designers-grid__link {
	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);
	letter-spacing: var(--wp--custom--components--person--specialties-pill-tracking);
	color: var(--wp--preset--color--surface-brand);
	text-decoration: none;
}

.nk-designers-grid__link:hover,
.nk-designers-grid__link:focus-visible {
	color: var(--wp--preset--color--brand-red-hover);
}

.nk-designers-grid__arrow {
	transition: transform 200ms ease;
}

.nk-designers-grid__link:hover .nk-designers-grid__arrow {
	transform: translateX(var(--wp--preset--spacing--1-5));
}

@media (prefers-reduced-motion: reduce) {
	.nk-designers-grid__arrow,
	.nk-designers-grid__image {
		transition: none;
	}
	.nk-designers-grid__link:hover .nk-designers-grid__arrow,
	.nk-designers-grid__card:hover .nk-designers-grid__image,
	.nk-designers-grid__card:has(a:focus-visible) .nk-designers-grid__image {
		transform: none;
	}
}

/* Responsive ----------------------------------------------------------- */
@media (max-width: 1023px) {
	.nk-designers-grid {
		padding: var(--wp--preset--spacing--16) var(--wp--preset--spacing--6);
		gap: var(--wp--preset--spacing--10);
	}
	.nk-designers-grid__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.nk-designers-grid__heading {
		font-size: var(--wp--preset--font-size--xl);
		line-height: var(--wp--custom--line-height--xl);
	}
}

@media (max-width: 767px) {
	.nk-designers-grid {
		padding: var(--wp--preset--spacing--12) var(--wp--preset--spacing--4);
	}
	.nk-designers-grid__grid {
		grid-template-columns: minmax(0, 1fr);
	}
	.nk-designers-grid__heading {
		font-size: var(--wp--preset--font-size--lg-xl);
		line-height: var(--wp--custom--line-height--lg);
	}
}

/* ── Seam: the Location Brand band directly above this grid (designers page) ──
   Halve the gap between the band and this grid. Both sides pad the seam, so BOTH
   are halved — but the whole seam is kept in THIS (designers) stylesheet rather
   than editing the shared location-brand block: the band's bottom padding is
   reduced only when it is immediately followed by a designers-grid, which happens
   only on the designers page (designers-grid exists on no other template).

   The band's base bottom padding is --section at every breakpoint (only its inline
   padding is responsive), so one rule covers all widths for it.

   Specificity 0,3,0 — the subject's two classes plus the :has() argument's one — so it
   beats the band's own 0,2,0 `.wp-block-neilkelly-location-brand.nk-location-brand`
   padding-block rule. That matters because block stylesheets load alphabetically, so this
   (designers-grid) file loads BEFORE location-brand's; an equal-specificity selector would
   lose to the band's later-loading base rule. */
.wp-block-neilkelly-location-brand.nk-location-brand:has(+ .wp-block-neilkelly-designers-grid) {
	padding-bottom: calc(var(--wp--preset--spacing--section) / 2);
}

/* This grid's top padding is halved at each breakpoint it re-pads at. The adjacency
   selector (0,2,0) beats the plain .nk-designers-grid rules in and out of the media
   queries, so mobile stays proportional. */
.wp-block-neilkelly-location-brand + .nk-designers-grid {
	padding-top: calc(var(--wp--preset--spacing--24) / 2);
}
@media (max-width: 1023px) {
	.wp-block-neilkelly-location-brand + .nk-designers-grid {
		padding-top: calc(var(--wp--preset--spacing--16) / 2);
	}
}
@media (max-width: 767px) {
	.wp-block-neilkelly-location-brand + .nk-designers-grid {
		padding-top: calc(var(--wp--preset--spacing--12) / 2);
	}
}