/*
 * Image grid + flexible content block
 */

.wp-block-crunchr-image-grid-content.crunchr-image-grid-content {
	--crunchr-image-grid-line: rgba(161, 173, 191, 0.38);
	--crunchr-marker-base: #7f8ca4;
	--crunchr-image-grid-size: 180px;
	position: relative;
	isolation: isolate;
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	min-height: 900px;
	margin-block: 0 !important;
	overflow: hidden;
}

.wp-block-crunchr-image-grid-content.crunchr-image-grid-content::before {
	position: absolute;
	z-index: -2;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 100cqw;
	pointer-events: none;
	background: radial-gradient(161.18% 58.55% at 37.55% 50.06%, #f2f4f7 0%, #e2f2ff 100%);
	transform: translateX(-50%);
	content: "";
}

/* Match a full-width Group even when a constrained parent supplies a max-width. */
.wp-block-crunchr-image-grid-content.crunchr-image-grid-content.alignfull {
	left: 50%;
	width: 100cqw;
	max-width: 100cqw !important;
	margin: 0 !important;
	transform: translateX(-50%);
}

.crunchr-image-grid-content__inner {
	position: relative;
	left: 50%;
	display: grid;
	grid-template-columns: minmax(540px, 1fr) minmax(360px, 598px);
	align-items: center;
	gap: clamp(48px, 5vw, 96px);
	box-sizing: border-box;
	width: 100cqw;
	max-width: none;
	min-height: 900px;
	margin: 0;
	padding: 80px max(
		var(--wp--style--root--padding-left, 20px),
		calc((100cqw - 1440px) / 2)
	);
	transform: translateX(-50%);
}

.crunchr-image-grid-content__visual {
	position: relative;
	/* The x=0 grid line follows the site's 1440px left content border. */
	justify-self: start;
	width: 720px;
	height: 540px;
	transform-origin: left center;
}

.crunchr-image-grid-content__grid {
	position: absolute;
	/* Nine hundred is five complete cells, preserving alignment while ensuring
	 * separator lines never terminate inside the block or viewport. */
	inset: -900px;
	pointer-events: none;
	background-image:
		linear-gradient(to right, transparent calc(100% - 1px), var(--crunchr-image-grid-line) calc(100% - 1px)),
		linear-gradient(to bottom, transparent calc(100% - 1px), var(--crunchr-image-grid-line) calc(100% - 1px));
	background-repeat: repeat, repeat;
	/* Center the 1px separator stroke on the shared grid boundary. */
	background-position: 0.5px 0.5px;
	background-size:
		var(--crunchr-image-grid-size) var(--crunchr-image-grid-size),
		var(--crunchr-image-grid-size) var(--crunchr-image-grid-size);
	/* The oversized field starts 900px before the image area. The reveal is
	 * intentionally biased toward the large image and fades before the copy. */
	-webkit-mask-image: radial-gradient(ellipse 500px 560px at 1170px 1200px, #000 42%, rgba(0, 0, 0, 0.78) 68%, rgba(0, 0, 0, 0.48) 80%, rgba(0, 0, 0, 0.2) 91%, rgba(0, 0, 0, 0) 100%);
	mask-image: radial-gradient(ellipse 500px 560px at 1170px 1200px, #000 42%, rgba(0, 0, 0, 0.78) 68%, rgba(0, 0, 0, 0.48) 80%, rgba(0, 0, 0, 0.2) 91%, rgba(0, 0, 0, 0) 100%);
	will-change: transform;
	transform: translateZ(0);
}

.crunchr-image-grid-content__grid::before {
	position: absolute;
	z-index: 1;
	/* Keep the square reveal at the original one-cell overscan bounds. */
	inset: 720px;
	pointer-events: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Crect x='10' y='10' width='160' height='160' rx='16' fill='%233073C1' fill-opacity='.3'/%3E%3C/svg%3E");
	background-repeat: repeat;
	background-size: var(--crunchr-image-grid-size) var(--crunchr-image-grid-size);
	-webkit-mask-image: radial-gradient(20.68% 47.43% at 41.67% 53.33%, #000 0%, rgba(0, 0, 0, 0.9) 30%, rgba(0, 0, 0, 0.65) 58%, rgba(0, 0, 0, 0.34) 80%, rgba(0, 0, 0, 0.12) 93%, rgba(0, 0, 0, 0) 100%);
	mask-image: radial-gradient(20.68% 47.43% at 41.67% 53.33%, #000 0%, rgba(0, 0, 0, 0.9) 30%, rgba(0, 0, 0, 0.65) 58%, rgba(0, 0, 0, 0.34) 80%, rgba(0, 0, 0, 0.12) 93%, rgba(0, 0, 0, 0) 100%);
	content: "";
	will-change: transform;
	transform: translateZ(0);
}

.crunchr-image-grid-content__tile {
	--crunchr-marker-1: var(--crunchr-marker-base);
	--crunchr-marker-2: var(--crunchr-marker-base);
	--crunchr-marker-3: var(--crunchr-marker-base);
	--crunchr-marker-4: var(--crunchr-marker-base);
	transition:
		--crunchr-marker-1 380ms ease-in-out,
		--crunchr-marker-2 380ms ease-in-out,
		--crunchr-marker-3 380ms ease-in-out,
		--crunchr-marker-4 380ms ease-in-out;
	position: absolute;
	z-index: 1;
	box-sizing: border-box;
	width: 160px;
	height: 160px;
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.34);
	box-shadow: 14px 21px 24px rgba(23, 29, 38, 0.16);
}

.crunchr-image-grid-content__tile::after {
	position: absolute;
	z-index: 2;
	inset: -13px;
	pointer-events: none;
	background:
		linear-gradient(var(--crunchr-marker-1), var(--crunchr-marker-1)) left top / 6px 6px no-repeat,
		linear-gradient(var(--crunchr-marker-2), var(--crunchr-marker-2)) right top / 6px 6px no-repeat,
		linear-gradient(var(--crunchr-marker-3), var(--crunchr-marker-3)) left bottom / 6px 6px no-repeat,
		linear-gradient(var(--crunchr-marker-4), var(--crunchr-marker-4)) right bottom / 6px 6px no-repeat;
	content: "";
}

.crunchr-image-grid-content__tile img,
.crunchr-image-grid-content__media-button {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	border-radius: inherit;
}

.crunchr-image-grid-content__tile img {
	object-fit: cover;
}

.crunchr-image-grid-content__tile--1 { top: 10px; left: 10px; }
.crunchr-image-grid-content__tile--2 { top: 10px; left: 370px; }
.crunchr-image-grid-content__tile--3 { top: 190px; left: 550px; }
.crunchr-image-grid-content__tile--4 { top: 370px; left: 370px; }
.crunchr-image-grid-content__tile--5 {
	top: 190px;
	left: 10px;
	width: 340px;
	height: 340px;
	box-shadow: 23px 28px 51px rgba(5, 25, 59, 0.26);
}

.crunchr-image-grid-content__message {
	position: absolute;
	z-index: 4;
	top: 160px;
	left: 270px;
	box-sizing: border-box;
	width: 160px;
	height: 160px;
	border: 0.75px solid #fff;
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.33);
	box-shadow:
		-3px -4px 13.6px rgba(255, 255, 255, 0.09) inset,
		4px 4px 26px rgba(5, 25, 59, 0.05) inset,
		14px 21px 20.3px rgba(23, 29, 38, 0.26);
	-webkit-backdrop-filter: blur(9.8px);
	backdrop-filter: blur(9.8px);
	will-change: transform;
	transform: translateZ(0);
	contain: layout style paint;
}

.crunchr-image-grid-content__message-image,
.crunchr-image-grid-content__message-image-button {
	position: absolute;
	top: 27px;
	left: 27px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	padding: 0;
	border: 0;
	background: transparent;
	object-fit: contain;
}

.crunchr-image-grid-content__message-image-button img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.crunchr-image-grid-content__message-image-button span {
	font-size: var(--wp--preset--font-size--eyebrow-small);
	line-height: 1;
}

.crunchr-image-grid-content__message-text {
	position: absolute;
	right: 26px;
	bottom: 23px;
	left: 26px;
	margin: 0;
	color: var(--wp--preset--color--neutral-700, #3c4658);
	font-size: var(--wp--preset--font-size--eyebrow-small);
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.998px;
	text-transform: uppercase;
}

.crunchr-image-grid-content__content {
	position: relative;
	z-index: 2;
	min-width: 0;
}

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

.editor-styles-wrapper .crunchr-image-grid-content__media-button {
	min-width: 0;
	padding: 0;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.44);
	color: var(--wp--preset--color--neutral-700, #3c4658);
}

.editor-styles-wrapper .crunchr-image-grid-content__media-button > span {
	display: flex;
	flex-direction: column;
	gap: 6px;
	align-items: center;
	justify-content: center;
	padding: 16px;
}

.editor-styles-wrapper .crunchr-image-grid-content__media-button small {
	display: block;
	opacity: 0.7;
}

@media (max-width: 1600px) {
	.wp-block-crunchr-image-grid-content.crunchr-image-grid-content,
	.crunchr-image-grid-content__inner {
		min-height: 810px;
	}

	.crunchr-image-grid-content__visual {
		zoom: 0.9;
	}
}

@media (max-width: 1550px) {
	.wp-block-crunchr-image-grid-content.crunchr-image-grid-content,
	.crunchr-image-grid-content__inner {
		min-height: 738px;
	}

	.crunchr-image-grid-content__visual {
		zoom: 0.82;
	}
}

@media (max-width: 1500px) {
	.wp-block-crunchr-image-grid-content.crunchr-image-grid-content,
	.crunchr-image-grid-content__inner {
		min-height: 675px;
	}

	.crunchr-image-grid-content__visual {
		zoom: 0.75;
	}
}

@media (max-width: 1400px) {
	.wp-block-crunchr-image-grid-content.crunchr-image-grid-content,
	.crunchr-image-grid-content__inner {
		min-height: 648px;
	}

	.crunchr-image-grid-content__inner {
		grid-template-columns: minmax(430px, 1fr) minmax(320px, 0.85fr);
	}

	.crunchr-image-grid-content__visual {
		zoom: 0.72;
		transform: none;
	}
}

@media (max-width: 1250px) {
	.crunchr-image-grid-content__inner {
		grid-template-columns: max-content minmax(0, 1fr);
		gap: 64px;
	}

	.crunchr-image-grid-content__visual {
		width: 540px;
	}

	/* Collapse the right-hand image positions by one 180px grid cell. */
	.crunchr-image-grid-content__tile--2 {
		left: 190px;
	}

	.crunchr-image-grid-content__tile--3 {
		left: 370px;
	}

	/* Straddle the moved top image and its former cell. */
	.crunchr-image-grid-content__message {
		top: -20px;
		left: 320px;
		width: 120px;
		height: 120px;
	}

	.crunchr-image-grid-content__message-image,
	.crunchr-image-grid-content__message-image-button {
		top: 20px;
		left: 20px;
		width: 16px;
		height: 16px;
	}

	.crunchr-image-grid-content__message-text {
		right: 18px;
		bottom: 16px;
		left: 18px;
		font-size: var(--wp--preset--font-size--eyebrow-small);
		letter-spacing: 0.8px;
	}
}

@media (max-width: 1100px) {
	.wp-block-crunchr-image-grid-content.crunchr-image-grid-content,
	.crunchr-image-grid-content__inner {
		min-height: 0;
	}

	.crunchr-image-grid-content__inner {
		grid-template-columns: 1fr;
		gap: 40px;
		width: 100cqw;
		padding: 64px 30px;
	}

	.crunchr-image-grid-content__visual {
		justify-self: start;
		margin: 0;
		zoom: 0.82;
		transform: none;
		transform-origin: left center;
	}
}

@media (min-width: 782px) and (max-width: 1100px) {
	.crunchr-image-grid-content__inner {
		padding-right: var(--wp--style--root--padding-right, 20px);
		padding-left: var(--wp--style--root--padding-left, 20px);
	}
}

@media (max-width: 600px) {
	.crunchr-image-grid-content__visual {
		margin: 0;
		zoom: 0.6;
		transform: none;
	}
}