/**
 * Bridge corners — curved cutouts using the mockup's two-element pattern.
 *
 * Source design: website/web/app/_mockup/bridge1/template/bridge-starten-5.html
 * (`.image-with-cutout--variant-1`). The mockup uses two copies of the image:
 * one clipped to remove a rectangular notch, one masked to show only the
 * curved L-tab. Stacked, the image gets a curved corner.
 *
 * Here we apply the same idea to a content block:
 *
 *   <element class="bridge-corners-host">
 *       <element class="<bg-class> bridge-corners-container"
 *           style="clip-path: polygon(…rectangular notches…);">
 *           …block content…
 *       </element>
 *       <element class="<bg-class> bridge-corners-tab bridge-corners-tab--top-right"></element>
 *       <a class="bridge-corner bridge-corner--top-right-arrow">…</a>  — optional
 *   </element>
 *
 * The container's clip-path cuts a rectangular --bridge-corner-width ×
 * --bridge-corner-height notch from each active corner. A `.bridge-corners-tab`
 * sibling per active corner — sized 200×80 in the same corner — carries the
 * same background colour as the container (via the shared bg class) and is
 * masked to the L-shape, so the L is the only part that paints. The notch
 * minus the L tab is the curved transparent cutout that the parent's
 * background shows through.
 *
 * Sizing:
 *   --bridge-corner-width / --height on `.bridge-corners-host` drive both
 *   the clip-path notch and the tab box. Override these to resize cuts.
 *
 * Arrow links:
 *   For arrow variants the partial emits an `<a class="bridge-corner …">`
 *   absolutely positioned inside the cut area.
 */

.bridge-corners-host {
	position: relative;

	--bridge-corner-width:       200px;
	/* --bridge-corner-arrow-width: 137.5px; */
	--bridge-corner-arrow-width: 110px;
	--bridge-corner-height:      80px;
	/* Plain top variants (top-left / top-right without a link) get a
	   shorter cut — 15px less than the standard height. */
	--bridge-corner-top-height:  65px;
	--bridge-corner-overlap:     2px;
	--bridge-corner-icon-color:  var( --bs-primary );

	/* L-tab SVG masks, one per corner orientation. Each is the curved L
	   from the mockup, filled white and oriented so its outer-corner vertex
	   lines up with the corresponding tab anchor.

	   Curve radius is 16 SVG units → 16px rendered at the default
	   --bridge-corner-width / --bridge-corner-height (200×80 → 1:1),
	   matching the theme's `1rem` border-radius. Bar thickness and strip
	   width track the radius. */
	--bridge-corner-tab-tr: url( 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 80" preserveAspectRatio="none"><path fill="%23fff" d="M0,0 C10.67,0 16,5.33 16,16 L16,48 C16,64 30.85,64 32,64 L184,64 C194.67,64 200,69.33 200,80 L0,80 L0,0 Z"/></svg>' );
	--bridge-corner-tab-tl: url( 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 80" preserveAspectRatio="none"><g transform="scale(-1,1) translate(-200,0)"><path fill="%23fff" d="M0,0 C10.67,0 16,5.33 16,16 L16,48 C16,64 30.85,64 32,64 L184,64 C194.67,64 200,69.33 200,80 L0,80 L0,0 Z"/></g></svg>' );
	/* BR mirrors the custom BL shape across the vertical axis (scale -1,1
	   then re-translate). Same evenodd outer-rect inversion so the white
	   fill marks the L-tab. */
	--bridge-corner-tab-br: url( 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 80" preserveAspectRatio="none"><g transform="scale(-1,1) translate(-200,0)"><path fill="%23fff" fill-rule="evenodd" d="M0,0 H200 V80 H0 Z M0,24 C0,34.67 5.33,40 16,40 C88,40 124,40 140,40 C149.32,40 156.26,42.94 160.83,48.83 C169.02,57.41 176.77,65.39 184.08,72.78 C188.51,77.59 193.81,80 200,80 L0,80 L0,24 Z"/></g></svg>' );
	/* BL uses its own custom path (not the base-L flipped). Source path
	   describes the *cut* region; we wrap it in an outer rect with
	   fill-rule="evenodd" so the mask paints the L-tab (= the complement
	   of the cut) in white. */
	--bridge-corner-tab-bl: url( 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 80" preserveAspectRatio="none"><path fill="%23fff" fill-rule="evenodd" d="M0,0 H200 V80 H0 Z M0,24 C0,34.67 5.33,40 16,40 C88,40 124,40 140,40 C149.32,40 156.26,42.94 160.83,48.83 C169.02,57.41 176.77,65.39 184.08,72.78 C188.51,77.59 193.81,80 200,80 L0,80 L0,24 Z"/></svg>' );

	/* Narrow-L masks for arrow variants: same end curves as the base L, but
	   the middle horizontal stretch is shorter, giving a total width of
	   110 instead of 200. The viewBox is set to 110×80 so it matches the
	   default --bridge-corner-arrow-width × --bridge-corner-height — that
	   way preserveAspectRatio="none" doesn't squish the 16px radius. */
	--bridge-corner-tab-arrow-tr: url( 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 110 80" preserveAspectRatio="none"><path fill="%23fff" d="M0,0 C10.67,0 16,5.33 16,16 L16,48 C16,64 30.85,64 32,64 L94,64 C104.67,64 110,69.33 110,80 L0,80 L0,0 Z"/></svg>' );
	--bridge-corner-tab-arrow-br: url( 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 110 80" preserveAspectRatio="none"><g transform="scale(1,-1) translate(0,-80)"><path fill="%23fff" d="M0,0 C10.67,0 16,5.33 16,16 L16,48 C16,64 30.85,64 32,64 L94,64 C104.67,64 110,69.33 110,80 L0,80 L0,0 Z"/></g></svg>' );
}
@media ( max-width: 991.98px ) {
	.bridge-corners-host {
		--bridge-corner-width:       120px;
		--bridge-corner-arrow-width: 60px;
		--bridge-corner-height:      48px;
		--bridge-corner-top-height:  39px;
	}
}

/* Let cards match the radius of the SVG corners */
/*
.card.bridge-corners-container {
	--bs-card-border-radius: var( --bs-border-radius-xl );
}
*/

/* -------------------------------------------------------------------------
 * L-tab elements
 *
 * One tab per active corner, painted in the container's background colour
 * (via a shared utility class passed in by each block template), masked to
 * the curved L-shape.
 * ------------------------------------------------------------------------- */

/*
 * A tab covers the full host (= same dimensions as the container), so when a
 * block paints its background-image on the tab (e.g. block_047, block_050),
 * the image is sized like the container's own background — not squashed into
 * a 200×80 box. The L-shape is revealed by `mask-size` × `mask-position`,
 * which only shows the L sitting in the corresponding corner of the tab.
 */
.bridge-corners-tab {
	position: absolute;
	inset: 0;
	-webkit-mask-size: var( --bridge-corner-width ) var( --bridge-corner-height );
	mask-size:         var( --bridge-corner-width ) var( --bridge-corner-height );
	-webkit-mask-repeat: no-repeat;
	mask-repeat:         no-repeat;
	pointer-events: none;
}

/*
 * Overlay variants — when the container pairs its background image with an
 * `.owcb-bg-image-overlay` layer, the same tint is painted on each tab via a
 * ::after. The tab's mask clips pseudo-elements too, so the tint only shows
 * inside the L and the tab pixels match the overlaid image behind them.
 * Colour mirrors `.owcb-bg-image-overlay.-dark` (saas-contentblocks--staxxo.css).
 */
.bridge-corners-tab--overlay-dark::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba( var( --dark-rgb ), 0.4 );
}

/* Plain top tabs (no link) use the shortened height so the cut sits 15px
   higher than the standard 80px. The 200×80 viewBox in the SVG gets
   stretched vertically into 200×65 — the radius compresses slightly
   (≈19% on the vertical axis) but the curve geometry stays clean. */
.bridge-corners-tab--top-right {
	-webkit-mask-image:    var( --bridge-corner-tab-tr );
	mask-image:            var( --bridge-corner-tab-tr );
	-webkit-mask-size:     var( --bridge-corner-width ) var( --bridge-corner-top-height );
	mask-size:             var( --bridge-corner-width ) var( --bridge-corner-top-height );
	-webkit-mask-position: top right;
	mask-position:         top right;
}

.bridge-corners-tab--top-left {
	-webkit-mask-image:    var( --bridge-corner-tab-tl );
	mask-image:            var( --bridge-corner-tab-tl );
	-webkit-mask-size:     var( --bridge-corner-width ) var( --bridge-corner-top-height );
	mask-size:             var( --bridge-corner-width ) var( --bridge-corner-top-height );
	-webkit-mask-position: top left;
	mask-position:         top left;
}

.bridge-corners-tab--bottom-right {
	-webkit-mask-image:    var( --bridge-corner-tab-br );
	mask-image:            var( --bridge-corner-tab-br );
	-webkit-mask-position: bottom right;
	mask-position:         bottom right;
}

.bridge-corners-tab--bottom-left {
	-webkit-mask-image:    var( --bridge-corner-tab-bl );
	mask-image:            var( --bridge-corner-tab-bl );
	-webkit-mask-position: bottom left;
	mask-position:         bottom left;
}

/* Arrow variants use the narrower L (110 wide by default) so the cut sits
   tightly around the centred arrow glyph. mask-size is overridden to the
   arrow width; the clip-path notch on the container is matched by PHP. */
.bridge-corners-tab--top-right-arrow {
	-webkit-mask-image:    var( --bridge-corner-tab-arrow-tr );
	mask-image:            var( --bridge-corner-tab-arrow-tr );
	-webkit-mask-size:     var( --bridge-corner-arrow-width ) var( --bridge-corner-height );
	mask-size:             var( --bridge-corner-arrow-width ) var( --bridge-corner-height );
	-webkit-mask-position: top right;
	mask-position:         top right;
}

.bridge-corners-tab--bottom-right-arrow {
	-webkit-mask-image:    var( --bridge-corner-tab-arrow-br );
	mask-image:            var( --bridge-corner-tab-arrow-br );
	-webkit-mask-size:     var( --bridge-corner-arrow-width ) var( --bridge-corner-height );
	mask-size:             var( --bridge-corner-arrow-width ) var( --bridge-corner-height );
	-webkit-mask-position: bottom right;
	mask-position:         bottom right;
}

/* -------------------------------------------------------------------------
 * Arrow link (variants with optional link)
 * ------------------------------------------------------------------------- */

.bridge-corners-host .bridge-corner {
	position: absolute;
	width:    var( --bridge-corner-width );
	height:   var( --bridge-corner-height );
	pointer-events: none;
}

/* Arrow corners share the narrow L's footprint, so the click box and the
   icon centring inside it match the cut exactly. */
.bridge-corner--top-right-arrow,
.bridge-corner--bottom-right-arrow {
	width: var( --bridge-corner-arrow-width );
}

.bridge-corners-host a.bridge-corner {
	pointer-events: auto;
	text-decoration: none;
	color: inherit;
}

.bridge-corner--top-left,
.bridge-corner--top-right,
.bridge-corner--top-right-arrow { top: 0; }

.bridge-corner--bottom-left,
.bridge-corner--bottom-right,
.bridge-corner--bottom-right-arrow { bottom: 0; }

.bridge-corner--top-left,
.bridge-corner--bottom-left { left: 0; }

.bridge-corner--top-right,
.bridge-corner--top-right-arrow,
.bridge-corner--bottom-right,
.bridge-corner--bottom-right-arrow { right: 0; }

/*
 * Arrow icon — naked arrow glyph (no circle), centred inside the corner box
 * and tinted with the corner's accent colour. Sized via `--bridge-corner-icon-size`
 * so the same variable still controls icon scale per breakpoint.
 */
.bridge-corner__icon {
	position: absolute;
	right: var( --bs-spacer-4 );
	transform: translate( -50%, -50% );
	color: var( --bridge-corner-icon-color );
	font-size:   1.25rem;
	line-height: 1;
}
.bridge-corner--top-right-arrow .bridge-corner__icon {
	top: 35%;
}
.bridge-corner--bottom-right-arrow .bridge-corner__icon {
	top: 65%;
}
@media ( max-width: 991.98px ) {
	.bridge-corner__icon {
		font-size: 1rem;
		right: var( --bs-spacer-1 );
	}
	.bridge-corner--top-right-arrow .bridge-corner__icon {
		top: 30%;
	}
	.bridge-corner--bottom-right-arrow .bridge-corner__icon {
		top: 70%;
	}
}