/* =====================================================================
   Contact List (department offices grid) — CUHK 2026 style guide.
   Reference CSS: css/components.css's ".contact"/".contact__list"/
   ".contact__item"/".contact__desc" rules (BEM classes — NOT the Tailwind-
   utility-class markup at components/contact.component.html, which is a
   separate prototype page using an entirely different desktop/mobile-
   duplicated-markup strategy and doesn't use these classes at all).
   Real per-office phone/email content WAS harvested from that Tailwind
   page though (it's the only place with the actual 8 offices' real
   contact details, not the placeholder's single "Undergraduate Office"
   repeated 3x).

   CORRECTION (found 2026-07-04 fixing the same bug in Avatar List 2,
   spotted by diffing computed styles directly against the live reference
   — same wrong premise applied here too, fixing proactively): ".icon-row
   has no CSS rule of its own" was wrong. It's defined in base.css (not
   components.css, which is the only file the original grep checked).
   Reused the same email.svg/phone.svg assets and icon-row structure from
   Avatar List 2 rather than the Tailwind prototype's separate embedded
   SVG paths — same visual icons.

   CORRECTION #2 (found 2026-07-04, verifying THIS pattern directly
   against contact.component.html — the Tailwind prototype above, not
   components.css's BEM classes, since that's the page actually named as
   ground truth): several exact values ported from the BEM CSS don't
   match what that live page actually renders at this project's real
   breakpoints (measured directly at 1024px/1440px widths, not an
   arbitrary in-between width — Tailwind's own breakpoint scale doesn't
   line up with this project's, so comparing at the wrong width gives
   false mismatches). Corrected: icon-row gap is a flat 8px (not
   14px/16px — that's the shared base.css .icon-row default, which this
   specific component's own reference overrides), icon size is a flat
   16x16px at every breakpoint (not 17x14/25x20), grid gap is a flat
   16px at every breakpoint (not 15px14px/22px28px), and 1440px padding
   is a flat 32px (not the BEM's uneven 32/18/36/33). Also — systemic,
   not specific to this pattern — h4 needed explicit font-weight:600;
   every pattern's h4 was rendering at 400, not base.css's 600 (h3
   happens to already be correct at 700, which is what let this hide
   until checked directly).

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

   Cascade audit per AUDIT_CHECKLIST.md:
     h4  base: 16px/600/24px (base.css) — .contact h4 only sets margin,
         no font override, matches reference
     a   default color:var(--heading-purple), underline on hover
         (base.css) — no override in the reference for these email links
     .contact  no color of its own in the reference either, but its text
         still renders as --Content-Grey-2 there via base.css's global
         body{color:...} rule, which this project has no equivalent of
         (see Avatar List 2's CSS for the same finding) — set explicitly
         here too rather than assuming inheritance would match.
   ===================================================================== */
/* CORRECTION (found 2026-07-04, explicit user instruction to verify
   left/right margin/padding "on the whole block"): .contact had NO
   horizontal padding of its own at all — measured 0px at 375/768/1024px
   in this project's own sandbox (edge-to-edge, no gutter), and only
   "looked" fine at 1440px by accident, because TT5's own root padding
   (--cuhk-gutter, ~50px at that width) happens to apply there but not
   reliably at the other breakpoints tested. The Tailwind reference page
   (contact.component.html) has its own explicit horizontal padding on
   its wrapping ".container" div — measured directly: a flat 25px below
   1024px, a flat 62px at >=1024px (no separate 1440px value; verified
   the number doesn't change between 1024 and 1440, and the reference's
   own bg-color switch from white to #f2f2f2 lines up exactly at 1024px
   too, matching this pattern's own single breakpoint tier). Set
   explicitly here rather than relying on ambient root padding.

   CORRECTION (found 2026-07-04, explicit user instruction to also
   verify bottom margin/padding): base.css has its own generic
   `section{padding:40px 0}` rule (60px at >=1024px via
   `@media(min-width:1024px)`, 100px at >=1440px) that applies to EVERY
   `<section>` regardless of class. `.contact{padding-top:...}` only
   ever overrides the TOP half of that per breakpoint — the BOTTOM half
   was never overridden in components.css at all, so it was silently
   relying on this generic, unported section rule the whole time. Our
   port has no equivalent (this project's ".contact" isn't a real
   `<section>` tag), so padding-bottom needs the same 40/60/100 values
   set explicitly here. */
.contact {
	padding-top: 0;
	padding-bottom: 40px;
	padding-inline: 25px;
	color: var(--util-700);
}
/* align-items:center, not flex-start + margin-top:0.4em — see Avatar
   List 2's CSS for why (the reference's em-based hack was tuned for its
   own flat font-size, which doesn't match this theme's fluid typography;
   align-items:center is robust to that instead of fighting it). */
.icon-row {
	display: flex;
	align-items: center;
	gap: 8px;
}
.icon-row img {
	width: 16px;
	height: 16px;
	object-fit: contain;
}
.contact__list {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	gap: 5px;
	margin: -15px 0 -12px;
}
/* Same WP-default non-first-child margin-block-start fix as every other
   grid pattern so far — see AUDIT_CHECKLIST.md item #3. */
.contact__list > .contact__item {
	margin-block-start: 0;
}
.contact__item {
	background-color: #f7f7f7;
	padding: 20px 22px;
}
/* CORRECTION (found 2026-07-04 verifying against the live reference):
   font-weight:400 was the actual rendered value here, not base.css's 600
   — see Avatar List 1's CSS for the full note (systemic across every
   pattern using h4, not h3). */
.contact h4 {
	font-weight: 600;
	margin-bottom: 6px;
}
.contact__item > .contact__subtitle {
	margin: 0 0 6px;
}
.contact__item > .contact__desc {
	margin-block-start: 0;
	display: flex;
	flex-direction: column;
	margin-top: 10px;
}
.contact__desc > .icon-row {
	margin-block-start: 0;
}

@media (min-width: 64rem) { /* 1024px */
	.contact {
		padding-top: 60px;
		padding-bottom: 60px;
		padding-inline: 62px;
		background-color: #f2f2f2;
	}
	.contact__list {
		grid-template-columns: repeat(3, 1fr);
		gap: 16px;
		margin: 0;
	}
	.contact__item {
		padding: 20px 16px;
		line-height: 20px;
		min-height: 145px;
		background-color: #fff;
	}
	.contact h4 {
		margin-bottom: 5px;
		line-height: 20px;
	}
	.contact__item > .contact__desc {
		margin-top: 10px;
	}
}

@media (min-width: 90rem) { /* 1440px */
	.contact {
		padding-top: 100px;
		padding-bottom: 100px;
	}
	.contact__list {
		gap: 16px;
	}
	.contact__item {
		padding: 32px;
		line-height: 30px;
		min-height: 192px;
	}
	.contact h4 {
		margin-bottom: 8px;
		line-height: 35px;
	}
	.contact__item > .contact__desc {
		gap: 6px;
		margin-top: 22px;
	}
}