/* Brentwood curved divider — replicates the curved shape on brentwood.ca
   (academics, etc.) where a coloured text column bulges into the adjacent
   image.

   This mirrors the live markup exactly: a CSS ellipse (border-radius:100%) of a
   FIXED width (live's w-32 = 8rem) and a section-relative height (live's
   h-150%), positioned so only a small fixed amount bleeds into the image
   (live's right-[-1rem] = ~1rem). Because the bleed is fixed and small, even
   tall sections show only a subtle ~1rem bulge — no big space — while the wide
   8rem ellipse keeps the edge gently curved top-to-bottom.

   The colour comes from the text section's background (detected by bw-curve.js).

   Knobs (shortcode attributes):
     bleed  = how far the curve bulges into the image (default 1rem, like live)
     width  = ellipse width / gentleness (default 8rem, like live's w-32)
     height = ellipse height as % of the section (default 150%, like live) */

.bw-curve {
	pointer-events: none;
}

.bw-curve__shape {
	position: absolute;
	width: var(--bw-curve-width, 8rem);
	height: var(--bw-curve-height, 150%);
	top: calc((100% - var(--bw-curve-height, 150%)) / 2);   /* vertically centred */
	border-radius: 100%;
	background-color: var(--bw-curve-color, #ffffff);
}

/* ---- Primary model: anchored in the image column ------------------------- */
.bw-curve--in-image {
	position: absolute;
	inset: 0;
	overflow: hidden;
	z-index: 2;
}
/* The ellipse's near edge sits --bleed past the seam into the image; the rest
   of the wide ellipse extends back over the text side and is clipped away. */
.bw-curve--in-image.bw-curve--right .bw-curve__shape {
	right: auto;
	left: calc(var(--bw-curve-bleed, 1rem) - var(--bw-curve-width, 8rem));
}
.bw-curve--in-image.bw-curve--left .bw-curve__shape {
	left: auto;
	right: calc(var(--bw-curve-bleed, 1rem) - var(--bw-curve-width, 8rem));
}

/* ---- Fallback: anchored to the text column (no adjacent image column) ----- */
.bw-curve:not(.bw-curve--in-image) {
	position: absolute;
	top: 0;
	bottom: 0;
	overflow: hidden;
	z-index: 1;
}
.bw-curve--right:not(.bw-curve--in-image) { left: 0; right: calc(-1 * var(--bw-curve-bleed, 1rem)); }
.bw-curve--left:not(.bw-curve--in-image)  { right: 0; left:  calc(-1 * var(--bw-curve-bleed, 1rem)); }
.bw-curve--right:not(.bw-curve--in-image) .bw-curve__shape { right: 0; left: auto; }
.bw-curve--left:not(.bw-curve--in-image)  .bw-curve__shape { left: 0; right: auto; }

/* Desktop-only flourish, like the live site (hidden md:block). */
@media (max-width: 767px) {
	.bw-curve { display: none; }
}
@media print {
	.bw-curve { display: none !important; }
}