/**
 * Angled section dividers for Group and Cover blocks.
 *
 * Applied via block style variations (see functions.php). The top edge is cut
 * at an angle with clip-path; the removed corner becomes transparent so the
 * fixed background image / previous section shows through.
 *
 * Adjust the slope per block in the editor with the "Angle height" custom
 * property, or override --pd-angle-h here. Larger = steeper slope.
 */

:where(.is-style-angle-top-right),
:where(.is-style-angle-top-left),
:where(.is-style-angle-top-both) {
	/* Vertical drop of the slope. Fluid so it scales with viewport width. */
	--pd-angle-h: clamp(2rem, 5vw, 5rem);

	/* Push content down so the slope never clips the heading/first line. */
	padding-top: calc(var(--pd-angle-h) + var(--wp--preset--spacing--40, 1.5rem));

	/* Pull the section up so the cut corner overlaps what's above it,
	   revealing the previous section / fixed background through the angle. */
	margin-top: calc(-1 * var(--pd-angle-h));
	position: relative;
}

/**
 * Steepness presets. Add one of these classes alongside the angle style via
 * Advanced → Additional CSS class(es) to make the slope shallower or steeper.
 * They simply override --pd-angle-h (the vertical drop of the slope).
 *
 * For an exact custom slope, skip these and set the variable directly on the
 * block in the Code Editor view, e.g.  style="--pd-angle-h:140px"
 */
.pd-angle--sm { --pd-angle-h: clamp(1rem, 2.5vw, 2rem); }   /* subtle  */
.pd-angle--md { --pd-angle-h: clamp(2rem, 5vw, 5rem); }     /* default */
.pd-angle--lg { --pd-angle-h: clamp(3rem, 8vw, 8rem); }     /* bold    */
.pd-angle--xl { --pd-angle-h: clamp(4rem, 12vw, 12rem); }   /* dramatic */

/* Top-left HIGH, top-right LOW — slope runs down to the right (pacdrill look). */
:where(.is-style-angle-top-right) {
	clip-path: polygon(0 0, 100% var(--pd-angle-h), 100% 100%, 0 100%);
}

/* Top-right HIGH, top-left LOW — slope runs down to the left. */
:where(.is-style-angle-top-left) {
	clip-path: polygon(0 var(--pd-angle-h), 100% 0, 100% 100%, 0 100%);
}

/* Both corners HIGH, peak in the middle — chevron / tent top. */
:where(.is-style-angle-top-both) {
	clip-path: polygon(0 var(--pd-angle-h), 50% 0, 100% var(--pd-angle-h), 100% 100%, 0 100%);
}

/* The first section on a page has nothing above it to reveal, so don't pull it
   up off the top of the viewport. Add this class alongside the angle style.
   Also use it when the angled panel lives INSIDE a Cover (it already sits over
   the background, so it shouldn't yank up over the content above it). */
:where(.is-style-angle-top-right.pd-angle--no-overlap),
:where(.is-style-angle-top-left.pd-angle--no-overlap),
:where(.is-style-angle-top-both.pd-angle--no-overlap) {
	margin-top: 0;
}

/**
 * Full-bleed helper.
 *
 * Forces a block to span the full viewport width, escaping any constrained or
 * padded parent — e.g. a Group sitting inside a Cover's inner container, where
 * "Full width" alone still leaves the Cover's background peeking out the sides.
 */
.pd-full-bleed {
	/* !important defeats the block-layout max-width that otherwise caps this to
	   the parent Cover's constrained content size, leaving the background image
	   visible on the sides. calc(50% - 50vw) then centres the 100vw box. */
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
}