/**
 * 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;
}

/*
 * Gutter between the wrapped prose and the card is the float's MARGIN — not
 * shape-outside. An earlier `shape-outside: inset(… 2rem)` set the wrap boundary
 * 2rem INSIDE the card's left edge, so at ~900px a long word flowed UNDER the card
 * (negative gutter). A floated box already reserves its full margin-box; the margin
 * alone gives a clean, collision-proof gutter at every width.
 */
.charitable-sc-campaign-total.alignright {
	margin-left: 1.75rem;
}

.charitable-sc-campaign-total.alignleft {
	margin-right: 1.75rem;
}

/*
 * A heading must never be squeezed beside the floated card — a section title
 * wrapping tight ("mint / valaha!") reads as broken. The migration already places
 * the card AFTER the leading heading, but defend any heading that follows the card
 * (a mid-article subhead): clear it so it spans full-width. Paragraphs get
 * text-wrap:pretty to soften the wrap against the float edge.
 */
.charitable-sc-campaign-total.alignright ~ .wp-block-heading,
.charitable-sc-campaign-total.alignleft ~ .wp-block-heading {
	clear: both;
}
.charitable-sc-campaign-total.alignright ~ p,
.charitable-sc-campaign-total.alignleft ~ p {
	text-wrap: pretty;
}

/*
 * 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;
	}
}