/**
 * Pattern: CTA — Tint Band (patterns/cta-band.php)
 *
 * Figma source: node 6:24 (base — Sky Tint, Join + Donate). Node 6:844 is a
 * variant, the same card shape at solid Georgia Clay with a single "Give Today"
 * CTA + fiscal-sponsor fine print — used on the Donate page. Both live in this
 * one partial as base + `.kd-cta-band--give` modifier, per the parallel-build
 * convention (one pattern = one CSS partial, incl. its variants).
 *
 * The card IS the site's content column (1224px / theme.json contentSize),
 * not a full-bleed band — its rounded corners come from sitting inset within
 * the normal constrained layout, confirmed against the Figma frame (card edges
 * land exactly on the --blg-content-max column).
 */

.kd-cta-band {
	text-align: center;
}

/* A CTA band's H2 is a section head like any other — it just happens to sit on
   a coloured band. It was inheriting theme.json's h2 (32px/800) while every
   other section head on the site ran the shared 32→50px scale, which is the
   inconsistency Alain flagged on /join/. Colour is deliberately NOT set here:
   the band variants (tint, clay, petrol) each carry their own. */
.kd-cta-band .kd-cta-band__heading {
	font-family: var(--blg-font-heading);
	font-weight: var(--blg-fw-heading);
	font-size: var(--blg-size-h2-section) !important;
	line-height: var(--blg-lh-h2-section);
	margin: 0 0 var(--blg-gap-tight);
}

.kd-cta-band .kd-cta-band__lead {
	max-width: var(--blg-measure-intro);
	margin-inline: auto;
}

.kd-cta-band .kd-cta-band__buttons {
	margin-top: var(--blg-space-md);
}

/* Donate — the one place Georgia Clay is interactive (CLAUDE.md rule). Uses
   the theme.json palette slug directly (accent-2) rather than the tokens.css
   accent-N rotation alias, which is offset by one slot and would resolve to
   Sky Cyan here — same direct-var approach already used in parts/header.html.
   global.css's default-button rule carries 4 class-selectors of specificity
   (`.wp-block-button:not(...):not(...) .wp-block-button__link`); this override
   matches that weight (.kd-cta-band + .wp-block-button + .kd-cta-band__donate +
   .wp-block-button__link) so it wins instead of tying and losing to source
   order. */
.kd-cta-band .wp-block-button.kd-cta-band__donate .wp-block-button__link {
	background-color: var(--wp--preset--color--accent-2);
	border-color: var(--wp--preset--color--accent-2);
	color: var(--blg-color-base);
}

.kd-cta-band .wp-block-button.kd-cta-band__donate .wp-block-button__link:hover {
	background-color: color-mix(
		in srgb,
		var(--wp--preset--color--accent-2) 85%,
		black
	);
	border-color: color-mix(
		in srgb,
		var(--wp--preset--color--accent-2) 85%,
		black
	);
	color: var(--blg-color-base);
}

/* ── Give variant (Figma 6:844) ───────────────────────────────────────────────
 * Compose by duplicating the base pattern in the editor: set the outer group's
 * backgroundColor to accent-2 and textColor to base, add this modifier class,
 * replace the heading/lead copy ("Give today" / "One-time or monthly. Two
 * minutes, lasting impact."), and swap the button pair for a single CTA with
 * className kd-cta-band__give-btn linking to the external Social Good Fund URL.
 * A fine-print paragraph (className kd-cta-band__fineprint) carries the fiscal-
 * sponsor line below the button. */

.kd-cta-band--give .kd-cta-band__give-btn {
	margin-top: var(--blg-space-md);
}

.kd-cta-band--give
	.kd-cta-band__give-btn
	.wp-block-button
	.wp-block-button__link {
	background-color: var(--blg-color-base);
	border-color: var(--blg-color-base);
	color: var(--wp--preset--color--accent-2);
}

.kd-cta-band--give
	.kd-cta-band__give-btn
	.wp-block-button
	.wp-block-button__link:hover {
	background-color: color-mix(in srgb, var(--blg-color-base) 88%, black);
	border-color: color-mix(in srgb, var(--blg-color-base) 88%, black);
	color: var(--wp--preset--color--accent-2);
}

.kd-cta-band--give .kd-cta-band__fineprint {
	margin-top: var(--blg-space-md);
	font-size: var(--blg-size-xs);
	color: var(--blg-color-base);
	opacity: 0.85;
}

/* Tablet (≤1024px) — tighten the card insets. */
@media (max-width: 1024px) {
	.kd-cta-band {
		padding-top: var(--wp--preset--spacing--60) !important;
		padding-bottom: var(--wp--preset--spacing--60) !important;
		padding-left: var(--wp--preset--spacing--40) !important;
		padding-right: var(--wp--preset--spacing--40) !important;
	}
}

/* Mobile (≤768px) — smaller insets, stack buttons full-width. */
@media (max-width: 768px) {
	.kd-cta-band {
		padding-top: var(--wp--preset--spacing--50) !important;
		padding-bottom: var(--wp--preset--spacing--50) !important;
		padding-left: var(--wp--preset--spacing--30) !important;
		padding-right: var(--wp--preset--spacing--30) !important;
		border-radius: var(--blg-radius-md) !important;
	}
	.kd-cta-band .kd-cta-band__buttons {
		flex-direction: column !important;
		align-items: stretch !important;
		width: 100%;
	}
	.kd-cta-band .kd-cta-band__buttons .wp-block-button {
		width: 100%;
	}
	.kd-cta-band .kd-cta-band__buttons .wp-block-button__link {
		width: 100%;
		justify-content: center;
		text-align: center;
	}
	.kd-cta-band--give .kd-cta-band__give-btn .wp-block-button__link {
		width: 100%;
		justify-content: center;
		text-align: center;
	}
}