/* group-bg-layer.css — Kahua
 * Shared by editor and front-end. Enqueued separately so the DOM
 * transform in /js/editor/group-bg-layer.js renders identically on
 * both sides. Selectors target the .has-bg-layer class (not a specific
 * block) so core/group, kahua/hero, and kahua/hero-big all share one
 * pipeline. Fold into site.main.scss whenever convenient.
 */

.has-bg-layer {
	position: relative;
	isolation: isolate;
	/* The editor leaves Gutenberg's inline background-image on the parent
	 * untouched (so the block isn't fighting Gutenberg's re-renders). Hide
	 * it here so the only visible image is the overlay div. On the
	 * front-end the PHP render_block filter already strips the inline
	 * background-* declarations, so this rule is a harmless no-op there.
	 */
	background-image: none !important;
}

.has-bg-layer > .group-bg-layer {
	position: absolute;
	inset: 0;
	z-index: 0;
	max-width: none;
	margin: 0;
	pointer-events: none;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	/* Clip the image to the group's rounded corners. The layer fills the
	 * parent (inset:0), so inheriting its radius rounds the image to match;
	 * harmless no-op (0) when the group has no border-radius. */
	border-radius: inherit;
}

.has-bg-layer > *:not(.group-bg-layer):not(.bg-video-layer) {
	position: relative;
	z-index: 1;
}

/* Contain blur bleed so it doesn't leak past the section edge. */
.has-bg-layer:has(> .group-bg-layer.has-filter-blur),
.has-bg-layer:has(> .bg-video-layer.has-filter-blur) {
	overflow: hidden;
}

/* Editor-only: the `background` InspectorControls slot is rendered inside
 * a ToolsPanel CSS grid (two columns). Force our PanelBody (and any
 * slot-fill wrappers around it) to span both columns so it doesn't get
 * squashed to 50% width.
 */
.components-panel__body.kahua-bg-layer-panel,
.kahua-bg-layer-panel {
	grid-column: 1 / -1 !important;
	width: 100% !important;
	max-width: 100% !important;
}

/* Filter presets — applied to either layer type. */
.group-bg-layer.has-filter-grayscale,
.bg-video-layer.has-filter-grayscale        { filter: grayscale(100%); }
.group-bg-layer.has-filter-sepia,
.bg-video-layer.has-filter-sepia            { filter: sepia(100%); }
.group-bg-layer.has-filter-blur,
.bg-video-layer.has-filter-blur             { filter: blur(8px); }
.group-bg-layer.has-filter-invert,
.bg-video-layer.has-filter-invert           { filter: invert(100%); }
.group-bg-layer.has-filter-brightness-low,
.bg-video-layer.has-filter-brightness-low   { filter: brightness(0.5); }
.group-bg-layer.has-filter-brightness-high,
.bg-video-layer.has-filter-brightness-high  { filter: brightness(1.5); }
.group-bg-layer.has-filter-contrast-high,
.bg-video-layer.has-filter-contrast-high    { filter: contrast(1.5); }