/**
 * Pattern: Giving Tiers  (patterns/giving-tiers.php)
 *
 * Figma node 6:843 (Donate right column) — stacked white rows: big Georgia-
 * Blue dollar amount, a tier name + short description, a small outline
 * "Select" pill. (Five rows since Nathan's 2026-08-21 content update; the
 * Figma render had three and no tier name.)
 * Card treatment reuses the member-card shadow language (see
 * member-grid.css's --blg-members-card-shadow formula) redefined locally per
 * that file's own convention, PLUS a hairline neutral-300 stroke — pixel-
 * checked against the Figma render (a thin ~1px line, not a soft border
 * alone).
 *
 * Auto-enqueued by inc/enqueue.php glob (dep on kd-global only).
 */

:root {
	--blg-giving-tiers-shadow:
		0 1px 3px color-mix(in srgb, var(--blg-color-contrast) 14%, transparent),
		0 1px 2px color-mix(in srgb, var(--blg-color-contrast) 8%, transparent);
}

.blg-giving-tiers {
	display: flex;
	flex-direction: column;
	gap: var(--blg-space-sm); /* 16px between rows */
}

.blg-giving-tiers__row {
	display: flex !important;
	align-items: center;
	gap: var(--blg-space-md); /* 24px */
	background-color: var(--blg-color-base);
	border: 1px solid var(--blg-color-neutral-300);
	border-radius: var(--blg-radius-card); /* 16px */
	box-shadow: var(--blg-giving-tiers-shadow);
	/* 20/24: the row grew a tier name on top of the sentence (5 tiers now, not
	   3), so the stack is taller than the Figma render's single line — trimming
	   the vertical inset keeps the column from towering over the intro copy. */
	padding: 1.25rem var(--blg-space-md); /* 20px / 24px */
}

/* ── Amount — Raleway ExtraBold, Georgia Blue, big ─────────────────────────── */

.blg-giving-tiers__amount {
	flex: 0 0 auto;
	font-family: var(--blg-font-heading);
	font-weight: 800;
	font-size: clamp(1.5rem, 2.5vw, 1.75rem); /* ~24px → 28px */
	color: var(--blg-color-primary);
	margin: 0 !important;
	line-height: 1;
}

/* ── Name + description column ─────────────────────────────────────────────
   Nathan's tiers carry a name ("Opens the Door") above the sentence. Wrapping
   the pair keeps the row a 3-part flex — amount | text | Select — so the
   button stays right-aligned against a single flexible middle track instead
   of competing with two. ─────────────────────────────────────────────────── */

.blg-giving-tiers__text {
	flex: 1 1 auto;
	min-width: 0; /* let long tier names wrap instead of forcing the row wide */
}

.blg-giving-tiers__label {
	font-family: var(--blg-font-heading);
	font-weight: 700;
	font-size: 0.9375rem; /* 15px */
	line-height: 1.3;
	color: var(--blg-color-contrast);
	margin: 0 0 0.25rem !important;
}

/* ── Description — Body/Small ──────────────────────────────────────────────── */

.blg-giving-tiers__desc {
	font-family: var(--blg-font-body);
	font-size: 0.875rem; /* 14px — Body/Small */
	line-height: 1.55;
	color: var(--blg-color-body);
	margin: 0 !important;
}

/* ── Select button — small outline pill (compact, not the 3px global outline) ── */

.blg-giving-tiers__btn-wrap {
	flex: 0 0 auto;
	margin: 0 !important;
}

.blg-giving-tiers__btn.wp-block-button.is-style-outline
	.wp-block-button__link {
	border-width: 1.5px;
	padding: 0.45em 1.25em;
	font-size: 0.8125rem; /* 13px — small pill */
	white-space: nowrap;
}

/* ── Tablet/mobile (≤768px) — stack amount / description / button ─────────── */

@media (max-width: 768px) {
	.blg-giving-tiers__row {
		flex-wrap: wrap;
	}

	.blg-giving-tiers__amount {
		flex: 1 1 auto;
	}

	.blg-giving-tiers__text {
		flex: 1 1 100%;
		order: 3;
	}

	.blg-giving-tiers__btn-wrap {
		order: 2;
	}
}

@media (max-width: 375px) {
	.blg-giving-tiers__row {
		padding: var(--blg-space-sm);
		gap: var(--blg-space-sm);
	}
}