/**
 * borrego/donors — the logo grid. Travels with the block (block.json "style"),
 * so it loads on About, Donate and the Honor Roll alike. The tile and text-tile
 * look itself is global (chrome.css), because the footer band uses it on every
 * other page. The tier lists are styled by honor-roll.css, the only page they
 * appear on.
 *
 * Columns come from the count (basic_borrego_donor_grid_style()): 3 on a phone,
 * the tablet and desktop counts that leave the fewest empty last-row slots.
 * Flex rows, centred, so a short last row sits in the middle.
 */
.bb-donor-grid {
	--bb-cols: var(--bb-cols-phone, 3);
	--bb-gap: 0.75rem;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--bb-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.bb-donor-grid__item {
	flex: 0 0 calc( ( 100% - ( var(--bb-cols) - 1 ) * var(--bb-gap) ) / var(--bb-cols) );
	min-width: 0;
}

@media ( min-width: 40rem ) {
	.bb-donor-grid {
		--bb-cols: var(--bb-cols-tablet, 5);
		--bb-gap: 0.85rem;
	}
}

@media ( min-width: 64rem ) {
	.bb-donor-grid {
		--bb-cols: var(--bb-cols-desktop, 7);
	}
}

/* The Honor Roll wall sits left-aligned under its heading, like the page's text. */
.bb-honor-partners .bb-donor-grid {
	justify-content: flex-start;
}

.bb-donors__empty {
	max-width: 34rem;
	margin: 0 auto;
	padding: 1rem 1.25rem;
	border: 1px dashed rgba( 42, 42, 36, 0.28 );
	border-radius: 12px;
	text-align: center;
}

.bb-donors__notice {
	margin: 0 0 1rem;
	padding: 0.5rem 0.75rem;
	border-radius: 8px;
	background: #fff4d6;
	font-size: 0.875rem;
}

/* =========================================================================
 * The lifetime tier lists (layout "tiers", the Honor Roll). One band per
 * tier in rank order — a ledger, not a grid (honor-roll.css tells why the
 * page went that way). The metal is a top rule and a swatch, never text
 * colour: gold and silver on sand fail the contrast gate as type.
 * ========================================================================= */

.bb-donor-tiers {
	--bb-donor-platinum: #9AA3A8;
	--bb-donor-gold: var(--wp--preset--color--gold);
	--bb-donor-silver: #B9BCBD;
	--bb-donor-bronze: #A8743F;
	--bb-donor-copper: var(--wp--preset--color--terracotta);
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	text-align: start;
}

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

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

.bb-donor-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-donor-tier--platinum .bb-donor-tier__name {
	font-size: clamp( 1.75rem, 3vw, 2.25rem );
}

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

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

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

.bb-donor-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-donor-names li + li {
	margin-top: 0.3rem;
}

@media ( min-width: 48rem ) {
	.bb-donor-names {
		columns: 3 14rem;
		column-gap: 2.5rem;
	}
}

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