/* =====================================================================
   Video Gallery List (video/media cards) — CUHK 2026 style guide.
   Reference: https://www.bschool.cuhk.edu.hk/style-guide-2026/components/video-list.component.html
   Real classes: ".media__list" > ".media" > ".media__img"(+play-button
   overlay)/".media__content" (title/desc/.media__bottom tag row).
   Verified directly against the live reference at this project's actual
   breakpoints (375/768/1024/1440), not an arbitrary width — see
   AUDIT_CHECKLIST.md for why that matters.

   CORRECTION (found 2026-07-04, explicit user instruction: "1 side grid
   blocks on the right of the biggest 1st grid"): items 2-3 DO need their
   own intermediate treatment — this was previously simplified away (see
   git history), which meant items 2-6 all shared one span-3 size and
   left the "side column" next to the featured item 1 empty/absent.
   Fixed by porting the exact nth-child(2)/nth-child(3) rules from
   components.css (grid-column:span 2, flex-direction:column, own
   aspect-ratio/padding/play-button-size) — no explicit grid-row needed
   for them, CSS Grid's default (non-dense) auto-placement already slots
   them into the two 2-column-wide cells to the right of item 1's
   span-4/row-span-2 area on its own, matching the reference (which also
   has no explicit position values for these two, only span).

   No whole-card link — reference wraps in plain <div class="media">, no
   <a> (unlike News List's .event links); confirmed from the actual
   fetched markup, not assumed. Play-button overlay (::after,
   play_button.svg) still communicates "clickable to watch" without a
   real navigable link target.

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

   Cascade audit per AUDIT_CHECKLIST.md:
     h2  (.media__title) — no color of its own besides
         color:var(--Content-Grey-2)/--util-700, explicit in the
         reference; ported as explicit here too (h2 gets --heading-purple
         by default per base.css, so this NEEDS the override, unlike h3/h4
         which just need font-weight)
     .media__subtitle exists in components.css but NOT in this specific
         demo's markup (no element uses that class) — not ported, same
         reasoning as Ranking List's unused ".rank__desc span".
     p   (.media__desc) — no override besides color, relies on base.css's
         margin-bottom:1.4em default; explicit color:var(--util-700) per
         the missing-global-color-rule finding (AUDIT_CHECKLIST.md).
     h1-h6 font-weight — this project's theme defaults ALL headings to
         400 regardless of level; .media__title needs explicit
         font-weight:600 (it's ported as an h2, not h3/h4, but the same
         theme-wide default applies to every level).
   ===================================================================== */
.media__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. */
.media__list > .media {
	margin-block-start: 0;
}
.media {
	display: flex;
	flex-direction: column;
	color: inherit;
}
.media__img {
	position: relative;
	cursor: pointer;
	aspect-ratio: 380 / 214;
}
/* Admin-editable per-item YouTube URL (core/button, url bound through
   core/pattern-overrides — see video-lightbox.js's own comment for why
   this isn't overlaid on ".media__img" directly). Visually hidden with
   the standard clip-based technique (NOT display:none/visibility:hidden)
   so it stays in the accessibility tree and keyboard-focusable — a
   keyboard user tabbing to it and pressing Enter/Space still opens the
   video (see video-lightbox.js), it's just not meant to be seen or
   clicked directly since ".media__img" is the intended visual target. */
.media__video-link {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.media__video-link:focus {
	position: static;
	width: auto;
	height: auto;
	margin: 0;
	padding: 6px 12px;
	clip: auto;
	overflow: visible;
	white-space: normal;
	display: inline-block;
	background: #fff;
	color: var(--util-700);
	outline: 2px solid var(--heading-purple);
}
.media__img::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: block;
	width: 90px;
	aspect-ratio: 1 / 1;
	/* Relative path, NOT %ASSETS% — that placeholder is only substituted
	   in block markup by cuhk_migrate_push(), never in CSS files (served
	   directly as static assets via cuhk_enqueue_pattern_css(), never
	   passed through push at all). A CSS url() resolves relative to the
	   stylesheet's own location, so this is ../assets/img/, not %ASSETS%/img/.
	   Found via computed-style inspection: the ::after rendered with a
	   literal, unresolved "%ASSETS%" segment in its background-image URL. */
	background-image: url("../assets/img/play_button.svg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	transition: transform 0.2s;
}
.media__img:hover::after {
	transform: translate(-50%, -50%) scale(1.05);
}
.media__img img {
	height: 100%;
	width: 100%;
	object-fit: cover;
}
.media > .media__content {
	margin-block-start: 0;
	flex: 1;
	display: flex;
	flex-direction: column;
	background-color: #fff;
	padding: 32px 18px 40px 20px;
}
.media__content > .media__title {
	margin-block-start: 0;
	color: var(--util-700);
	font-size: 21px;
	font-weight: 600;
	line-height: 28px;
	margin-bottom: 10px;
}
.media__content > p {
	margin-block-start: 0;
	margin-block-end: 1.4em;
	color: var(--util-700);
}
.media__content > .media__bottom {
	margin-block-start: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 13px;
	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 */
	.media__list {
		grid-template-columns: repeat(2, 1fr);
	}
	.media__list .media:first-child {
		grid-column: span 2;
	}
}

@media (min-width: 64rem) { /* 1024px */
	.media__list {
		gap: 22px;
	}
	.media__img {
		aspect-ratio: 900 / 507;
	}
	.media__img::after {
		width: 95px;
	}
	.media__list .media:first-child .media__img::after {
		width: 122px;
	}
	.media > .media__content {
		padding: 24px 16px 32px 22px;
	}
	.media__list .media:first-child .media__content {
		padding: 40px 40px 42px 48px;
	}
	.media__content > .media__title {
		font-size: 16px;
		font-weight: 600;
		line-height: 20px;
	}
	.media__list .media:first-child .media__title {
		font-size: 21px;
		font-weight: 600;
		line-height: 28px;
	}
	.media__list .media:first-child .media__bottom {
		padding-top: 0;
	}
	.border-box {
		font-size: 12px;
		line-height: 20px;
		color: var(--util-700);
	}
}

@media (min-width: 90rem) { /* 1440px */
	.media__list {
		grid-template-columns: repeat(6, 1fr);
		gap: 40px;
	}
	.media__list .media {
		grid-column: span 3;
		flex-direction: row;
	}
	.media__list .media:first-child {
		grid-column: span 4;
		grid-row: span 2;
		flex-direction: column;
	}
	.media__list .media:nth-child(2),
	.media__list .media:nth-child(3) {
		grid-column: span 2;
		flex-direction: column;
	}
	.media__img {
		width: 34%;
		aspect-ratio: unset;
	}
	.media__list .media:first-child .media__img {
		width: 100%;
		flex: 1;
	}
	.media__list .media:nth-child(2) .media__img,
	.media__list .media:nth-child(3) .media__img {
		width: 100%;
		aspect-ratio: 516 / 290;
	}
	.media__img::after {
		width: 80px;
	}
	.media__list .media:first-child .media__img::after {
		width: 244px;
	}
	.media__list .media:nth-child(2) .media__img::after,
	.media__list .media:nth-child(3) .media__img::after {
		width: 107px;
	}
	.media > .media__content {
		padding: 34px 22px 42px 34px;
	}
	.media__list .media:first-child .media__content {
		flex: unset;
		padding: 40px 36px 39px 51px;
	}
	.media__list .media:nth-child(2) .media__content,
	.media__list .media:nth-child(3) .media__content {
		padding: 22px 26px 22px 26px;
	}
	.media__content > .media__title {
		font-size: 22px;
		font-weight: 600;
		line-height: 35px;
	}
	.media__list .media:first-child .media__title {
		font-size: 44px;
		font-weight: 600;
		line-height: 52px;
		margin-bottom: 16px;
	}
	.media__content > p {
		display: none;
	}
	.media__list .media:first-child .media__content > p {
		display: block;
	}
	.border-box {
		font-size: 18px;
		line-height: 30px;
		padding: 4px 28px;
	}
}

/* ── Block editor only: un-hide the video URL button ───────────────────
   .media__video-link is clip-hidden on the front-end so it stays in the
   accessibility tree but is invisible. Inside the block editor iframe
   (body.editor-styles-wrapper) override those rules so the designer can
   see the button and click it to set each video's YouTube URL via the
   URL field in the block toolbar. Safe to use !important here — these
   rules only ever apply inside the editor iframe. */
.editor-styles-wrapper .media__video-link {
	position: static !important;
	width: auto !important;
	height: auto !important;
	padding: 6px 16px !important;
	margin: 4px 0 0 !important;
	overflow: visible !important;
	clip: auto !important;
	white-space: normal !important;
	border: 2px dashed var(--heading-purple, #6b0b97) !important;
	background: #f8f0fc !important;
	color: var(--util-700, #333) !important;
	font-size: 13px !important;
	cursor: pointer !important;
	display: inline-block !important;
}

/* Lightbox modal — created once by video-lightbox.js and appended to
   <body>, so it isn't scoped under ".media__list" (its wrapper needs to
   sit above everything else on the page, not inside this pattern's own
   stacking context). Kept in this file rather than a separate stylesheet
   since it's still only ever used by this one pattern. */
.cuhk-video-modal[hidden] {
	display: none;
}
.cuhk-video-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
}
.cuhk-video-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.8);
}
.cuhk-video-modal__dialog {
	position: relative;
	width: min(90vw, 960px);
}
.cuhk-video-modal__close {
	position: absolute;
	top: -40px;
	right: 0;
	width: 32px;
	height: 32px;
	color: #fff;
	font-size: 28px;
	line-height: 1;
	background: none;
	border: none;
	cursor: pointer;
}
.cuhk-video-modal__frame {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #000;
}
.cuhk-video-modal__frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}