/* Owner-approved Hero only. Saved blocks, photographs and focal points remain
 * authoritative. Neither panel/content geometry nor the bottom cut is changed.
 * Shared stacking lets the two native Image blocks overlap without duplicates.
 */
body.home .breganja-home > .home-hero {
	isolation: isolate;
	--breganja-hero-curve-depth: 14px;
}

body.home .breganja-home > .home-hero::before {
	background: var(--wp--preset--color--off-white);
	content: "";
	height: var(--breganja-hero-curve-depth);
	left: 0;
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath fill='white' d='M0 0H1440V12C1020 12 925 16 720 40C470 72 315 100 170 90C90 83 40 64 0 52Z'/%3E%3C/svg%3E");
	mask-repeat: no-repeat;
	mask-size: 100% 100%;
	pointer-events: none;
	position: absolute;
	top: -1px;
	width: 100%;
	z-index: 4;
}

body.home .breganja-home .home-hero__panel {
	isolation: auto;
	overflow: visible;
}

body.home .breganja-home .home-hero__panel--speleo .home-hero__media {
	width: 116%;
}

body.home .breganja-home .home-hero__panel--spk .home-hero__media {
	left: -8%;
	mask-image: linear-gradient(to right, transparent, #000 20%);
	width: 108%;
}

/* The legacy SPK readability halo must fade too, not reintroduce a hard seam
 * over the two photographs. Its existing colors/extent otherwise remain.
 */
body.home .breganja-home .home-hero__panel--spk::after {
	mask-image: linear-gradient(to right, transparent, #000 20%);
}

/* Keep the brand's original flex slot and native navigation layout. Its actual
 * visible foot is positioned by the small front-page-only alignment script.
 * Compact/sticky and open mobile navigation retain their original brand.
 */
html:not(.has-modal-open) body.home:not(.breganja-header-compact) .wp-site-blocks .site-header__brand {
	transform: translate(var(--breganja-hero-logo-x, 0px), var(--breganja-hero-logo-y, 0px)) scale(var(--breganja-hero-logo-fit, 1));
	transform-origin: top left;
	transition: none;
}

@media (max-width: 781px) {
	/* Keep the same transform property through the compact-header threshold.
	 * Its target becomes identity, instead of abruptly switching to "none".
	 * No animation on first placement or while native navigation is open.
	 */
	html:not(.has-modal-open) body.home.breganja-hero-logo-ready .wp-site-blocks .site-header__brand {
		transform: translate(var(--breganja-hero-logo-x, 0px), var(--breganja-hero-logo-y, 0px)) scale(var(--breganja-hero-logo-fit, 1));
		transform-origin: top left;
		transition: transform var(--breganja-motion-fast, 180ms) ease;
	}

	body.home .breganja-home > .home-hero {
		--breganja-hero-curve-depth: 8.12px;
		/* Let the original statement bridge the bottom cut without clipping it. */
		overflow: visible;
		/* Keep its overhang above the following section's opaque background. */
		z-index: 1;
	}

	body.home .breganja-home .home-hero__media {
		overflow: hidden;
	}

	body.home .breganja-home .home-hero__panel--speleo .home-hero__media {
		height: 116%;
		width: 100%;
	}

	body.home .breganja-home .home-hero__panel--spk .home-hero__media {
		height: 108%;
		left: 0;
		mask-image: linear-gradient(to bottom, transparent, #000 20%);
		top: -8%;
		width: 100%;
	}

	body.home .breganja-home .home-hero__panel--spk::after {
		height: 108%;
		top: -8%;
		mask-image: linear-gradient(to bottom, transparent, #000 20%);
	}

	/* Fade the upper shading too; its former panel edge cut through the blend. */
	body.home .breganja-home .home-hero__panel--speleo::before,
	body.home .breganja-home .home-hero__panel--speleo::after {
		height: 116%;
		mask-image: linear-gradient(to bottom, #000 72%, transparent 96%);
	}
}

@media (max-width: 781px) and (prefers-reduced-motion: reduce) {
	html:not(.has-modal-open) body.home.breganja-hero-logo-ready .wp-site-blocks .site-header__brand {
		transition: none;
	}
}