/**
 * Campaign-total block (ADR-0040) — the rolled-up "amount raised" hero for a root.
 *
 * Sibling surface to the donation-status block (same light-surface card, palette,
 * radius), but deliberately narrower: a caption + the single rolled-up amount.
 * No goal, no progress bar, no percent — amount raised only. Lives on a root
 * (umbrella) campaign page where the figure is its own donations + every
 * ambassador page's (Charitable_Supercharged_Rollup::raised).
 *
 * Text wrap is NATIVE Gutenberg alignment: when an editor sets the block to align
 * left/right (the seeded umbrella uses right), core adds `.alignright`/`.alignleft`
 * and floats it; the cause prose wraps around and beneath it instead of a short
 * card holding open a tall empty column. We only size the floated card and round
 * its wrap; core owns the float itself. Below tablet the float is dropped to a
 * full-width stack (before the wrap gutter slivers).
 */

.charitable-sc-campaign-total {
	margin: 0 0 1.25rem;
	padding: 1.4rem 1.5rem;
	background: #f7f9fb;
	border: 1px solid #e2e6ea;
	border-radius: 10px;
	text-align: center;
}

/* Caption — small, muted, tracked caps (matches the status block's caption). */
.charitable-sc-campaign-total__label {
	margin: 0 0 0.4rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #5a6672;                       /* AA on #f7f9fb (≈5.5:1) */
}

/* The rolled-up amount — the single hero, large brand-blue display type. */
.charitable-sc-campaign-total__amount {
	margin: 0;
	font-size: 2.6rem;
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: #28527A;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* --- Native align: size + wrap-shape the floated card (core owns the float) --- */

.charitable-sc-campaign-total.alignright,
.charitable-sc-campaign-total.alignleft {
	width: clamp(15rem, 30%, 19rem);      /* a contained, readable card width */
	margin-bottom: 1rem;
}

/* shape-outside rounds the wrap so prose hugs the card corners, not a hard box. */
.charitable-sc-campaign-total.alignright {
	margin-left: 2rem;
	shape-outside: inset(0 0 1rem 2rem round 10px);
}

.charitable-sc-campaign-total.alignleft {
	margin-right: 2rem;
	shape-outside: inset(0 2rem 1rem 0 round 10px);
}

/*
 * Narrow viewports: a floated card in a one-column body slivers the wrapped text to
 * a few words per line. Drop the float and span full-width above the prose instead
 * — the same content, legibly stacked. !important overrides core's .alignright float
 * (core's wins on specificity ties otherwise).
 */
@media (max-width: 768px) {
	.charitable-sc-campaign-total.alignright,
	.charitable-sc-campaign-total.alignleft {
		float: none !important;
		width: auto;
		margin-left: 0;
		margin-right: 0;
		shape-outside: none;
	}
}