/* =====================================================================
   Card List 1 (news-style cards, default variant) — CUHK 2026 style guide.
   Reference: https://www.bschool.cuhk.edu.hk/style-guide-2026/components/card.component.html
   Real classes: ".card__list" > "a.card" (whole card is a link) >
   ".card__img.card__img--short"/".card__content.card__content--grey"
   (h3/p/.card__bottom tag row). Verified directly against the live
   reference at this project's actual breakpoints.

   Only ONE reference page exists for "card" (no separate card-1/card-2
   URLs) — confirmed from the full component list. ".card--2" is a real
   modifier class in components.css (compact spacing, height:auto instead
   of height:100%) — that's "Card List 2" (see that pattern's own CSS),
   both built from this same reference/content, differentiated by the
   modifier only.

   CORRECTION (found 2026-07-04, explicit instruction to add the real
   carousel behavior): the reference wraps this in a Swiper carousel with
   working prev/next arrows — now implemented for real (swiper-bundle.js/
   css downloaded locally, .swiper > .swiper-wrapper > .swiper-slide
   structure, init script in cuhk-shared/swiper-init.js). ".card__list"
   is no longer the grid/flex container itself (Swiper's own JS + CSS
   fully own slide sizing/positioning via the init script's
   slidesPerView/spaceBetween config, copied verbatim from this
   reference's own <script>) — it's now just the outer position:relative
   wrapper the prev/next buttons anchor to. Ranking List/News List's
   references ALSO use Swiper but were deliberately left as static grids
   per the standing project decision — only add their carousels too if
   given the same explicit instruction Card List 1/2 got, don't do it
   speculatively.

   Whole-card link: same reasoning as News List/Video Gallery List/Search
   Results List — built as a core/group (renders <div>), not a real
   whole-card <a>, since a core/group block saved as <a> markup fails
   WP's own block-validation check.

   All 4 items are real, distinct content from the live reference.

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

   Cascade audit per AUDIT_CHECKLIST.md:
     h3/p — need explicit color:var(--util-700) (no color of their own in
         components.css; missing-global-color-rule finding).
     h3 font-weight — no explicit value in components.css for
         .card__content h3 either; relies on base.css's own h3 default
         (700), which (per the h4/line-height findings) this project's
         theme does NOT reliably provide either — set explicitly here
         rather than assume h3 is safe just because earlier patterns'
         h3s happened to already have it set for other reasons.
     p margin-block-end — needs 1.4em set explicitly alongside any
         margin-block-start:0 (WP flow-layout default zeroes
         margin-block-end on every child, not just :last-child — Video
         Gallery List/News List finding).
   ===================================================================== */
/* CORRECTION (found 2026-07-04 re-verifying against the live reference
   directly via scripts/verify-pattern.py --compare-url): every width/
   height mismatch below traced back to ONE missing rule — the
   reference wraps every component in a shared ".container" ancestor
   with its own horizontal padding (25px below 1024px, 62px at
   >=1024px; confirmed by walking the ancestor chain of ".event-section"
   directly), which this pattern never had. Same exact values as
   Contact List's own left/right margin/padding fix (see that pattern's
   CSS) — this is a site-wide "container" convention in the reference,
   not specific to one component. Applied directly to ".card__list"
   (the position:relative Swiper anchor) since this project collapses
   the reference's separate ".container" + ".event-section" into one
   element, same simplification as Contact List. */
.card__list {
	position: relative;
	padding-inline: 25px;
}
@media (min-width: 64rem) { /* 1024px */
	.card__list {
		padding-inline: 62px;
	}
}
.card {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: var(--util-700);
}
.card__img {
	aspect-ratio: 380 / 214;
	overflow: hidden;
}
.card__img img {
	height: 100%;
	width: 100%;
	object-fit: cover;
	transition: transform 0.3s;
}
.card:hover .card__img img {
	transform: scale(1.1);
}
.card > .card__content {
	margin-block-start: 0;
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 24px 20px 30px;
	background-color: #f2f2f2;
	font-size: 13px;
	line-height: 26px;
}
.card__content > h3 {
	margin-block-start: 0;
	margin: 0 !important;
	color: var(--util-700);
	font-size: 16px;
	font-weight: 700;
	line-height: 22px;
}
.card__content > p {
	margin-block-start: 0;
	margin-block-end: 1.4em;
	color: var(--util-700);
}
.card__content > .card__bottom {
	margin-block-start: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 12px;
	margin-top: auto;
	padding-top: 10px;
}
/* CORRECTION (found 2026-07-04, re-verifying Card List 2's tag pill
   against its live reference): needs explicit letter-spacing:normal.
   Twenty Twenty-Five's own global typography preset sets
   letter-spacing:-0.1px on everything (same systemic "theme bleed-
   through" class of bug as the missing Myriad Pro font-family and
   heading font-weight findings elsewhere in this project) — invisible
   on short tag text (e.g. Card List 1's own "SCHOOL NEWS"), but on a
   longer one ("ECONOMICS & FINANCE" in Card List 2) that -0.1px per
   character compounds to ~1.9px over 19 characters, just enough to
   force a second line and overlap the title above it. The reference
   itself has letter-spacing:normal here — confirmed directly, not
   assumed. Even fixed, the natural (nowrap) width of "ECONOMICS &
   FINANCE" (237.25px) still edges out the ~2px of slack this project's
   own pattern-lab sandbox happens to have at that exact breakpoint (a
   side effect of the sandbox page template's own alignwide/1340px
   ancestor constraint — same cause as Card List 1's own "wide"
   verification mismatch, see that pattern's CSS) — a real production
   page has ~25px more to spare there and wouldn't wrap at all, but a
   pill/badge like this was never meant to wrap in the first place
   regardless of exactly how much margin happens to be available, so
   white-space:nowrap is the robust fix rather than depending on
   whatever width headroom a given page/breakpoint happens to leave. */
.border-box {
	display: inline-block;
	border: 1px solid var(--util-300);
	padding: 4px 16px;
	font-size: 14px;
	font-weight: 400;
	line-height: 22px;
	letter-spacing: normal;
	white-space: nowrap;
	text-transform: uppercase;
}

@media (min-width: 27rem) { /* 425px */
	.card > .card__content {
		font-size: 16px;
	}
}

@media (min-width: 64rem) { /* 1024px */
	.card > .card__content {
		padding: 22px 22px 20px;
		gap: 15px;
		line-height: 24px;
	}
	.card__content > h3 {
		line-height: 24px;
	}
	.card__content > .card__bottom {
		gap: 15px;
	}
	.border-box {
		font-size: 12px;
		line-height: 20px;
	}
}

@media (min-width: 90rem) { /* 1440px */
	.card > .card__content {
		padding: 50px 40px 40px;
		gap: 20px;
		font-size: 24px;
		line-height: 36px;
	}
	.card__content > h3 {
		font-size: 26px;
		font-weight: 600;
		line-height: 40px;
	}
	.card__content > .card__bottom {
		gap: 20px;
	}
	.border-box {
		font-size: 18px;
		line-height: 30px;
		padding: 4px 28px;
	}
}