.wp-block-columns:has( > .wp-block-column.vk-column--extended-bg ) {
	overflow: visible;
	container-type: inline-size;
	container-name: vk-extended-cols;
}

.wp-block-column.vk-column--extended-bg {
	position: relative;
	z-index: 0;
	isolation: isolate;
	/*
	 * Side bleed to the viewport edge only — not 100vw —
	 * so background-size: cover still scales against a near-column box.
	 */
	--vk-extended-bleed: max(0px, calc((100vw - 100cqw) / 2));
}

/*
 * Background layer sized to the column (width/height 100%).
 * Cover must use the column aspect ratio; expanding to 100vw zooms the image.
 */
.wp-block-column.vk-column--extended-bg::before {
	content: '';
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	pointer-events: none;
	background-color: var(--vk-column-extended-bg, transparent);
	background-image: var(--vk-column-extended-bg-image, none);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.wp-block-column.vk-column--extended-bg::after {
	content: none;
}

/*
 * Edge bleed: extend only by the gap between the columns container
 * and the viewport edge (color and image share the same geometry).
 */
.wp-block-columns > .wp-block-column.vk-column--extended-bg:first-child:not(:last-child)::before {
	inset: auto;
	top: 0;
	bottom: 0;
	right: 0;
	left: calc(-1 * var(--vk-extended-bleed));
	width: calc(100% + var(--vk-extended-bleed));
	height: 100%;
}

.wp-block-columns > .wp-block-column.vk-column--extended-bg:last-child:not(:first-child)::before {
	inset: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: auto;
	width: calc(100% + var(--vk-extended-bleed));
	height: 100%;
}

.wp-block-columns > .wp-block-column.vk-column--extended-bg:first-child:last-child::before {
	inset: auto;
	top: 0;
	bottom: 0;
	left: calc(-1 * var(--vk-extended-bleed));
	right: auto;
	width: calc(100% + (var(--vk-extended-bleed) * 2));
	height: 100%;
}

@media (max-width: 781px) {
	/*
	 * When columns stack, each column spans the full container width.
	 * Bleed both sides so the background reaches the viewport edges
	 * (one-side desktop bleed would leave a gap on the opposite side).
	 */
	.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column.vk-column--extended-bg:first-child:not(:last-child)::before,
	.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column.vk-column--extended-bg:last-child:not(:first-child)::before {
		inset: auto;
		top: 0;
		bottom: 0;
		left: calc(-1 * var(--vk-extended-bleed));
		right: auto;
		width: calc(100% + (var(--vk-extended-bleed) * 2));
		height: 100%;
	}
}