/* CII Updates tab nav - see cuhk-cii-updates-tabs.php for the full mechanism.
   Underline (5px solid, active tab only, same solid text color on every
   tab - no fading of inactive ones) matches the Client Experience page's
   own Ultimate Blocks tabs (internal comments #8 / 5.2) - confirmed via
   computed-style comparison: transparent background, zero padding on the
   tab-list container itself. (Previously matched "CII Updates (Archived)"
   instead, which had its own gray background+padding - client asked for
   Client Experience's cleaner style specifically.) */
.cuhk-cii-tabs {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--40, 1.5rem);
	margin-bottom: var(--wp--preset--spacing--50, 2rem);
}
.cuhk-cii-tab {
	background: none;
	border: none;
	border-bottom: 5px solid transparent;
	padding: 0.5em 0;
	font: inherit;
	/* #111111 isn't one of variables.css's shared tokens - it's the Client
	   Experience page's own Ultimate Blocks tabs' inactive-tab color
	   verbatim (confirmed via computed-style inspection: its inline
	   --ub-tabbed-title-color custom property), not a design-system
	   choice, so matched literally rather than substituting the closest
	   token. */
	color: #111;
	cursor: pointer;
}
.cuhk-cii-tab.is-active {
	font-weight: 600;
	/* Also matched from the same page's --ub-tabbed-active-title-color -
	   happens to equal variables.css's own --heading-purple exactly. */
	color: var(--heading-purple);
	border-bottom-color: var(--heading-purple);
}
/* Dimmed while a filtered fetch is in flight - swapped fragment removes this
   attribute once the new content lands (see tabs.js). */
.cuhk-cii-query-wrap[aria-busy="true"] {
	opacity: 0.5;
	transition: opacity 0.15s ease;
}
/* Card height alignment across each grid row - the post-template <li>
   already stretches to its row's tallest item (CSS grid's default
   align-items:stretch), but the card <div> inside it was display:block
   with an intrinsic height, so it didn't fill that stretched space -
   confirmed by measuring: heights varied 450-495px depending on how many
   lines each post's title wrapped to. height:100% alone would just
   overflow rather than absorb the extra space, so the card is also made a
   column flex container: the featured-image figure keeps its own fixed
   aspect-ratio, and the Content group (title/date/terms) is the one
   flexible child that grows to fill whatever's left. */
.cuhk-cii-query-wrap .wp-block-post-template > li {
	height: 100%;
}
.cuhk-cii-query-wrap .wp-block-post-template > li > .has-base-background-color {
	height: 100%;
	display: flex;
	flex-direction: column;
}
.cuhk-cii-query-wrap .wp-block-post-template > li > .has-base-background-color > .wp-block-group {
	flex: 1 1 auto;
}
/* UI Issues v2, #9.1 (client clarified via WhatsApp, 2026-09-06 - this
   item's cut-off instruction text turned out to be about THIS, not card
   height like #9.2/#9.3, which was already handled above): the "Date"/
   "Location" labels use a fixed-width flex layout ("selfStretch":"fixed",
   flexSize:"80px" on the label paragraph, "fill" on the value next to it).
   A fixed flex-basis alone still allows the default flex-shrink:1 to
   compress the label below 80px when the row doesn't have room - this grid
   is a FIXED columnCount:3 (not auto-fill/responsive), so at tablet widths
   each card gets noticeably narrower and "Location" (the longer of the
   two labels) no longer fits, breaking mid-word ("Locati"/"on") instead of
   staying on one line - reads as the value no longer sitting cleanly
   left-aligned next to its label. flex-shrink:0 keeps the label at its
   full intended width regardless of how narrow the card gets. Targets the
   label paragraph's own printed class directly (WordPress hashes it from
   the block's style JSON, so it's identical - and stable - across every
   "Date"/"Location" label on this page, confirmed directly: both print
   the exact same class since both share the same
   {"selfStretch":"fixed","flexSize":"80px"} config) rather than an
   attribute-contains selector, since this flex-basis is set via that
   printed class, not an inline style attribute. */
.cuhk-cii-query-wrap .wp-block-post-template .wp-container-content-962be591 {
	flex-shrink: 0;
}
/* WordPress always renders a core/query-no-results block after the card
   grid, even when there ARE results (it's just visually empty in that
   case) - it still picks up the layout's own block-spacing margin-top
   though, adding an invisible ~19px gap below the cards that 0028's grid-
   padding fix couldn't account for (that only balanced the grey box's OWN
   padding against the card gap, not this separate, additional margin).
   Zeroing the last child's margin removes that invisible spacer directly,
   at the root, rather than compensating for it elsewhere. */
.wp-block-query.alignwide.cuhk-cii-query-wrap > :last-child {
	margin-block-start: 0;
}