/**
 * Pattern: CTA — Full-width Band  (patterns/cta-band.php)
 *
 * Full-bleed photo band (page Featured Image) → centered brand-purple card →
 * heading + lead + two pill buttons (white "Donate" + white-outline "Volunteer").
 * Maps to the About / Home / Summer Series 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%;
}

/* 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 — purple (TL/BR), crimson
   (TR), pink (BL). `cover` matches the design's object-cover crop; use
   `100% 100%` instead to show the full mesh incl. the red/pink 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).
   global.css ships responsive `h2 { ... !important }` caps at ≤1024/768/480 that
   would stomp this to 1.4rem on phones; re-assert the pattern's own fluid scale
   (the !important only matches the global caps' own !important, scoped here). */
.kd-cta-band .kd-cta-band__heading {
	color: var(--kd-color-base);
	margin: 0;
	font-size: clamp(2rem, 5vw, 3.125rem) !important; /* 32px → 50px */
	line-height: 1.15 !important;
}

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