/* Reusable "Diagonal Accent" style for core/cover: two branded diagonal wedge shapes,
   overlaid on any cover block's background image. Baked in via ::before/::after so they can
   never be selected, moved, or deleted by a content editor — only changeable here in code.

   Both shapes' boxes span the full container width, left-anchored, with a clip-path polygon
   cutting the visible wedge — the diagonal cut's position (not the box itself) is what
   "anchors" the shape, so this holds correctly at any width with zero media queries.

   The angle: Figma's original diagonal (node 49:348) has an identical 328.549px horizontal
   run for both shapes over the frame's 800px height — confirmed by measuring actual pixel
   edges on a native-resolution Figma export, not just trusting the exported SVGs' path data
   (top edges land at x=559/1191, bottom edge of the white shape lands at x=230 — all exact).
   That run is 41.07% of the 800px height, so the half-spread is 20.53% of height.

   This can't be pure CSS: the block's height must stay genuinely dynamic (no fixed value we
   can build a % or cqh unit against — container-type:size needs a definite height, and
   resolves to a spread of 0 without one, producing a dead-vertical line instead of a diagonal).
   --wv-diagonal-spread is instead computed and kept in sync at runtime by
   initDiagonalAccentShapes() in resources/scripts/core.js, which measures each block's real
   getBoundingClientRect().height via ResizeObserver. The static value below is only a
   pre-JS/no-JS fallback (tuned for an 800px-tall block, this hero's actual height).

   Overflow past the block's own edges when a point's coordinate falls outside 0%-100% is
   expected and fine. Target midpoints (white 28%, blue 72% of container width) are per-shape
   design intent, not derived from Figma, which only gives us the one reference breakpoint. */
.wp-block-cover.is-style-diagonal-accent {
	--wv-diagonal-spread: 164px;
}

.wp-block-cover.is-style-diagonal-accent .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
}

.wp-block-cover.is-style-diagonal-accent::before,
.wp-block-cover.is-style-diagonal-accent::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 1;
}

.wp-block-cover.is-style-diagonal-accent::before {
	background-color: rgba(23, 77, 120, 0.25);
	mix-blend-mode: multiply;
	clip-path: polygon(
		0 0,
		calc(72% + var(--wv-diagonal-spread)) 0,
		calc(72% - var(--wv-diagonal-spread)) 100%,
		0 100%
	);
}

.wp-block-cover.is-style-diagonal-accent::after {
	background-color: rgba(255, 255, 255, 0.3);
	clip-path: polygon(
		0 0,
		calc(28% + var(--wv-diagonal-spread)) 0,
		calc(28% - var(--wv-diagonal-spread)) 100%,
		0 100%
	);
}