/**
 * Pattern: CTA — Full-width Band  (patterns/cta-band.php)
 *
 * Full-bleed photo band (page Featured Image) → centered brand-gradient card →
 * heading + lead + two pill buttons (white "Donate" + white-outline "Volunteer").
 * Maps to the About / Home / campaign CTA band.
 *
 * One pattern = one CSS partial (auto-enqueued by inc/enqueue.php). Every rule —
 * incl. responsive media queries — stays in this file so parallel pattern builds
 * never touch a shared stylesheet. Spacing uses the org-level `--kd-space-*`
 * tokens (theme.json-independent). The `--wp--preset--spacing--*` presets also
 * resolve correctly now — the WP 6.6+ default-preset bug was fixed in a7dea13.
 */

.kd-cta-band {
	width: 100%;
}

/* Core's cover default is 1em side padding, which put the card edge at 16px + the
   card's own inset instead of on the body column. The band is a full-bleed
   alignfull cover whose containing block is the (gutter-padded) .entry-content,
   so --kd-edge-pad's % term would resolve against the wrong box — use the
   viewport gutter. The card is centred and capped (--kd-measure-cta), so on wide
   screens the extra padding never reaches it. */
.kd-cta-band.wp-block-cover {
	padding-inline: var(--kd-gutter);
}

/* Full-bleed guarantee. As an `alignfull` cover the band relies on WP's
   root-padding-aware breakout; inside a CONSTRAINED `post-content`
   (`has-global-padding`) WP can leave the right edge short. Re-assert the
   symmetric breakout from the parent's own gutter (no `100vw`, so no scrollbar
   overflow). Scoped to this pattern; touches no shared file. */
:where(.has-global-padding) > .kd-cta-band.alignfull {
	margin-left: calc(var(--kd-gutter) * -1);
	margin-right: calc(var(--kd-gutter) * -1);
	width: calc(100% + (var(--kd-gutter) * 2));
}

/* The card — brand mesh-gradient panel centred in the band (Figma 272:213,
   807×426, 24px radius). Background is the reusable SVG gradient
   (assets/images/cta-gradient.svg): a 4-corner mesh of the brand colours.
   (Corner colours live in the SVG.) `cover` matches the design's object-cover crop; use
   `100% 100%` instead to show the full mesh incl. all four corners.

   CSS-only equivalent (no SVG) if ever needed:
     background: linear-gradient(to right, #2383EB, #02C17F);
     + ::before { background: linear-gradient(to right, #F5C518, #2383EB);
                  mask-image: linear-gradient(to bottom, transparent, #000); } */
.kd-cta-band .kd-cta-band__card {
	max-width: var(--kd-measure-cta);
	margin-inline: auto;
	background: var(--kd-color-primary) url("../../images/cta-gradient.svg")
		center / cover no-repeat;
	border-radius: var(--kd-radius-lg); /* 24px */
	padding: var(--kd-space-xxl) var(--kd-space-lg); /* 6rem 2.5rem */
}

/* Heading — Montserrat Black, white, centred (~50px in Figma; fluid down).
   The pattern's own fluid scale; the two-class selector (0,2,0) beats the
   theme.json h2 default (`:root :where(h2)`), so no !important is needed. */
.kd-cta-band .kd-cta-band__heading {
	color: var(--kd-color-base);
	margin: 0;
	font-size: clamp(2rem, 5vw, 3.125rem); /* 32px → 50px */
	line-height: 1.15;
}

/* Lead — Inter, white, centred. Width matches the Figma paragraph (node
   403:5226, 523px) so it reads as a slightly longer line. */
.kd-cta-band .kd-cta-band__lead {
	color: var(--kd-color-base);
	max-width: 524px;
	margin: var(--kd-gap-tight) auto 0;
}

/* Space above the buttons. !important overrides the block's own inline
   margin-top so the rhythm is consistent regardless of editor tweaks. */
.kd-cta-band__buttons {
	margin-top: var(--kd-space-lg) !important; /* 2.5rem */
}

/* Buttons (per Figma 403:5221): "Donate" = brand PRIMARY fill — the global
   button default, so no override here. "Volunteer" uses .kd-btn-invert → white
   outline from the global button system. */

/* Tablet (≤1024px) — tighten the card insets. */
@media (max-width: 1024px) {
	.kd-cta-band .kd-cta-band__card {
		padding: var(--kd-space-xl) var(--kd-space-lg); /* 4rem 2.5rem */
	}
}

/* Mobile (≤768px) — smaller card padding, stack buttons full-width. */
@media (max-width: 768px) {
	.kd-cta-band .kd-cta-band__card {
		padding: var(--kd-space-lg) var(--kd-space-md); /* 2.5rem 1.5rem */
	}
	.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;
	}
}