/* =====================================================================
   Card List 2 (full-bleed image blog cards) — CUHK 2026 style guide.
   Reference: https://www.bschool.cuhk.edu.hk/style-guide-2026/components/blog.component.html

   CORRECTION (found 2026-07-04, explicit user instruction): "Card List 2"
   is NOT ".card--2" (a compact modifier of Card List 1's own component) —
   that was an earlier, wrong assumption from before this reference URL
   was given directly. It's a completely different component: real
   classes are ".blog__wrapper" > "a.blog" (whole card is a link) >
   ".blog__img" (full-bleed background image, absolutely positioned) +
   ".blog__content" (dark overlay, h3/.border-box--white tag/date
   paragraph, bottom-anchored). Rebuilt from scratch against this
   reference — nothing carried over from the old .card--2 build.

   Real Swiper carousel with working prev/next arrows — same
   infrastructure as Card List 1 (swiper-bundle.js/css, cuhk-shared/
   swiper-init.js), config (spaceBetween:10, slidesPerView 2/3/4 at
   768/1024/1440) copied verbatim from this reference's own <script>.

   5 items — 4 real, distinct images; content text is mostly repeated
   demo copy ("Global Economic Growth...") in the actual live reference
   itself, not something introduced when porting.

   Whole-card link: same reasoning as every other pattern with an
   "a.foo" reference wrapper — 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.

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

   Cascade audit per AUDIT_CHECKLIST.md:
     h3        no color of its own in components.css — inherits
               ".blog{color:white}", ported as an explicit color here
               instead of relying on inheritance (this project has no
               equivalent of the reference's own color inheritance chain).
     h3 font-weight — needs explicit value (600 at >=1024px) — the
               systemic h4/h3 font-weight finding applies here too.
     p (date) — same explicit color as h3, for the same reason.
   ===================================================================== */
/* Same missing-container-gutter finding as Card List 1/Contact List
   (25px below 1024px, 62px at >=1024px — a site-wide ".container"
   convention in the reference, confirmed identical here too). */
.blog__wrapper {
	position: relative;
	margin-bottom: 30px;
	padding-inline: 25px;
}

@media (min-width: 64rem) { /* 1024px */
	.blog__wrapper {
		margin-bottom: 0;
		padding-inline: 62px;
	}
}

.blog {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 342px;
	height: 100%;
	color: #fff;
	overflow: hidden;
}
/* CORRECTION (found 2026-07-04, explicit user instruction: "image
   background should scale to whole item height"): ".blog__img" is the
   <figure> wrapper (cuhk_block_image() puts the class there), not the
   actual <img> — object-fit/height:100% are no-ops on a non-replaced
   element like <figure>, so the nested <img> was falling back to its
   own natural aspect ratio (only ~457px of the card's 687px height at
   1440px) instead of covering the full card. Same systemic bug as
   Avatar List 1's image (see that pattern's CSS) — every other pattern
   with an image already targets the nested "img" explicitly; this was
   the one still missing it. */
.blog__img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transition: transform 0.3s;
}
.blog__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.blog:hover .blog__img {
	transform: scale(1.1);
}
.blog > .blog__content {
	margin-block-start: 0;
	height: 100%;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-start;
	background-color: rgba(0, 0, 0, 0.3);
	padding: 34px 54px;
	transition: background-color 0.3s;
}
.blog:hover .blog__content {
	background-color: rgba(0, 0, 0, 0.5);
}
/* CORRECTION (found 2026-07-04 re-verifying against the live reference
   directly via scripts/verify-pattern.py --compare-url):
   - h3's margin was unconditionally zeroed (`margin:0 !important`), but
     the reference actually gives it an explicit margin-bottom (15px
     below 1440px, 22px at >=1440px) — measured directly via
     getComputedStyle at 375/1024/1440, not assumed from components.css
     alone (this rule wasn't in an earlier grep of that file either).
   - The date paragraph (".blog__content > p", NOT ".border-box" — the
     reference's actual tag/pill is a <div class="border-box
     border-box--white">, not a <p>; our port uses a paragraph block
     for it too for the same Pattern-Overrides-editability reason as
     every other pattern, so ".blog__content > p" alone also matches
     our tag paragraph — this rule only visibly matters for the date,
     since the tag already gets its own explicit sizing from the
     project-wide ".border-box" class) had NO explicit font-size, so it
     rendered at this theme's ambient fluid body-font clamp (~16-18px)
     instead of the reference's actual value: a flat 16px/26px up
     through 1024px, then a hard jump to 24px/36px at >=1440px (this
     project's flat 16px body base.css value doesn't fluidly scale the
     way this theme's own default did — confirmed the reference's body
     font-size really does hard-jump at exactly 1440px, not a
     rem-based clamp, by bisecting 1439 vs 1440px directly). */
.blog__content > h3 {
	margin-block-start: 0;
	margin-bottom: 15px;
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	line-height: 22px;
}
/* CORRECTION (found 2026-07-04, explicit user instruction: "text of card
   list 2 item is still not correct"): both news-list.css and video-
   gallery-list.css define their OWN unscoped ".border-box{color:var(
   --util-700)}" at their 1024px tier — since every pattern's CSS loads
   globally on every page (AUDIT_CHECKLIST.md's "two different patterns
   using the same class name silently collide" finding, a new instance
   of it), that dark-grey color was bleeding into THIS tag pill too,
   even though it never had a conflicting rule of its own — the bug was
   in a completely different pattern's file. Scoped higher than the
   plain ".border-box" selector so it wins regardless of those other
   files' load order. */
.blog__content > .border-box {
	margin-block-start: 0;
	margin-bottom: 19px !important;
	color: #fff;
}
/* CORRECTION (found 2026-07-04, investigating a "tag text looks bold"
   report): the "--white" modifier itself was never actually styled —
   only ever mentioned in comments, no rule. The reference's tag border
   is pure white (rgb(255,255,255)); ours fell back to the shared
   ".border-box" class's own grey (var(--util-300)) border color. Not a
   font-weight difference (that part already matched, byte-for-byte
   down to the actual font file) — the brighter white border/frame
   around the same-weight text is what read as "bolder" by contrast. */
.border-box--white {
	border-color: #fff;
}
.blog__content > p:not(.border-box) {
	margin-block-start: 0;
	margin-block-end: 0;
	color: #fff;
	font-size: 16px;
	line-height: 26px;
}

@media (min-width: 64rem) { /* 1024px */
	.blog {
		min-height: 464px;
	}
	.blog > .blog__content {
		padding: 24px 21px;
	}
	.blog__content > h3 {
		max-width: 206px;
		font-weight: 600;
		line-height: 20px;
	}
	.blog__content > .border-box {
		margin-bottom: 14px !important;
	}
	.blog__content > p:not(.border-box) {
		line-height: 24px;
	}
}

@media (min-width: 90rem) { /* 1440px */
	.blog {
		min-height: 687px;
	}
	.blog > .blog__content {
		padding: 36px 27px;
	}
	.blog__content > h3 {
		max-width: 306px;
		font-size: 26px;
		line-height: 40px;
		margin-bottom: 22px;
	}
	.blog__content > .border-box {
		margin-bottom: 18px !important;
	}
	.blog__content > p:not(.border-box) {
		font-size: 24px;
		line-height: 36px;
	}
}