/**
 * Pattern: Donation Notice — Tinted Inset Band  (patterns/donation-band.php)
 *
 * Figma 5:2778, node 23:3635 ("Rectangle 666") — a tinted, rounded card INSET
 * within the page's normal content column (1216x312px in the Figma canvas),
 * not a full-bleed band. Token mapping decisions documented in the pattern's
 * own docblock (patterns/donation-band.php).
 *
 * One pattern = one CSS partial (auto-enqueued by inc/enqueue.php glob).
 */

.kd-donation-band {
	background-color: var(--blg-color-neutral-100);
	border-radius: var(--blg-radius-md);
	padding: var(
		--blg-space-xl
	); /* 64px — closest token to Figma's ~62px inset */
}

.kd-donation-band__heading {
	font-family: var(--blg-font-heading);
	font-weight: var(--blg-fw-heading);
	font-size: 1.625rem; /* 26px — matches the system's h3-card-heading size */
	line-height: 1.31; /* 34/26, same ratio as .kd-card__heading */
	color: var(--blg-color-primary);
	margin: 0 0 var(--blg-space-md); /* 24px heading -> body */
}

.kd-donation-band__body {
	font-size: var(--blg-size-body-lg); /* 18px, matches Figma */
	line-height: 1.56; /* 28/18 */
	color: var(--blg-color-body);
	margin: 0;
	max-width: 65ch;
}

/* Left-anchor the body to the heading's edge.

   WP's constrained-layout support emits, for every child of an
   .is-layout-constrained group:
       margin-left: auto !important; margin-right: auto !important;
   so ANY child narrower than the container gets auto-centered. The heading is
   full-width (max-width 1600px > container) so it stays flush left, while this
   body caps at 65ch and floated to the middle — heading at x=174, body at
   x=335 (measured @1440, verified in-browser 2026-08-02).

   Specificity cannot win against `!important`, which is why the earlier
   (0,2,0) `margin-inline: 0` had no effect — the fix has to be `!important`
   too. Same technique the theme already uses to beat WP layout elsewhere
   (.kd-split__inner display, .kd-split__image margin). */
.kd-donation-band .kd-donation-band__body {
	margin-inline: 0 !important;
}

/* ── Tablet / Mobile — padding steps down, text stays comfortable ─────────── */

@media (max-width: 1024px) {
	.kd-donation-band {
		padding: var(--blg-space-lg); /* 40px */
	}
}

@media (max-width: 767.98px) {
	.kd-donation-band {
		padding: var(--blg-space-md); /* 24px */
	}

	.kd-donation-band__heading {
		font-size: 1.375rem; /* 22px — keeps the h3 scale from crowding at mobile */
	}
}