/* See cuhk-cocreation-arrows.php's own docblock - script.js toggles this
   class on whichever arrow's own card has no next card in the same
   visual row. visibility (not display:none): the arrow sits in a flex
   row beside the card content, so removing it from layout would let the
   last card's content stretch into the freed space - issues PDF #4,
   "the last card is always too wide". Hidden but layout-preserving
   keeps all cards equal width. */
.cuhk-cocreation-arrow.cuhk-cocreation-arrow--row-last {
	visibility: hidden;
}

/* internal comments 20260911 #2.1/#2.2: client-reported responsive
   breakpoint bug, confirmed live on cuhk-api.biz-forest.com/what-we-offer/
   (EN and zh-hant both) between roughly 750-782px wide: the down-pointing
   arrow icon between each pair of cards (a separate core/icon block, its
   own grid item, block-visibility set to show on tablet/mobile only - WP
   core's own `.wp-block-hidden-desktop { display:none }` rule flips at
   exactly `width > 782px`) becomes visible right at 782px, but this grid's
   own columnCount:3/minimumColumnWidth:330px auto-fit math doesn't drop to
   a single column until well below that (confirmed via computed
   grid-template-columns - still "350px 350px" at 750px wide). In that gap,
   the grid is still 2 columns wide, so each now-visible arrow (a flat
   sibling of the cards, not nested inside one) lands in the row's second,
   otherwise-empty column instead of directly under its own card, and
   scrolls past a wall of blank space instead of sitting where the client's
   markup ("Arrow 係返每張片下面" - arrow should be right below each card)
   shows it should. Forcing exactly 1 column at the SAME width where the
   arrows switch on removes that gap entirely - every card and its
   following down-arrow becomes its own row, in the DOM order they already
   render in, with no CSS positioning trickery needed. */
@media (max-width: 782px) {
	.is-layout-grid:has(.cuhk-cocreation-arrow) {
		grid-template-columns: 1fr !important;
	}
}

/* Client-reported follow-up (internal comments 20260911 #2.1, also
   reported separately for TC/SC at the 2-3 column desktop widths): the
   VISIBLE grey card box - a separate, nested wp-block-group
   (has-background) one level in, not the grid item itself - only
   shrink-wraps to its own text content instead of filling the grid
   item's real width, so cards end up visibly different widths depending
   on how long each step's title/description happens to be.
   Originally scoped this to the single-column (<=782px) band only,
   assuming wider desktop layouts (2-3 explicit fixed-width columns) were
   unaffected - wrong: EN's text just happens to be long enough to reach
   close to the column's full width there, masking the same shrink-wrap
   bug. Confirmed via measurement at 1000px: EN's lone 5th card (Evaluate,
   alone in the last row) is 441px like its siblings, but TC/SC's is only
   405px - the exact same nested-box-doesn't-fill issue, just visible in
   TC/SC's shorter text first. Applies at every width, not just the
   single-column one.

   28px short of 100%, not the full 100%: the arrow between two cards is
   deliberately positioned to overflow its own card's box into the grid
   gap ("alignright", overflow-visible) so it visually points into the
   next column - but this grid's own column-gap is only 10px, well under
   the arrow's own 24px width. A first pass at width:100% made the card
   box reach its column's true edge, which pushed the arrow to render
   fully on top of the NEXT card's box (0px of the 24px-wide arrow left
   in actual gap space) instead of in clear whitespace - confirmed via
   measurement, and confirmed a wider column-gap instead has its own
   side effect: it eats into the minimumColumnWidth auto-fit math and
   delays the 3-column breakpoint from ~1050px to past 1280px. Insetting
   the card box by 28px instead leaves genuine reserved space within its
   OWN column for the arrow to sit in (0px measured overlap at every
   width, 2-column and 3-column both), without touching the grid's
   column-count breakpoints at all - confirmed unchanged at 850/1000/
   1100/1280px. */
.is-layout-grid:has(.cuhk-cocreation-arrow) > .wp-block-group .has-accent-3-background-color.has-background {
	width: calc(100% - 28px);
	flex: 1 0 auto;
}

/* Client-reported (issues PDF 20260908 #5): the 1st and 5th step cards
   (Discover, Evaluate) render visibly shorter than their row siblings.
   CSS Grid's own align-items:stretch already makes each grid item (the
   grid's direct child) the full row height - confirmed via measurement,
   201px/226px, correct - but the VISIBLE grey card box is nested two
   plain-div levels below that (neither has a distinguishing class of
   its own), and height:auto doesn't inherit through them, so the box
   stops short at its own content height (176px) whenever a card's text
   is shorter than its row sibling's. Same root cause already documented
   and fixed for the other card patterns in cuhk-shared/card-link.css -
   cascading height:100% down through the intermediate levels lets the
   shorter card's grey background stretch to match the row's tallest. */
.is-layout-grid:has(.cuhk-cocreation-arrow) > .wp-block-group > .wp-block-group,
.is-layout-grid:has(.cuhk-cocreation-arrow) > .wp-block-group > .wp-block-group > .has-accent-3-background-color {
	height: 100%;
}