/**
 * Red Oak Fabrication - inner-page hero: the plain (colour-only) slanted right-hand panel
 * runs to the right edge of the screen when the page is wider than the 1376px content box
 * (about 1440px+). Only for heroes whose panel has no video or image (Alex, 2026-10-05).
 *
 * Use: Hero section (the top container) -> Advanced -> CSS Classes -> ro-hero-bleed.
 * The panel must be the section's LAST child. At 1440px and below the gutter is 0 and
 * nothing changes.
 *
 * How: the Hero section is a size container, so 100cqw is its content width, without
 * the scrollbar (100vw would overflow by the scrollbar width). The panel is widened by the
 * gutter and pulled out by the same amount with a negative right margin, so the text
 * column does not move.
 *
 * The plain panels' slant is a fixed 1rem, so its angle doesn't change when widened.
 */

/* Registered so it resolves as a length on the panel, against the Hero container. */
@property --ro-hero-gutter {
	syntax: '<length>';
	inherits: true;
	initial-value: 0px;
}

.ro-hero-bleed {
	container-type: inline-size;
}

.ro-hero-bleed > .e-con-inner > .e-con:last-child {
	--ro-hero-gutter: max(0px, calc((100cqw - 1376px) / 2));
	width: calc(var(--width) + var(--ro-hero-gutter));
	max-width: none;
	margin-right: calc(var(--ro-hero-gutter) * -1);
}