/* =====================================================================
   Ranking List 1 (rankings grid, no images) — CUHK 2026 style guide.
   Reference: https://www.bschool.cuhk.edu.hk/style-guide-2026/components/rank-1.component.html
   (the URL on the main style guide page's own "Ranking List 1" link is
   wrong/stale — this is the correct one, confirmed working).

   Per explicit instruction: this is Ranking List 1 specifically (the
   plain grid, no ranking-org logos) — NOT "Ranking List 2" (a separate,
   image-based variant with its own swiper/toggle UI) and NOT the
   swiper-carousel JS behavior .rank__swiper/.rank__slide implement in the
   reference — same content, rendered as a static grid, avoiding a JS
   carousel dependency this project doesn't otherwise have.

   Only porting ".rank__list"/".rank__item"/".rank__desc" — NOT ".rank"/
   ".rank__top"/".rank__switch"/".rank__btn"/".rank::after" (the decorative
   world-map background image + List1/List2 toggle switch chrome), since
   we're building just the list content itself, not the full section
   including a toggle UI we're not implementing.

   English only, same scope note as every pattern so far. ".rank__desc
   span" (big styled number) isn't used — the reference's own rank-1
   markup has no <span> inside .rank__desc despite components.css having
   a rule for one; ported the markup as actually written, not as the CSS
   implies it "should" be.

   Cascade audit per AUDIT_CHECKLIST.md:
     h3  base: 16px/600/24px (base.css h3) — no color override in the
         reference (unlike h1/h2 which get --heading-purple)
     p   base: margin-bottom 1.4em — .rank__item p{max-width:320/480px}
         caps width for readability; nothing zeroes the default margin,
         kept as-is between .rank__desc and the source-name paragraph.
         CORRECTION (found 2026-07-04 fixing the same bug in Avatar List
         2/Contact List, applied here proactively): also needs explicit
         color:var(--util-700) — this project has no global
         body{color:...} rule, so plain paragraph text without its own
         explicit color falls back to the theme default instead.

   CORRECTION #2 (found 2026-07-04, verifying THIS pattern directly
   against rank-1.component.html at this project's actual breakpoints —
   375/768/1024/1440, not an arbitrary width): several exact values
   didn't match what the live page actually renders — .rank__desc's
   font-size is 20px/21px/26px at base/1024/1440 (not 14px/16px/26px —
   only the 1440 value happened to already be right), and its
   margin-bottom is 4px/10px/4px (was missing entirely at base, and
   14px not 10px at 1024). h3's margin-bottom at 1440 was a flat-out
   typo: -10px instead of +4px (a negative margin that visibly pulled
   the heading and stat line together incorrectly).
   ===================================================================== */
.rank__list {
	display: grid;
	gap: 20px;
}
/* Same WP-default non-first-child margin-block-start fix as every other
   grid pattern so far — see AUDIT_CHECKLIST.md item #3. Redundant now
   that cuhk-shared/reset.css neutralizes this globally, but harmless
   (same value) — left in place rather than retroactively edited. */
.rank__list > .rank__item {
	margin-block-start: 0;
}
.rank__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 168px;
	background-color: #f7f7f7;
	text-align: center;
	padding: 20px 20px;
}
.rank__item h3 {
	margin-bottom: 4px;
}
.rank__item p {
	max-width: 320px;
	color: var(--util-700);
}
.rank__item > .rank__desc {
	margin-block-start: 0;
	font-size: 20px;
	font-weight: 400;
	line-height: 22px;
	margin-bottom: 4px;
}

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

@media (min-width: 64rem) { /* 1024px */
	.rank__item {
		min-height: 220px;
		padding: 20px 40px;
	}
	.rank__item h3 {
		margin-bottom: 10px;
	}
	.rank__item > .rank__desc {
		font-size: 21px;
		line-height: 24px;
		margin-bottom: 10px;
	}
}

@media (min-width: 90rem) { /* 1440px */
	.rank__list {
		gap: 22px;
	}
	.rank__item {
		min-height: 250px;
		padding: 20px 40px;
	}
	.rank__item h3 {
		margin-bottom: 4px;
	}
	.rank__item p {
		max-width: 480px;
	}
	.rank__item > .rank__desc {
		font-size: 26px;
		line-height: 37px;
		margin-bottom: 4px;
	}
}