/**
 * Donor Honor Roll — /donate/honor-roll/
 *
 * Page-scoped, enqueued by inc/honor-roll.php behind an is_page() guard, after
 * motion.css so it can overrule anything in the global cascade.
 *
 * The body is mostly CORE blocks (group, heading, list, image) so the
 * staff who keep the lists can edit names in the visual editor. Every rule
 * therefore targets the block's className, never a wp-block-* structure alone,
 * and nothing here depends on block attributes staff might change by accident
 * (alignment, colour, spacing controls).
 *
 * The tier accents are metals drawn as a top rule and a small swatch, never as
 * text colour: gold and silver on sand fail the contrast gate as type.
 */

.bb-honor {
	--bb-honor-gutter: clamp( 1.25rem, 5vw, 3.5rem );
	--bb-honor-width: 72rem;
	--bb-honor-measure: 44rem;
	--bb-honor-platinum: #9AA3A8;
	--bb-honor-gold: var(--wp--preset--color--gold);
	--bb-honor-silver: #B9BCBD;
	--bb-honor-bronze: #A8743F;
	--bb-honor-copper: var(--wp--preset--color--terracotta);
}

/* A composed page's <main> has no padding, so every section brings its own
   gutter and centres its own content. */
.bb-honor-partners,
.bb-honor-lifetime {
	padding: clamp( 2.5rem, 6vw, 4rem ) var(--bb-honor-gutter);
}

.bb-honor-partners > *,
.bb-honor-lifetime > * {
	max-width: var(--bb-honor-width);
	margin-inline: auto;
}

.bb-honor-section-title {
	margin-top: 0;
	margin-bottom: 0.5rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp( 1.6rem, 3.4vw, 2.25rem );
	line-height: 1.15;
	color: var(--wp--preset--color--forest);
}

/* The jump links land a heading under the sticky header, not behind it. */
.bb-honor-section-title[id] {
	scroll-margin-top: 7rem;
}

/* The lead sits in the same centred column as its heading, but its text keeps
   a reading measure: the padding eats whatever the column has beyond it. */
.bb-honor .bb-honor-section-lead {
	/* border-box, or the padding below adds to the 72rem width, the box
	   outgrows its container, `margin-inline: auto` collapses to zero and the
	   paragraph hangs off the page's left edge while its heading sits in the
	   centred column. Seen live 2026-09-22. */
	box-sizing: border-box;
	width: 100%;
	max-width: var(--bb-honor-width);
	margin-top: 0;
	margin-bottom: 2rem;
	padding-inline-end: max( 0px, calc( 100% - var(--bb-honor-measure) ) );
	line-height: 1.6;
}

/* =========================================================================
 * HERO
 * ========================================================================= */

.bb-honor-hero {
	padding: clamp( 2.5rem, 6vw, 4.5rem ) var(--bb-honor-gutter) clamp( 2rem, 5vw, 3rem );
	background: var(--wp--preset--color--base-alt);
}

.bb-honor-hero__inner {
	max-width: var(--bb-honor-width);
	margin-inline: auto;
}

.bb-honor-hero__title {
	margin: 0.35rem 0 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp( 2.25rem, 5.4vw, 3.5rem );
	font-weight: 700;
	line-height: 1.08;
	color: var(--wp--preset--color--forest);
}

.bb-honor-hero__lead {
	max-width: var(--bb-honor-measure);
	margin: 1.1rem 0 0;
	font-size: clamp( 1.05rem, 1.6vw, 1.25rem );
	line-height: 1.55;
}

.bb-honor-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.5rem;
	margin-top: 1.75rem;
}

.bb-honor-hero__jump {
	font-weight: 600;
	color: var(--wp--preset--color--terracotta-text);
	text-underline-offset: 0.2em;
}

/* =========================================================================
 * PARTNER LOGOS — uniform tiles, whatever shape each mark arrived in.
 * ========================================================================= */

.bb-honor-partners {
	background: var(--wp--preset--color--base);
}

/* minmax( 0, 1fr ), never a bare 1fr: a bare 1fr is minmax( auto, 1fr ), and
   in Safari the tracks then grow to the images' own widths — two 359px columns
   in a 359px phone, the second one off screen, the page scrolling sideways.
   Seen live 2026-09-22. */
.bb-honor-logos {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( min( 100%, 10.5rem ), 1fr ) );
	gap: 1rem;
}

/* THE TILE. Its height comes from aspect-ratio ALONE, so the image is taken
   out of flow: an in-flow image with max-height: 100% inflates the box in
   WebKit (the ratio is only a preference there once content is taller) and
   the tile grows to the image, or the image spills past it. Absolute, inset
   by the padding, the image gets a definite box in every engine and simply
   fits. The same construction is used by the rail's tiles in chrome.css. */
.bb-honor-logos .bb-honor-logo {
	position: relative;
	overflow: hidden;
	margin: 0;
	padding: 0; /* the inset on the image is the padding; none on the box, or the ratio is off */
	aspect-ratio: 3 / 2;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 1px 0 rgba( 42, 42, 36, 0.08 ), 0 0 0 1px rgba( 42, 42, 36, 0.06 );
}

.bb-honor-logos .bb-honor-logo img {
	position: absolute;
	inset: 1rem;
	display: block;
	width: calc( 100% - 2rem );
	height: calc( 100% - 2rem );
	object-fit: contain;
}

/* =========================================================================
 * LIFETIME TIERS
 * ========================================================================= */

.bb-honor-lifetime {
	background: var(--wp--preset--color--base-alt);
}

/*
 * One full-width band per tier, stacked in rank order — a ledger, not a grid.
 *
 * The first build laid the tiers out as cards in a grid, which asks the eye to
 * rank left-to-right and top-to-bottom at once, left one card orphaned on its
 * own row, and put a 5-name card beside a 14-name card. Stacked bands read as
 * the ranking they are: Platinum first, Copper last. Each band's height comes
 * from its own list, so nothing is ragged and nothing is alone. The names run
 * in the same three-column rhythm in every band, and the metal rule on top
 * carries the tier.
 */
.bb-honor-tiers {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}

.bb-honor-tier {
	--bb-honor-accent: var(--wp--preset--color--sage);
	--bb-honor-rule: 5px;
	margin: 0;
	padding: 1.25rem 1.6rem 1.5rem;
	border-top: var(--bb-honor-rule) solid var(--bb-honor-accent);
	border-radius: 12px;
	background: var(--wp--preset--color--base);
	box-shadow: 0 1px 0 rgba( 42, 42, 36, 0.06 );
}

.bb-honor-tier--platinum { --bb-honor-accent: var(--bb-honor-platinum); --bb-honor-rule: 8px; }
.bb-honor-tier--gold     { --bb-honor-accent: var(--bb-honor-gold); }
.bb-honor-tier--silver   { --bb-honor-accent: var(--bb-honor-silver); }
.bb-honor-tier--bronze   { --bb-honor-accent: var(--bb-honor-bronze); }
.bb-honor-tier--copper   { --bb-honor-accent: var(--bb-honor-copper); }

/* The band's header is one line: the tier name, then its range beside it on
   the same baseline, so the eye reads "Gold, $50,000 – $99,999" as one
   phrase and the list starts one line down. On a phone it wraps. */
.bb-honor-tier .bb-honor-tier__name {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.2;
	color: var(--wp--preset--color--forest);
}

.bb-honor-tier--platinum .bb-honor-tier__name {
	font-size: clamp( 1.75rem, 3vw, 2.25rem );
}

.bb-honor-tier .bb-honor-tier__name::before {
	content: "";
	flex: none;
	width: 0.85rem;
	height: 0.85rem;
	border-radius: 50%;
	background: var(--bb-honor-accent);
	box-shadow: inset 0 0 0 1px rgba( 42, 42, 36, 0.2 );
}

.bb-honor-tier .bb-honor-tier__range {
	margin: 0.15rem 0 1rem 1.45rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--wp--preset--color--terracotta-text);
}

/* Every band's names in three columns from tablet width up; the list block
   is core/list, so the column count lives here and not in the markup. */
@media ( min-width: 48rem ) {
	.bb-honor-tier .bb-honor-names {
		columns: 3 14rem;
		column-gap: 2.5rem;
	}
}

@media ( min-width: 60rem ) {
	.bb-honor-tier {
		display: grid;
		grid-template-columns: 13rem 1fr;
		grid-template-rows: auto auto;
		column-gap: 2rem;
		align-items: start;
	}
	.bb-honor-tier .bb-honor-tier__name {
		grid-column: 1;
		grid-row: 1;
	}
	.bb-honor-tier .bb-honor-tier__range {
		grid-column: 1;
		grid-row: 2;
		margin-bottom: 0;
	}
	.bb-honor-tier .bb-honor-names {
		grid-column: 2;
		grid-row: 1 / span 2;
		margin-top: 0.35rem;
	}
}

/* =========================================================================
 * NAME LISTS — shared by the tiers and the yearly lists.
 * ========================================================================= */

.bb-honor .bb-honor-names {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.45;
}

.bb-honor .bb-honor-names li {
	break-inside: avoid;
	margin: 0;
	padding: 0.28rem 0 0.28rem 0.8rem;
	border-inline-start: 2px solid var(--wp--preset--color--sage);
}

.bb-honor .bb-honor-names li + li {
	margin-top: 0.3rem;
}

/* =========================================================================
 * CLOSING CALL TO ACTION
 * ========================================================================= */

.bb-honor-close {
	padding: clamp( 2.5rem, 6vw, 4rem ) var(--bb-honor-gutter) clamp( 3rem, 7vw, 5rem );
	background: var(--wp--preset--color--forest);
	color: var(--wp--preset--color--base);
}

.bb-honor-close__inner {
	max-width: var(--bb-honor-measure);
	margin-inline: auto;
	text-align: center;
}

.bb-honor-close__title {
	margin: 0 0 0.75rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp( 1.6rem, 3.4vw, 2.25rem );
	color: var(--wp--preset--color--base);
}

.bb-honor-close__actions {
	margin: 1.5rem 0;
}

.bb-honor-close__note {
	font-size: var(--wp--preset--font-size--small);
}

.bb-honor-close a:not(.bb-btn-primary) {
	color: var(--wp--preset--color--terracotta-on-dark);
}

@media ( max-width: 40rem ) {
	.bb-honor-logos {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}