/* =====================================================================
   Search Results List (linked result cards) — CUHK 2026 style guide.
   Reference: https://www.bschool.cuhk.edu.hk/style-guide-2026/components/search.component.html
   Real classes: ".result__list" > "a.result" (whole card is a link) >
   ".result__img"/".result__content" (title/published-date/desc/
   .result__read "Read More..." CTA). Verified directly against the live
   reference at this project's actual breakpoints (375/768/1440 — this
   component has no 1024px tier of its own, confirmed from components.css:
   only 768px and 1440px media queries exist for .result__*).

   All 6 items are real, distinct content from the live reference (mixed
   faculty bios and news items — this is a generic "linked result card"
   layout reused across content types, not faculty-specific), not
   placeholder filler.

   Whole-card link: same call as News List/Video Gallery 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. The "Read More..." CTA is a real core/button (renders
   <a>, matches core/button's own save() output, no validation conflict)
   so there's still a genuinely clickable, overridable link on the card.

   .result__title/.result__published are plain <div>s in the reference,
   not headings — ported as paragraph blocks (closer semantic match than
   forcing a heading tag that isn't used here).

   -webkit-line-clamp (title 1-line, desc 4-line ellipsis truncation) —
   ported as-is; standard modern browser support, no fallback needed.

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

   Cascade audit per AUDIT_CHECKLIST.md:
     color — .result__title/.result__published need explicit
         color:var(--util-700) (this project's missing-global-color-rule
         finding); .result itself too, for the same reason.
     margin-block-end — .result__desc (a <p>) needs it set explicitly
         alongside any margin-block-start:0, per the Video Gallery
         List/News List finding (WP's flow-layout default zeroes
         margin-block-end on every child, not just :last-child).
   ===================================================================== */
.result__list {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	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. */
.result__list > .result {
	margin-block-start: 0;
}
.result {
	display: flex;
	flex-direction: column;
	background-color: #ffffff;
	color: var(--util-700);
}
.result__img {
	aspect-ratio: 380 / 214;
	overflow: hidden;
}
.result__img img {
	height: 100%;
	width: 100%;
	object-fit: cover;
	transition: transform 0.2s ease-in-out;
}
.result:hover .result__img img {
	transform: scale(1.05);
}
.result > .result__content {
	margin-block-start: 0;
	padding: 20px 26px 26px;
}
.result__content > .result__title {
	margin-block-start: 0;
	color: var(--util-700);
	font-weight: 600;
	font-size: 21px;
	line-height: 26px;
	margin-bottom: 0.1em;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}
.result:hover .result__title {
	color: var(--heading-purple);
}
.result__content > .result__published {
	margin-block-start: 0;
	color: var(--util-700);
	font-weight: 600;
	margin-bottom: 1em;
}
.result__content > .result__desc {
	margin-block-start: 0;
	margin-block-end: 1.4em;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}
.result__content > .wp-block-buttons {
	margin-block-start: 0;
}
.result__read {
	font-size: 16px;
	font-weight: 400;
	border: 1px solid #acacac;
	padding: 6px 28px;
	background: none;
	color: var(--util-700);
}

@media (min-width: 48rem) { /* 768px */
	.result__list {
		grid-template-columns: repeat(2, 1fr);
		gap: 22px;
	}
	.result > .result__content {
		padding: 23px 30px 30px;
	}
	.result__content > .result__title {
		font-weight: 700;
		font-size: 18px;
		margin-bottom: 0;
	}
	.result__content > .result__published {
		font-weight: 400;
		font-size: 12px;
		line-height: 20px;
		margin-bottom: 1em;
	}
	.result__read {
		font-size: 12px;
		padding: 6px 24px;
	}
}

@media (min-width: 90rem) { /* 1440px */
	.result__list {
		grid-template-columns: repeat(3, 1fr);
		gap: 45px;
	}
	.result > .result__content {
		padding: 30px 40px 40px;
	}
	.result__content > .result__title {
		font-weight: 600;
		font-size: 22px;
		line-height: 36px;
	}
	.result__content > .result__published {
		font-size: 18px;
		line-height: 30px;
		margin-bottom: 1.25em;
	}
	.result__content > .result__desc {
		font-size: 24px;
	}
	.result__read {
		font-size: 18px;
		padding: 8px 25px;
	}
}