/* wyg-css-about
 *
 * About Us page residue only -- the parts Elementor has no control for. The
 * people components themselves live in wyg-css-person-card, because About Us is
 * not the only page that will ever place them.
 *
 * Same rules as every page file: doubled component classes (5a), logical
 * properties only (5c), typography read from the kit's token variables rather
 * than bound as a global (3b-i), and everything a widget control can express
 * left on the widget (5-i).
 */

/* ---------------------------------- shared section furniture -- MOVED OUT ---
 *
 * HO-49, 23 August 2026. `.wyg-sec-label` and `.wyg-sec-title` are now owned by
 * `wyg-css-shared` (60), site-wide, at priority 5.
 *
 * 🚨 THIS FILE WAS THE BLEED. It styled those two shared classes at 0,3,0 with
 * no load condition, tying `wyg-css-homepage`'s rules and winning on file order,
 * so About Us's `margin-block-end` of .75rem and 1.75rem silently governed the
 * homepage, Research & Publications, News & Media and Programs & Workshops. Two
 * Userback spacing tickets against Programs & Workshops (#8244819, #8244823)
 * were this file. Nothing on About Us changes: those exact two values are what
 * `wyg-css-shared` now ships as the site default, on Todd's decision, because
 * four client-approved pages had already been reviewed rendering them.
 *
 * A future About-only variation goes here at 0,4,0 under an `.wyg-about-*`
 * scope. It does not go back into an unscoped rule.
 * -------------------------------------------------------------------------- */

/* -------------------------------------------------- organizational history */

.wyg-about-history__prose.wyg-about-history__prose p {
	margin-block-end: 1.125rem;
}

.wyg-about-history__prose.wyg-about-history__prose p:last-child {
	margin-block-end: 0;
}

/* The plate: a warm keyline with the heavy brown rule under it, the same
 * treatment the essay pages use for a figure. */
.wyg-about-history__plate.wyg-about-history__plate img {
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
	border: 1px solid var( --e-global-color-5f8039f0 );
	border-block-end: 6px solid var( --e-global-color-0e573e58 );
	background: #EDE7DC;
}

/* ------------------------------------------------------- the mission quote */

.wyg-about-quote__name.wyg-about-quote__name .elementor-heading-title {
	font-size: var( --e-global-typography-a66c1ed1-font-size );
	font-weight: 800;
	line-height: 1.25;
}

/* `text-wrap: balance` rather than a break typed into the field: the role is
 * content, and content fields hold content. It evens "LATIN PATRIARCH OF /
 * JERUSALEM" into "LATIN PATRIARCH / OF JERUSALEM" and keeps doing the same
 * job in Hebrew and Arabic, which a hand-placed break could not.
 * (Userback z92046kz2a) */
.wyg-about-quote__role.wyg-about-quote__role .elementor-heading-title {
	text-wrap: balance;
	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;
}

/* The portrait is smaller here than on a card, and sits on the warm surface
 * rather than on white -- which is exactly why the headshots keep their alpha
 * channel instead of having a background baked in. */
.wyg-about-quote__oval.wyg-about-quote__oval .wyg-oval {
	inline-size: 170px;
	max-inline-size: 170px;
}

/* The opening quotation mark is decoration, so it is drawn rather than typed:
 * a typed one would be read out before the quotation itself. */
/* The accent rule belongs to the QUOTATION, not to each paragraph. Written on
 * the paragraph it repeated once per paragraph -- two side rules with a gap
 * between them at desktop, two stacked top rules at tablet and below. The
 * mockup draws one, on `blockquote`; this wrapper is our blockquote. (HO-45) */
.wyg-about-quote__blockquote.wyg-about-quote__blockquote {
	position: relative;
	padding-block-start: 3.1rem;
	border-inline-start: 3px solid var( --e-global-color-accent );
	padding-inline-start: 1.5rem;
}

.wyg-about-quote__blockquote.wyg-about-quote__blockquote::before {
	content: "\201C";
	position: absolute;
	inset-block-start: -.6rem;
	inset-inline-start: 0;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 4rem;
	line-height: 1;
	color: var( --e-global-color-83bd7746 );
	pointer-events: none;
}

.wyg-about-quote__blockquote.wyg-about-quote__blockquote p {
	font-size: var( --e-global-typography-95a228b0-font-size );
	line-height: 1.55;
	font-weight: 600;
	font-style: italic;
	letter-spacing: -.008em;
	margin-block-end: 1.125rem;
}

.wyg-about-quote__blockquote.wyg-about-quote__blockquote p:last-child {
	margin-block-end: 0;
}

/* The ghost button: same metrics as every other button on the site (56px tall,
 * 15px / 700 / 0.02em), 2px border with 14px 24px padding to land there. */
.wyg-about-quote__more.wyg-about-quote__more .elementor-button {
	background: transparent;
	color: var( --e-global-color-primary );
	border: 2px solid var( --e-global-color-primary );
	border-radius: 4px;
	padding: 14px 24px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .02em;
	inline-size: auto;
	flex-basis: auto;
}

.wyg-about-quote__more.wyg-about-quote__more .elementor-button:hover,
.wyg-about-quote__more.wyg-about-quote__more .elementor-button:focus {
	background: var( --e-global-color-accent );
	border-color: var( --e-global-color-accent );
	color: var( --e-global-color-a5f61243 );
}

.wyg-about-quote__more.wyg-about-quote__more .elementor-button-content-wrapper::after {
	content: "\2192";
	align-self: center;
	margin-inline-start: .5rem;
	font-size: 1.05em;
	line-height: 1;
}

[dir="rtl"] .wyg-about-quote__more.wyg-about-quote__more .elementor-button-content-wrapper::after {
	content: "\2190";
}

/* ---------------------------------------------------------- mission body -- */

/* The measure goes on the widget at 0,5,0, mirroring the shape of Elementor's
 * own framework rule, which sets max-width on .elementor-widget at 0,4,0 and
 * loads after the snippets (5a). */
.elementor.elementor .e-con .elementor-widget.wyg-about-mission__prose {
	max-inline-size: 88ch;
}

.wyg-about-mission__prose.wyg-about-mission__prose p {
	margin-block-end: 1.125rem;
}

.wyg-about-mission__prose.wyg-about-mission__prose p:last-child {
	margin-block-end: 0;
}

/* ----------------------------------------------------------- people grids - */

/* The column count is NOT here. It is `number_of_columns` on each Loop Grid --
 * UE emits it into post-119.css at 0,3,0, responsive (4 / 2 / 1), and that file
 * loads after the snippets, so a 0,3,0 rule written here ties and loses on
 * source order. An `auto-fit minmax()` rule that lived here until HO-45 was
 * inert for exactly that reason, and would have produced 5 columns rather than
 * the mockup's 4 if it had ever won. Change columns on the widget.
 *
 * `display: grid` on the item, not `display: flex`. Both give equal-height
 * cards; only grid gives full-WIDTH ones. As a flex item the loop-item wrapper
 * takes `flex: 0 1 auto`, so it sizes to max-content and any card whose copy is
 * short stops short of its track -- Daniel Schwake's rendered 268px inside a
 * 320px column while the other twelve happened to exceed 320 and clamped to it.
 * A grid item stretches on both axes by default, so every card fills its track
 * whatever its copy length. (HO-45; it read as an uneven gutter, not as a
 * narrow card.)
 */
/* HO-82, 26 August 2026: the Advisory Committee left this rule when it stopped
 * being a card grid and became a names list on loop item 495. `display: grid` on
 * the item is what makes a CARD fill its track; on a list row it forced a
 * single 680px track and the list ran the full 1400px. The Board still needs it. */
.wyg-about-board__grid.wyg-about-board__grid .ue-grid-item {
	display: grid;
	overflow: visible;
}

/* --------------------------------------------------------------- fellows -- */

.elementor.elementor .e-con .elementor-widget.wyg-about-fellows__intro {
	max-inline-size: 76ch;
}

.wyg-about-fellows__intro.wyg-about-fellows__intro {
	margin-block-end: 2.5rem;
}

/* Both section intros are the mockup's `.section-intro`: WYG / Small, not body
 * size. Left to inherit they took the kit's body 19px, which also inflated the
 * shared 76ch measure from the mockup's 684px to 866px -- one wrong size, two
 * wrong numbers. The size has to sit on the WIDGET WRAPPER as well as the
 * paragraph, because the 76ch measure is declared on the wrapper and `ch`
 * resolves against that element's own font-size -- setting it on the paragraph
 * alone fixed the type and left the measure at 866px. (HO-45) */
.wyg-about-fellows__intro.wyg-about-fellows__intro,
.wyg-about-fellows__intro.wyg-about-fellows__intro p,
.wyg-about-partners__intro.wyg-about-partners__intro,
.wyg-about-partners__intro.wyg-about-partners__intro p {
	font-size: var( --e-global-typography-fd54d4a4-font-size );
}

/* CSS multi-column, not the Loop Grid's own grid -- and the reason is the row
 * gap. UE's `grid_gap` control is one slider driving BOTH axes, so setting the
 * mockup's 40px column gap on the widget also put 40px between rows: a 121px
 * row pitch against the mockup's 79px, which is what "a lot tighter on the
 * mockup" was (HO-45, Userback z92046kz34). Multi-column has no row gap at all,
 * which is exactly the mockup's `.name-list { columns: 2 }`.
 *
 * It also fixes the reading order for free. A grid flows across -- Yacobi,
 * Schwake, Kraus, Steinmeyer -- and a names list has to read DOWN each column,
 * which is what `columns` does. And it balances on its own as Fellows grows,
 * where `grid-auto-flow: column` would need the row count hardcoded.
 *
 * `!important` because UE prints `display: grid` in an inline <style> keyed to
 * the widget's id, a 1,0,0 selector no class rule can reach -- the same earned
 * exception as the pop-up frame in wyg-css-person-card.
 *
 * Two columns, always -- settled 20 August. A ninth name makes the columns
 * taller; it never adds a third. */
/* HO-82: the Advisory Committee and the Partners list now use the same loop item
 * (495) and therefore the same list treatment. Selectors added rather than a new
 * rule written, so the three lists cannot drift apart. */
.wyg-about-fellows__list.wyg-about-fellows__list .ue-grid,
.wyg-about-committee__grid.wyg-about-committee__grid .ue-grid,
.wyg-about-partners__list.wyg-about-partners__list {
	display: block !important;
	columns: 2;
	column-gap: 2.5rem;
	max-inline-size: 64ch;
}

.wyg-about-fellows__list.wyg-about-fellows__list .ue-grid-item,
.wyg-about-committee__grid.wyg-about-committee__grid .ue-grid-item {
	break-inside: avoid;
}

@media ( max-width: 767px ) {

	.wyg-about-fellows__list.wyg-about-fellows__list .ue-grid,
	.wyg-about-committee__grid.wyg-about-committee__grid .ue-grid,
	.wyg-about-partners__list.wyg-about-partners__list {
		columns: 1;
	}
}

/* -------------------------------------------------------------- partners -- */

.elementor.elementor .e-con .elementor-widget.wyg-about-partners__intro {
	max-inline-size: 76ch;
}

.wyg-about-partners__intro.wyg-about-partners__intro {
	margin-block-end: 1.75rem;
}

/* HO-82, Todd 26 August: partners are ORGANIZATIONS, not People. They are not a
 * CPT and not a loop -- six names that appear in exactly one list on one page do
 * not need a database model. The rows are static Elementor containers carrying
 * the Fellows row classes, so the treatment is shared rather than duplicated and
 * the two lists cannot drift apart. The logo tile row above is HIDDEN, not
 * removed, so logos remain a one-click return. */
.wyg-about-partners__list.wyg-about-partners__list {
	display: block;
}

/* Provisional by construction: a dashed neutral box at the real aspect ratio.
 * 150 x 70, so a supplied logo fits without recropping.
 *
 * The four tiles are IMAGE widgets, not headings, so a real partner logo is a
 * one-click swap in the panel with no rebuild (Userback z92046kz3b). They hold
 * the WYG circle seal as the placeholder mark until logos arrive -- Todd's
 * choice, 21 August. `object-fit: contain` is what makes any supplied logo,
 * square or wide, sit inside the box without distortion. */
.wyg-about-partners__tile.wyg-about-partners__tile {
	inline-size: 150px;
	block-size: 70px;
	border: 1px dashed var( --e-global-color-5f8039f0 );
	background: #EDE7DC;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: .4rem;
	flex: none;
}

/* Sized to the box rather than left at `auto`. Elementor's image widget ships
 * `loading="lazy"`, and an auto-sized lazy image measures 0x0 until it loads --
 * so the tile rendered empty on first paint. Filling the box and letting
 * `contain` letterbox the mark takes the intrinsic size out of the layout
 * entirely. (HO-45) */
.wyg-about-partners__tile.wyg-about-partners__tile img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: contain;
	display: block;
}

/* ------------------------------------------------------------ breakpoints - */

/* The stacking itself is NOT here. It is `flex_direction_tablet: column` on the
 * two band containers, because Elementor has a control for it (5-i) and because
 * a rule written here cannot reach the element that needs it: on a BOXED
 * container the flex row lives on `.e-con-inner`, one level below the class.
 * `.wyg-about-quote.wyg-about-quote { flex-direction: column }` therefore
 * computed, applied to a single-child wrapper, and did nothing -- while the row
 * underneath stayed `nowrap`. That is what produced the 202px overflow at 390px
 * (HO-45). Any future "stack this band" rule goes on the container control.
 *
 * 1024px, not the mockup's 1000px, so this block switches on the same frame as
 * Elementor's own tablet breakpoint. A 24px window where the band stacked but
 * the blockquote kept its side rule is not worth the round number.
 */

@media ( max-width: 1024px ) {

	.wyg-about-history__copy.wyg-about-history__copy,
	.wyg-about-history__figure.wyg-about-history__figure {
		inline-size: 100%;
	}

	/* Stacked, the band centers -- mockup `.quote-portrait-grid` at max-width
	 * 1000px. The rule sits on the text column, not the band, for the same
	 * unreachable-`.e-con-inner` reason as above. */
	.wyg-about-quote__text.wyg-about-quote__text {
		text-align: center;
		align-items: center;
	}

	/* Stacked, the mockup's order is quotation mark, then the rule, then the
	 * text -- its mark is a block sibling ABOVE the blockquote. Ours is a
	 * pseudo-element on the blockquote itself, so it has to be lifted clear of
	 * the box's own top border: 4.2rem is the 64px glyph plus the mockup's
	 * .2rem gap. Centered here because the whole band centers below 1024px. */
	.wyg-about-quote__blockquote.wyg-about-quote__blockquote {
		border-inline-start: 0;
		border-block-start: 3px solid var( --e-global-color-accent );
		padding-inline-start: 0;
		padding-block-start: 1.25rem;
		margin-block-start: 4.2rem;
	}

	.wyg-about-quote__blockquote.wyg-about-quote__blockquote::before {
		inset-block-start: -4.2rem;
		inset-inline: 0;
		text-align: center;
	}
}

/* ------------------------------------------------ anchor targets -- HO-64 --
 *
 * The primary nav's About Us dropdown jumps to these two sections. The IDs
 * themselves are set natively, on each container's own "_element_id" control;
 * this rule exists only because Elementor has no control for scroll-margin,
 * which is what keeps the section heading clear of the fixed header.
 *
 * The offset reads --wyg-chrome-bottom from wyg-css-global (6): the header's
 * MEASURED height at its own breakpoints, plus the review-gate bar while it is
 * still present. Not a guessed number, and nothing to edit when the gate goes.
 *
 * Logical property, so RTL is covered by the same declaration. */
#board,
#advisory-committee {
	scroll-margin-block-start: var( --wyg-chrome-bottom, 130px );
}