/**
 * Member Spotlight loop — cards rendered by [aia_member_spotlights] and the
 * Member Spotlights page template (spotlights-page.php). Card design mirrors
 * the matisse/featured-member block: sharp corners, hard black offset-shadow
 * hover, grey uppercase designation.
 */

/* contain the whole spotlight page in the 1600px house container */
.has-aia-spotlights .entry-content {
	max-width: var(--aia-wide, 1600px);
	margin-inline: auto;
	padding-inline: 24px;
}

/* ---- template page shell (spotlights-page.php) ----
   Entry content (the two-column CTA + featured-member block) on top; the
   article carries the style-guide section gap down to "More spotlights" —
   100px desktop, 75px mobile via the :root --block-spacing swap. */
.aia-spot-page {
	max-width: var(--aia-wide, 1600px);
	margin-inline: auto;
	padding: 56px 24px 96px;
	color: var(--aia-ink, #1a1a1a);
}
.aia-spot-page__entry {
	margin-bottom: var(--block-spacing, 100px);
}
.aia-spot-page .aia-spot-more {
	margin-top: 0;
}

/* header (reuses the directory .aia-dir-cta styles from style.css) */
.aia-spot-header { padding-top: 40px; }

/* ---- featured member ---- */
.aia-spot-feature {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: 0;
	background: var(--aia-paper, #fff);
	border: 1px solid var(--aia-line, #e3e2df);
	border-radius: 14px;
	overflow: hidden;
	margin: 8px 0 12px;
}
.aia-spot-feature__media {
	display: block;
	position: relative;
	min-height: 340px;
	background: var(--aia-mist, #f4f4f2);
	border-right: 1px solid var(--aia-line, #e3e2df);
	overflow: hidden;
}
.aia-spot-feature__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.aia-spot-feature__media.aia-dir-texture {
	background-image: radial-gradient(#c9c7c1 1.4px, transparent 1.4px);
	background-size: 16px 16px;
}
.aia-spot-feature__media .aia-dir-mono {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-heading);
	font-size: 3.4rem;
	font-weight: 700;
	color: var(--aia-slate, #6e6c66);
}
.aia-spot-feature__body {
	padding: 40px 44px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 8px;
}
.aia-spot-feature__eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 12px;
	font-weight: 700;
	color: var(--aia-red, #fa4132);
}
.aia-spot-feature__name {
	margin: 2px 0 0;
	font-family: var(--font-heading);
	font-size: clamp(1.8rem, 3vw, 2.4rem);
	font-weight: 800;
	line-height: 1.08;
}
.aia-spot-feature__name a { color: var(--aia-ink, #1a1a1a); text-decoration: none; }
.aia-spot-feature__name a:hover { color: var(--aia-red, #fa4132); }
.aia-spot-feature__desig {
	margin: 0;
	color: var(--aia-slate, #6e6c66);
	font-size: 14px;
	font-weight: 600;
}
.aia-spot-feature__bio {
	margin: 10px 0 6px;
	color: var(--aia-ink, #1a1a1a);
	font-size: 15px;
	line-height: 1.6;
	max-width: 52ch;
}
.aia-spot-feature .aia-card-footer { border-top: 0; padding-top: 6px; justify-content: flex-start; gap: 24px; }

@media (max-width: 720px) {
	.aia-spot-feature { grid-template-columns: 1fr; }
	.aia-spot-feature__media { min-height: 260px; border-right: 0; border-bottom: 1px solid var(--aia-line, #e3e2df); }
	.aia-spot-feature__body { padding: 28px 24px; }
}

.aia-spot-more {
	font-family: var(--font-heading);
	font-size: 1.4rem;
	font-weight: 700;
	margin: 40px 0 4px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--aia-line, #e3e2df);
}

.aia-spotlights {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
	margin: 24px 0;
}
@media (max-width: 1024px) { .aia-spotlights { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .aia-spotlights { grid-template-columns: 1fr; } }

/* card design mirrors .matisse-featured-member__card (see the
   featured-member block's style.scss) so the grid matches the wide card
   editors drop into the entry content above. */
.aia-spot-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--aia-paper, #fff);
	border: 1px solid var(--aia-line, #e3e2df);
	border-radius: 0;
	overflow: hidden;
	transition: box-shadow 150ms var(--ease-material, cubic-bezier(0.4, 0, 0.2, 1));
}
.aia-spot-card:hover {
	z-index: 2;
	box-shadow: 4px 4px 0 0 #000;
}
@media (prefers-reduced-motion: no-preference) {
	.aia-spot-card {
		transition:
			transform 150ms var(--ease-material, cubic-bezier(0.4, 0, 0.2, 1)),
			box-shadow 150ms var(--ease-material, cubic-bezier(0.4, 0, 0.2, 1));
	}
	.aia-spot-card:hover { transform: translate(-4px, -4px); }
}

.aia-spot-card__media {
	display: block;
	position: relative;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--aia-mist, #f4f4f2);
}
.aia-spot-card__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/* reuse the directory dotted texture for photoless members */
.aia-spot-card__media.aia-dir-texture {
	background-color: var(--aia-mist, #f4f4f2);
	background-image: radial-gradient(#c9c7c1 1.4px, transparent 1.4px);
	background-size: 16px 16px;
}
.aia-spot-card__media .aia-dir-mono {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-heading);
	font-size: 2.6rem;
	font-weight: 700;
	color: var(--aia-slate, #6e6c66);
}

.aia-spot-card__body {
	padding: var(--space-md, 1.5rem) var(--space-md, 1.5rem) var(--space-lg, 1.75rem);
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1;
}
.aia-spot-card__name {
	margin: 0;
	font-family: var(--font-heading);
	font-size: 1.375rem;
	font-weight: 800;
	line-height: 1.2;
}
.aia-spot-card__name a { color: var(--aia-ink, #1a1a1a); text-decoration: none; }
.aia-spot-card__name a:hover { color: var(--aia-red, #fa4132); }
.aia-spot-card__desig {
	margin: 0;
	color: var(--aia-slate, #6e6c66);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
/* the icon bar (.aia-card-footer / .aia-dico / .aia-viewprofile) is styled
   globally in style.css; just pin it to the bottom of the card body. */
.aia-spot-card__body .aia-card-footer { margin-top: auto; }

.aia-spot-empty { color: var(--aia-slate, #6e6c66); }