/*
 * Full-width, two-column CTA with a Figma-matched right grid field.
 */

.wp-block-crunchr-grid-cta.crunchr-grid-cta {
	--crunchr-grid-cta-size: 180px;
	--crunchr-grid-cta-marker-offset: 2.5px;
	--crunchr-grid-cta-marker-size: 5px;
	--crunchr-grid-cta-content-gutter: max(
		var(--wp--style--root--padding-right, 20px),
		calc((100cqw - 1440px) / 2)
	);
	--crunchr-grid-cta-pattern-offset: var(--crunchr-grid-cta-content-gutter);
	--crunchr-grid-cta-cell-reveal-y: 290px;
	--crunchr-grid-cta-line-reveal-y: 330px;
	position: relative;
	left: 50%;
	isolation: isolate;
	box-sizing: border-box;
	width: 100cqw;
	max-width: 100cqw !important;
	min-height: var(--crunchr-grid-cta-min-height, 901px);
	margin-right: 0 !important;
	margin-left: 0 !important;
	overflow: hidden;
	background: var(--wp--preset--color--neutral-900, #171d26);
	color: var(--wp--preset--color--white, #fff);
	transform: translateX(-50%);
}

.wp-block-crunchr-grid-cta.crunchr-grid-cta::before,
.wp-block-crunchr-grid-cta.crunchr-grid-cta::after {
	position: absolute;
	z-index: 0;
	inset: 0;
	pointer-events: none;
	content: "";
}

/* Exact Figma vector layers. Their radial opacity is painted directly into
 * each SVG fill, avoiding CSS masks and their cross-browser halo artifacts. */
.wp-block-crunchr-grid-cta.crunchr-grid-cta::before {
	background-image:
		url("../../icons/grid-cta-figma-markers.svg"),
		url("../../icons/grid-cta-figma-cells.svg"),
		url("../../icons/grid-cta-figma-lines.svg");
	background-repeat: no-repeat, no-repeat, no-repeat;
	background-position:
		center top 19.75%,
		center top 1%,
		center top;
	background-size:
		112.76% 40.51%,
		111.46% 97.67%,
		112.55% 100%;
}

.wp-block-crunchr-grid-cta.crunchr-grid-cta.has-canvas-grid::before {
	display: none;
}

.crunchr-grid-cta__canvas {
	position: absolute;
	z-index: 0;
	inset: 0;
	display: block;
	pointer-events: none;
}

.crunchr-grid-cta__canvas--lines {
	z-index: 1;
	transition: opacity 2.8s cubic-bezier(0.37, 0, 0.63, 1);
}

.crunchr-grid-cta__canvas--markers {
	z-index: 2;
}

/* The complete visual is composed above so there is no second mask edge. */
.wp-block-crunchr-grid-cta.crunchr-grid-cta::after {
	display: none;
}

.crunchr-grid-cta__inner {
	position: relative;
	z-index: 3;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: center;
	gap: clamp(48px, 6vw, 120px);
	box-sizing: border-box;
	width: min(
		calc(100% - (2 * var(--crunchr-grid-cta-content-gutter))),
		1440px
	);
	min-height: inherit;
	margin-inline: auto;
	padding-top: var(--crunchr-grid-cta-padding-top, 160px);
	padding-bottom: var(--crunchr-grid-cta-padding-bottom, 160px);
}

.crunchr-grid-cta__column {
	position: relative;
	min-width: 0;
}

.crunchr-grid-cta__column > :first-child { margin-top: 0; }
.crunchr-grid-cta__column > :last-child { margin-bottom: 0; }

.editor-styles-wrapper .crunchr-grid-cta__column {
	min-height: 120px;
	padding: 16px;
	border: 1px dashed rgba(255, 255, 255, 0.28);
}

@media (max-width: 900px) {
	.wp-block-crunchr-grid-cta.crunchr-grid-cta {
		--crunchr-grid-cta-size: 120px;
		--crunchr-grid-cta-marker-offset: 1.667px;
		--crunchr-grid-cta-marker-size: 3.333px;
		min-height: 0;
	}

	.crunchr-grid-cta__inner {
		grid-template-columns: 1fr;
		gap: 64px;
		width: min(100% - 40px, 720px);
	}
}

@media (min-width: 782px) and (max-width: 900px) {
	.crunchr-grid-cta__inner {
		width: calc(100% - (2 * var(--crunchr-grid-cta-content-gutter)));
	}
}

@media (max-width: 480px) {
	.wp-block-crunchr-grid-cta.crunchr-grid-cta {
		--crunchr-grid-cta-size: 96px;
		--crunchr-grid-cta-marker-offset: 1.333px;
		--crunchr-grid-cta-marker-size: 2.667px;
	}
}