/* 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;
	/* Issues PDF 20260908 #8: "The Image should vertically align middle
	   when layout is 2 columns" - explicit, literal ask, taken at face
	   value: true center against the full text column, not a proportional
	   match to where the client's own (likely viewport-cropped, not
	   full-height) reference screenshot happened to show it. center
	   avoids the same stretch bug flex-start was originally chosen to
	   avoid (only align-items:stretch overrides .cuhk-deans-photo's own
	   aspect-ratio - confirmed the hard way, wrapper rendered 630px tall
	   instead of its intended height - center doesn't). */
	align-items: center;
}
.cuhk-deans-photo {
	position: relative;
	/* Client: "the image size for tablet and desktop should refer to the
	   PDF proposed layout image" - measured directly off the source PDF's
	   own embedded screenshot (page 8, pixel-analyzed): photo diameter is
	   ~39% of the text column's own width there (198px circle / ~510px
	   text column). Applied that ratio to this tier's actual measured
	   column width at its own breakpoint floor (1024px viewport -> 467px
	   column): 467 * 0.39 ~= 180px. (>=90rem tier's existing 230px was
	   left alone - not requested, and already sits close to this same
	   ratio against ITS column width, 230/625 ~= 37%, so no discrepancy
	   there to fix.) */
	width: 180px;
	/* Issues PDF 20260908 #8: new profile photo (attachment 7168) is a
	   plain 742x742 square - the circular purple-background look is
	   baked into the image asset itself, not a CSS crop - replacing the
	   old photo's 434/1283 tall-crop ratio this wrapper was originally
	   sized for. */
	aspect-ratio: 1 / 1;
	margin: 0 0 0 30px;
}
.cuhk-deans-photo img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	/* max-width:220px removed: it capped the OLD tall (434/1283) image
	   below the wrapper's own width at the >=90rem tier (346px) - tuned
	   for that image's specific visual balance. With the new square
	   photo this left the wrapper 126px taller than the actually-visible
	   (220px-capped) image, which the caption box (now sized to match
	   the wrapper, to stay flush with the photo - see below) inherited
	   as extra empty space. width/height:100% (rather than height:auto)
	   fills the wrapper exactly at every tier now that both are the same
	   1:1 aspect ratio, so there's no gap left to inherit. */
}
.cuhk-deans-photo-caption {
	position: absolute;
	/* Client: "the profile pic and name box should align bottom" (tablet +
	   desktop) - pixel-measured directly off the PDF's own screenshot: the
	   box's bottom edge and the photo circle's bottom edge land at the
	   EXACT same y (both end at y=768 in the source page render), while
	   the box's shorter height leaves it starting well below the circle's
	   own top. That's a bottom anchor, not a center - the previous
	   top:50%/translateY(-50%) instead centered the box's own midpoint
	   against the wrapper's midpoint, which (since the wrapper's height
	   equals the photo's) put equal box-overhang above AND below the
	   photo's own vertical middle - visibly different from, and shorter
	   than, the PDF's actual bottom-flush relationship. bottom:0 anchors
	   the box to the wrapper's (=photo's) bottom edge directly; it only
	   ever grows upward from there as its own text content requires. */
	top: auto;
	bottom: 0;
	transform: none;
	/* Client's explicit ask: "the part of the profile image should cover
	   the name text box" - the photo IS meant to overlap the box's right
	   portion (matching the original bschool.cuhk.edu.hk Portrait
	   component this was modeled on), not sit fully clear of it.
	   Overlap = 90px = this tier's own photo RADIUS (half of 180px), not
	   an arbitrary ratio - geometric reason, not a style choice: the box
	   is now bottom-aligned exactly flush with the circle (see bottom:0
	   above), and a circle only touches its own bottom-most pixel ROW at
	   ONE point (dead center) - ANY box whose right edge stops short of
	   that center point leaves a visible square corner poking out past
	   the circle's curve there (client screenshot, circled: exactly this,
	   at the previous 57px/~32%-ratio overlap). Pushing the right edge to
	   the center point is the mathematical closest a flat corner can get
	   to full coverage without also insetting the box above the exact
	   bottom row (which would undo the align-bottom fix). left = -(width
	   - 90). The text itself must never reach the overlapped zone, which
	   is what actually broke before (not the overlap existing at all) -
	   solved with generous right padding (108px, comfortably more than
	   the 90px overlap) below, not by removing the overlap. */
	left: -315px;
	right: auto;
	/* Client: "each line of text in name box should be in 1 line only" -
	   the box's width (300px, 198px of actual content once padding was
	   subtracted) was narrower than the longest real line's own natural
	   width at this font-size: measured via Playwright (temporarily
	   width:max-content + white-space:nowrap on the live text nodes),
	   "Choh-Ming Li Professor of Economics" needs 262px un-wrapped -
	   that's what was actually wrapping onto a 2nd line, not the shorter
	   SC/TC lines. Widened to fit that longest line (262px) plus this
	   padding (27+75) with a little slack: 262+27+75=364, +~8px safety.
	   left recalculated from the same left=-(width-overlap) formula as
	   before, overlap now 90px (see left/overlap comment above) - width
	   grows by the same +33px the overlap did (372+33=405), so the
	   content/padding-left side (and therefore the text) doesn't move at
	   all - only the right edge extends further right. */
	width: 405px;
	background-color: #f7f7f7;
	padding: 30px 108px 27px 27px;
}
@media (min-width: 48rem) and (max-width: 63.99rem) {
	/* Client: same PDF-ratio resize as the base (desktop) rule above,
	   using this tier's own column width instead. WP core's own 782px
	   column-stacking default (not this file's 48rem/768px breakpoint)
	   is the tier's actual effective floor for a real 2-column layout -
	   confirmed via Playwright, columns stay stacked (full-width) from
	   768-781px regardless of this custom breakpoint - so 782px's
	   measured column width (351.5px) is the right reference, not 768px's.
	   351.5 * 0.39 ~= 135px. Overlap/padding scaled the same way as the
	   base rule (135 * ~0.32 ~= 43px overlap, padding-right comfortably
	   past that). Box width (250px) left as-is, same reasoning as the
	   base rule's 300px - box width follows its own text content, not the
	   photo's size. top/bottom/transform are NOT overridden here - they
	   inherit the base rule's new bottom:0 anchor directly (this tier
	   never had its own vertical-position override to begin with). */
	.cuhk-deans-photo {
		/* Client: "the image should be a bit taller than the name box" -
		   measured via Playwright, the box's own content height at this
		   tier is 133px, only 2px shorter than the 135px photo above -
		   technically taller but too marginal to read as "a bit taller"
		   (and fragile against any small font-metric rounding
		   difference). Bumped to 145px for a clearer ~12px margin, still
		   close to the PDF-derived ~39% column-width ratio (145/351.5 ~=
		   41%). */
		width: 145px;
	}
	.cuhk-deans-photo-caption {
		/* Client: same no-wrap widening as the base rule, same longest-line
		   measurement (262px, font-size is 1rem here too - not overridden
		   per-tier). 262+22+60=344, +safety -> 352px; left recalculated
		   from left=-(width-overlap). Overlap follows this tier's own
		   photo radius (145/2 ~= 73px) for the same corner-coverage fix
		   as the base rule - see its comment for the geometry. Width/
		   padding-right grow by the same amount the overlap did, so the
		   left/text side doesn't shift. Client: "name box and image
		   align bottom" - already inherited from the base rule's
		   bottom:0/transform:none (not overridden here, same as before -
		   this tier never had its own vertical-position override). */
		left: -309px;
		padding: 24px 90px 22px 22px;
		width: 382px;
	}
}
@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;
	}
	/* Client's explicit ask: image stays on the RIGHT of the text box at
	   mobile width too (not stacked below it) - the desktop wrapper's own
	   156px width plus the caption's 300px width (minus overlap) is too
	   wide for a phone screen, so this tier uses smaller, purpose-sized
	   dimensions instead of reusing the desktop ones. .cuhk-deans-photo
	   becomes the outer bounding box for the WHOLE photo+caption unit
	   (photo pinned to its right edge, caption to its left edge) so that
	   centering the wrapper via the column's justify-content:center
	   (still in effect, untouched by this tier) centers the pair as one
	   block, rather than only centering the photo and leaving the
	   absolutely-positioned caption to float off wherever its own left
	   value happens to land relative to that. */
	/* Client-reported (2nd pass): still too large at 80px - reduced
	   further to 65px, unit/box scaled to match (kept the same ~24%
	   overlap / >buffer padding relationship: 17px overlap into a 65px
	   photo). */
	.cuhk-deans-photo {
		/* Client: "the image should be a bit taller than the name box,
		   just like how the desired PDF layout is" - matches the same
		   photo-taller-than-box relationship already implemented for
		   tablet/desktop/wide (there via bottom-alignment; here, both
		   photo and box already share a top:0 anchor, so simply sizing
		   the photo taller than the box's own content height achieves
		   the same visual relationship without needing to change the
		   anchor). Bumped 65->85px (comfortably above the caption's own
		   ~79px content height, measured via Playwright); unit width
		   grows to match (270->290px, see below) - re-verify this still
		   clears this tier's narrowest tested column (280px at 320px
		   viewport) after the resulting box-width recompute. */
		width: 290px;
		height: 85px;
		aspect-ratio: auto;
	}
	.cuhk-deans-photo img {
		position: absolute;
		top: 0;
		right: 0;
		left: auto;
		bottom: auto;
		width: 85px;
		height: 85px;
	}
	.cuhk-deans-photo-caption {
		/* Client: "on mobile mode, also make sure name box and image
		   align bottom" - now matches the SAME bottom:0/transform:none
		   mechanism as the tablet/desktop/wide tiers (the base rule
		   further up this file), rather than this tier's previous
		   top-anchored override. That top-anchor existed specifically
		   because the box's own content used to be TALLER than this
		   tier's photo (79px box vs a 65px-tall photo) - bottom- (or
		   center-) anchoring it would have pushed the box's top edge
		   above the wrapper's own top, into the paragraph text above
		   (confirmed the hard way, see git history). Now that the photo
		   is deliberately sized taller than the box (85px vs 79px, see
		   .cuhk-deans-photo's width/height comment above), the box's top
		   edge stays a few px BELOW the wrapper's own top even when
		   bottom-anchored - the exact same safety margin the tablet/
		   desktop/wide tiers already rely on - so the top-anchor
		   workaround is no longer needed and would now just contradict
		   the client's explicit bottom-align ask. top/bottom/transform
		   are therefore NOT overridden here at all anymore - this tier
		   inherits the base rule's bottom:0/transform:none directly. */
		left: 0;
		/* Client: "each line of text in name box should be in 1 line
		   only" - a 122px box (84px of content once padding was
		   subtracted) was nowhere near enough for "Choh-Ming Li Professor
		   of Economics", the longest real line, which needs 262px at the
		   base 1rem font-size - and this tier's own available column is
		   only 280px wide at its narrowest tested viewport (320px), too
		   little to fit that un-shrunk. Text is scaled down specifically
		   at this tier (font-size 1rem -> 0.7rem below) so the longest
		   line's own natural width shrinks to ~183px, small enough to fit
		   a box that still comfortably clears the 280px column budget
		   once photo width + overlap are accounted for (see the
		   .cuhk-deans-photo width comment above). */
		/* Same corner-coverage fix as the base (desktop) rule's overlap
		   bump - see its comment for the geometry: overlap widened to
		   reach this tier's own photo radius (85/2 ~= 43px, up from
		   33px) - width/padding-right grow by the same +10px the overlap
		   did, so the left/text side doesn't move. */
		width: 248px;
		padding: 8px 50px 8px 8px;
	}
	/* !important: the unconditional h3/p font-size/line-height rule further
	   down this file (font-size:1rem) sits AFTER this media query in
	   source order - confirmed the hard way already, elsewhere in this
	   file (the h3 margin rule, the breadcrumb flex-wrap fix), that equal-
	   specificity same-selector rules resolve by source order regardless
	   of which one is inside a media query; without !important here the
	   later unconditional rule would silently win at every viewport width,
	   including this one, and undo the mobile-specific shrink below. */
	.cuhk-deans-photo-caption h3,
	.cuhk-deans-photo-caption p {
		font-size: 0.7rem !important;
		line-height: 16px !important;
	}
	.cuhk-deans-photo-caption h3 {
		margin-bottom: 6px !important;
	}
}
@media (min-width: 90rem) {
	/* Client-reported: 346px read as too large - reduced ~35% to 230px. */
	.cuhk-deans-photo {
		width: 230px;
	}
	.cuhk-deans-photo-caption {
		/* bottom:0/transform:none from the base rule still applies here
		   (not overridden) - box stays bottom-flush with the photo at
		   this tier too. Client: same no-wrap widening as the base rule -
		   262+32+90=384, +safety -> 392px; left = -(width-overlap).
		   Overlap bumped 70->115px (this tier's own photo radius, 230/2)
		   for the same corner-coverage fix as the base rule - see its
		   comment for the geometry. Width/padding-right grow by the same
		   +45px the overlap did, so the left/text side doesn't shift. */
		left: -322px;
		padding: 32px 135px 32px 32px;
		width: 437px;
	}
}
/* !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. */
/* Client: "each line of text in name box should be in 1 line only" - every
   tier's box width above was sized specifically to fit these lines' own
   natural (un-wrapped) width, so this is belt-and-braces rather than the
   actual mechanism: guards against a browser/font-metric rounding edge case
   pushing a line 1px past its box and wrapping anyway. */
.cuhk-deans-photo-caption h3,
.cuhk-deans-photo-caption p {
	white-space: nowrap;
}
.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);
}