/* Column Curve — EDITOR canvas preview.
 *
 * On the front end the curve marker is injected by PHP (brentwood-curve.php) and
 * then bw-curve.js relocates it into the adjacent image column and copies the
 * section's background colour. That runtime relocation can't run reliably in the
 * Gutenberg editor (React owns the canvas DOM), so here we draw an equivalent
 * curve with pure CSS on the column's own inner wrapper, so admins can SEE the
 * curve while editing — just like the Section "Red Border" preview.
 *
 * The class bw-bulge-edit / bw-bulge-edit--<side> is added to the column wrapper
 * by assets/bw-bulge-editor.js (editor.BlockListBlock filter); the curve knobs
 * ride along as --bw-curve-* custom properties (same names the front end uses).
 *
 * Editor wrapper class is .kadence-inner-column-inner (the front-end save markup
 * uses .kt-inside-inner-col — they differ; see the Red Border notes).
 *
 * Colour: the ellipse inherits the inner wrapper's background-colour (the section
 * colour), matching the live "follow the section background" behaviour for the
 * common case where the bulging column carries its own background. A manual
 * Colour override (--bw-curve-color) wins when set. */

/* Raise the bulging column above its neighbour so the ellipse can show over the
   adjacent image column, and let it overflow past the column edge. */
.bw-bulge-edit {
	position: relative;
	z-index: 2;
}
.bw-bulge-edit .kadence-inner-column-inner {
	position: relative;
	overflow: visible;
}

/* The curve itself — a wide CSS ellipse (border-radius:100%), vertically centred,
   mirroring assets/bw-curve.css. z-index:-1 keeps it behind the column's own text
   (and, since it's the section colour, the in-column part blends invisibly into
   the background); only the part bulging past the edge is visible. */
.bw-bulge-edit .kadence-inner-column-inner::after {
	content: "";
	position: absolute;
	z-index: -1;
	pointer-events: none;
	width: var( --bw-curve-width, 8rem );
	height: var( --bw-curve-height, 150% );
	top: calc( ( 100% - var( --bw-curve-height, 150% ) ) / 2 );
	border-radius: 100%;
	background-color: var( --bw-curve-color, inherit );
	/* Clip the ellipse to the column's own height so its rounded top/bottom don't
	   spill into the rows above/below — the front end clips the same overshoot via
	   the image column's overflow:hidden. Only the top/bottom are trimmed; the
	   sideways bulge (left/right = 0) is kept. The default height is 150% centred
	   (25% overshoot each side = 1/6 = 16.667% of the ellipse box), so trim that.
	   Horizontal stays full so the bulge into the neighbour column still shows. */
	clip-path: inset( 16.667% 0 16.667% 0 );
}

/* Bulge right — the ellipse's near edge sits --bleed past the column's right
   edge; bulge left mirrors it. */
.bw-bulge-edit--right .kadence-inner-column-inner::after {
	right: calc( -1 * var( --bw-curve-bleed, 1rem ) );
	left: auto;
}
.bw-bulge-edit--left .kadence-inner-column-inner::after {
	left: calc( -1 * var( --bw-curve-bleed, 1rem ) );
	right: auto;
}

/* Match the live desktop-only flourish so the preview tracks the front end. */
@media ( max-width: 767px ) {
	.bw-bulge-edit .kadence-inner-column-inner::after { display: none; }
}