/*
 * borrego/scholarship-fund — one named scholarship's page, and the same
 * article when the catalogue opens it in place.
 *
 * 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
 * catalogue pages, whose in-place detail is this same article (the stage's
 * own chrome is in blocks/named-scholarships/build/style.css). Everything here
 * is the existing design vocabulary, and where the fund article is the same
 * thing as the member article (the pager, the member chips) it wears the
 * member's classes and this file adds nothing.
 */

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

.bb-fund {
	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, the pager and the rail are wide. */
.bb-fund > * {
	box-sizing: border-box;
	margin-inline: auto;
	max-width: var( --wp--style--global--content-size, 760px );
}

.bb-fund__nav,
.bb-fund__eyebrow,
.bb-fund__hero,
.bb-fund__pager,
.bb-fund-rail,
.bb-fund__members {
	max-width: var( --wp--style--global--wide-size, 1100px );
}

/* --------------------------------------------------------------------------
   The way back, and the eyebrow
   -------------------------------------------------------------------------- */

.bb-fund__nav {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	gap: var( --wp--preset--spacing--30 ) var( --wp--preset--spacing--50 );
	margin: 0 0 var( --wp--preset--spacing--40 );
}

.bb-fund__back {
	color: var( --wp--preset--color--terracotta-text );
	font-size: var( --wp--preset--font-size--small );
	font-weight: 600;
	letter-spacing: 0.06em;
	text-decoration: none;
	text-transform: uppercase;
}

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

/* Restated so no `display` set on a link can ever show a member link to a
   visitor who did not come from that member's page. */
.bb-fund__back[ hidden ] {
	display: none;
}

/* The general link after fund-stage.js has picked a member link as primary. */
.bb-fund__back.is-secondary {
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: none;
}

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

/* --------------------------------------------------------------------------
   Hero: the name, the brush, the purpose as the lead
   -------------------------------------------------------------------------- */

.bb-fund__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;
	max-width: 24ch;
	overflow-wrap: anywhere;
}

.bb-fund__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-fund__brush svg {
	display: block;
	height: 100%;
	width: 100%;
}

.bb-fund__purpose {
	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;
	max-width: 36ch;
}

/* The hub's generic stand-in purpose: muted, never hidden, exactly as the
   catalogue card marks it. */
.bb-fund__purpose--generic {
	opacity: 0.78;
}

/* --------------------------------------------------------------------------
   Retired
   -------------------------------------------------------------------------- */

.bb-fund__retired {
	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-fund__retired-text {
	color: var( --wp--preset--color--contrast );
	margin: 0 0 var( --wp--preset--spacing--30 );
}

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

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

/* --------------------------------------------------------------------------
   Associated board members: the rail's chips, under a fund heading
   -------------------------------------------------------------------------- */

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

.bb-fund__members-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 );
}

/* --------------------------------------------------------------------------
   All named scholarships
   -------------------------------------------------------------------------- */

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

.bb-fund-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-fund-rail__list {
	columns: 3 16rem;
	column-gap: var( --wp--preset--spacing--50 );
	list-style: none;
	margin: 0;
	padding: 0;
}

.bb-fund-rail__item {
	break-inside: avoid;
	margin: 0 0 var( --wp--preset--spacing--20 );
	padding-inline-start: 1rem;
	position: relative;
}

.bb-fund-rail__item::before {
	background-color: var( --wp--preset--color--gold );
	border-radius: 50%;
	content: "";
	height: 0.4rem;
	inset-block-start: 0.55em;
	inset-inline-start: 0;
	position: absolute;
	width: 0.4rem;
}

.bb-fund-rail__item.is-current::before {
	background-color: var( --wp--preset--color--terracotta );
}

.bb-fund-rail__link {
	color: var( --wp--preset--color--forest );
	text-decoration: none;
}

.bb-fund-rail__item.is-current .bb-fund-rail__link {
	color: var( --wp--preset--color--terracotta-text );
	font-weight: 600;
}

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

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

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