/* =====================================================================
   News List (featured story cards) — CUHK 2026 style guide.
   Reference: https://www.bschool.cuhk.edu.hk/style-guide-2026/components/news-list.component.html
   Real classes: ".event__list.event__list--news" > "a.event" (whole card
   is a link) > ".event__img"/".event__content" (subtitle/title/excerpt/
   .event__bottom tag row). ".event"/".event__img" hover-zoom matches
   card-link.css's documented consumer list exactly.

   All 6 items are genuinely real reference content, not placeholder
   filler — 3 of them intentionally repeat the same demo article text to
   show different date/category tag combinations, confirmed present in
   the actual fetched reference, not something introduced when porting.

   Simplification: the reference's >=1440px layout has the first item
   span all 6 grid columns (full-width, larger type) and items 2-3 span 3
   columns each, with several nth-child-specific font-size overrides for
   just those three positions. Ported the grid-column spans (the
   structural layout difference is visually significant) but not every
   individual nth-child font-size micro-variation beyond item 1 - items
   2-6 share one consistent card size/type scale at 1440 rather than
   items 2-3 getting an intermediate size. Revisit with the full
   nth-child breakdown if pixel-exact fidelity at 1440px specifically
   becomes a requirement.

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

   Whole-card link: the reference wraps each card in a real <a> (no real
   destination yet, "href=#" placeholder). Built as a core/group instead
   (renders <div>) — a core/group block that saved as <a> markup would
   fail WP's own block-validation check (saved HTML must match what the
   registered block type's save() actually produces), landing every card
   in an "invalid block, needs recovery" state for any future editor.
   Same call already made in this project's own Search Results List
   placeholder (a "Read More" link inside the card, not a whole-card
   anchor). Hover-zoom (:hover scale on .event__img img) still works
   identically on a div; only click-through navigation is out of scope
   until there's a real destination (e.g. an actual News post) to link to.
   ===================================================================== */
.event__list {
	display: grid;
	gap: 10px;
}
/* Same WP-default non-first-child margin-block-start fix as every other
   grid pattern so far — see AUDIT_CHECKLIST.md item #3. Root is a link
   (<a>), not a group block, so this targets the <a> wrapper directly. */
.event__list > .event {
	margin-block-start: 0;
}
.event {
	display: flex;
	flex-direction: column;
	color: inherit;
	text-decoration: none;
}
.event:hover {
	text-decoration: none;
}
.event__img {
	aspect-ratio: 380 / 214;
	overflow: hidden;
}
.event__img img {
	height: 100%;
	width: 100%;
	object-fit: cover;
	transition: transform 0.2s ease-in-out;
}
.event:hover .event__img img {
	transform: scale(1.05);
}
.event > .event__content {
	margin-block-start: 0;
	flex: 1;
	display: flex;
	flex-direction: column;
	background-color: #fff;
	padding: 32px 20px 44px;
}
/* font-weight:600 explicit — same systemic h4 bug as Avatar List 1/2/
   Contact List (theme's global h1-h6{font-weight:400} wins unless the
   reference's own weight is set explicitly; see AUDIT_CHECKLIST.md). */
.event__content > .event__subtitle {
	margin-block-start: 0;
	color: var(--heading-purple);
	font-weight: 600;
	margin-bottom: 6px;
}
.event__content > .event__title {
	margin-block-start: 0;
	color: var(--util-700);
	font-size: 21px;
	font-weight: 600;
	line-height: 28px;
	margin-bottom: 8px;
}
/* The plain excerpt <p> (no class) needs explicit color too — see the
   correction note above; this project has no global body{color:...}
   rule, so it'd otherwise fall back to the theme default. Found fixing
   the same bug in Avatar List 2/Contact List/Avatar List 1/Ranking List,
   applied here proactively. */
/* CORRECTION (found 2026-07-04 building Video Gallery List, applied
   proactively here): also needs explicit margin-block-end:1.4em. WP's
   flow-layout default (":root :where(.wp-block-group-is-layout-flow) >
   * { margin-block-end: 0 }") zeroes margin-bottom on EVERY child of a
   flow-layout group, not just :last-child as earlier findings assumed —
   this rule had margin-block-start:0 but never set margin-block-end at
   all, so nothing overrode WP's zero. */
.event__content > p {
	margin-block-start: 0;
	margin-block-end: 1.4em;
	color: var(--util-700);
}
.event__content > .event__bottom {
	margin-block-start: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 12px;
	margin-top: auto;
	padding-top: 10px;
}
.border-box {
	display: inline-block;
	border: 1px solid var(--util-300);
	padding: 4px 16px;
	font-size: 14px;
	font-weight: 400;
	line-height: 22px;
	text-transform: uppercase;
}

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

@media (min-width: 64rem) { /* 1024px */
	.event__list {
		gap: 24px 22px;
	}
	.event__img {
		aspect-ratio: 439 / 247;
	}
	.event > .event__content {
		padding: 16px 16px 16px 22px;
	}
	.event__content > .event__subtitle {
		font-weight: 400;
		font-size: 12px;
		line-height: 20px;
		margin-bottom: 2px;
	}
	.event__content > .event__title {
		font-size: 18px;
		font-weight: 700;
		line-height: normal;
		margin-bottom: 16px;
	}
	.border-box {
		font-size: 12px;
		line-height: 20px;
		color: var(--util-700);
	}
}

@media (min-width: 90rem) { /* 1440px */
	.event__list {
		gap: 42px 42px;
	}
	.event__list--news {
		grid-template-columns: repeat(6, 1fr);
	}
	.event__list--news .event {
		grid-column: span 2;
	}
	.event__list--news .event:first-child {
		grid-column: span 6;
		flex-direction: row;
	}
	.event__list--news .event:nth-child(2),
	.event__list--news .event:nth-child(3) {
		grid-column: span 3;
	}
	.event__list--news .event:first-child .event__img {
		width: 61.5%;
		aspect-ratio: unset;
	}
	.event > .event__content {
		padding: 50px 36px 76px 42px;
	}
	.event__list--news .event:first-child .event__content {
		padding: 60px 60px 110px;
	}
	.event__content > .event__subtitle {
		font-size: 22px;
		font-weight: 600;
		line-height: 35px;
		margin-bottom: 2px;
	}
	.event__content > .event__title {
		font-size: 22px;
		font-weight: 600;
		line-height: 35px;
		margin-bottom: 10px;
	}
	.event__list--news .event:first-child .event__title {
		font-size: 44px;
		line-height: 52px;
		margin-bottom: 12px;
	}
	.event__content > .event__bottom {
		padding-top: 0;
	}
	.border-box {
		font-size: 18px;
		line-height: 30px;
		padding: 4px 28px;
	}
}