/* Dean's Message photo + name/title card. Both the image and the caption
   are position:absolute inside this position:relative wrapper, so their
   placement is just plain top/left/right/bottom values below - adjust
   those directly to move either one; nothing else needs to change to
   reposition them. Starting values roughly match bschool.cuhk.edu.hk's
   own Portrait component layout, but the point of this version is manual
   control, not exact replication.

   The wrapper is sized to the IMAGE's own intended width (156px / 346px
   at the wider tier below), not the column - aspect-ratio then derives
   its height from that. Sizing the wrapper to the column instead (e.g.
   max-width:400px) would stretch a width:100% image out to that full
   width too, which is exactly the "photo too big" bug from earlier -
   confirmed the hard way switching to this version. The column itself is
   flexed to push this (now narrower-than-the-column) wrapper to the
   right, matching the original photo-on-the-right layout; the caption is
   free to extend further left than the wrapper via a negative `left`
   since position:absolute isn't clipped by a non-overflow-hidden parent. */
/* :has(> ...) - DIRECT child only, not :has(.cuhk-deans-photo) (any-depth
   descendant) - the page's own template wraps the breadcrumb AND this
   page's whole post-content in one shared outer column further up the
   tree, which also technically "has" .cuhk-deans-photo somewhere inside
   it. The unscoped version matched that outer column too, flexing the
   breadcrumb and the post-content into a side-by-side row instead of
   their normal stacked order - confirmed the hard way when the
   breadcrumb ended up beside the page content instead of above it. */
.wp-block-column:has(> .cuhk-deans-photo) {
	display: flex;
	justify-content: flex-end;
	/* Flex's default align-items:stretch would otherwise stretch
	   .cuhk-deans-photo to the column's full height, overriding its own
	   aspect-ratio - confirmed the hard way (wrapper rendered 630px tall
	   instead of the ~461px its aspect-ratio should produce). */
	align-items: flex-start;
}
.cuhk-deans-photo {
	position: relative;
	width: 156px;
	aspect-ratio: 434 / 1283;
	margin: 0 0 0 30px;
}
.cuhk-deans-photo img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
    max-width: 220px;
    height: auto;
}
.cuhk-deans-photo-caption {
	position: absolute;
	/* Adjust these four to move the caption box. */
	top: 220px;
	left: -110px;
	right: auto;
	bottom: auto;
	width: 300px;
	background-color: #f7f7f7;
	padding: 30px 27px 27px 27px;
}
/* Internal comments (UI Issues v2, #5 follow-up): the 220/-110 values above
   were tuned for this tier back when it was ONLY ever used in the stacked
   (single-column, centered) layout below - see the "was 89.99rem" note on
   the max-width query below for why. Once the 2-column breakpoint moved
   down to 48rem, this same 156px-wide photo started rendering inside a
   much narrower flexed column for the FIRST time, and those values put the
   (still 300px-wide) caption box on top of the photo's own body instead of
   beside it - confirmed the hard way via screenshots at 1024px/1400px
   showing the caption text cut off behind the image.
   Fixed by keeping the same relative image-overlap this component already
   uses correctly at the >=90rem tier below (there: 310px-wide caption,
   left:-240px against a 220px-wide visible image = the caption's right
   edge sits 70px/32% into the image, which is blank background in the
   photo, not the body) and scaling that same 32% overlap and the vertical
   top offset down by this tier's own image width ratio (156/346 = 0.451)
   instead of reusing the wide tier's absolute pixel values unscaled. */
@media (min-width: 48rem) and (max-width: 89.99rem) {
	.cuhk-deans-photo-caption {
		top: 126px;
		left: -258px;
	}
}
@media (max-width: 47.99rem) {
	/* Stack the two columns (below the 48rem breakpoint above) instead of
	   the 50/50 side-by-side split. Overrides the columns' own inline
	   flex-basis:50% style, so needs !important (inline styles otherwise
	   beat any external rule - same reason already noted elsewhere in this
	   file).

	   Needs BOTH rules below - confirmed the hard way, one alone isn't
	   enough:
	   - The row itself (.wp-block-columns) is flex-wrap:nowrap here (not
	     "wrap" - checked directly, don't assume). Without forcing wrap,
	     two columns both set to flex-basis:100% just compete for the same
	     nowrap row and shrink back down to ~50/50 each instead of
	     wrapping onto their own lines.
	   - Even with wrap forced, each individual column also needs its own
	     flex-basis:100% override, or it stays at its own 50% share of
	     whatever row width remains.

	   Every selector here is a single :has(), never one nested inside
	   another :has() - confirmed the hard way that a nested-:has()
	   selector is flatly invalid (querySelectorAll throws, and the WHOLE
	   CSS rule is silently dropped, not partially applied), which is why
	   an earlier version of this block never took effect at all despite
	   looking like it worked at <=768px - that was actually WordPress's
	   own separate, unrelated 782px column-stacking default doing it
	   instead. The text column is identified via its next-sibling
	   relationship to the photo column rather than a nested :has().

	   flex-wrap needs !important too: WP prints this exact columns
	   instance's own layout-support CSS as flex-wrap:nowrap via an
	   auto-generated single-class selector
	   (.wp-container-core-columns-is-layout-<hash>) that a plain
	   (non-important) rule here doesn't reliably beat - the identical
	   issue already found and fixed the same way on the footer's sitemap
	   columns earlier this session (see cuhk-footer.css's own note on
	   this). */
	.wp-block-columns:has(> .wp-block-column > .cuhk-deans-photo) {
		flex-wrap: wrap !important;
	}
	.wp-block-column:has(> .cuhk-deans-photo),
	.wp-block-column:has(+ .wp-block-column > .cuhk-deans-photo) {
		flex-basis: 100% !important;
	}
	/* Center the (still narrow, 156px) photo+caption block instead of the
	   wide-screen right-alignment. */
	.wp-block-column:has(> .cuhk-deans-photo) {
		justify-content: center;
	}
	/* .cuhk-deans-photo's own margin-left:30px (below) exists to create a
	   gap from the text column in the wide-screen side-by-side layout -
	   left uncleared here it skews center alignment 15px off true center
	   (confirmed the hard way: measured 112px/82px left/right gaps at
	   390px instead of matching). */
	.cuhk-deans-photo {
		margin-left: 0;
	}
	.cuhk-deans-photo img {
		left: 140px;
	}
}
@media (min-width: 90rem) {
	.cuhk-deans-photo {
		width: 346px;
	}
	.cuhk-deans-photo-caption {
		/* top: 480px;
		left: -200px;
		width: 300px;
		padding: 52px 50px 52px 52px; */
		
    top: 280px;
    left: -240px;
    padding: 32px 32px 32px 32px;
    width: 310px;
	}
}
/* !important on margin: these h3/p blocks are the SAME blocks 0019 moved
   here from the old design (plain body text below the message), where
   they'd been given an explicit margin:0 inline style (higher precedence
   than any external stylesheet rule, short of !important) - confirmed by
   inspecting the actual rendered HTML, still carrying
   style="margin-top:0;...". font-family also needs to be forced: Twenty
   Twenty-Five's own global styles set Noto Sans on .wp-block-heading with
   enough specificity to win otherwise - same reason cuhk-header.css /
   cuhk-footer.css both explicitly redeclare Myriad Pro rather than
   relying on inheritance. */
.cuhk-deans-photo-caption h3 {
	margin: 0 0 15px !important;
	font-family: "Myriad Pro", "Noto Sans TC", "Noto Sans SC", ui-sans-serif, system-ui, sans-serif !important;
	font-size: 1rem;
	font-weight: 700;
	line-height: 24px;
	color: var(--util-700);
}
.cuhk-deans-photo-caption p {
	margin: 0 !important;
	font-family: "Myriad Pro", "Noto Sans TC", "Noto Sans SC", ui-sans-serif, system-ui, sans-serif;
	font-size: 1rem;
	font-weight: 300;
	line-height: 24px;
	letter-spacing: normal;
	color: var(--util-700);
}