/* =====================================================================
   Avatar List 1 (senior admin/leadership grid) — CUHK 2026 style guide.
   Reference: https://www.bschool.cuhk.edu.hk/style-guide-2026/components/person.component.html
   Real class name in the reference is ".person__list"/".person__item" (NOT
   what the imported placeholder wp_block used — that was generic
   wp-block-group markup with theme.json presets, not the real component).
   Fetched CSS directly from css/components.css + css/base.css (not through
   the person.component.html fragment's own linked CSS, which is a
   different reduced bundle that doesn't include these rules at all).

   English only — components.css also has `html:not([lang="en"])`
   overrides (different font-size/line-height/min-height for the Chinese
   locale) that aren't ported here, consistent with every pattern built so
   far (Accreditation/Vision & Mission are English-only too). Revisit if/
   when this project actually builds bilingual pattern content.

   Cascade audit per AUDIT_CHECKLIST.md:
     h4  base: 16px/24px from base.css's generic h4 rule (matches, no
         override needed), but font-weight (600) and margin-bottom (2px)
         both need explicit overrides here — these come from a MORE
         SPECIFIC reference selector, ".wp-block-lazyblock-people-grid
         .person__content h4", not the plain ".person__content h4" one,
         and apply completely unconditionally (no media query at all,
         confirmed via direct computed-style + stylesheet-rule query
         against the live page at 375/768/1440px, all three = 2px).
         Grepping components.css for just ".person__content h4" earlier
         found only two media-scoped rules (2px @1024px, -6px @1440px)
         and missed this actual base rule entirely, which led to a wrong
         conclusion that the reference had margin-bottom:0 at small
         viewports — it doesn't; it's a flat 2px everywhere. The -6px
         rule belongs to a selector/breakpoint combination that isn't
         actually the one winning in the live cascade — don't reuse it.
     p   base: margin-bottom 1.4em (base.css) — the reference's actual
         markup is a single <p>Title<br><span class="person__desc">Dept
         </span></p>, but that's split into two separate wp:paragraph
         blocks here (.person__title / .person__desc) so each is
         independently overridable — a bare <span class="person__desc">
         is not a registered RichText format and isn't guaranteed to
         survive being re-edited via the block editor's visual RichText
         UI. .person__title zeroes the default 1.4em margin to reproduce
         the reference's tight <br>-style spacing between the two lines.
     .person__title  CORRECTION (found 2026-07-04 fixing the same bug in
         Avatar List 2 and Contact List, applied here proactively):
         needs explicit color:var(--util-700). Headings pick up a
         matching color from the theme by coincidence, but plain
         paragraph text doesn't — this project has no global
         body{color:...} rule the way the reference's base.css does, so
         anything without its own explicit color falls back to the
         theme's default instead.
     a   default color:var(--heading-purple) w/ underline-on-hover only
         (base.css) — .person__content h4 a overrides to color:inherit
         with hover:var(--heading-purple), matching the reference exactly
         (including its own inline <style> block suppressing the
         underline below 1280px hover-capable viewports — not reproduced
         here since it's a demo-page-only affordance, not a design token).
   ===================================================================== */
.person__list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px;
}
/* WP's default global style margin-block-start on non-first flow children
   (~10px, "var(--wp--preset--spacing--20)") applies at every nesting level
   here — .person__item (2nd child of .person__list), .person__content
   (2nd child of .person__item), .person__desc (3rd child of
   .person__content) all need it zeroed, not just the outermost one. Same
   bug as Vision & Mission's grid (AUDIT_CHECKLIST.md item #3) — checked
   every level this time instead of finding them one verify-run at a time
   (found the .person__content one that way regardless; see the note in
   AUDIT_CHECKLIST.md about "every non-first child," not just direct
   grid items). Two-class selectors so they reliably beat the global rule's
   (0,1,0) specificity regardless of stylesheet print order (a single-class
   ".person__title{margin:0}" would only tie it). */
.person__list > .person__item {
	margin-block-start: 0;
}
.person__item {
	display: flex;
	flex-direction: column;
	height: 100%;
}
.person__item > .person__content {
	margin-block-start: 0;
}
/* CORRECTION (found 2026-07-04): .person__img is the <figure> wrapper
   (cuhk_block_image() puts the class there), not the actual <img> —
   object-fit is a no-op on a non-replaced element like <figure>, and
   with no explicit sizing on the nested <img> it fell back to base.css's
   generic img reset (width:100%; height:auto), so each photo's own real
   aspect ratio (not the intended 183:225 crop) was influencing the
   figure's rendered height slightly per item (~1.6px spread across 6
   different photos) even with aspect-ratio set on the figure itself.
   Every later pattern with an image (Avatar List 2, Contact List, News
   List, Video Gallery List) already targets the nested "img" for
   object-fit/sizing — this was the one pattern still missing it,
   built before that convention was established. */
.person__img {
	aspect-ratio: 183 / 225;
	width: 100%;
	flex-shrink: 0;
}
.person__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* NOTE (investigated 2026-07-04): identical-width figures in this grid can
   still render up to ~0.86px apart in measured height (e.g. 221.92px vs
   222.78px, <0.4% of ~222px) even with matching aspect-ratio, width, and
   flex-shrink:0 on every item — verified this isn't a stale/served-wrong
   CSS issue (re-fetched the file directly). This is sub-pixel grid-row/
   flex layout rounding in the browser engine itself (each grid row's
   fractional height remainder distributes slightly differently per row),
   not a fixable CSS authoring bug — not pursued further as it's visually
   imperceptible. */
.person__content {
	flex: 1;
	min-height: 151px;
	background-color: #f7f7f7;
	text-align: center;
	padding: 14px 10px;
}
/* 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 — h3 happens to already be
   correct (700) by coincidence, which is what let this hide across
   Avatar List 1/2 and Contact List. WP's theme apparently assigns a
   different default per heading LEVEL, not a blanket h1-h6 default the
   way base.css's reset does; whatever the cause, don't assume it — set
   it explicitly. */
.person__content h4 {
	font-weight: 600;
	margin-bottom: 2px;
}
.person__content h4 a {
	color: inherit;
}
.person__content h4 a:hover {
	color: var(--heading-purple);
}
.person__content > .person__title {
	margin: 0;
	color: var(--util-700);
}
.person__content > .person__desc {
	margin-block-start: 0;
	color: var(--util-300);
}

@media (min-width: 48rem) { /* 768px */
	.person__list {
		grid-template-columns: repeat(3, 1fr);
		gap: 15px;
	}
	.person__content {
		min-height: 125px;
		padding: 18px 20px;
	}
}

@media (min-width: 90rem) { /* 1440px */
	.person__list {
		grid-template-columns: repeat(4, 1fr);
		gap: 50px;
	}
	.person__content {
		min-height: 166px;
		padding: 34px 40px;
	}
}