/**
 * Native Gutenberg separators.
 *
 * The ROARR paint-brush style composes the existing up/down hero brush masks
 * into one narrow brand-green stroke. It remains a core/separator block, so
 * Marketing can move or remove it without handling decorative HTML.
 */

:where(.roarr-site-main, .editor-styles-wrapper)
	.wp-block-separator.is-style-roarr-brush-divider {
	position: relative;
	z-index: 2;
	isolation: isolate;
	display: block;
	/* WordPress core gives non-wide separators a 100px width at higher
	 * specificity. This style is explicitly a full section divider. */
	width: 100% !important;
	max-width: none !important;
	height: clamp(var(--space-32), 5vw, var(--space-56));
	margin: 0;
	overflow: visible;
	border: 0;
	background: none;
	opacity: 1;
}

:where(.roarr-site-main, .editor-styles-wrapper)
	.wp-block-separator.is-style-roarr-brush-divider::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--primary-dark);
	-webkit-mask-image:
		url("assets/decor/hero-brush-edge-tile-down.webp"),
		url("assets/decor/hero-brush-edge-tile.webp");
	mask-image:
		url("assets/decor/hero-brush-edge-tile-down.webp"),
		url("assets/decor/hero-brush-edge-tile.webp");
	-webkit-mask-position: center, center;
	mask-position: center, center;
	-webkit-mask-repeat: repeat-x, repeat-x;
	mask-repeat: repeat-x, repeat-x;
	-webkit-mask-size: auto 100%, auto 100%;
	mask-size: auto 100%, auto 100%;
	-webkit-mask-composite: source-in;
	mask-composite: intersect;
	pointer-events: none;
}

/* The shared final CTA normally overlaps the preceding section by 64px. When
 * a brush divider is placed immediately before it, align that overlap to the
 * divider's responsive height and keep the stroke above the CTA artwork. */
:where(.roarr-site-main, .editor-styles-wrapper)
	.wp-block-separator.is-style-roarr-brush-divider
	+ .roarr-cta-band {
	margin-top: calc(-1 * clamp(var(--space-32), 5vw, var(--space-56)));
}

/*
 * Selective Featured News desktop sizing bridge.
 *
 * This release stylesheet loads after news-featured-card-release.css on both
 * public and editor surfaces. Keeping the final desktop override here lets the
 * approved sizing fix reach main without importing unrelated staging bundles.
 */
@media (min-width: 1024px) {
	:where(.roarr-site-main, .editor-styles-wrapper)
		.roarr-feature-card--story
		.roarr-feature-card__media {
		aspect-ratio: var(--image-ratio-artwork);
	}
}