.zerodigital-cta-banner {
	position: relative;
	/* `clip`, not `hidden`. Both crop the bleed identically, but `hidden`
	 * makes this a scroll container — it gains a scrollable overflow region,
	 * it simply is not user-scrollable — and that has a habit of quietly
	 * changing how descendants behave. It broke the scroll-driven version of
	 * the section entrance outright (see LESSONS); the entrance no longer
	 * works that way, but `clip` remains the honest property for "crop this,
	 * do not make it scrollable" and there is no reason to go back. */
	overflow: clip;
	padding: clamp(var(--wp--preset--spacing--lg, 2rem), 5vw, var(--wp--preset--spacing--2-xl, 4rem)) var(--zd-section-gutter, var(--wp--preset--spacing--md, 1.5rem));
	text-align: center;
	background-color: var(--wp--preset--color--primary, #1b3a5c);
	color: var(--wp--preset--color--background, #fff);
}

/* The block renders alignfull, so 100% here is the viewport. Capping the width
 * at the wide size ALONE left nothing to inset by below 1600px — margin-inline:
 * auto resolves to zero when there is no spare width — so on a phone the
 * "boxed" banner ran edge to edge and stopped looking boxed at all. min() keeps
 * the cap on large screens and takes a gutter off the viewport on small ones.
 *
 * That max-width only holds at Full. At None or Wide, core's constrained-layout
 * rules own max-width (content size or wide size) and print after this file, so
 * the min() was replaced and a boxed banner met both screen edges on a phone.
 * The gutter is therefore also a width, which core never sets: whichever
 * max-width applies still caps it on large screens, and on small ones the
 * width keeps the gutter clear at every alignment. */
.zerodigital-cta-banner--boxed {
	box-sizing: border-box;
	width: calc(100% - 2 * var(--zd-section-gutter, var(--wp--preset--spacing--md, 1.5rem)));
	max-width: min(
		var(--wp--style--global--wide-size, 1600px),
		calc(100% - 2 * var(--zd-section-gutter, var(--wp--preset--spacing--md, 1.5rem)))
	);
	margin-inline: auto;
	border-radius: var(--zd-card-radius, var(--wp--custom--radius--lg, 0.75rem));
}

.zerodigital-cta-banner__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

.zerodigital-cta-banner__inner {
	position: relative;
	z-index: 1;
	max-width: 46rem;
	margin-inline: auto;
}

/* Signature mark, centred for this centred layout. The same eight custom
 * properties the theme's .zd-spec::before reads, so the site's chosen keyline
 * shape reaches this band without either file naming the other — the shape
 * rules live on <body> and set nothing but values. box-sizing is declared
 * rather than assumed: the theme's reset already covers it, but plugin CSS has
 * to render sensibly without the theme, and the Ring is drawn as a border, so
 * without it that one shape would come out two hairlines too wide. */
.zerodigital-cta-banner__inner::before {
	content: "";
	box-sizing: border-box;
	display: var(--zd-keyline-display, block);
	width: var(--zd-accent-bar-w, 1.125rem);
	height: var(--zd-accent-bar-h, 0.625rem);
	background: var(--zd-keyline-fill, var(--zd-accent, var(--wp--preset--color--accent, #c4263c)));
	border: var(--zd-keyline-border, 0) solid var(--zd-accent, var(--wp--preset--color--accent, #c4263c));
	border-radius: var(--zd-accent-bar-radius, 999px);
	rotate: var(--zd-keyline-rotate, none);
	margin: 0 auto var(--wp--preset--spacing--md, 1.5rem);
}

.zerodigital-cta-banner__heading {
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-size: var(--zd-step-h2, clamp(1.9rem, 1.35rem + 2.2vw, 2.9rem));
	line-height: 1.1;
	letter-spacing: -0.015em;
	text-wrap: balance;
	margin: 0 0 var(--wp--preset--spacing--sm, 1rem);
}

.zerodigital-cta-banner__subtext {
	margin: 0 0 var(--wp--preset--spacing--md, 1.5rem);
	font-size: var(--zd-step-lede, clamp(1.0625rem, 1rem + 0.45vw, 1.25rem));
}

.zerodigital-cta-banner__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--zd-btn-min-h, 2.875rem);
	padding: var(--wp--preset--spacing--xs, 0.85rem) var(--wp--preset--spacing--lg, 1.75rem);
	border-radius: var(--zd-btn-radius, var(--wp--custom--radius--md, 0.5rem));
	background: var(--wp--preset--color--background, #fff);
	color: var(--wp--preset--color--primary, #1b3a5c);
	text-decoration: none;
	font-weight: 600;
}

/* --- default skin --- */
.zerodigital-cta-banner {
	background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 60%);
}


.zerodigital-cta-banner__subtext {
	opacity: 0.9;
}

.zerodigital-cta-banner__button {
	box-shadow: var(--zd-shadow-sm, 0 1px 3px rgba(16, 24, 40, 0.1));
	transition: background-color var(--zd-ease, 180ms ease), box-shadow var(--zd-ease, 180ms ease), transform var(--zd-ease, 180ms ease);
}

/* A light colour chosen for a banner styled dark: dark copy, and the button
 * swaps to a primary fill so it doesn't vanish into the ground. */
.zerodigital-cta-banner.zd-bg-light {
	color: var(--wp--preset--color--foreground, #16181b);
	background-image: none;
}

.zerodigital-cta-banner.zd-bg-light .zerodigital-cta-banner__button {
	background: var(--wp--preset--color--primary, #1b3a5c);
	color: var(--wp--preset--color--background, #fff);
}

.zerodigital-cta-banner.zd-bg-light .zerodigital-cta-banner__button:hover {
	background: var(--wp--preset--color--secondary, #0a3339);
	color: var(--wp--preset--color--background, #fff);
}

.zerodigital-cta-banner__button:hover {
	/* Darken the light button toward grey; keep the DARK label it has at rest
	 * (inherited from the base rule). The white label here was left over from
	 * when the hover fill was the accent — on this light fill it was invisible. */
	background: color-mix(in srgb, var(--wp--preset--color--surface, #fff) 90%, var(--wp--preset--color--foreground, #16181b));
	box-shadow: var(--zd-shadow-md, 0 4px 8px -2px rgba(16, 24, 40, 0.1));
	transform: translateY(-1px);
}

/* When a background image is set, lay a scrim over it so the white copy keeps its
 * contrast on any upload. `:has` targets only the image case — the solid-colour
 * banner needs no scrim. The scrim paints after the image (both stack at the
 * section root) and below the copy (__inner is z-index: 1). */
.zerodigital-cta-banner:has(.zerodigital-cta-banner__bg)::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(180deg, rgba(16, 24, 40, 0.45), rgba(16, 24, 40, 0.62));
}

/* ---- Optional side image ----------------------------------------------- */
/* Only rendered when an image is set; without one the banner emits exactly the
 * markup it always did, so the centred layout cannot shift. */
.zerodigital-cta-banner__layout {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: clamp(var(--wp--preset--spacing--md, 1.5rem), 4vw, var(--wp--preset--spacing--xl, 3rem));
	align-items: center;
	max-width: var(--zd-content-max, calc(var(--wp--style--global--wide-size, 1600px) - 2 * var(--wp--preset--spacing--md, 1.5rem)));
	margin-inline: auto;
}

.zerodigital-cta-banner__media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--zd-media-radius, var(--wp--custom--radius--lg, 0.75rem));
}

/* Beside an image the copy reads as a column, not a banner — centred text next
 * to a left-hand image looks accidental rather than composed. This overrides
 * the section's text-align on the inner rather than on the section itself, so
 * the no-image banner is untouched. */
.zerodigital-cta-banner--has-media .zerodigital-cta-banner__inner {
	max-width: none;
	margin-inline: 0;
	text-align: left;
}

/* The signature mark follows the copy. margin-inline only touches the inline
 * axis, so the tick keeps the bottom margin from its shorthand. */
.zerodigital-cta-banner--has-media .zerodigital-cta-banner__inner::before {
	margin-inline: 0;
}

/* Stacked, it returns to its centred self: an image sitting above ragged
 * left-aligned copy reads worse than above a centred block. */
@media (max-width: 782px) {
	.zerodigital-cta-banner__layout {
		grid-template-columns: 1fr;
	}

	.zerodigital-cta-banner--has-media .zerodigital-cta-banner__inner {
		text-align: center;
	}

	.zerodigital-cta-banner--has-media .zerodigital-cta-banner__inner::before {
		margin-inline: auto;
	}
}

/* The editor's prompt for an empty block (zerodigital_editor_placeholder()).
   Printed only in the editor preview, never on the live page. */
.zerodigital-cta-banner__empty {
	margin: 0;
	opacity: 0.7;
	font-style: italic;
}