/* =====================================================================
   Avatar List 2 (faculty contact grid) — CUHK 2026 style guide.
   Reference: https://www.bschool.cuhk.edu.hk/style-guide-2026/components/talent.component.html
   Real classes are ".talent__list"/".talent" (imported placeholder used a
   wp:media-text approximation with no email/phone rows at all — built
   from this fetched reference instead, not the placeholder).

   English only, same scope note as every pattern so far.

   Cascade audit per AUDIT_CHECKLIST.md:
     h4  base: 16px/600/24px (base.css) — no override, reference has none
         either (the name isn't a link here, unlike Avatar List 1)
     a   default color:var(--heading-purple), underline only on hover
         (base.css) — the email link (inside .icon-row) gets no override
         in the reference, so it keeps that default as-is
     .talent  no color of its own in the reference either, but its text
         still renders as --Content-Grey-2 there because base.css sets
         body{color:var(--Content-Grey-2)} globally — this project has no
         equivalent global body-color rule (every other pattern sets
         color explicitly per text selector instead), so anything inside
         .talent without its own explicit color falls back to the THEME's
         own body-text default, NOT util-700. Set explicitly here instead
         of assuming inheritance would match.

   CORRECTION (found 2026-07-04 by diffing computed styles directly
   against the live reference, not just re-reading components.css): an
   earlier pass claimed ".icon-row has NO CSS rule anywhere in
   components.css/base.css/layouts.css" — that was wrong. The rule exists
   in base.css (not components.css, which is where the earlier grep
   looked), setting display:flex/gap:14px on .icon-row and explicit
   width/height/margin-top on .icon-row img. Missing it made every card
   ~60px taller than the reference (icon + text stacked as block content
   instead of sitting side by side) — exactly the kind of thing
   AUDIT_CHECKLIST.md's verification steps are supposed to catch, but
   this pattern's own verification pass only checked margins, not the
   overall card height/icon-row layout against the live reference itself.
   ===================================================================== */
.talent__list {
	display: grid;
	gap: 16px;
}
/* Same WP-default non-first-child margin-block-start (~10px) fix as
   Avatar List 1/Vision & Mission — applied at every nesting level that
   has more than one child in a flow-layout group. See
   AUDIT_CHECKLIST.md item #3. */
.talent__list > .talent {
	margin-block-start: 0;
}
.talent {
	display: flex;
	background-color: #f7f7f7;
	color: var(--util-700);
}
.talent__img {
	width: 112px;
}
.talent__img img {
	height: 100%;
	width: 100%;
	object-fit: cover;
}
/* align-items:center (not the reference's align-items:flex-start +
   margin-top:0.4em on the icon) — the reference's margin-top hack was
   hand-tuned for its own flat 16px font-size context to visually center
   a fixed-size icon against a text line. This theme's fluid typography
   scales the paragraph's font-size differently at different viewports
   (~17.9px here, not 16px), but the icon's own intrinsic pixel size
   doesn't scale the same way, so an em-based offset tuned for one
   font-size drifts out of alignment at another. align-items:center is
   robust to that — it centers the icon against whatever height the text
   line actually renders at, at any viewport. */
.icon-row {
	display: flex;
	align-items: center;
	gap: 14px;
}
.icon-row img {
	width: 17px;
	height: 14px;
	object-fit: contain;
}
.talent > .talent__content {
	margin-block-start: 0;
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 1px;
	padding: 8px 12px 12px;
}
/* CORRECTION (found 2026-07-04 verifying Contact List against its live
   reference, applied proactively here): every pattern's h4 was rendering
   at font-weight 400, not base.css's 600 — see Avatar List 1's CSS for
   the full note.

   CORRECTION #2 (found 2026-07-04, explicit user instruction: "gap
   between [the first 3] lines... not even, debug and fix"): tried
   tuning h4's margin-bottom per breakpoint (0/-1px/-3px) so it plus
   `.talent > .talent__content`'s flex `gap:1px` netted out to the same
   total spacing as the other lines below it, instead of matching the
   reference's own literal value — deliberately traded accuracy for
   visual evenness at the time.

   CORRECTION #3 (found 2026-07-05, explicit user instruction: this
   margin-bottom:0 "seems inconsistent to style guide" — re-verify):
   reverted to the reference's actual measured values instead — a flat
   3px from 375px through 1024px (no separate 1024 rule needed, unlike
   what was assumed before), -4px at >=1440px. The minor first-line-gap
   unevenness CORRECTION #2 fixed is real (components.css does have it,
   confirmed directly), but matching the style guide takes priority
   over manufacturing an even gap that the reference itself doesn't have. */
.talent__content h4 {
	font-weight: 600;
	margin-bottom: 3px;
}
.talent__content > .talent__desc {
	margin-block-start: 0;
	margin-bottom: auto;
}
.talent__desc > * {
	display: inline;
	margin: 0;
}
.talent__department::after {
	content: ", ";
}
.talent__content > .icon-row {
	margin-block-start: 0;
}

@media (min-width: 48rem) { /* 768px */
	.talent__list {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 64rem) { /* 1024px */
	.talent {
		min-height: 164px;
	}
	.talent__img {
		width: 177px;
	}
	.talent > .talent__content {
		padding: 12px 16px;
	}
	.talent__desc > * {
		display: block;
	}
	.talent__content h4 {
		margin-bottom: -1px;
	}
	.talent__department {
		color: var(--util-300);
	}
	.talent__department::after {
		content: none;
	}
}

@media (min-width: 90rem) { /* 1440px */
	.talent__list {
		gap: 36px 32px;
	}
	.talent {
		min-height: 236px;
		font-size: 18px;
		font-weight: 400;
		line-height: 30px;
	}
	.talent__img {
		width: unset;
		flex: 1;
	}
	.talent > .talent__content {
		flex: unset;
		width: 50%;
		min-width: 400px;
		padding: 30px 38px 34px;
	}
	.talent__content h4 {
		margin-bottom: -3px;
	}
	.talent__department {
		margin-bottom: -2px;
	}
	.talent__content > .talent__desc {
		margin-bottom: 30px;
	}
	.icon-row {
		gap: 16px;
	}
	.icon-row img {
		width: 25px;
		height: 20px;
	}
}