/* wyg-css-person-card
 *
 * The People components, shared rather than page-scoped: About Us places all of
 * them, and any later People surface reuses them instead of restyling.
 *
 *   .wyg-oval            the portrait, at card / quote / pop-up sizes
 *   .wyg-person-card     the Board and Advisory Committee card (loop item 491)
 *   .wyg-fellow-row      the Fellows names-only row (loop item 495)
 *   .wyg-person-bio      the bio pop-up body (template 492)
 *
 * Typography reads the kit's own token variables rather than binding a
 * typography global, per page-build-conventions 3b-i: binding emits a 0,5,0
 * rule carrying every property in the group, including an undefined
 * letter-spacing that resolves to unset and still beats these rules.
 *
 * Color, padding, border, background and alignment are NOT here. They are set
 * on the widget and container controls, per 5-i, so the editor and the front
 * end agree.
 *
 * Every component selector doubles its own class, per 5a. The generated
 * post-<id>.css emits `.elementor-widget-heading .elementor-heading-title` at
 * 0,2,0 and loads after the snippets.
 */

/* ---------------------------------------------------------------- the oval */

.wyg-oval {
	display: block;
	inline-size: 100%;
	max-inline-size: 230px;
	aspect-ratio: 4 / 5;
	border-radius: 50%;
	overflow: hidden;
	border: 4px solid var( --e-global-color-0e573e58 );
	background: #EDE7DC;
	margin-inline: auto;
	flex: none;
	transition: box-shadow .2s cubic-bezier( .2, .6, .3, 1 );
}

.wyg-oval .wyg-oval__img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	/* One value for every portrait. Five of the twelve carry a different
	 * object-position in the mockup; Todd chose the uniform 18% on 21 August
	 * rather than add a per-person field. Retuning it is this one number. */
	object-position: center 18%;
	display: block;
}

.wyg-oval--none {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var( --e-global-color-83bd7746 );
}

.wyg-oval--none .wyg-oval__initials {
	font-weight: 900;
	font-size: 2.4rem;
	line-height: 1;
	color: var( --e-global-color-primary );
}

/* ----------------------------------------------------------- the card ---- */

/* The card is a centered flex column, so each widget shrinks to its own content
 * width. The oval widget's content is an inline span whose width comes from the
 * image -- which, before the image loads, is nothing: measured 8px wide, giving
 * an 8x10 oval that then never intersects enough to trigger the lazy loader, so
 * it stays empty for good. The width belongs on the flex item; the oval centers
 * itself inside it with max-inline-size and an auto inline margin.
 * Measured 21 August, and the reason the fix is here and not on the loading
 * attribute, which was the first and wrong diagnosis. */
.wyg-person-card__oval.wyg-person-card__oval {
	inline-size: 100%;
}

.wyg-person-card.wyg-person-card {
	text-align: center;
	block-size: 100%;
}

.wyg-person-card:hover .wyg-oval,
.wyg-person-card:focus-within .wyg-oval {
	box-shadow: 0 0 0 5px rgba( 146, 80, 56, .14 );
}

.wyg-person-card__name.wyg-person-card__name .elementor-heading-title {
	font-size: var( --e-global-typography-a66c1ed1-font-size );
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: -.008em;
	margin-block-start: 1.1rem;
}

.wyg-person-card__role.wyg-person-card__role .elementor-heading-title {
	font-family: var( --wyg-mono );
	font-size: calc( var( --e-global-typography-1c3ea07a-font-size ) * var( --wyg-label-size-scale, 1 ) );
	font-weight: var( --wyg-label-weight, 400 );
	text-transform: uppercase;
	letter-spacing: .04em;
	line-height: 1.6;
}

.wyg-person-card__teaser.wyg-person-card__teaser .elementor-heading-title {
	font-size: var( --e-global-typography-fd54d4a4-font-size );
	line-height: 1.5;
	font-weight: 400;
}

/* The trigger sits last and is pushed to the bottom so a row of cards with
 * different teaser lengths still lines its rules up. */
.wyg-person-card__more.wyg-person-card__more {
	margin-block-start: auto;
	inline-size: 100%;
	padding-block-start: .65rem;
	border-block-start: 1px solid var( --e-global-color-3e660e4c );
}

.wyg-person-card__more.wyg-person-card__more .ue-dynamic-popup-trigger {
	display: flex;
	justify-content: center;
	align-items: center;
	min-block-size: 36px;
	cursor: pointer;
	font-family: var( --wyg-mono );
	font-size: calc( var( --e-global-typography-1c3ea07a-font-size ) * var( --wyg-label-size-scale, 1 ) );
	font-weight: var( --wyg-label-weight, 600 );
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var( --e-global-color-accent );
	text-decoration: none;
	background: none;
	border: 0;
}

.wyg-person-card__more.wyg-person-card__more .ue-dynamic-popup-trigger:hover {
	color: #7C432F;
}

/* The trailing arrow, per page-build-conventions 12b-ii: a pseudo-element, never
 * a character in the label, so it stays out of the accessible name and can flip
 * for right-to-left. */
.wyg-person-card__more.wyg-person-card__more .ue-dynamic-popup-trigger::after {
	content: "\2192";
	margin-inline-start: .4rem;
	font-size: 1.05em;
	line-height: 1;
}

[dir="rtl"] .wyg-person-card__more.wyg-person-card__more .ue-dynamic-popup-trigger::after {
	content: "\2190";
}

/* UE renders the trigger as an <a> with no href, which is not focusable.
 * wyg-js-person adds tabindex and role; this is the ring that goes with it,
 * matching wyg-css-global's. */
.wyg-person-card__more.wyg-person-card__more .ue-dynamic-popup-trigger:focus-visible {
	outline: 3px solid var( --e-global-color-accent );
	outline-offset: 3px;
	border-radius: 2px;
}

/* ------------------------------------------------------- the fellows row - */

.wyg-fellow-row.wyg-fellow-row {
	break-inside: avoid;
}

.wyg-fellow-row__name.wyg-fellow-row__name .elementor-heading-title {
	font-size: var( --e-global-typography-a66c1ed1-font-size );
	font-weight: 700;
	line-height: 1.6;
}

.wyg-fellow-row__aff.wyg-fellow-row__aff .elementor-heading-title {
	font-size: var( --e-global-typography-1c3ea07a-font-size );
	font-weight: 400;
	line-height: 1.6;
	margin-block-start: .15rem;
}

/* ------------------------------------------------------- the bio pop-up --- */

.wyg-person-bio.wyg-person-bio {
	padding: 2.25rem 2.25rem 2.5rem;
}

/* Left-aligned always, photo then name, regardless of how long the name is.
 * Gabi, 9 August: the header was rebalancing itself per person and reading
 * inconsistent. */
.wyg-person-bio__head.wyg-person-bio__head {
	text-align: start;
}

.wyg-person-bio__oval.wyg-person-bio__oval .wyg-oval {
	inline-size: 135px;
	max-inline-size: 135px;
	margin-inline: 0;
}

.wyg-person-bio__oval.wyg-person-bio__oval .wyg-oval--none .wyg-oval__initials {
	font-size: 1.6rem;
}

.wyg-person-bio__name.wyg-person-bio__name .elementor-heading-title {
	font-size: var( --e-global-typography-95a228b0-font-size );
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -.012em;
}

.wyg-person-bio__role.wyg-person-bio__role .elementor-heading-title {
	font-family: var( --wyg-mono );
	font-size: calc( var( --e-global-typography-fd54d4a4-font-size ) * var( --wyg-label-size-scale, 1 ) );
	font-weight: var( --wyg-label-weight, 600 );
	text-transform: uppercase;
	letter-spacing: .04em;
}

.wyg-person-bio__text.wyg-person-bio__text {
	font-size: var( --e-global-typography-fd54d4a4-font-size );
	line-height: 1.65;
}

/* Descendant, not `>`: the editor wraps a text editor's content in a div the
 * front end does not, so a child selector silently fails there (12e). */
.wyg-person-bio__text.wyg-person-bio__text p {
	margin-block-end: 1.125rem;
}

.wyg-person-bio__text.wyg-person-bio__text p:last-child {
	margin-block-end: 0;
}

/* 480px, NOT the mockup's 720px, and this is the whole point of the number:
 * the pop-up renders inside a fixed-width iframe, so a viewport media query in
 * here measures THE DIALOG, not the visitor's screen. The dialog is 620px on a
 * desktop and about 350px on a phone. Written at 1000px -- a faithful port of
 * the mockup's own breakpoint -- this block fired on every screen ever, which
 * is why the head stacked, the padding dropped to 1.5rem and the oval sat at
 * 130px on a 2560px monitor. 480 is the one value that separates the two real
 * dialog widths. (HO-45, Userback z92046kz2j)
 *
 * Anything added here must be judged against 620 and 350, never against a
 * screen size. */
@media ( max-width: 480px ) {

	.wyg-person-bio.wyg-person-bio {
		padding: 1.5rem 1.25rem;
	}

	.wyg-person-bio__head.wyg-person-bio__head {
		flex-direction: column;
		align-items: flex-start;
	}

	.wyg-person-bio__oval.wyg-person-bio__oval .wyg-oval {
		inline-size: 130px;
		max-inline-size: 130px;
	}
}

/* The pop-up's own width control is a fixed pixel value with no responsive
 * variant, so at 390px the 620px frame hung 250px off the side of the page and
 * gave the whole document a horizontal scrollbar. Measured 21 August. The cap
 * is on the frame rather than the control so the desktop width stays exact. */
/* !important, and it is earned: UE prints the width as an inline <style> block
 * keyed to the widget's id -- #uc_dynamic_popup_elementor_<id> ... -- which is a
 * 1,0,0 selector no class rule can reach. This is the one declaration in the
 * file that needs it. */
.ue-dynamic-popup-inner.ue-dynamic-popup-inner,
.ue-dynamic-popup-iframe-holder.ue-dynamic-popup-iframe-holder,
.ue-dynamic-popup-iframe-holder.ue-dynamic-popup-iframe-holder .uc-iframe {
	max-inline-size: calc( 100vw - 2.5rem ) !important;
}

/* 🚨 THE CAP ABOVE WAS HALF A FIX, AND THE MISSING HALF IS WHY THE DIALOG WAS
   STILL RUNNING OFF THE EDGE. HO-52, 23 August 2026, measured at 431px.

   The `popup_width` control does not only emit a width. Elementor writes it
   into post-119.css as a MIN-width as well:

     .elementor-119 .elementor-element.elementor-element-wygabpp2 .uc-iframe,
     .elementor-119 .elementor-element.elementor-element-wygabpp2 .ue-dynamic-popup-iframe-holder
     { min-width: 620px }

   In CSS a min-width ALWAYS beats a max-width -- the used value is clamped
   upward last -- so the cap above computed correctly and changed nothing. What
   was measured at a 431px viewport: `.ue-dynamic-popup-inner` obeyed the cap and
   came out at 391px, while the holder and the iframe inside it stayed 620px and
   ran to x=640, 209px past the right edge of the screen. The dialog's own
   `overflow: hidden` on `.ue-dynamic-popup-inner` clipped it, which is why no
   horizontal page scrollbar appeared and HO-45's zero-overflow check passed
   while a third of every bio was unreachable. Todd's report -- "popup creeping
   over the edge, close button partly off-screen" -- is that clipped edge.

   ZEROING THE MIN IS THE WHOLE FIX. Once the floor is gone the cap already in
   place does the work, and the iframe reflows to the real dialog width.

   VERTICAL SCROLL COMES FROM THE SAME CHANGE, not from a second rule. UE sizes
   the iframe to its content and caps it inline at `max-height: 100vh`. That
   measurement is taken while the frame is still 620 wide; reflowed to ~390 the
   same bio is roughly half again as tall, overruns the capped frame, and the
   iframe's own document scrolls -- which is the behaviour Todd asked for, and
   which nothing in this file has to add. Do NOT reach for `overflow-y: auto` on
   `.ue-dynamic-popup-inner`: the scrolling content is inside the iframe, and
   that rule would scroll an empty box.

   Not done with the control instead, per page-build-conventions 5-i, because no
   control expresses it: `popup_width` is a fixed pixel value, so even a
   responsive variant could not fill a viewport that is 390 on one phone and 431
   on another. A fluid width is CSS's job here. */
/* 🚨 AND THE FLOOR CANNOT SIMPLY BE REMOVED -- measured, after trying exactly
   that. `min-width: 620px` is not a floor UNDER a width, it IS the width: the
   dialog's specified width is auto all the way up, `.ue-dynamic-popup-inner` is
   a shrink-to-fit flex item sized by its content, and that content is the
   holder, whose only width declaration is the min. Setting `min-inline-size: 0`
   therefore collapsed the entire dialog to 0x932 -- overlay visible, opacity 1,
   nothing in it. So the floor is CLAMPED rather than dropped, which lowers it on
   a narrow screen and leaves it untouched on a wide one.

   🚨 620px MIRRORS THE `popup_width` CONTROL on wygabpp2 and wygabpp3. It is a
   hardcoded copy of a value that lives in Elementor, which is exactly what
   conventions 5-i tells you not to do -- and it is here because the control
   cannot express the other half of the clamp. If anyone changes the pop-up
   width in the editor, this number has to change with it or the dialog will be
   the wrong width on desktop. Nothing warns you. */
.ue-dynamic-popup-iframe-holder.ue-dynamic-popup-iframe-holder,
.ue-dynamic-popup-iframe-holder.ue-dynamic-popup-iframe-holder .uc-iframe {
	min-inline-size: min( 620px, calc( 100vw - 2.5rem ) ) !important;
}