/**
 * Integrations puzzle, adapted from orchestrasolutions.com (snippet-aggregator
 * "puzzle" feature): same grid, tile, timing and shadow; scoped to .pcib-puzzle
 * and sized for the megamenu.
 */
.pcib-puzzle {
	width: 100%;
	max-width: 420px;
	container-type: inline-size;
}

/* 5 wide, 3 down; tile size and gap follow the puzzle's width. */
.pcib-puzzle .puzzle-grid {
	position: relative;
	width: 100%;
	--puzzle-gap: 2cqw;
	--puzzle-tile-size: calc((100cqw - (4 * var(--puzzle-gap))) / 5);
	height: calc(3 * var(--puzzle-tile-size) + 2 * var(--puzzle-gap));
}

.pcib-puzzle .tile {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--puzzle-tile-size);
	height: var(--puzzle-tile-size);
	overflow: hidden;
	border-radius: 20px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
	transition: all 1.2s cubic-bezier(0.165, 0.84, 0.44, 1);
	cursor: pointer;
}

.pcib-puzzle .tile img {
	width: 101%;
	height: 101%;
	object-fit: contain;
}

.pcib-puzzle .tile:hover,
.pcib-puzzle .tile:focus-visible {
	transform: scale(1.05);
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
}

.pcib-puzzle .tile.empty {
	background: transparent;
	box-shadow: none;
	cursor: default;
}

/* Menu tiles are about 70px: Orchestra's 20px corners scaled to match. */
.pcib-puzzle .tile {
	border-radius: 14px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
}

/* Still grid (mobile menu, reduced motion): no sliding. */
.pcib-puzzle.is-still .tile {
	transition: none;
}

@media (prefers-reduced-motion: reduce) {
	.pcib-puzzle .tile {
		transition: none;
	}

	.pcib-puzzle .tile:hover {
		transform: none;
	}
}

/* Tile positions (Orchestra generates these in PHP). */
.pcib-puzzle .pos-0-0 { left: calc(0 * (var(--puzzle-tile-size) + var(--puzzle-gap))); top: calc(0 * (var(--puzzle-tile-size) + var(--puzzle-gap))); }
.pcib-puzzle .pos-0-1 { left: calc(1 * (var(--puzzle-tile-size) + var(--puzzle-gap))); top: calc(0 * (var(--puzzle-tile-size) + var(--puzzle-gap))); }
.pcib-puzzle .pos-0-2 { left: calc(2 * (var(--puzzle-tile-size) + var(--puzzle-gap))); top: calc(0 * (var(--puzzle-tile-size) + var(--puzzle-gap))); }
.pcib-puzzle .pos-0-3 { left: calc(3 * (var(--puzzle-tile-size) + var(--puzzle-gap))); top: calc(0 * (var(--puzzle-tile-size) + var(--puzzle-gap))); }
.pcib-puzzle .pos-0-4 { left: calc(4 * (var(--puzzle-tile-size) + var(--puzzle-gap))); top: calc(0 * (var(--puzzle-tile-size) + var(--puzzle-gap))); }
.pcib-puzzle .pos-1-0 { left: calc(0 * (var(--puzzle-tile-size) + var(--puzzle-gap))); top: calc(1 * (var(--puzzle-tile-size) + var(--puzzle-gap))); }
.pcib-puzzle .pos-1-1 { left: calc(1 * (var(--puzzle-tile-size) + var(--puzzle-gap))); top: calc(1 * (var(--puzzle-tile-size) + var(--puzzle-gap))); }
.pcib-puzzle .pos-1-2 { left: calc(2 * (var(--puzzle-tile-size) + var(--puzzle-gap))); top: calc(1 * (var(--puzzle-tile-size) + var(--puzzle-gap))); }
.pcib-puzzle .pos-1-3 { left: calc(3 * (var(--puzzle-tile-size) + var(--puzzle-gap))); top: calc(1 * (var(--puzzle-tile-size) + var(--puzzle-gap))); }
.pcib-puzzle .pos-1-4 { left: calc(4 * (var(--puzzle-tile-size) + var(--puzzle-gap))); top: calc(1 * (var(--puzzle-tile-size) + var(--puzzle-gap))); }
.pcib-puzzle .pos-2-0 { left: calc(0 * (var(--puzzle-tile-size) + var(--puzzle-gap))); top: calc(2 * (var(--puzzle-tile-size) + var(--puzzle-gap))); }
.pcib-puzzle .pos-2-1 { left: calc(1 * (var(--puzzle-tile-size) + var(--puzzle-gap))); top: calc(2 * (var(--puzzle-tile-size) + var(--puzzle-gap))); }
.pcib-puzzle .pos-2-2 { left: calc(2 * (var(--puzzle-tile-size) + var(--puzzle-gap))); top: calc(2 * (var(--puzzle-tile-size) + var(--puzzle-gap))); }
.pcib-puzzle .pos-2-3 { left: calc(3 * (var(--puzzle-tile-size) + var(--puzzle-gap))); top: calc(2 * (var(--puzzle-tile-size) + var(--puzzle-gap))); }
.pcib-puzzle .pos-2-4 { left: calc(4 * (var(--puzzle-tile-size) + var(--puzzle-gap))); top: calc(2 * (var(--puzzle-tile-size) + var(--puzzle-gap))); }

/* Mobile menu: still grid above the category links. */
.pcib-mobile-acc .pcib-puzzle {
	margin: 0.9rem 0 0.4rem;
	max-width: 320px;
}