/*
 * borrego/board-member — one board member's page.
 *
 * Declared as the block's `style` in block.json. inc/enqueue.php turns off
 * on-demand block asset loading, so this prints on every page — including the
 * board page, whose in-place detail is this same article (board-directory
 * style.css scopes its overrides one class heavier, because this file prints
 * after it). Everything here is the existing design vocabulary: sand `base`
 * ground, `forest` type, `terracotta` eyebrow and links, `gold` brush, the
 * display face for the name and the brief statement, the body face elsewhere.
 * .bb-eyebrow and .bb-link-arrow come from style.css / art-direction.css and
 * posts.css, which are in the unconditional global chain.
 *
 * THREE POSTURES. .bb-member--brief puts the bio IN the hero beside the
 * portrait as one large italic statement and has no body; --standard and
 * --long share the hero + 65ch column with a drop cap. The classes are set in
 * render.php as whole literals.
 */

/* --------------------------------------------------------------------------
   Frame
   -------------------------------------------------------------------------- */

.bb-member {
	background-color: var( --wp--preset--color--base );
	color: var( --wp--preset--color--forest );
	margin: 0;
	overflow-x: clip;
	padding-block: var( --wp--preset--spacing--50 ) var( --wp--preset--spacing--70 );
	padding-inline: var( --wp--preset--spacing--40 );
}

/* Every band is a centred column; the hero and the rail are the wide ones. */
.bb-member > * {
	box-sizing: border-box;
	margin-inline: auto;
	max-width: var( --wp--style--global--content-size, 760px );
}

.bb-member__hero,
.bb-member__pager,
.bb-member-rail,
.bb-member__fund {
	max-width: var( --wp--style--global--wide-size, 1100px );
}

/* --------------------------------------------------------------------------
   Eyebrow link, top
   -------------------------------------------------------------------------- */

.bb-member__eyebrow {
	color: var( --wp--preset--color--terracotta-text );
	margin: 0 0 var( --wp--preset--spacing--40 );
	max-width: var( --wp--style--global--wide-size, 1100px );
}

.bb-member__eyebrow a {
	color: inherit;
	text-decoration: none;
}

.bb-member__eyebrow a:hover,
.bb-member__eyebrow a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* --------------------------------------------------------------------------
   Hero: portrait + intro
   -------------------------------------------------------------------------- */

.bb-member__hero {
	align-items: start;
	display: grid;
	gap: var( --wp--preset--spacing--50 );
	grid-template-columns: minmax( 0, 1fr );
}

@media ( min-width: 700px ) {
	.bb-member__hero {
		grid-template-columns: minmax( 220px, 360px ) minmax( 0, 1fr );
		gap: var( --wp--preset--spacing--60 );
	}
}

/* The square well, as the card's: silhouette → img → monogram. Capped near
   360px because the only source is the 400 box. position: relative is
   load-bearing — the mirror's editor outline is an absolute ::before. */
.bb-member__portrait {
	aspect-ratio: 1 / 1;
	background: linear-gradient( 135deg, var( --wp--preset--color--forest-deep ) 0%, var( --wp--preset--color--forest ) 100% );
	border-radius: 6px 26px 6px 26px;
	box-shadow: rgb( 42 42 36 / 0.14 ) 0 14px 34px;
	color: var( --wp--preset--color--base );
	display: grid;
	max-width: 360px;
	overflow: hidden;
	place-items: center;
	position: relative;
	width: 100%;
}

.bb-member__photo {
	height: 100%;
	inset: 0;
	object-fit: contain;
	position: absolute;
	width: 100%;
}

/* A hub-authored square crop (detail, else grid): the inline style carries
   width/height/left/top percentages precomputed against a 1:1 box, which
   this well is — change the ratio and every cropped photo distorts. */
.bb-member__photo--cropped {
	inset: auto;
	max-width: none;
	object-fit: fill;
	object-position: 0 0;
}

.bb-member__portrait .bb-board-card__silhouette {
	display: block;
	height: 62%;
	opacity: 0.22;
	width: auto;
}

.bb-member__portrait--photo .bb-board-card__silhouette { opacity: 0.12; }

.bb-member__initials {
	font-family: var( --wp--preset--font-family--display );
	font-size: clamp( 3rem, 9vw, 5.5rem );
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1;
	position: relative;
	z-index: 1;
}

.bb-member__initials--fallback { display: none; }
.bb-member__photo.is-hidden { display: none; }
.bb-member__photo.is-hidden + .bb-member__initials--fallback { display: block; }

.bb-member__intro {
	min-width: 0;
}

.bb-member__office {
	color: var( --wp--preset--color--terracotta-text );
	margin: 0 0 var( --wp--preset--spacing--20 );
}

.bb-member__name {
	color: var( --wp--preset--color--forest );
	font-family: var( --wp--preset--font-family--display );
	font-size: clamp( 2.25rem, 5vw, 3.5rem );
	font-weight: 500;
	line-height: 1.08;
	margin: 0;
	overflow-wrap: anywhere;
}

.bb-member__brush {
	color: var( --wp--preset--color--gold );
	display: block;
	height: 0.6rem;
	margin-block: var( --wp--preset--spacing--30 ) var( --wp--preset--spacing--40 );
	width: 8rem;
}

.bb-member__brush svg {
	display: block;
	height: 100%;
	width: 100%;
}

/* --------------------------------------------------------------------------
   Brief: the bio is the hero
   -------------------------------------------------------------------------- */

.bb-member__statement {
	max-width: 32ch;
}

.bb-member__statement-text {
	color: var( --wp--preset--color--forest );
	font-family: var( --wp--preset--font-family--display );
	font-size: clamp( 1.35rem, 2.4vw, 1.75rem );
	font-style: italic;
	font-weight: 400;
	line-height: 1.4;
	margin: 0;
}

.bb-member__statement-text + .bb-member__statement-text {
	margin-block-start: 0.8em;
}

/* --------------------------------------------------------------------------
   Standard / long: the reading column
   -------------------------------------------------------------------------- */

.bb-member__body {
	margin-block-start: var( --wp--preset--spacing--60 );
	max-width: 65ch;
}

.bb-member__bio p {
	color: var( --wp--preset--color--contrast );
	font-size: var( --wp--preset--font-size--medium );
	line-height: 1.7;
	margin: 0;
}

.bb-member__bio p + p {
	margin-block-start: 1.1em;
}

/* The drop cap, on the first paragraph only. */
.bb-member__bio > p:first-child::first-letter {
	color: var( --wp--preset--color--terracotta-text );
	float: left;
	font-family: var( --wp--preset--font-family--display );
	font-size: 3.6em;
	font-weight: 600;
	line-height: 0.8;
	margin: 0.08em 0.12em 0 0;
}

.bb-member__bio-missing {
	color: var( --wp--preset--color--contrast );
	font-style: italic;
	margin: 0;
	opacity: 0.8;
}

/* --------------------------------------------------------------------------
   Former member
   -------------------------------------------------------------------------- */

.bb-member__former {
	background-color: rgb( 255 255 255 / 0.55 );
	border-inline-start: 4px solid var( --wp--preset--color--gold );
	border-radius: 0 12px 12px 0;
	margin-block-start: var( --wp--preset--spacing--50 );
	padding: var( --wp--preset--spacing--40 ) var( --wp--preset--spacing--50 );
}

.bb-member__former-title {
	color: var( --wp--preset--color--forest );
	font-family: var( --wp--preset--font-family--display );
	font-size: var( --wp--preset--font-size--x-large );
	font-weight: 500;
	line-height: 1.2;
	margin: 0 0 var( --wp--preset--spacing--20 );
}

.bb-member__former-text {
	color: var( --wp--preset--color--contrast );
	margin: 0 0 var( --wp--preset--spacing--30 );
}

.bb-member__former-link {
	margin: 0;
}

/* --------------------------------------------------------------------------
   Named scholarship(s)
   -------------------------------------------------------------------------- */

.bb-member__fund {
	margin-block-start: var( --wp--preset--spacing--70 );
}

.bb-member__fund-title {
	color: var( --wp--preset--color--forest );
	font-family: var( --wp--preset--font-family--display );
	font-size: var( --wp--preset--font-size--x-large );
	font-weight: 500;
	line-height: 1.15;
	margin: 0;
}

.bb-member__fund-brush {
	color: var( --wp--preset--color--terracotta );
	display: block;
	height: 0.55rem;
	margin-block: var( --wp--preset--spacing--20 ) var( --wp--preset--spacing--40 );
	width: 7.5rem;
}

.bb-member__fund-brush svg {
	display: block;
	height: 100%;
	width: 100%;
}

.bb-member__fund-list {
	display: grid;
	gap: var( --wp--preset--spacing--40 );
	grid-template-columns: repeat( auto-fit, minmax( 260px, 1fr ) );
	list-style: none;
	margin: 0;
	padding: 0;
}

.bb-member__fund-card {
	background-color: rgb( 255 255 255 / 0.6 );
	border-radius: 6px 20px 6px 20px;
	color: var( --wp--preset--color--forest );
	padding: var( --wp--preset--spacing--40 );
}

/* The link to the fund's own card on the Scholarships page
   (/scholarships/#fund-{slug}, inc/named-scholarships.php). */
.bb-member__fund-link {
	margin: var( --wp--preset--spacing--30 ) 0 0;
}

/* --------------------------------------------------------------------------
   Previous / next
   -------------------------------------------------------------------------- */

.bb-member__pager {
	border-block: 1px solid rgb( 42 42 36 / 0.14 );
	display: grid;
	gap: var( --wp--preset--spacing--30 );
	grid-template-columns: 1fr 1fr;
	margin-block-start: var( --wp--preset--spacing--70 );
	padding-block: var( --wp--preset--spacing--40 );
}

.bb-member__pager-link {
	color: var( --wp--preset--color--forest );
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	min-width: 0;
	text-decoration: none;
}

.bb-member__pager-link--next {
	grid-column: 2;
	text-align: end;
}

.bb-member__pager-label {
	color: var( --wp--preset--color--terracotta-text );
	font-size: var( --wp--preset--font-size--x-small );
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.bb-member__pager-name {
	font-family: var( --wp--preset--font-family--display );
	font-size: var( --wp--preset--font-size--large );
	font-weight: 600;
	line-height: 1.2;
	overflow-wrap: anywhere;
}

.bb-member__pager-link:hover .bb-member__pager-name,
.bb-member__pager-link:focus-visible .bb-member__pager-name {
	text-decoration: underline;
	text-decoration-color: var( --wp--preset--color--gold );
	text-decoration-thickness: 2px;
	text-underline-offset: 0.18em;
}

/* --------------------------------------------------------------------------
   Fellow board members
   -------------------------------------------------------------------------- */

.bb-member-rail {
	margin-block-start: var( --wp--preset--spacing--60 );
}

.bb-member-rail__title {
	color: var( --wp--preset--color--forest );
	font-family: var( --wp--preset--font-family--display );
	font-size: var( --wp--preset--font-size--large );
	font-weight: 500;
	margin: 0 0 var( --wp--preset--spacing--40 );
}

.bb-member-rail__list {
	display: grid;
	gap: var( --wp--preset--spacing--30 ) var( --wp--preset--spacing--40 );
	grid-template-columns: repeat( auto-fill, minmax( 220px, 1fr ) );
	list-style: none;
	margin: 0;
	padding: 0;
}

.bb-member-rail__link {
	align-items: center;
	color: var( --wp--preset--color--forest );
	display: flex;
	gap: var( --wp--preset--spacing--30 );
	min-width: 0;
	text-decoration: none;
}

/* A 1:1 clipping frame, like the card's well, so the grid crop frames it
   identically. position: relative for the mirror's overlay. */
.bb-member-rail__avatar {
	align-items: center;
	background: linear-gradient( 135deg, var( --wp--preset--color--forest-deep ) 0%, var( --wp--preset--color--forest ) 100% );
	border-radius: 50%;
	color: var( --wp--preset--color--base );
	display: flex;
	flex-shrink: 0;
	font-size: var( --wp--preset--font-size--small );
	font-weight: 600;
	height: 3rem;
	justify-content: center;
	overflow: hidden;
	position: relative;
	width: 3rem;
}

.bb-member-rail__avatar-img {
	display: block;
	height: 100%;
	object-fit: contain;
	width: 100%;
}

.bb-member-rail__avatar-img--cropped {
	max-width: none;
	object-fit: fill;
	object-position: 0 0;
	position: absolute;
}

.bb-member-rail__text {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	min-width: 0;
}

.bb-member-rail__name {
	font-weight: 600;
	line-height: 1.25;
}

.bb-member-rail__office {
	color: var( --wp--preset--color--terracotta-text );
	font-size: var( --wp--preset--font-size--x-small );
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

a.bb-member-rail__link:hover .bb-member-rail__name,
a.bb-member-rail__link:focus-visible .bb-member-rail__name {
	text-decoration: underline;
	text-decoration-color: var( --wp--preset--color--gold );
	text-decoration-thickness: 2px;
	text-underline-offset: 0.18em;
}

/* --------------------------------------------------------------------------
   Unavailable, and the way back
   -------------------------------------------------------------------------- */

.bb-member__unavailable {
	color: var( --wp--preset--color--contrast );
	margin-block-start: var( --wp--preset--spacing--50 );
}

.bb-member__back {
	margin: var( --wp--preset--spacing--60 ) auto 0;
	max-width: var( --wp--style--global--wide-size, 1100px );
}

/* Editor placeholder only. */
.bb-member--editor {
	border: 1px dashed rgb( 42 42 36 / 0.3 );
	border-radius: 8px;
	padding: 1rem 1.25rem;
}

.bb-member__editor-name {
	font-family: var( --wp--preset--font-family--display );
	font-size: var( --wp--preset--font-size--x-large );
	margin: 0 0 1rem;
}

@media ( prefers-reduced-motion: reduce ) {
	.bb-member * {
		transition: none !important;
	}
}