/**
 * CTA block patterns — light split, gradient hero, dark strip, image hero.
 */

/* Full-bleed breakout inside constrained post content */
:root .is-layout-constrained > .wp-block-group.activ-cta-block.alignfull,
.editor-styles-wrapper .is-root-container > .wp-block-group.activ-cta-block.alignfull,
.editor-styles-wrapper .wp-block-post-content > .wp-block-group.activ-cta-block.alignfull,
.block-editor-block-preview__content .wp-block-group.activ-cta-block.alignfull {
	box-sizing: border-box;
	margin-inline: calc(50% - 50vw) !important;
	max-width: none !important;
	width: 100vw;
}

.activ-cta-block {
	box-sizing: border-box;
	isolation: isolate;
	overflow: hidden;
	padding: 0 !important;
	position: relative;
}

.activ-cta-block--gradient::before,
.activ-cta-block--quote::before,
.activ-cta-block--dark-strip::before,
.activ-cta-block--image::before {
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
	z-index: 0;
}

.activ-cta-block--gradient::before,
.activ-cta-block--quote::before {
	/* Solid black; procedural WebGL draws the plasma. Static PNG only for reduced-motion / editor. */
	background-color: #050508;
	background-image: none;
}

.activ-cta-block__art {
	display: none;
}

.activ-cta-block__canvas,
.activ-cta-block .activ-plasma-canvas {
	display: block;
	height: 100%;
	inset: 0;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	width: 100%;
	z-index: 0;
}

/* WebGL booted onto black — show canvas before entrance so there’s no JPG flash. */
.activ-cta-block--plasma-boot .activ-cta-block__canvas,
.activ-cta-block--plasma-ready .activ-cta-block__canvas,
.activ-cta-block.activ-plasma--boot .activ-plasma-canvas,
.activ-cta-block.activ-plasma--ready .activ-plasma-canvas {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.activ-cta-block__canvas,
	.activ-cta-block .activ-plasma-canvas {
		display: none;
	}

	.activ-cta-block--gradient::before {
		background-image: url("../images/cta-gradient-canvas.png");
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
	}

	.activ-cta-block--quote::before {
		/* Full-section capture — same framing as the live WebGL crop. */
		background-image: url("../images/cta-quote-editor-bg.png");
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
	}
}

.activ-cta-block--dark-strip::before {
	background-color: var(--wp--preset--color--contrast-2);
	background-image: url("../images/cta-dark-strip-canvas.jpg");
}

.activ-cta-block--image::before {
	background-color: var(--wp--preset--color--contrast);
	background-image: url("../images/cta-image-canvas.jpg");
}

/* Kill flow blockGap on direct children — otherwise margin collapses
   outside the section and leaves a gap above the CTA background. */
.activ-cta-block > * {
	margin-block: 0 !important;
}

.activ-cta-block__inner {
	box-sizing: border-box;
	position: relative;
	width: 100%;
	z-index: 1;
}

.activ-cta-block .activ-layout-container {
	box-sizing: border-box;
	margin-inline: auto !important;
	max-width: var(--activ-layout-max-width);
	width: 100%;
}

.activ-cta-block__inner > .wp-block-group:not(.activ-layout-container),
.activ-cta-block .activ-layout-container > .wp-block-group,
.activ-cta-block__main,
.activ-cta-block__aside {
	margin-block: 0 !important;
	margin-inline: 0 !important;
}

.activ-cta-block__main,
.activ-cta-block__aside {
	box-sizing: border-box;
}

.activ-cta-block__main > .wp-block-heading,
.activ-cta-block__aside > .wp-block-heading {
	margin-block: 0;
}

.activ-cta-block__main > .wp-block-paragraph,
.activ-cta-block__aside > .wp-block-paragraph {
	margin-block: 0;
}

.activ-cta-block__main > .wp-block-buttons,
.activ-cta-block__aside > .wp-block-buttons {
	margin-block: 0;
}

/* Dark variants — force light text regardless of editor defaults */
.activ-cta-block--gradient,
.activ-cta-block--quote,
.activ-cta-block--dark-strip,
.activ-cta-block--image {
	color: var(--wp--preset--color--base);
}

.activ-cta-block--gradient .wp-block-heading,
.activ-cta-block--quote .wp-block-heading,
.activ-cta-block--image .wp-block-heading {
	color: var(--wp--preset--color--base) !important;
}

/* Large CTA buttons (Figma LG size) */
.activ-cta-block .wp-block-button__link {
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
	letter-spacing: -0.5px;
	line-height: 1.2;
	padding: var(--wp--preset--spacing--6) var(--wp--preset--spacing--8);
}

.activ-cta-block .wp-block-button.is-style-light .wp-block-button__link {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--sm);
	letter-spacing: -0.5px;
}

.activ-cta-block .wp-block-button.is-style-secondary .wp-block-button__link {
	background-color: var(--wp--preset--color--neutral-600);
	color: var(--wp--preset--color--base);
}

.activ-cta-block__aside .wp-block-button__link {
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 0.5px;
	padding: var(--wp--preset--spacing--4) var(--wp--preset--spacing--5);
}

.activ-cta-block .wp-block-button.is-style-secondary .wp-block-button__link:hover,
.activ-cta-block .wp-block-button.is-style-secondary .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--neutral-700);
	color: var(--wp--preset--color--base);
}

.activ-cta-block .wp-block-button.is-style-tertiary .wp-block-button__link:hover,
.activ-cta-block .wp-block-button.is-style-tertiary .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--neutral-200);
	color: var(--wp--preset--color--contrast);
}

/* — Light split (Default) — */
.activ-cta-block--light-split {
	background-color: var(--wp--preset--color--base-2);
	color: var(--wp--preset--color--contrast);
}

.activ-cta-block--light-split .activ-cta-block__inner:not(:has(.activ-layout-container)),
.activ-cta-block--light-split .activ-layout-container {
	align-items: stretch;
	display: flex;
	flex-wrap: nowrap;
	gap: 0;
	height: 31.6875rem;
	min-height: 31.6875rem;
}

.activ-cta-block--light-split .activ-cta-block__inner {
	padding-block: 0;
}

.activ-cta-block--light-split .activ-cta-block__main {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: var(--wp--preset--spacing--15);
	max-width: 56.25rem;
	min-width: 0;
	padding-block: 4.375rem;
}

.activ-cta-block--light-split .activ-cta-block__main > .wp-block-heading {
	max-width: 56.25rem;
}

.activ-cta-block--light-split .activ-cta-block__aside {
	align-self: stretch;
	display: flex;
	flex: 0 0 22.25rem;
	flex-direction: column;
	gap: var(--wp--preset--spacing--6);
	padding-block: 4.375rem;
	padding-inline: 3.125rem 0;
	position: relative;
}

.activ-cta-block--light-split .activ-cta-block__aside::before {
	background-color: var(--wp--preset--color--neutral-200);
	content: "";
	inset-block: 0;
	inset-inline-start: 0;
	position: absolute;
	width: 1px;
}

.activ-cta-block--light-split .activ-cta-block__aside > .wp-block-heading,
.activ-cta-block--light-split .activ-cta-block__aside > .wp-block-paragraph,
.activ-cta-block--light-split .activ-cta-block__aside > .wp-block-buttons {
	position: relative;
	z-index: 1;
}

.activ-cta-block--light-split .activ-cta-block__aside > .wp-block-paragraph {
	color: var(--wp--preset--color--neutral-700);
	text-wrap: pretty;
}

.activ-cta-block--light-split .wp-block-buttons {
	gap: var(--wp--preset--spacing--3);
}

/* — Gradient hero — */
.activ-cta-block--gradient {
	background-color: var(--wp--preset--color--contrast-2);
	height: 31.6875rem;
	min-height: 31.6875rem;
}

.activ-cta-block--gradient .activ-cta-block__inner,
.activ-cta-block--dark-strip .activ-cta-block__inner,
.activ-cta-block--image .activ-cta-block__inner {
	box-sizing: border-box;
	padding-block: 4.375rem;
}

.activ-cta-block--gradient .activ-cta-block__inner {
	height: 100%;
}

.activ-cta-block--gradient .activ-layout-container,
.activ-cta-block--gradient .activ-cta-block__inner:not(:has(.activ-layout-container)) {
	height: 100%;
}

.activ-cta-block--gradient .activ-cta-block__main {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--15);
	max-width: 56.25rem;
}

/* — Quote (dark plasma crop + testimonial) — Figma 951:4024
 * Plasma is the top-right of the fountain, flipped so cream tips sit
 * in the bottom-left of the section; right side stays black.
 */
.activ-cta-block--quote {
	background-color: #050508;
	overflow: clip;
}

.activ-cta-block--quote .activ-plasma-canvas {
	/* Zoomed crop; nudged right of full half-clip so ~2 bars enter from the left. */
	height: 220%;
	left: -70%;
	top: -70%;
	transform: scaleY(-1);
	transform-origin: center center;
	width: 165%;
}

.activ-cta-block--quote .activ-cta-block__inner {
	box-sizing: border-box;
	padding-block: var(--wp--preset--spacing--40);
}

.activ-cta-block--quote .activ-cta-block__main {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--10);
	max-width: 62.5rem; /* 1000px — Figma Testimonials max */
}

.activ-cta-block--quote .activ-quote-item {
	color: var(--wp--preset--color--base);
	max-width: 58.75rem; /* 940px */
}

.activ-cta-block--quote .activ-quote-item__quote {
	color: var(--wp--preset--color--base);
}

.activ-cta-block--quote .activ-quote-item__attr {
	border-left-color: rgba(227, 227, 227, 0.3);
}

.activ-cta-block--quote .activ-quote-item__byline,
.activ-cta-block--quote .activ-quote-item__byline.has-neutral-700-color {
	color: var(--wp--preset--color--neutral-300, #ddd) !important;
}

.activ-cta-block--quote .activ-quote-item__organization,
.activ-cta-block--quote .activ-quote-item__organization.has-neutral-500-color {
	color: var(--wp--preset--color--neutral-300, #ddd) !important;
	opacity: 0.7;
}

.activ-cta-block--quote .wp-block-buttons {
	gap: var(--wp--preset--spacing--3);
}

/* Editor — static plasma (WebGL does not run in the canvas). */
.editor-styles-wrapper .activ-cta-block--quote::before {
	/* Full-section capture — same framing as the live WebGL crop. */
	background-image: url("../images/cta-quote-editor-bg.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.editor-styles-wrapper .activ-cta-block--quote .activ-plasma-canvas,
.editor-styles-wrapper .activ-cta-block--quote .activ-cta-block__canvas {
	display: none;
}

/* — Dark strip — */
.activ-cta-block--dark-strip {
	background-color: var(--wp--preset--color--contrast-2);
	height: 12.375rem;
	min-height: 12.375rem;
}

.activ-cta-block--dark-strip .activ-cta-block__inner {
	height: 100%;
}

.activ-cta-block--dark-strip .activ-layout-container,
.activ-cta-block--dark-strip .activ-cta-block__inner:not(:has(.activ-layout-container)) {
	align-items: center;
	display: flex;
	height: 100%;
}

.activ-cta-block--dark-strip .activ-cta-block__main {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--15);
	justify-content: center;
}

/* — Image hero — */
.activ-cta-block--image {
	background-color: var(--wp--preset--color--contrast-2);
	height: 43.8125rem;
	min-height: 43.8125rem;
}

.activ-cta-block--image .activ-cta-block__inner {
	height: 100%;
}

.activ-cta-block--image .activ-layout-container,
.activ-cta-block--image .activ-cta-block__inner:not(:has(.activ-layout-container)) {
	display: flex;
	height: 100%;
}

.activ-cta-block--image .activ-cta-block__main {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--15);
	justify-content: center;
	max-width: 56.25rem;
	min-height: 100%;
}

@media (max-width: 1024px) {
	.activ-cta-block--light-split .activ-cta-block__inner:not(:has(.activ-layout-container)),
	.activ-cta-block--light-split .activ-layout-container {
		flex-direction: column;
		height: auto;
		min-height: auto;
	}

	.activ-cta-block--light-split .activ-cta-block__main,
	.activ-cta-block--light-split .activ-cta-block__aside {
		flex: 1 1 auto;
		max-width: none;
		width: 100%;
	}

	.activ-cta-block--light-split .activ-cta-block__main {
		padding-block: 4.375rem var(--wp--preset--spacing--15);
	}

	.activ-cta-block--light-split .activ-cta-block__aside {
		padding-block: var(--wp--preset--spacing--15) 4.375rem;
		padding-inline: 0;
	}

	.activ-cta-block--light-split .activ-cta-block__aside::before {
		height: 1px;
		inset-block-start: 0;
		inset-inline: 0;
		width: auto;
	}
}

@media (max-width: 768px) {
	.activ-cta-block--gradient,
	.activ-cta-block--dark-strip,
	.activ-cta-block--image {
		height: auto;
		min-height: auto;
	}

	.activ-cta-block--quote .activ-cta-block__inner {
		padding-block: var(--wp--preset--spacing--20);
	}

	.activ-cta-block--image .activ-cta-block__main {
		min-height: 16rem;
	}
}

@media (max-width: 480px) {
	.activ-cta-block .wp-block-buttons {
		flex-direction: column;
		width: 100%;
	}

	.activ-cta-block .wp-block-button {
		width: 100%;
	}

	.activ-cta-block .wp-block-button__link {
		text-align: center;
		width: 100%;
	}
}