/* ------------------------------ */
/*
/*      Corner Clip
/*
/* ------------------------------ */

/* One size drives every cut and the bleed overlap so they can't drift apart */
:root {
	--devon-corner-clip-size: 50px;
}

@media (width < 600px) {
	:root {
		--devon-corner-clip-size: 25px;
	}
}

/* One polygon serves every variant; corners a class doesn't cut are zeroed here so a clipped ancestor's corners never inherit in. Stored as a property so each block type can apply it to whichever element should be cut */
[class*="devon--corner-clip-"] {
	--devon-corner-clip-tl: 0px;
	--devon-corner-clip-tr: 0px;
	--devon-corner-clip-bl: 0px;
	--devon-corner-clip-path: polygon(
		var(--devon-corner-clip-tl) 0,
		calc(100% - var(--devon-corner-clip-tr)) 0,
		100% var(--devon-corner-clip-tr),
		100% 100%,
		var(--devon-corner-clip-bl) 100%,
		0 calc(100% - var(--devon-corner-clip-bl)),
		0 var(--devon-corner-clip-tl)
	);
}

.devon--corner-clip-tl,
.devon--corner-clip-tl-bl {
	--devon-corner-clip-tl: var(--devon-corner-clip-size);
}

.devon--corner-clip-tr,
.devon--corner-clip-tr-bl {
	--devon-corner-clip-tr: var(--devon-corner-clip-size);
}

.devon--corner-clip-tl-bl,
.devon--corner-clip-tr-bl,
.devon--corner-clip-bl {
	--devon-corner-clip-bl: var(--devon-corner-clip-size);
}

/* Image cuts the photo, not the figure, so a caption stays whole; carousel cuts its viewport, not its root, so an externally-positioned nav (translateX in carousel/style.scss) stays outside the clip and hittable */
[class*="devon--corner-clip-"]:not(.wp-block-image):not(.devon__carousel),
.wp-block-image[class*="devon--corner-clip-"] img,
.devon__carousel[class*="devon--corner-clip-"] .devon__carousel__viewport {
	clip-path: var(--devon-corner-clip-path);
}

/* ------------------------------ */
/* Bleed
/* ------------------------------ */

/* Landing rows paint their background on an inner group with no sibling, so between adjacent rows the bleed pairs their inner groups; mixed row/non-row neighbours aren't supported */

/* A transparent border shows the element's own background, extending it under the cut without knowing its padding */
:has(+ .devon--corner-bleed),
.devon__landing-row:has(+ .devon__landing-row > .devon--corner-bleed) > .wp-block-group {
	border-bottom: var(--devon-corner-clip-size) solid transparent;
}

/* Requires a previous sibling so a first block never tucks under the page header; lifted over the strip so the section above shows through the cut only */
* + .devon--corner-bleed,
.devon__landing-row + .devon__landing-row > .devon--corner-bleed {
	position: relative;
	z-index: 1;
}

/* A landing row is pulled up on the row itself so its block gap margin is replaced rather than collapsed with the inner group's */
:is(* + .devon--corner-bleed, .devon__landing-row + .devon__landing-row:has(> .devon--corner-bleed)) {
	/* Tripled &: outspecifies the gapless-page and WP layout rules that would otherwise zero this margin */
	&&& {
		margin-top: calc(var(--devon-corner-clip-size) * -1);
	}
}