/* Cover styles extracted from components.css. */

.is-style-sw-card-cover {
	min-height: 150px;
	overflow: hidden;
	align-content: start;
}

.wp-block-cover.is-style-sw-card-cover > .wp-block-cover__inner-container {
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	min-height: 150px;
	/* Core Cover blocks can inject inline spacing styles, so this padding must win. */
	padding: var(--wp--preset--spacing--2xs) !important;
}

.wp-block-cover.is-style-sw-media-panel,
.is-style-sw-media-panel {
	height: 100%;
	min-height: clamp(22rem, 38vw, 34rem);
	overflow: hidden;
	/* The media panel has to override block-level radius styles on several nested cover elements. */
	border-radius: var(--spielwelt-radius-lg) !important;
	clip-path: inset(0 round var(--spielwelt-radius-lg));
}

.wp-block-cover.is-style-sw-media-panel::before,
.wp-block-cover.is-style-sw-media-panel .wp-block-cover__background,
.wp-block-cover.is-style-sw-media-panel .wp-block-cover__gradient-background,
.wp-block-cover.is-style-sw-media-panel .wp-block-cover__image-background,
.wp-block-cover.is-style-sw-media-panel > img,
.wp-block-cover.is-style-sw-media-panel > span,
.wp-block-cover.is-style-sw-media-panel .wp-block-cover__image-background,
.wp-block-cover.is-style-sw-media-panel .wp-block-cover__background,
.wp-block-cover.is-style-sw-media-panel > .wp-block-cover__inner-container {
	border-radius: var(--spielwelt-radius-lg) !important;
}

.wp-block-cover.is-style-sw-media-panel .wp-block-cover__image-background {
	clip-path: inset(0 round var(--spielwelt-radius-lg));
}

.wp-block-cover.is-style-sw-media-panel > .wp-block-cover__inner-container {
	display: flex;
	align-items: flex-end;
	justify-content: flex-start;
	width: 100%;
	min-height: 100%;
	max-width: none !important;
	margin: 0 !important;
	padding: clamp(1rem, 2vw, 1.5rem) !important;
}

.wp-block-cover.is-style-sw-media-panel > .wp-block-cover__inner-container > * {
	align-self: flex-end;
	margin: 0 !important;
}

.sw-hero-cover,
.sw-hero-cover-border-playgroup,
.sw-hero-cover-border-playschool,
.sw-hero-cover-border-pfadfinder,
.sw-hero-cover-border-events {
	position: relative;
	overflow: hidden;
}

.sw-hero-cover-border-playgroup,
.sw-hero-cover-border-playschool,
.sw-hero-cover-border-pfadfinder,
.sw-hero-cover-border-events {
	box-sizing: border-box;
	border-bottom: 0 !important;
	box-shadow: none !important;
}

.sw-hero-cover-border-playgroup > .wp-block-group__inner-container,
.sw-hero-cover-border-playschool > .wp-block-group__inner-container,
.sw-hero-cover-border-pfadfinder > .wp-block-group__inner-container,
.sw-hero-cover-border-events > .wp-block-group__inner-container,
.sw-hero-cover-border-playgroup > .wp-block-cover__inner-container,
.sw-hero-cover-border-playschool > .wp-block-cover__inner-container,
.sw-hero-cover-border-pfadfinder > .wp-block-cover__inner-container,
.sw-hero-cover-border-events > .wp-block-cover__inner-container {
	border-radius: inherit;
}

.sw-hero-cover-border-playgroup::after,
.sw-hero-cover-border-playschool::after,
.sw-hero-cover-border-pfadfinder::after,
.sw-hero-cover-border-events::after,
.sw-hero-cover-border-playgroup > .wp-block-group__inner-container::after,
.sw-hero-cover-border-playschool > .wp-block-group__inner-container::after,
.sw-hero-cover-border-pfadfinder > .wp-block-group__inner-container::after,
.sw-hero-cover-border-events > .wp-block-group__inner-container::after,
.sw-hero-cover-border-playgroup > .wp-block-cover__inner-container::after,
.sw-hero-cover-border-playschool > .wp-block-cover__inner-container::after,
.sw-hero-cover-border-pfadfinder > .wp-block-cover__inner-container::after,
.sw-hero-cover-border-events > .wp-block-cover__inner-container::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 8px;
	background: var(--sw-hero-cover-accent);
	pointer-events: none;
	z-index: 3;
}

.sw-hero-cover-border-playgroup {
	--sw-hero-cover-accent: var(--wp--custom--hero-cover-accent--playgroup);
}

.sw-hero-cover-border-playschool {
	--sw-hero-cover-accent: var(--wp--custom--hero-cover-accent--playschool);
}

.sw-hero-cover-border-pfadfinder {
	--sw-hero-cover-accent: var(--wp--custom--hero-cover-accent--pfadfinder);
}

.sw-hero-cover-border-events {
	--sw-hero-cover-accent: var(--wp--custom--hero-cover-accent--events);
}

.wp-block-cover.is-style-sw-panorama-band {
	--sw-panorama-bleed: clamp(2rem, 5vw, 4rem);
	--sw-panorama-shift: 0px;
	--sw-panorama-focus-y: 50%;
	--sw-panorama-tint-color: rgba(231, 187, 145, 1);
	--sw-panorama-tint-opacity: 0.14;
	margin-top: 0;
	margin-bottom: 0;
	min-height: 500px;
	overflow: hidden;
	align-content: center;
}

.wp-block-cover.is-style-sw-panorama-band,
.wp-block-cover.is-style-sw-panorama-band::before,
.wp-block-cover.is-style-sw-panorama-band::after,
.wp-block-cover.is-style-sw-panorama-band .wp-block-cover__background,
.wp-block-cover.is-style-sw-panorama-band .wp-block-cover__gradient-background,
.wp-block-cover.is-style-sw-panorama-band .wp-block-cover__image-background,
.wp-block-cover.is-style-sw-panorama-band > img,
.wp-block-cover.is-style-sw-panorama-band > span,
.wp-block-cover.is-style-sw-panorama-band > .wp-block-cover__inner-container {
	border-radius: 0 !important;
}

.wp-block-cover.is-style-sw-panorama-band .wp-block-cover__image-background,
.wp-block-cover.is-style-sw-panorama-band > img {
	top: calc(var(--sw-panorama-bleed) * -1);
	bottom: auto;
	height: calc(100% + (var(--sw-panorama-bleed) * 2));
	object-position: 50% var(--sw-panorama-focus-y);
	transform: translate3d(0, var(--sw-panorama-shift), 0);
	will-change: transform;
}

.wp-block-cover.is-style-sw-panorama-band::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--sw-panorama-tint-color);
	opacity: var(--sw-panorama-tint-opacity);
	pointer-events: none;
	z-index: 1;
}

.wp-block-cover.is-style-sw-panorama-band > .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: flex-end;
	justify-content: flex-start;
	width: 100%;
	min-height: 100%;
	max-width: none !important;
	margin: 0 !important;
	padding: clamp(1rem, 2vw, 1.5rem) !important;
}

.wp-block-cover.is-style-sw-panorama-band > .wp-block-cover__inner-container > * {
	align-self: flex-end;
	margin: 0 !important;
}

.wp-block-cover.is-style-sw-panorama-band.sw-panorama-tint-warm {
	--sw-panorama-tint-color: rgba(231, 187, 145, 1);
	--sw-panorama-tint-opacity: 0.14;
}

.wp-block-cover.is-style-sw-panorama-band.sw-panorama-tint-eucalyptus {
	--sw-panorama-tint-color: rgba(111, 142, 115, 1);
	--sw-panorama-tint-opacity: 0.16;
}

.wp-block-cover.is-style-sw-panorama-band.sw-panorama-tint-ink {
	--sw-panorama-tint-color: rgba(31, 36, 31, 1);
	--sw-panorama-tint-opacity: 0.18;
}

@media (min-width: 782px) {
	.wp-block-cover.spielwelt-pan-x .wp-block-cover__image-background,
	.wp-block-cover.is-style-sw-media-panel.spielwelt-pan-x .wp-block-cover__image-background {
		width: 112%;
		max-width: none;
		left: -6%;
		transform: translateX(0);
		animation: spielwelt-pan-x 18s ease-in-out infinite alternate;
		will-change: transform;
	}
}

@media (max-width: 781px) {
	.wp-block-cover.is-style-sw-panorama-band {
		min-height: clamp(20rem, 82vw, 30rem);
	}

	.wp-block-cover.is-style-sw-panorama-band .wp-block-cover__image-background,
	.wp-block-cover.is-style-sw-panorama-band > img {
		top: 0;
		bottom: auto;
		height: 100%;
		transform: none;
		will-change: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-cover.spielwelt-pan-x .wp-block-cover__image-background,
	.wp-block-cover.is-style-sw-media-panel.spielwelt-pan-x .wp-block-cover__image-background {
		animation: none !important;
		transform: none !important;
	}

	.wp-block-cover.is-style-sw-panorama-band .wp-block-cover__image-background,
	.wp-block-cover.is-style-sw-panorama-band > img {
		transform: none !important;
		will-change: auto;
	}
}

@keyframes spielwelt-pan-x {
	from {
		transform: translateX(-2%);
	}

	to {
		transform: translateX(2%);
	}
}