/*
 * Elementor Cover widget, provided by the Genotyp Elementor plugin.
 *
 * The widget owns only its media layering and outer minimum height. Its one
 * nested Elementor container owns content width, padding, alignment and the
 * rest of the Flexbox layout.
 */

.sggw-elementor-cover-widget {
	--sggw-cover-min-height: 430px;
	--sggw-cover-overlay-opacity: 70%;
	--sggw-cover-image-filter: none;

	align-items: stretch;
	background-color: var(--sggw-surface-current);
	box-sizing: border-box;
	display: grid;
	inline-size: 100%;
	isolation: isolate;
	min-block-size: var(--sggw-cover-min-height);
	overflow: hidden;
	position: relative;
}

.sggw-elementor-cover-widget__media,
.sggw-elementor-cover-widget__overlay {
	block-size: 100%;
	inset: 0;
	inline-size: 100%;
	pointer-events: none;
	position: absolute;
}

.sggw-elementor-cover-widget__media {
	z-index: 0;
}

.elementor .sggw-elementor-cover-widget__image {
	block-size: 100%;
	display: block;
	filter: var(--sggw-cover-image-filter);
	height: 100%;
	inline-size: 100%;
	max-inline-size: none;
	max-width: none;
	object-fit: cover;
}

.sggw-cover-image-filter-calm .sggw-elementor-cover-widget {
	--sggw-cover-image-filter: var(
		--wp--custom--component--cover--image-filter--calm,
		saturate(.8) contrast(.85)
	);
}

.sggw-cover-image-filter-muted .sggw-elementor-cover-widget {
	--sggw-cover-image-filter: var(
		--wp--custom--component--cover--image-filter--muted,
		saturate(.6) contrast(.72) brightness(.95)
	);
}

.sggw-elementor-cover-widget__overlay {
	background-color: var(--sggw-surface-current);
	opacity: var(--sggw-cover-overlay-opacity);
	z-index: 1;
}

.sggw-elementor-cover-widget__content {
	box-sizing: border-box;
	color: var(--sggw-text);
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	inline-size: 100%;
	position: relative;
	z-index: 2;
}

/* Preserve a readable default while allowing Elementor's element-specific
 * generated styles to override the inherited color. */
.sggw-elementor-cover-widget__content
	:where(.elementor-heading-title, .elementor-widget-text-editor) {
	color: inherit;
}

@media (forced-colors: active) {
	.sggw-elementor-cover-widget__media {
		display: none;
	}

	.sggw-elementor-cover-widget__overlay {
		background: Canvas;
		opacity: 1;
	}
}